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

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

Для начала разберемся с основами чистого веб-дизайна.

1. Жесткая структура страницы

Наверняка на просторах Интернета вы видели множество стильных сайтов с кажущимся простым дизайном. С уверенностью можно утверждать, что все эти сайты сделаны с использованием сетки. Даже если вы ничего не понимаете в дизайне, просто представьте страницу, где каждый элемент расположен не абы как, а соответствуя определенной структуре. Даже будучи невидимой, эта сетка создает эффект упорядоченности, ритма и устойчивости.
2В следующем примере можно увидеть две страницы одного сайта. Страницы отображают разные типы контента, но при этом выглядят как единое целое. Это все за счет единой жесткой структуры, которая применена на обеих страницах.
3

33

В случае, когда на сайте предполагается размещение большого количества контента, создание ненагруженного интерфейса – не такая простая задача. Однако и она решаема, если использовать все ту же сетку. Ниже приведен пример сайта известной британской газеты The Guardian. Информации на сайте много, но ни один блок не мешает другим блокам и оформление страницы не кажется громоздким.
4
Если бы весь контент на этой странице выстроили хаотично, страница бы выглядела непривлекательно  и только запутывала пользователей. Каждый пиксель и каждый отступ благодаря сетке создает ту самую легкость, к которой должен стремится веб-дизайнер. Самая распространенная сетка называется The 960 Grid System, ее можно без труда скачать. Также существует множество программных возможностей для создания собственной сетки. Надо лишь выбрать себе удобный вариант.

2. Хороший шрифт

Главным советом при использовании шрифтов в оформлении веб-страниц является сдержанность. Не стоит помещать на страницу больше одного-двух шрифтов, иначе будет перегрузка и станет сложно читать/видеть тексты. Как делают опытные веб-дизайнеры: они берут один шрифт и используют его в разных представлениях – меняют размер, начертание (строчное, заглавное) цвет, жирность. Такие нехитрые приемы придают внешнему виду сайта однородность и утонченность. Ниже приведены примеры сайтов The New York Times и The Mavenist. В обоих случаях при оформлении использовано не больше 2-х шрифтов.
5

55
Под хорошим шрифтом также следует понимать его грамотное оформление. Чтобы итоговый текст хорошо смотрелся, необходимо удачно подобрать межстрочное пространство. Когда пространства достаточно, пользователь с легкостью читает текст, может без труда перейти от конца текста к его началу. Что касается оптимального размера шрифта, то его выбор зависит от самого шрифта, цвета, ширины текстовых блоков. Для улучшения читабельности текстов иногда помогает редактирование межбуквенного пространства.

3. Ограничение в цветовой палитре

В графическом дизайне палитру цветов вынуждены ограничивать из-за бюджета. Иногда затраты могут покрыть изготовление лишь 2-хцветного постера/баннера. Веб-дизайн не знает границ цветового оформления, ведь современные мониторы могут воспроизводить миллионы цветов. Тем не менее, грамотный веб-дизайнер должен ограничивать цветовую палитру сайта, выбирая 2 цвета – разные оттенки серого и какой-нибудь другой цвет. Цветом обычно выделяют ключевые элементы страницы: заголовки, ссылки и т.д. Такое цветовое решение не только повышает удобство использования сайта, но и визуально объединяет все элементы страницы. На примере показан дизайн с двумя основными цветами: серым и салатовым.
 
6

Следующий пример интересен тем, что дизайнеры сделали весь шрифт сайта один цветом – красным.
7
Использование только 2-х цветов – довольно жесткие рамки для таких творческих людей как дизайнеры, этого правила необязательно придерживаться. Более того, в некоторых случаях, необходимо наличие дополнительных цветов, просто их использование должно быть минимальным, или они сами должны быть нейтральными, не бросающимися в глаза. Дизайн такой страницы приведен ниже:
8
Бывают случаи, когда цветом необходимо подчеркнуть тематику сайта. Тогда использование большего количества цветов просто необходимо. Опытные дизайнеры смогут подобрать цвета таким образом, чтобы ничего не пестрило, не отталкивало и не отвлекало. Пример ниже:
9

4. Единый стиль картинок/изображений

