Чем меньше, тем лучше: основы минималистического веб-дизайна. Лучший дизайн сайта

Чем меньше, тем лучше: основы минималистического веб-дизайна

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

Определение цели сайта

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

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

Мой сайт должен ___________________________.

Объяснять подросткам опасность набора текстовых сообщений во время вождения

Показывать потенциальным клиентам призовые фотографии

Продавать эксклюзивных игрушечных собак ручной работы

Ясно определив цель с самого начала, вы сможете использовать её, чтобы суметь поддерживать свой дизайн «на ходу». Работая с элементами дизайна, продолжайте задавать себе такие вопросы, как:

Будет ли это подчёркивать и поддерживать цель моего сайта?

Это действительно необходимо или я просто заполняю пространство?

Будет ли это отвлекать от основной цели моего сайта?

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

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

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

Попотейте над мелочами

Каждая деталь имеет значение, все удаляемое с сайта так же важно, как добавляемое.

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

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

К чистому, простому минималистскому стилю применимы многие, если не все, принципы дизайна, но сначала убедитесь, что вы твердо их знаете:

Единство

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

Простые цветовые штрихи делают чёрно-белую цветовую схему интереснее и от логотипа уводят взгляд вправо к разделам «creative», «clever» и «fun».

Белое, или негативное пространство

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

Давайте добавим что-нибудь ещё, кажется, здесь много лишнего места…

Под меню есть место, переместите его вверх, чтобы можно было добавить…

По сторонам сайта есть промежуток, нам нужно еще включить…

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

У Web Creme ограниченное количество рекламы, но размещается она в самой значимой области.

Выравнивание

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

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

Тонкость – это не для вас? Создайте немедленный эффект, выбрав смелый цвет, подчеркивающий дизайн.

Иерархия

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

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

Удалите ненужное

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

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

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

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

Юзабилити — не дополнительная опция

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

Простой и удобный в использовании сайт будет практически «чувствовать» пользователя, читать его мысли, а просмотр станет легким и приятным.

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

Ссылки должно быть легко распознать и нажать

Всегда обеспечивайте способ вернуться на главную страницу

Никогда не отключайте кнопку «назад»

Добавляйте кнопки закрытия сообщений во всплывающие окна

Обозначайте, на какой странице сейчас находится пользователь

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

Навигация должна быть логичной и интуитивно понятной для использования

Содержимое должно быть читаемым, с четко определёнными заголовками

Код должен быть простым и выполненным согласно последним сетевым стандартам

Необходимо обеспечить правильное отображение и функционирование вашего сайта во всех браузерах

Определение проблемных мест

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

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

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

Купите в моем магазине книгу

Свяжитесь со мной, чтобы назначить встречу

Узнайте что-нибудь обо мне

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

Поймут ли они, где нужно щелкнуть мышью?

Заблудились ли они в определённой области?

Щелкают ли они на элемент дизайна, думая, что перейдут так на новую страницу?

Трудно ли им нажимать на крохотную иконку?

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

Но мне нравится цвет!

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

Цветовое пятно

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

Рамки CSS, такие как «960.gs system», гарантируют возможность идеального выравнивания.

Просто, но смело

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

Чувствуется, что все элементы Finch на странице прекрасно сочетаются и работают вместе.

Это не для всех

Из крепко сфокусированного сайта извлечёт пользу почти каждый, но чистый, простой минималистский стиль – штучка не для всех.

Авторы темы веб-сайта – Часто у вас есть всего несколько секунд до того, как пользователь решит, будет ли он тратить время на просмотр созданного вами сайта. Показ супер-минималистского дизайна, похожего на макет, может восприниматься “слишком простеньким” и неполным. Вам следует показать в областях различные уровни того, что возможно, и позволить им решать, использовать эту характеристику или нет.

Сайты, перегруженные рекламой – Чистый, простой минималистский стиль, вероятно, не очень подойдет для сайтов, полагающихся на рекламу, если, конечно, у вас нет очень понимающих рекламодателей, которые адаптируются к вашему стилю. Наилучший вариант – поместить меньше рекламы, но в ту область, где на неё станут щелкать больше всего.

Sofa использует перевёрнутую информационную пирамиду, ведущую вниз по странице от заголовка к обзору компании и предоставляемым ею сервисам.

В поиске гармонии

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

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

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

Автор: Curt Ziegler

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

Редакция: Команда webformyself.

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

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

Получить

Метки: ,

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

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

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

  1. Настя

    Спасибо за качественную и детальную статью!

  2. Владимир

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

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

Ваш 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