Сегодня представляю перевод статьи о web дизайне. Вы узнаете каким образом можно добиться по настоящему качественного результата.
Понятный, простой вид веб-дизайна становится в последнее время все более популярным. Эта статья будет разделена на две части. Первая касается основных особенностей, которые характерны для всех сайтов с простым оформлением. Во второй части я поделюсь с вами некоторыми приемами и методами, позволяющими создать самый простой и ясный дизайн.
Давайте начнем с рассмотрения основных качеств, которыми характеризуется простое оформление веб-страниц.
Если вам дадут пару минут, чтобы просмотреть сайты, которые можно отнести к категории «простой дизайн», то я готов поспорить, что все они будут иметь одну общую черту – хорошо продуманное расположение элементов, как будто в сетке, которую веб-дизайнер использовал в работе.
Некоторые люди никогда не слышали о проектировании сайта с помощью сетки. Представьте, что каждый элемент страницы располагается в соответствии с невидимой структурой колонок и линий. От нее зависит масштаб страницы и размещение компонентов. Эта виртуальная сетка создает ощущение порядка и помогает веб-дизайнерам устанавливать иерархию, ритм и последовательность структурных элементов сайта.
Дизайн страницы Pixel Dreams был спроектирован с помощью популярной сеточной системы 960 Grid System.
Такое расположение по ровной сетке обеспечивает порядок и общее единство всех элементов. К примеру, у Creative Review есть несколько видов расположения материала в зависимости от определенного типа контента.
Если на сайте нужно опубликовать очень много информации, например, это свойственно для интернет-магазинов или новостных страниц, то создать простой дизайн, который выглядел бы эстетично, еще сложнее. Но такие ресурсы как The Guardian и British newspaper показали своим примером, что это возможно благодаря хорошо продуманному расположению материала внутри сетки.
Если залить все их содержимое на страницу, не обладающую четкой структурой, то первая полоса точно стала бы напоминать бардак. К тому же благодаря сетке, используемой в качестве отправной точки в структурировании материала, следованию определенным правилам и использованию свободного пространства для установки иерархии контента страница не давит на посетителя своим содержанием. Каждый пиксель досконально подгоняется до тех пор, пока не создается ощущение легкости и удобства просмотра материала на странице.
«Хорошая типографика», то есть набор шрифтов и их характеристик, часто концентрируется на том, как сделать много с помощью малого набора средств. Сдержанность – ключевой момент, если вы хотите почувствовать ясность и простоту своей веб-страницы. Чем больше вы будете использовать шрифтов, тем больше они будут накладываться один на один, что в итоге создаст на сайте беспорядок и лишит его целостности.
Если вы осмотрите беглым взглядом хорошо спроектированные сайты, вы заметите, что в их оформлении использованы один-два шрифта, которые могут изменять свой размер и цвет и становиться жирными для разделения материала на части по степени важности.
Такой подход к дизайну создает ощущение последовательности и грамотной обработки материала, как на знаменитых ресурсах The New York Times и The Mavenist.
Несмотря на то, что в приведенных выше примерах дизайнерами использовалось не более двух шрифтов, четкая иерархия материала налицо.
Хороший выбор шрифтов – одна из самых главных деталей, которые бросаются в глаза. Свободное пространство между строчками позволяет сделать материал приятным для глаза и удобным для чтения. Только когда места достаточно, глаз читателя может легко перебежать с конца одной строки к началу следующей. В веб-дизайне этот эффект может быть приспособлен к CSS.
Оптимальный размер пустого пространства между строками зависит от шрифта, величины и цвета текстового блока. Дополнительный интервал позволяет тексту «дышать».
В полиграфии использование цвета часто ограничено. Стандартный бюджет, как правило, позволяет использовать только два цвета, поэтому дизайнеру печатных изданий ничего не остается, кроме как работать в жестких рамках.
Но это совершенно не касается веб-сайтов, так как большая часть компьютерных мониторов может отображать миллионы цветов. Однако, несмотря на это, многие сайты со строгим дизайном следуют тенденции ограничивать свою цветовую палитру. Большинство из тех страниц, что я видел, используют только оттенки серого или один цвет. Им выделяются самые важные элементы: ссылки, заголовки и др. С помощью цвета можно сделать чтение удобным, визуально объединить материал на всей странице. А1 следует этому направлению, используя синеватую серо-зеленую палитру.
В то же время ресурс Fuzzco свел все цветовое оформление к одному варианту – красному.
Такая же связь между шрифтом и типом текста. Более сложные варианты дизайна предусматривают такое оформление, которое перекликается с содержанием сайта. Например, яркие, усложненные цвета очень подходят сайту Notologist.
Предыдущий пост: Новая и очень полезная социальная сеть!
