Разберем основные правила и нюансы при создании гармоничной композиции в дизайне сайта. Будет много примеров и советов.
На самом деле создать хороший веб-дизайн намного сложнее, чем кажется на первый взгляд.
Овладеть этим можно, если много практиковаться, просматривать или анализировать работы лучших дизайнеров.
Однако прежде чем идти практиковаться, вам нужно получить проверенные, правильные знания.
Вам нужно запомнить, что каждый элемент сайта не должен быть сам по себе.
Он должен взаимодействовать с окружающими его элементами и гармонично вписываться в общую картину.
Баланс стиля
Ваша композиция в дизайне может быть сбалансированной. Баланс — это как бы равновесие между элементами сайта в композиции.
Такая композиция не придает ощущения того, что какая-то ее часть доминирует над всеми остальными.
Достичь баланса можно с помощью правильного размещения, раскрашивания и задания правильных размеров различных объектов.
Баланс может быть симметричным.
То есть объекты (два серых круга) в этом случае расположены на одинаковом расстоянии по отношению к третьему объекту (черный круг).
Проще говоря, симметричный баланс — это синоним «одинаковый«.
В нашем случае два серых круга расположены на одинаковом расстоянии по отношению к большому черному кругу.
Также баланс может быть асимметричным. Это полная противоположность симметрии.
В таком случае, объекты расположены на разном расстоянии по отношению к третьему объекту.
Еще баланс бывает радиальным.
Здесь объекты расположены по кругу и расходятся из какой-то одной точки.
Используйте максимум 3 разных цвета
Оттенки этих цветов вы всегда сможете создавать в большом количестве. За счет разнообразных цветов и множеством оттенков, можно придать дизайну сайта единый и сбалансированный вид.
Конечно, бывают исключения и можно добавить четвертый цвет.
Однако, это делать нужно очень осмотрительно. Ведь велика вероятность нарушить единство цветовой гаммы сайта.
В общем, никогда не используйте пять и боле цветов. Такой сайт будет похож на раскраску.
Только не нужно быть фанатичным в этом деле.
Картинки, фото и прочую графику не нужно стараться подбирать к этим цветам. На изображениях могут быть, и пять, и десять цветов.
В этом нет ничего страшного!
Ограничения касаются лишь самой структуры, фона, различных блоков, меню, кнопок и прочих элементов дизайна сайта.
Если не знаете, как это определить, то просто залейте желаемым цветом фон, вставьте текст на три страницы формата А4 и прочитайте его.
Вы сразу поймете, будет ли вам комфортно или нет. А дальше исходя из своих ощущений, регулируйте цвет, яркость и контрастность.
Используйте не более 3 разных шрифтов
Лучше где-то изменить размер, жирность, наклон и подчеркивание. В итоге, получится 5-6 разных шрифтов.
Однако сильно этим не увлекайтесь!
Рекомендую придерживаться такой схемы. Вы разрабатываете всего несколько видов шрифтов:
- первый для заголовков;
- второй для текстов, который люди будут читать;
- третий для ссылок;
- четвертый для меню (не обязателен).
Три вида шрифта вполне достаточно для создания правильной типографики.
Также не рекомендуется сильно перегружать сайт различными сочетаниями жирности, наклона и размера.
Это совершенно ни к чему и только усложнит понимание структуры и информации. Поэтому изменяйте шрифт только по мере необходимости. Ведь все должно быть в меру.
Оптимальное расстояние между элементами
Между всеми элементами дизайна сайта должно быть приличное расстояние. Ни что не должно напрягать.
Элементы не должны налезать друг на друга. Другими словами, не бойтесь пустоты и не лепите все друг на друга.
Сайт не должен быть переполнен текстом или графикой. На нем должно быть достаточно свободного места.
Однако тут опять же, не стоит ставить на сайт одну картинку и заголовок к ней. Это будет выглядеть слишком пусто.
Только после этого, вы начнете правильно размещать объекты.
Должна быть четкая структура в веб-дизайне сайта
Все должно быть выравнено по линиям, а не разбросано, как попало. У некоторых людей, все просто летает на сайте и понять где, что находится гораздо трудно.
У профессионалов все структурировано и выровнено. Поэтому, когда заходишь на их проект, то сразу понимаешь, что и где находится.
Фокусируйте внимание на главном
Обычно это статьи, товар или услуга. Человек, который заходит на сайт за пару секунд не поймет, что для него здесь есть ценного.
После этого он спокойно может закрыть страницу. Поэтому вы, также должны привлекать внимание посетителей с помощью графики и текста.
Вы должны фокусировать внимание посетителя на чем-то одном.
Нужно водить его по сайту с помощью грамотной расстановки элементов, подбором нужных цветов, контраста, яркости, размеров и пропорций.
По сути, вы должны как бы сделать тропинку из элементов сайта, по которым должен пройтись человек туда, куда нужно.
К примеру, вам нужно, чтобы человек заказал на сайте утюг:
- Сначала вам нужно привлечь его внимание. Вы делаете большой и яркий заголовок.
- Далее в подзаголовке подводите человека к теме.
- В тексте с помощью фото и описания выгод, подводите его к совершению покупки.
- В конце вы уже показываете человеку цену и предлагаете ему нажать на кнопку «Заказать товар».
Вы должны разрабатывать веб-дизайн, ориентируясь на тематику сайта.
Не стоит показывать свое мастерство. Ведь люди заходят ради поиска информации и решения проблем, а не ради восхищения вашими талантами.
Встречаются проекты, напичканные графикой, отредактированные в фотошопе.
Никогда так не делайте!
Любые проекты делайте для людей, чтобы там было комфортно находиться.
Прорабатывайте все до мелочей
Иначе дизайн будет казаться не целостным. Вследствие этого может возникать ощущение пустоты.
Вы берете какой-нибудь объект и стараетесь разделить его на несколько составляющих.
К примеру, возьмем макет блога. У профессиональных людей все разделено на 3 раздела:
- шапка сайта или header;
- блок контента — это место для основной информации;
- footer — это отдельный блок снизу, где часто дублируются меню, ставится копирайт или контакты.
Далее эти части опять дробятся и так до тех пор, пока не останутся совсем маленькие части, которые уже никак не разделить для отдельной проработки.
Только после этого, начинается кропотливая работа над каждым элементом дизайна.
Некоторые говорят, что хороший веб-дизайн можно создать за один час.
Естественно это полная ерунда и ни один нормальный дизайн не разрабатывается за такое короткое время.
Только на создание эскиза на бумаге, многие профессионалы тратят больше часа.
Тем более такие люди всегда исключительно и очень долго один раз прорабатывают дизайн, чтобы в дальнейшем к нему не возвращаться.
Если хотите сделать качественный и хороший дизайн сайта, то вы должны проработать все до мелочей и не жалеть на это времени.
Контраст
Контраст — это определенные элементы дизайна, которые подчеркивают значимость друг друга, когда расположены рядом.
Например, это может быть белый и черный, большой и маленький, толстый и тонкий.
Если они будут стоять рядом, то контраст будет заметен. В следствие этого будет наибольшее внимание.
Также если взять, что-то большое и толстое, и взять маленькое, худое, и поставить их рядом — то тоже будет контраст.
Значимость и подчиненность
В любом дизайне есть определенная область, на которой сосредоточено внимание. Это место, на которое сразу падает взгляд человека, как только он заходит на сайт.
Поэтому все объекты на сайте должны иметь иерархию значимости и подчиненности.
Другими словами, более важные элементы имеют наибольший размер. Они ярче по цвету и контрасту.
В общем, они привлекают наибольшее внимание.
Пропорции
Пропорции — это соотношение размеров фигур, по отношению друг к другу. То есть две фигуры могут быть абсолютно одинаковыми по виду, но только одна будет больше, а другая меньше.
Все стороны, углы, диаметры и прочие характеристики, всего лишь увеличиваются или уменьшаются на определенное какое-то число.
Масштаб
Масштаб — это реальный размер какого-либо объекта, рассматриваемый по отношению к чему-то. Например, по отношению к другим предметам, людям, земли и так далее.
Кстати, в любых графических редакторах, когда надо увеличивать или уменьшать размер с помощью лупы, будет показан масштаб картинки в %.
Повторение и ритм
Довольно часто нам нужно как-то привлекать внимание пользователя. Но одного объекта для этого будет не достаточно.
В таком случае, этот объект нужно повторить или, проще говоря, продублировать.
Единство в разнообразии
Довольно часто приходится из разных объектов делать одну целостную картину или структуру, которая должна выполнять определенную цель или идею.
В этом и заключается вся суть в единстве и разнообразии композиции.
Итак, это были все основные принципы гармоничной композиции в дизайне сайта. Всегда старайтесь соблюдать эти правила и нюансы в работе.
Добавить комментарий