От автора: приветствую тебя, дорогой читатель! В этой статье я предлагаю рассмотреть основы веб-дизайна, а точнее, главные блоки сайта. Внешняя красота играет важнейшую роль при разработке макета, однако, про юзабилити забывать также не стоит. Следуя перечисленным ниже советам, вы научитесь создавать не только красивые сайты, но и удобные.
Настоящий мастер веб-дизайна 2.0 должен уметь удивлять людей нестандартным мышлением и креативным подходом к решению поставленных задач. Тем не менее, это не значит, что нужно совать на фон сайта летающих драконов, чтобы привлечь внимание пользователей.
Люди заходят на сайт не затем, чтобы лицезреть дизайнерские мазки на холсте, а за контентом. Следовательно, ваши мысли целиком и полностью должны быть направлены на разработку грамотного юзабилити. Основы успешного web-дизайна — это удобство и эстетика. Пока эта идея не пронзит ваше сердце как стрела Купидона, любовь хорошего заказчика, увы, не найти.
Если вы уже давно варитесь в карьере веб-дизайнера, то наверняка знаете о том, что одну из важнейших ролей при создании удобного сайта играет грамотное оформление блоков (модулей). Они представляют собой структурные элементы интернет-страницы. Стандартная модульная сетка состоит из навигационного меню, шапки (header), основной информационной зоны (content) и подвала (footer).
Шапка (header)
Шапка считается одним из главных элементов на сайте, благодаря которому он запоминается пользователям. Зачастую веб-дизайнеры стремятся вложить весь творческий поток именно в эту зону, базируясь на красивых изображениях, которые не имеют никакого отношения к тематике проекта.
Вы наверняка встречали различные фоны страниц в виде галактик, голубого облачного неба, травы или всевозможных абстракций. Подобные решения уже считаются штампом, который является признаком безвкусицы. Можно создать привлекательную и эффективную, с точки зрения пользы, шапку даже без использования каких-либо изображений. Рассмотрим мои слова на примере довольно простого шаблона.
Первым делом необходимо убрать неуместный фоновый рисунок в виде травы.
Уже можно заметить, насколько за счет простого действия увеличилась зрительная фокусировка на основном контентном блоке сайта. В этом и заключаются основы веб-дизайна. Ищите простые решения, а не сложные.
Шапка не должна занимать слишком много места, чтобы пользователю не пришлось тратить дополнительное время и нервы на постоянное прокручивание вниз во время перехода на новую страницу. К слову говоря, даже разработчики популярных браузеров решились на отмену большого количества опций в верхнем блоке, чтобы обеспечить людям более комфортные условия для работы. Шапка должна быть настолько высокой, чтобы она не теснила логотип. Зачастую 120-ти пикселей вполне достаточно.
После того как мы убрали нелепый травянистый фон, следует укоротить шапку. Логотип мы помещаем в более подходящую форму, чтобы сохранить дополнительное место. Кстати, старайтесь избегать круглых и кривых элементов на своем сайте. Редко встречаются случаи, когда они гармонично бы смотрелись. Мы используем прямоугольные мониторы, поэтому соответствующего типа блоки будут выглядеть на порядок уместней. Округлить рекомендую лишь углы.
После удаления бэкграунда фон стал слишком темным. Этот вариант нам тоже не подходит, ведь мы не забываем про важный пункт основ веб-дизайна — эстетику. Подобный фон будет давить на психику пользователей, поэтому его заменяем на более светлый вариант.
Чтобы шапка не выглядела пустой, дополним свободное место слоганом компании и номерами телефонов.
Также можно добавить форму регистрации и входа на сайт, рекламный баннер и т. д. Тут уже все зависит от ваших предпочтений и требований заказчика.
Информационный блок (content)
Исходя из основ web-дизайна, контентный блок каждого сайта должен предполагать определенную структуру. Однако многие из существующих в интернете сайтов были разработаны людьми, далекими от этого направления. Такие онлайн-ресурсы зачастую представляют собой водопады нечитабельного текста, разбавленного графическими изображениями, которые никто не планирует даже выравнивать по одной стороне.
Ключевые принципы построения контента примерно схожи с основами создания дизайна для сайта: текстовая страница должна быть гармонично сверстана и структурирована. Также важно выделить ее ключевые детали (заголовок, подзаголовок и т. д.).
Разбивайте тексты на абзацы. Подобное решение поспособствует более мягкому восприятию информации. Причем, старайтесь структурировать текст таким образом, чтобы каждый из абзацев имел в своем составе не более 6 строк. Не перегибайте с количеством изображением. Они должны лишь плавно дополнять текст в тех моментах, когда необходима визуализация. Не забывайте выравнивать картинки и подгонять под единый размер.
Не делайте текстовые строки слишком длинными. Что я (и, скорей всего, не только я) ненавижу в различных информационных сайтах вроде Википедии, так это растяжение контента на всю страницу. У меня обычно не выходит читать там что-то более 2 минут. Другие посетители также особо не задерживаются на подобных ресурсах, а быстро хватают нужную информацию и бегут оттуда. Я считаю, что блоги становятся с каждым днем популярней именно благодаря эстетичному структурированию контента.
Подвал (footer)
Зачастую этой зоне не уделяется должного внимания, а зря, ведь футер и шапку сайта можно представить в виде обложки книги: в принципе без нее можно обойтись, однако отношение читателя к материалу будет уже совсем другим. С идеологической составляющей подвала, я думаю, мы разобрались. Перейдем к тому, что нужно размещать на этом участке сайта.
И без футера посетитель поймет, где заканчивается страница. Тем не менее, визуальный акцент поставить необходимо, дескать: «Все господа, концерт окончен, колесико не крутим». В подвальной зоне можно заявить о том, что материалы сайта разрешено копировать только с письменного согласия компании/редакции/автора или кто вы там.
Также в футер следует добавить контактную информацию и другие полезные пользователю дополнения, например, продублированное меню навигации, чтобы человек мог перескочить на другой раздел без пролистывания страницы вверх.
Надеюсь, что сегодняшняя статья была вам полезна, и вы продвинулись еще на одну ступенечку вверх в постижении основ дизайна сайтов. Подписывайтесь на блог и делитесь ссылкой на него с друзьями, ведь совсем скоро выйдет еще множество ценного, интересного контента.
У меня все, до новых встреч!
