Насколько чист ваш веб-дизайн?

веб-дизайн

От автора: чистый. Термин часто применяется для описания дизайна вебсайта, но что он обозначает? Как вы это определяете? Я уверен, это не значит белое пространство белее белого или что весь мусор заметён под нижний колонтитул… Давайте присмотримся поближе.

Вступление

Дизайнеры захлебываются от восторга, увидев веб-дизайн, и восклицают: «Он прекрасен, он такой чистый!». «Чистому» дизайну посвящается бесконечное число встреч за круглым столом и этот термин уже немного известен в сообществе веб-дизайнеров. Хороший образец чистого дизайна легко заметить, потому что он вызывает определенное чувство профессионализма и высокого качества. Однако основополагающие принципы и факторы, сочетающиеся при создании «чистого» образа, зачастую не обсуждаются, а именно это и намеревается сделать наша статья.

чистый веб-дизайн

Фотообраз:Джейми Королак (Jaymie Koroluk)

Перед началом давайте проясним одну вещь – чистый дизайн не означает минималистский дизайн.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

минимализм

Zenhabits – отличный пример минималистского дизайна

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

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

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

O.K., теперь, когда мы получили общее понимание «чистого» дизайна, давайте рассмотрим разные содействующие факторы этого стиля.

Детали, идеальные до последнего пикселя

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

В качестве примера давайте пристальнее рассмотрим главный активный раздел темы WordPress Studeo, созданной Орманом Кларком (Orman Clark). Орман широко известен за (и чрезвычайно успешен в) изготовлении чистых, удобных для пользователя тем WordPress.

wordpress

Там, где некоторые могут для темы просто выполнить большой слайдер с отчетливым изображением, область активного элемента Studeo – тихая заводь изысканных деталей. Обратите внимание на тонкую текстуру, наложенную на изображение, выделение в один пиксель и почти незаметную светло-серую рамку по низу. Все эти детали могут показаться незначительными и иногда даже остаться незамеченными, но сообща они создают ощущение высокого качества и утонченности.

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

размытость

Единственный способ, которым можно предотвратить это при создании проекта в Photoshop’е – выбрать опцию «Прикрепить к пикселям» (‘Snap to Pixels’). С этой опцией все края вашей фигуры станут великолепно четкими и чистыми.

Разбивка

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

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

разбивка

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

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

разбивка

Теперь тот же пост блога с щедрой разбивкой.

щедрая разбивка

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

Расположение

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

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

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

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

расположение

В качестве отличного примера выравнивания можно посмотреть Design Without Frontiers (Дизайн без границ). Дизайнеры не только исключительным образом применили выравнивание, они также весьма явно смоделировали направляющие линии Photoshop’а, бегущие вдоль всего вебсайта.

Типографика

С появлением @font-face и многих типографских сервисов типографика в веб-дизайне никогда еще не была такой значительной, а принимая во внимание, что подавляющая часть информации в сети – текст, это неудивительно. Мы не собираемся вдаваться здесь в сложности типографики, так как существует множество ресурсов, но рассмотрим пару способов дать ей возможность сыграть важную роль.

типографика

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

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

Верный способ – это придерживаться двух гарнитур, так как слишком разные шрифты могут усложнить дизайн. Лучше предпочесть для заголовков более смелые или декоративные гарнитуры, а более читабельные виды шрифта оставить для основного текста – и чаще всего вы не промахнетесь. Отлично работает и часто применяется сочетание шрифтов serif и sans-serif.

Цвет

цвет

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

По множеству причин основная масса чистых вебсайтов склоняется к светлым, нейтральным и ограниченным цветовым палитрам.

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

цвет

Элементы портфолио и зеленые акценты хорошо выделяются в онлайн портфолио Мартина Хиппса (Martin Hipps).

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

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

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

Заключение

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

Заметили ли вы другие характеристики чистого дизайна? Или знаете особо прекрасный пример чистого дизайна? Пожалуйста, дайте нам знать в комментариях.

Автор: Shaun Cronin

Источник: //webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (39)