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

веб-дизайн

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

Вступление

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

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

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

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

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

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

минимализм

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

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

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

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

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

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

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

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

wordpress

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

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

размытость

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

Разбивка

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

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

разбивка

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

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

разбивка

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

типографика

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

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

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

Цвет

цвет

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

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

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

цвет

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

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

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

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

Заключение

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

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

Автор: Shaun Cronin

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

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

Комментарии Facebook:

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

  1. александр

    Я только учусь.С интересом читаю Ваши посты.Спасибо Андрей.Удачи.

  2. Андрей

    Очень толковая и полезная информация. Спасибо за качественную статью.

  3. Юрий

    Спасибо за статью, у меня в этом направлении очень большие резервы.

  4. Андрей

    Очень полезная информация. Например ничего не знал про @font-face, надо будет почитать теперь.

  5. Ирина

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

  6. Виктор

    Ребята, спасибо! Неимоверно полезный сайт!
    Хорошо бы подсказать, если можно
    1. Где в буржунете водятся бесплатные темы? Куда ни ткнешься — везде плати.
    2. Как их можно перевести (принципы перевода)?

    Это если можно.
    Спасибо.

  7. Эрли

    М… Читайте Д.Кирсанова «Веб-Дизайн»….

  8. игорь

    спасибо! зашел с компа своей подруги,очень заинтересовало!Хотелось бы все с нуля изучить

  9. Александр

    Очень полезная статья.
    Спасибо авторам.

  10. евгений

    Спасибо ребята! У Вас всегда интересно.Всегда жду Вашей информации.

  11. Игорь

    Плодотворная статья, много полезного. Спасибо!

  12. Алексей

    Спасибо. Полезный и интересный материал

  13. Борис

    Большое спасибо за ваши статьи !!!

  14. Любовь

    Очень интересно познавать такие уроки.

  15. Виктор

    Действительно очень полезная статья сам я не силен в этом вопросе, так что, учусь на опыте и знаниях других.

  16. Олег

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

  17. Роза

    Спасибо. Хорошая статья.

  18. Сергей

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

  19. Сергей

    Спасибо за интересную статью!

  20. Николай

    Спасибо, для меня — это точно хорошая статья!

  21. Михаил

    Андрей огромное Вам СПАСИБО!!!! За ваши технологии, опыт и Родник (из которого сколько не бери, меньше не становиться потому, что не жалеет когда даёт, и от этого становиться шире, глубже т.е. мудрее, никогда не зарастёт к нему народная тропа (это из моей Книжки, которую пишу по сей день). Дай Бог Вам доброго здоровья ……..

  22. Владимир

    Большое спасибо!
    Сейчас работаю над сайтом и эта информация очень полезна.
    Владимир, Самара

  23. Галина

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

  24. Николай

    Спапасибо за статью, недавно сделал свой сайт.Теперь буду следить по вашим подсказкам.

  25. Евгения

    Очень познавательная статья. Много действенных советов, побольше бы таких статей.Спасибо Автору

  26. Vika

    Большое спасибо за профессиональные подсказки! очень вовремя! Счастья вам, ребята!

  27. Мария

    Очень полезная статья! Я пока что только начитываю информацию, что бы в дальнейшем создать свой сайт) Внимательно слежу за всеми вашими постами- все написано доступным языком и интересно)Надеюсь, удастся все применить на практике!!!Спасибо!!!

  28. Любовь

    Актуально!!! Буду применять.

  29. Николай

    Спасибо Виктор и Андрей за прекрасную статью, информация о сайтостраении очень хорошая,еще раз спасибо за статью.

  30. Pocherk

    Познавательно! В хозяйстве пригодится :)

  31. Светлана

    Буду изучать. Спасибо!

  32. Барбара

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

  33. Dmitry

    Очень хорошая статья для новичков. Однако, опытным веб-дизайнерам она не интересна. У них уже давно, сложились свои представления о правильном дизайне основанном, к примеру, на книгах Итана Маркотта или Дэна Седерхольма.

  34. Матвей

    Нравится очень информация. Так держать!

  35. Евгений Анатольевич

    Спасибо.
    Очень познавательно и полезно.
    Е.А.

  36. Светлана

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

  37. Alexander

    Благодарю, позновательная статья. Узнал для себя много нового. Так держать!

  38. nikol

    ну чё конкретная статья про чисто дизаин :-)

  39. lesja

    Eta tema ochen aktualna dlja novichka v veb-designer

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree