Стандарты веб-дизайна: все, что нужно знать новичкам и профи

Стандарты веб-дизайна: все, что нужно знать новичкам и профи

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

Как стандарты дизайна увеличивают популярность сайта?

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

Горизонтальные элементы навигации;

Логотип в шапке;

Панель поиска в правом сайдбаре;

Изменение цвета посещенных ссылок;

Корзина с заказами в правом верхнем углу и т. д.

А теперь скажу, почему наличие стандартов хорошо для пользователей. Во-первых, навигация становится интуитивной, не надо задумываться, где какой элемент находится. Во-вторых, меньше шансов, что какой-нибудь важный элемент попросту будет упущен, та же карта сайта, например. И, в-третьих, привычный интерфейс не отпугнет потенциальных посетителей (для коммерческих сайтов — покупателей, для блогов — подписчиков и т. п.), человек врывается на сайт и «чувствует себя как дома»! Пользователь понимает, что он управляет ситуацией, а не наоборот, ему комфортно, и он обязательно вернется.

Типы стандартизации

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

Для начала разделим стандарты по самому общему признаку:

Общетехнические;

Пользовательские.

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

Общетехнические стандарты

Начнем с основного, с макета. Какие требования могут выдвигаться к макету? Формат в PSD. Создание макетов в иллюстраторах и других плоских программах — первый признак дилетантства. Даже если готовый макет экспортировать в Photoshop, не удастся избежать ошибок и проблем на пустом месте. Навсегда забудьте про рисунки в PNG, JPG.

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

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

Пометки на полях. В Photoshop есть мега полезный инструмент — листочки для заметок. Не забывайте комментить свой макет: «активное-неактивное», «разукрасить-потушить», «первое-второе-третье». Верстальщик, которому не придется разгадывать ваш ребус, станет вашим лучшим другом, уж поверьте.

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

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

Люди приходят на сайт за контентом, можете забыть про градиент и вырисованные иконки, а про читабельность забывать — это преступление. :) Текст должен «дышать», у него должно быть достаточно пространства. Отталкивающие психологические факторы — слишком широкий или узкий текст, плотно сжатые по вертикали строчки т. д.

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

Соблюдена ли кроссбраузерность?

Четко ли на странице визуализирована иерархия элементов?

Легко ли отличить один уровень заголовков от другого?

Соблюдена ли одна схема навигации для всех страниц сайта?

Какое количество шрифтов использовано в макете? (или конкретное ограничение — не превышен ли лимит по количеству шрифтов в 1 макете?)

Есть у сайта карта? Легко ее найти?

Все ли страницы сайта имеют циклические ссылки на домашнюю страницу?

Меняют ли цвет посещенные ссылки?

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

Подводя итог

Стандарты и правила — это замечательно. Но как же быть с творчеством, полетом фантазии, «взрывай рамки», «не будь как все» ?! Со всех сторон нам талдычат, что серость и примитивизм не в моде, на рынке останутся только самые креативные новаторы. А это, друзья, уже показатель уровня мастерства дизайнера. Найти золотую середину, выйти за рамки, но при этом не поломать основу — удается немногим, и они лучшие в своем деле!

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

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

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

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

Получить

Метки:

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

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

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

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