АРМАДА
Мой опыт веб-дизайнера: несколько полезных фишек
Новая тема Написать ответ

sasha_design +
Свой
Зарегистрирован: 17.05.2014
Сообщений: 7
Обратиться по нику
# Добавлено:Вс Май 18, 2014 1:49 amДобавить в избранноеОтветить с цитатой
Всем привет! Вот уже пять лет как я занимаюсь веб-программированием. Сначала, как дитя малое, я играл с CSS и HTML, но затем меня потянуло в сторону php и mysql. Но я понял, что без jQuery хороший сайт не написать - и изучил эту библиотеку (как разработчик скажу что она великолепна Smile. Но имея диплом художника, меня не переставало тянуть в сторону чего-то визуального (наверное по этому я ненавижу консоль Windows). И шаг за шагом, все больше внимания я начал уделять дизайну своих проектов, выработав некоторые концепции для себя. И сейчас я их покажу на примере devBattles.com - моего текущего проекта.

Используем CSS3 для создания креативного дизайна

Все дизайнеры любят замудренно что-либо сказать, а когда их просишь конкретики - они скажут "Как вы смеете! Это искусство! Вам никогда не понять таких высоких материй!".

Но в отличии от высоких метров, сейчас я перечислю те CSS3 функции, с помощью которых можно легко добавить креативности в любой дизайн:

linear-gradient и radial-gradient - градиенты очень легко использовать. Но их плюс в том, что можно делать background полупрозрачным без использования opacity - а значит, контент такого элемента будет видимым по прежнему на 1.0. Также, градиенты можно создавать под углом и направлением, например - создать флаг России без картинки или же паралелограмм. Но не забывайте о префиксах, чтобы код был кроссбраузеным Smile



position:absolute в сочетании с отрицательными margin

Очень простой пример - вам нужно создать кнопку закрытия модального окна в правом верхнем углу блока, но чтобы она отступала от краев на n-пикселей.



transform : rotate

transform сам по себе волшебный CSS3 объект, но transform:rotate позволяет наклонить блок на n-градусов. Если использовать transform вместе с overflow:hidden - заметите как просто создать кнопку в виде треугольника в правом верхнем углу диалового окна. Для этого достаточно родительскому блоку прописать overflow:hidden, а внутри него div повернуть на 45% и с помощью position:absolute выровнять в правом верхнем углу.



Все элементы должны выравниваться относительно один одного и родительского блока.Такое простое правило спасло не один проект. Визуально дизайн гораздо проще воспринимать, когда есть хоть какой-то порядок.

Отступы между блоками разных уровней должны быть разными, но главное не переборщить - слишком большие или малые отступы создадут вид "обвалившегося" дизайна - нужно найти золотую середину. Порой 1px играет важную роль в виде надписи кнопки.



Инверсия цвета. Чуть бессмыслица, но я заметил, что если вместе с #f60(оранжевый) использовать инверсию #06f(синий) - получается довольно не плохо. В реальной жизни эту концепцию например активно использует Gillete и Aqua Fresh.

Bootstrap экономит время разработчика. Ведь в нашем распоряжении более чем сотня разных объектов не говоря уже о выравнивании по сетке и адаптированном дизайне.

jQuery годится для манипуляций дизайна который сверстан в CSS, а не для создания дизайна. Даже jQuery плагины используют свои CSS файлы для работы над дизайном.
the DevBattles guy

John Doe
V.I.P.
Зарегистрирован: 25.06.2010
Сообщений: 4332
Обратиться по нику
# Добавлено:Вс Май 18, 2014 12:57 pmОтветить с цитатой
sasha_design, спасибо за интересную статью! Добавлю несколько инструментов по работе по работе с цветом

Color Schemer Gallery
COLOURlovers
Kuler
Pictalulous
CSS Color Names
Новая тема Написать ответ    ГЛАВНАЯ ~ ПОЛЕЗНЫЕ СТАТЬИ

Перейти:  





Генеральный спонсор



Партнеры