Дизайн, как и большинство сфер деятельности, очень многообразная отрасль со множеством узких направлений. Это графический дизайн, web-дизайн, моделирование, промышленный дизайн, дизайн интерьеров, иллюстрирование и многие другие специализации. К сожалению веб-дизайну в России профессионально нигде не учат. В лучшем случае, это отдельные курсы, где основное внимание уделяется инструментарию, а не принципам сайтостроения.
Многие дизайнеры ошибочно полагают, что дизайн сайта принципиально ничем не отличается от дизайна постера или разработки иллюстрации. В итоге мы получаем красивые, но совершенно безграмотные с логической и функциональной точки зрения сайты.
Кое-что о принципах разработки дизайна сайтов можно узнать из интернета или специализированной литературы. В этой статье и постарался обобщить основные принципы разработки интернет-дизайна.
Немного теории.
Дизайн сайта необходим для решения следующих задач:
• Эстетическая — красивый и запоминающийся дизайн способствует привлечению посетителей и удержанию их на сайте.
• Функциональная — интуитивно понятный дизайн облегчает работу с сайтом и способствует удержанию посетителей.
• Информационная — в дизайне необходимо подчеркивать тематику интернет-ресурса. Грамотный дизан облегчает восприятие информации. Посредством визуальных приёмов можно акцентировать внимание на определенной информации, выделить отдельные разделы и сервисы.
Несомненно, дизайн сайта неразрывно связан с функционалом и наполнением. Ни в коем случае нельзя допускать, чтобы внешний вид сайта мешал восприятию информации.
Размеры и масштабы.
Профессиональный веб-дизайнер должен разбираться в принципах вёрстки. Важно помнить, что у разных пользователей разное разрешение экрана. Обычно сайты ориентируются на разрешение 1024 х 768. В то же время сайт должен корректно отображаться на больших разрешениях экрана, например 2560 х 1600 пикселей. Таким образом, оптимальный размер картинки дизайна составляет 950 х 1200 пикселей.
Многие дизайнеры предпочитают делать фиксированные по ширине сайты. Для наилучшего восприятия информации необходимо предусматривать возможность динамического расширения. Лучше всего «растягивать» в 3-х точках: по краям, создавая «бордюр» для предотвращения чрезмерного вытягивания текста и образования пустых «окон» на больших разрешениях экрана, и в информационном поле — для более корректного отображения информации (на средних и на больших разрешениях).
«Резиновый дизайн» создаётся тремя способами:
• Размножение отдельных участков изображения. Главный недостаток такого способа — «выпрямление» участков на которых осуществляется «растягивание». Таким образом затрудняется использование кривых линий и узоров.
• Создание графического оформления, изначально ориентированного на максимальное разрешение. На меньших разрешениях отображается только часть изображения. В этом случае увеличивается размер и «вес» изображений — повышается потребление трафика сайтом и сокращается скорость загрузки интернет-страниц. Не забывайте, что до сих порт не у всех пользователей «быстрый интернет».
• Центрование изображений оформления и заливка оставшегося пространства фоновым цветом или рисунком. В этом случае на больших разрешениях оформление сайта может выгядеть недостаточно выразительно. Более того, данный способ подходит только для отдельных случаев, в зависимости от общей дизайн-концепции сайта.
На практике при верстке чаще всего сочетают вышеперечисленные способы. Дизайнер обязан зараннее предусмотреть каким образом будет создан «эффект растягивания».
Главная и типовая.
Многие веб-дизайнеры допускают ошибку, когда не разделяют в дизайне главную и типовые страницы сайта. В то время задачи для разных типов страниц тоже разные:
• Главная страница — это своеобразная витрина сайта. Именно она задает стиль, подчеркивает направление деятельности компании. Хороший тон выделить на главной наиболее важную инфомацию: новости, основные направления деятельности, перечень разделов каталога и т. д. Задача «основной страницы» показать посетителю на какой сайт он попал и помочь максимально быстро перейти в раздел с интересующей информацией.
• Типовая страница содержит информацию. Её оформление должно быть направлено на наиболее комфортное восприятие информации.
Обычно главная страница более насыщена графикой, имеет более яркую и выразительную «шапку». В то время для информационных страниц лучше сократить обилие графики и сделать акцент на информационное наполнение.
Я часто сталкиваюсь с сайтами с огромными «шапками», не меняющимимся на протяжении всех страниц. Зачем они? Я уже понял чем занимается компания, теперь хочу прочитать подробную информацию. Но каждый раз мне приходится видеть одну и ту же «шапку» и «прокручивать» страницу. Подобная «забота» о посетителях вызывает только негатив.
Попытка компенсировать обилием графики скудное информационное наполнение — тоже не вариант. Сайт — это в первую очередь информация, а уже во-вторую «весёлые картинки».
Логотип и навигация.
Логотип — ссылка на главную страницу, базовые разделы и основные формы (поиск, регистрация авторизация) должны располагаться на одном и том же месте на всех страницах сайта. Категорически запрещается изменение местоположения основных элементов, их масштабирование и прочие преобразование. Подобные метаморфозы существенно ухудшают восприятие целостности сайта и заставляют пользователя тратить дополнительное время на поиск нужной ссылки.
Логотип, основные разделы и формы сайта лучше размещать наверху, таким образом, чтобы они были хорошо заметны. Дополнительные навигационные разделы рекомендую ставить слева на странице. Дело в том, что мы читаем слева направо. Таким образом информация, размещённая в правой части более заметна. Несмотря на то, что навигация очень важна, но её значение всё же меньше, чем значимость конкретной информации.
Не забывайте о том, что в ряде случаев на сайте могут отображаться и не отображаться отдельные формы. Например, что будет на месте формы авторизации после того, как пользователь «вошел» в систему?
Продумывайте топографику сайта, определите типы заголовков и возможные стили отображения текста. Не забывайте о том, что более важная информация должна быть выделена по сравнению с менее важной.
Ссылки на сайте могут иметь вид «ссылок» или «кнопок». Не забывайте, что надписи в ссылках всегда подчеркиваются. Надписи в кнопка не подчеркиваются никогда. Так же цвет ссылок должен отличаться от цвета основного текста, при этом не допускается использование ссылок разных цветов (за исключением отдельных случаев). Создавая кнопки необходимо прорисовывать 4 состояния: пассивное, активное, наведенное и нажатое.
Цвета.
По-возможности используйте цвета из «безопасной палитры «. Это позволит максимально корректно отображать цвета на различных мониторах, в различных операционных системах с различными браузерами.
Шрифты.
По-возможности старайтесь использовать только стандартные шрифты, которые установлены у большинства пользователей. Это: Arial (Black, Narrow), Century Gothic, Courier, Geogia, Impact, Sans Serif, Tahoma, Times New Roman, Verdana и некоторые другие. Если для заголовков допускается применение нестандартных шрифтов (в этом случае они верстаются картинками), то для отображения текстов можно использовать только шрифты из стандартного набора. Для лучшего восприятия информации используйте шрифты без засечек.
Конечно, данные принципы созданя дизайна сайта не являются исчерпывающими. Надеюсь, что данные рекомендации будут вам полезны при разработке дизайна. Конечно, из каждого правила всегда найдутся исключения. Не забывайте самое главное: дизайн сайта должен быть не только эстетически приятным, он должен быть информационным и функциональным.