Основные правила при создании web дизайна основанные на собственном опыте.

Первое и, пожалуй, самое главное — использование модульной сетки (обычной или bootstrap в зависимости от цели). Ширина контента может быть разной, но есть размеры, которые используются чаще всего при создании сайта, на пример модульная сетка на 960 px, 1000 px, 1100 px, 1200 px, 1280 px. Если сайт адаптивный, то размер контента можно делать на своё усмотрение, главное сохранять все отступы внутри блока четко по сетке.

Screenshot_1

 

Следующий этап — создание прототипа сайта. Это очень важно, особенно если вы в дизайне недавно. Опытные дизайнеры часто обходятся без прототипирования, так как у них в голове уже своя определенная схема: где, как и что должно располагаться.

Screenshot_2

И, тем не менее, нельзя забывать о том, что не все клиенты до конца знают чего они хотят, или понимают как это устроено, соответственно при помощи прототипа вы можете наглядно объяснить что к чему и как это будет выглядеть. К тому же прототип экономит время, ведь его переделывать намного проще, чем каждый раз перекраивать уже созданный дизайн. Прототип – это основа будущего сайта!

После того, как прототип согласован с заказчиком и решены технические задачи, можно приступать к самому дизайну. Здесь важно учитывать такие факторы:

  1. Основная цель сайта (реклама, продажа, информационный портал, личный сайт-блог, предоставление услуг… и так далее)
  2. На какую аудиторию расчет (по возрасту, специальности или интересам)
  3. Ассоциации (к примеру, если человек продает дорогую технику или мебель, то стиль и цвета должны быть соответствующими. Скорее всего это должен быть минимализм с простыми и легкими для восприятия цветами. Если же это детский магазин игрушек, то тут вполне уместно использование большого количество ярких цветов. Если это сайт связанный с едой или выпечкой, то следует использовать теплые оттенки оранжевого, бежевого, коричневого, красного…)

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

Screenshot_3

Screenshot_4

Но это не значит, что всё нужно делать только в таком стиле. Можно спокойно использовать градиент для кнопок и меню сайта, изображение для фона, или паттерн. Только использовать все это нужно с умом, если это вписывается в общую картину сайта и будет выглядеть эстетично.

Screenshot_5

Главная задача хорошего дизайна – легкое восприятие сайта и информации, которую он в себе несет. Поэтому очень важно понимать какие цвета хорошо сочетаются друг с другом, а какие служат вспомогательными цветами для привлечения внимания пользователя.  Если вы новичок, или вам сложно подбирать цвета самостоятельно, существует множество сайтов с готовыми цветовыми схемами и кулерами для самостоятельного подбора цвета (такие как adobe kuler).

Screenshot_6

Шрифты так же являются очень важной частью дизайна. Они должны быть простыми и читабельными! Для информационной части лучше использовать шрифты вроде Helvetica, Arial, Helios, Open Sans и им подобные. Конечно, для заголовков они могут показаться скучными (в зависимости от стиля сайта), в этом случае можно использовать любые шрифты на ваше усмотрение, просто нужно помнить, что они должны читаться.

Но не стоит забывать, что использовать следует не более 2-3х шрифтов и не более 3х размеров (иногда можно использовать больше, при необходимости, но не увлекайтесь сильно, иначе, если в каждом блоке будет другой шрифт или каждый раз разный размер, сайт потеряет единый стиль).

Используйте крупный размер шрифта для привлечения внимания в названиях или заголовках, а небольшие (от 16 pt до 22 pt) для текстов и немного крупней для названий продукта, цен или просто, чтобы сделать на чем-либо акцент.

Еще помните про инверсию! Если текст на белом или светлом фоне (пастельные оттенки), его цвет должен быть темным, если фон темный или яркий (оранжевый, красный, бордовый…) цвет текста должен быть белым.

Так же, в процессе нужно помнить про отступы между блоками. Блоки не должны слипаться между собой и расстояние между ними должно быть одинаковым. Не нужно бояться пространства в том числе и внутри самого блока. Куда приятней читать текст, который не впивается в края блока, или воспринимать изображение не прилипающие к тексту или названию блока. И Хорошим примером являются официальные сайты Apple, Pandora, Calvin Klein, Puma.

И конечно же хочется, чтобы в итоге сайт был красочным и привлекательным, сохраняя при этом минимализм и простоту. Для этого стоит использовать хорошие качественные изображения.

Screenshot_7

Их исходники изначально должны быть в большом разрешении, чтобы с ними можно было работать. Если большое изображение можно уменьшить до нужного размера, то из картинки, к примеру, 500 px на 500 px мы не можем получить изображение 1000 px на 1000 px не потеряв качество. Сами же изображения стоит переводить в «смарт объект», так можно будет их уменьшать и увеличивать обратно без потери качества, если же мы уменьшим растровую картинку, а потом растянем до прежнего размера, она расплывется. К тому же работать со «смарт объектами» гораздо удобнее и практичнее, так мы можем применять к нему стили, корректирующие слои, маски и все необходимое без потери исходного изображения, которое находится внутри «смарт объекта».

Ну и в заключении, хочу напомнить, что очень важно сохранять все исходники. Если вы сделали один вариант макета, но заказчику захотелось что-то добавить или поменять, вы переделали и сохранили его в первичном исходнике, а клиент сказал, что ему не нравится, давайте оставим как было… И тут вы понимаете, что «как было» уже нет, теперь нужно потратить время, чтобы переделать все в «исходный» вид. Поэтому не забываем сохранять каждые правки под новым вариантом дабы сохранить свое время и время заказчика.

Вот такие несложные манипуляции для создания хорошего дизайна. Главное не боятся делать!

 

 Примеры работ

f_284591ebf022f7e2

f_7275901a4103bef1

f_902591ebe82b2a3a