Страницы сайта должны содержать в себе стилистически однородные элементы: графику, изображения, фотографии – они должны гармонично вписываться в общее оформление, а также связываться друг с другом. Поверьте, соблюдение этого правила значительно улучшит пользовательский интерфейс. На примере ниже вы видите сайт IBM’s Smarter Planet campaign, который затронул десятки тем, не потеряв стилистического единства за счет хорошо связанных друг с другом интерактивных материалов, иллюстраций и карт. Их объединяют геометрические формы, смелые дизайнерские приемы, насыщенные цвета.
10
На следующем примере хорошо просматривается стилистическое объединение фотографий с различных фотосессий (с разной композицией, светом,  резкостью). Посетитель сайта видит главную страницу как единое целое, не обращая внимание на разношерстность его частей.
11
Конечно, бывает и так, что нет необходимости объединять все изображения в одно целое. Такая ситуация может возникнуть, к примеру, при разработке дизайна новостного сайта или блога, где вся привлекательность состоит в разноплановости фотографий, изображений.
Бывает, что ограничен бюджет, и в него не входит разработка уникальных графических элементов. Тогда веб-дизайнерам остается объединять графику одинаковой обводкой, тенями, особенностями расположения, размеров и т.д.

Ниже рассмотрим некоторые советы, которые будут полезны как начинающим, так и опытным веб-дизайнерам.

Общие советы. Идите от общего к частному.

12Распределение элементов на странице – неотъемлемая часть работы дизайнера. Когда заказчик просит сделать что-то простое, возникает страх добавить на страницу что-нибудь лишнее. В результате получаются довольно расплывчатые работы, потому что дизайнеры просто боятся экспериментировать. Чтобы избежать такой «зажатости», можно пользоваться правилом: «от общего к частному». На начальном этапе разработки дизайна постарайтесь добавить на страницу максимум всевозможных элементов, комбинируя, пробуя, помещая их на разные слои. Потом, когда вам покажется, что дизайн близок к законченному виду, начинайте его упрощать. Внимательно просматривая страницу, спросите себя, нужен ли здесь этот элемент, что будет, если его убрать. Иногда говорят, что 80% всей проделанной работы приходится на 20% всего времени работы над проектом – на его заключительную часть. Это правило хорошо работает и в веб-дизайне. Заключительный этап помогает избавить дизайн от тяжеловесности. На этом этапе полезно будет показать дизайн другому человеку, прислушаться к его взгляду со стороны. В конце концов, если вы сомневаетесь – оставить или удалить тот или иной элемент, то лучше удалите его.

Общие советы. Работайте, работайте и еще раз работайте.

13

Как известно, нет предела совершенству. Любой дизайн можно дорабатывать, изменять и он все время будет казаться незаконченным. Слишком много деталей и проработок должно быть в нем (если мы говорим о чистом дизайне): это и композиция, и палитра, и структура, и шрифт. Да, уйдет много времени на то, чтобы пробовать/изменять шрифты, оттенки, пискели в отступах, размерах и т.д. Но это того стоит, несмотря на кажущуюся бесполезность такой скурпулезности. На самом деле, когда все элементы объединяются в единую композицию, даже одна маленькая неточность может смазать все впечатление.

Общие советы. Не упускайте из виду всю картину.  

14
Веб-дизайнеры зачастую упускают возможность посмотреть на всю «картину» целиком. Лучше все-таки прибегнуть к этому совету, ведь это основы рисунка: чтобы верно скомпоновать рисунок, необходимо время от времени отходить от него на расстояние или отставлять его и смотреть (иногда даже полезно перевернуть его вверх ногами), издалека четче видны пропорции, композиция, цветовое сочетание. Можете распечатать эскиз дизайна, отыскать недостатки, попробовать их устранить, и снова распечатать. И так по кругу. Можно сохранять промежуточные варианты эскиза  и открывать его в обычном просмотрщике изображений, даже этот прием поможет избежать нежелательных ошибок.

Подведем итоги:
Основные черты чистого дизайна:

  • Жесткая структура страницы
  • Хороший шрифт
  • Ограничение в цветовой палитре
  • Единый стиль картинок/изображений

Советы веб-дизайнерам:

  • Идите от общего к частному
  • Работайте, работайте и еще раз работайте
  • Не упускайте из виду всю картину

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # Полезная информацияVARion 13.02.2013 13:30
Информация, полезна, хотя в рамках одной статьи эти принципы не раскрыть. :-) И главное, не хватает совета, как сделать "чистый дизайн, но не примитивный", ведь в деталях разница.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Полезная информацияWedal 14.02.2013 01:13
VARion, думаю, ответ на этот вопрос кроется в:
  • идите от общего к частному;

  • работайте, работайте и еще раз работайте.
Ответить | Ответить с цитатой | Цитировать
0 # Приятно почитать такую статьюАнастасия 03.10.2013 21:13
Понравилось :) Вспомнила и заново обдумала то, что знаю, поняла что-то новое.
Все лаконично и понятно. Спасибо)
Ответить | Ответить с цитатой | Цитировать
0 # Спасибо. Толковая статьяВиталий Скалецкий 16.01.2016 17:51
Спасибо. Видно, что автор много работал и выдал реальные практические советы. плюсую!
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх