Создание сайта в стиле clean & simple

0252-01_elements_clean_design

Основные черты clean & simple дизайна

Единая структура страницы

Хорошо продуманная сетка, которая дает ощущение упорядоченности на странице, с помощью которой устанавливается иерархия на странице, шаг и последовательность.

clean & simple создание сайта

Pixel Dreams разработан по сетке с использованием популярного 960 Grid System.

Нерушимая сетка дает упорядоченность элементов. Например Creative Review имеет несколько страниц с разными типами контента, однако просмотр контента последователен, т.к. структура страниц неизменна.

clean & simple создание сайта

Если сайт имеет много конетента для отображения, например — это сайт интернет магазин или новостной сайт, то сделать его в стиле clean & simple может быть затруднительно. Но, к примеру, сайты типа The Guardian, демонстрирует возможность таковой реализации.

clean & simple создание сайта

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

Ниже 2 ссылки, которые помогут вам освоить дизайн по сетке:

Хорошая типографика

Типографика направлена на то чтобы добиться максимальной минималистичности при наименьших затратах. Здесь ключевым параметром так же является сдержанность.

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

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

В результате мы получаем последовательность и утонченность The New York Times и The Mavenist.

clean & simple создание сайта

The New York Times

clean & simple создание сайта

The Mavenist

В этих примерах создателям сайтов полной мере удалось реализовать иерархию на сайте используя не более двух шрифтов.

Хорошая типографика лучше читаема. Межстроковый интервал так же влияет на читабельность, т.к. читателю проще переходить с одной строки на другую. В веб дизайне этот параметра реализуется line-height CSS параметром.

Оптимальный интервал зависит от шрифта, его цвета и ширины текстового блока.

При этом не стоит пренебрегать интервалом между буквами.

Вот некоторые ресурсы по типографике:

Ограниченная цветовая палитра

В полиграфии зачастую используется ограниченная цветовая палитра. Это связано с затратами на печать. Но не смотря на то, что монитор может без проблем отобразить миллионы цветов, дизайнеры clean & simple сайтов тоже используют ограниченную палитру.

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

Это не просто делает сайт более читабельным, но и подчеркивает иерархию.

A1 — пример.

clean & simple создание сайта

Fuzzco вовсе использует исключительно красный цвет.

clean & simple создание сайта

Некоторые используют больше одного цвета, но при этом расходуют палитру экономно разделяя цвета между собой нейтральными оттенками. Хорошим примером послужит Solo .

clean & simple создание сайта

Не только шрифт должен перекликаться с контентом, но и цвет. Например цвета сайта Notologist находятся в гармонии с контентом, который они подчеркивают.

clean & simple создание сайта

Совмещение изображений

Это означает, что стиль изображений в идеале не должен изменяться при переходе от страницы к странице, т.к. это раздражает.

Гармонично совместить изображения на сайте всегда не легко, но когда речь заходит о clean дизайне — это становиться еще труднее.

В примере с IBM’s Smarter Planet применила такой подход в инфографике своего сайта, которая полностью перекликается с содержимым, которое графики иллюстрируют.

clean & simple создание сайта

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

clean & simple создание сайта

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

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

Советы по Clean дизайну

Разрабатывайте переходя от сложного к более простому

clean & simple создание сайта

Расположение текста — это часть дизайн-процесса. Многие дизайнеры допускают ошибку, когда разрабатывая минималистичный дизайн боятся добавить лишний элемент. В итоге может получиться не очень хороший результат.

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

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

Все слышали правило, что 20% делают 80% работы. В нашем случае оно говорит, что лишь 20% элементов действительно необходимы.

Попробуйте привлечь к разработке стороннего человека далекого от дизайна. Выслушать его мнение. Если существование некоторого элемента оправдывается только тем, что это круто или так делают все, то можно смело удалять его.

В итоге останется только то, что на самом деле необходимо.

Тонкая настройка

clean & simple создание сайта

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

Как мы видели ранее clean & feel разработка сайта является совокупностью композиции, иерархии, используемой палитры цветов и типографики, которые гармонично сочетаются. Когда мы сочетаем все эти элементы, то даже единичный пиксел может иметь важное значение, поэтому так важна тонкая подстройка всех параметров.

Не упускайте из виду общую композицию

clean & simple создание сайта

Превратите печать текущего макета на принтере в ежедневный ритуал.

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