Сегодня я хочу представить вашему вниманию инструкцию по разработке дизайн-макета для сайта. Так как разработка дизайна веб-страниц – это достаточно сложный процесс, то сразу должен отметить, что данный материал ориентирован на людей, имеющих хотя бы базовые навыки работы с графикой и специализированными программными пакетами. Исходная версия этого «гида» была разработана мной почти 10 лет назад для обучения непрофильных дизайнеров нюансам веб-разработки. Сегодня облик сайтов несколько изменился, и я внес некоторые правки в исходный текст, чтобы материал полностью соответствовал современным тенденциям веб-дизайна.
Если разработка дизайн-макета слишком сложное для вас занятие, то рекомендую ознакомиться со статьей «Инструкция по выбору платной темы для сайта», в которой я подробно рассказываю о том, как правильно выбрать уже готовый дизайн для сайта.
1. Структура веб-страницы
Любой дизайн сайта (макет HTML-страницы) состоит из нескольких элементов, каждый из которых выполняет определённую функцию или несет смысловую нагрузку.
1.1. Header
Верхняя часть сайта, которая, как правило, бывает неизменной на всех страницах, называется «Header» или «шапка». «Header» может иметь как исключительно декоративное значение, так и содержать функциональные элементы веб-страницы. Сегодня хорошим тоном в веб-дизайне считается эффективное использование пространства, с уверенностью можно сказать, что в моде «функционализм». Поэтому дизайнеры нередко используют «шапку» сайта не только для размещения в ней логотипа компании и запоминающегося коллажа, но и интегрируют в неё функциональные элементы веб-страницы. В сети Интернет можно увидеть проекты, в шапку которых эргономично вписаны элементы навигации, блок «корзины запросов», рекламный блок или блок «горячих предложения» и т.д. Вариантов может быть очень много, здесь всё зависит от задач проекта и выбранной дизайн-концепции. Конечно, вёрстка подобных макетов потребует определённых навыков и знаний «фронт-энд» программирования, но нашей задачей сейчас является разработать именно макет страницы, а не сверстать его.
1.2. Footer
Нижняя часть сайта или «Footer» (иногда можно встретить термин «подвал») практически всегда имеет «стандартный», т.е. неизменный вид для всех страниц сайта. Исключением могут быть только те случаи, когда разное оформление «футера» является частью дизайн-концепции. Также, необходимо отметить, что в настоящий момент мы говорим о «стандартных» решениях оформления страниц сайта, не рассматривая «нестандартные» концепции дизайна, которые ограничены только фантазией дизайнера и особенностями тех или иных технологий.
Как правило, «подвал» содержит информацию об авторских правах, ссылку на сайт разработчика проекта, контактную информацию. Здесь также размещают «информеры» сервисов онлайн-статистики. В последнее время часто можно встретить большие (т.е. «высокие») блоки «Footer» на современных сайтах, иногда они могут быть значительно больше «Header». Эта мода появилась из-за широкого распространения личных и корпоративных блогов и новостных ресурсов, где в нижней части страницы размещают дополнительные информационные блоки, цель которых – завлечь посетителя на другие страницы ресурса. Это может быть небольшая «лента» с заголовками и иллюстрациями самых популярных и/или комментируемых статей, облако тегов, «слайдер» иллюстраций и т.д.
1.3. Контентная зона
В центральной части сайта, между блоками Header и Footer находится «контентная зона» сайта. В большинстве случаев контентная зона бывает разделена на две и более колонок. Как бы не разбивалась эта зона, всегда самую широкую колонку будет занимать «основной контентный блок», в который помещают основное содержание страницы сайта. В остальных колонках (если их несколько) располагаются дополнительные информационные блоки, такие как «блок новостной ленты», «календарь событий», «корзина покупок» и т.д.
Следует отметить, что ширина колонки (или колонок), содержащая дополнительные блоки, должна быть достаточной, чтобы в неё мог помещаться рекламный блок шириной в 240 пикселей, не нарушая и не искажая основной дизайн сайта и оформление колонок, если таковое имеется. Безусловно, этому правилу можно не следовать, если вы не собираетесь размещать на сайте рекламные модули подобного формата или рекламу вообще.
Состав и расположение дополнительных информационных блоков может быть, как одинаковым на всех страницах сайта, так и совершенно разным. Здесь всё зависит от функциональной нагрузки отдельно взятой страницы сайта, концепции и назначения проекта, а также, индивидуального дизайн-решения.
2. Основные требования к дизайн-макету
2.1. Какой сайт делать – «резиновый» или «фиксированный»?
При разработке дизайн-концепции сайта необходимо учитывать, что сегодня существует немало устройств с совершенно разными разрешениями. Поэтому «канонически» существует две концепции верстки – «резиновая» и «фиксированная». И если со второй всё предельно ясно – это сайт, ширина рабочей области которого всегда имеет одну ширину, а «подстройка» под разрешение пользователя осуществляется за счет фона, на котором размещается эта «рабочая область». А фон этот, в свою очередь, занимает большее пространство на большом разрешении и меньшее на маленьком.
То вторую концепцию требуется рассмотреть более детально. Под «резиновым» сайтом подразумевается такой сайт, дизайн которого всегда занимает 100% полезного пространства интернет-браузера по ширине. И раньше, до выхода HTML5 и широкого распространения CSS3, существовала серьёзная проблема масштабирования графических элементов. И дизайнеру необходимо было заранее учесть эту проблему. Чтобы наглядно описать этот технический нюанс давайте представим, что у вас есть сайт, в шапке которого находится некий коллаж шириной в 1024 пикселя, который задан фоном блока «header».
Картинка заливалась на фон блока или ячейки таблицы для того, чтобы при открытии сайта на экране с меньшим разрешением, коллаж, размещенный в шапке не препятствовал перекомпоновке «скелета». Если картинка будет размещена прямо в ячейке, то при перекомпоновке макета она ограничит своей шириной минимальный размер ячейки, в которую вложена.
При отображении сайта на маленьком разрешении экрана картинка фона при перекомпоновке страницы срезается справа. Это не просто может испортить композицию, но и полностью лишить её смысла, так как пользователь не будет видеть часть изображения. В случае же, когда разрешение экрана посетителя будет выше, чем ширина нашего изображения, то он увидит кусок пустого фона справа, если изображение центрировано по левому краю.
Подобные «косяки» недопустимы, так как превращают сайт в непрофессиональную «поделку». И чтобы их избежать, раньше дизайнерам приходилось идти на разные уловки. Два самых простых выхода. Первый – это использование изображения шириной большей, чем самое «высокое» разрешение экрана. Сейчас данный метод осложнился бы появлением «Retina» и дисплеев со сверхвысоким разрешением, но в принципе, он возможен и сегодня. Второй, более элегантный, – это создание использования «цикличного» изображения, которое, как «цикличный» фон может стыковаться по левому и правому краям, создавая при этом бесконечную картинку. Должен отметить, что существует и более сложные «комбинированные» решения – в этом случае одно изображение используется в качестве фона, а другие накладываются отдельным слоем поверх, и размещаются в прозрачных блоках или ячейках таблицы с динамически изменяемой шириной, указанной в процентах. При этом при открытии сайта на маленьком разрешении пространство между объектами будет уменьшаться, а при открытии на большом – наоборот увеличиваться. Чтобы вы могли ярко всё это представить, приведу такой пример. Допустим, мы хотим разместить в шапке сайта улицу, с едущими по ней машинами. В этом случае мы делаем «цикличную» фоновую картинку с самой улицей, которая является «бесконечным» бэкраундом, а поверх размещаем невидимую конструкцию из блоков или таблицу, где в каждый блок или ячейку мы помещаем картинку автомобиля на прозрачном фоне. И при открытии на большом разрешении пространство между автомобилями будет увеличиваться, а на маленьком – уменьшаться.
Всё это был скорее экскурс в историю, так как современные технологии верстки и постоянно развивающиеся браузеры позволяют нам масштабировать графику без каких-либо ограничений. Поэтому выбор между «резиновым» и «фиксированным» дизайном носит исключительно эстетический характер, а правилом хорошего тона сейчас является «адаптивный» дизайн. Где используются самые передовые методы верстки, позволяющие в буквальном смысле «перестроить» любой дизайн под разрешение экрана пользователя, каким бы оно ни было.
2.2. Выбор цветовой схемы
Одним из самых важных аспектов при разработке дизайна сайта является выбор цветовой схемы. Для выбора общей цветовой гаммы обычно рекомендуют выбирать цвета, относящиеся к одной группе по их восприятию, т.е. «теплые и заманчивые», «спокойные и прохладные» или «бодрые и энергичные».
При оформлении веб-страницы следует уделить должное внимание выбору фона.
Общий фон документа должен быть нейтральным, полностью вписываться в дизайн-концепцию и гармонировать с ней. Очень важно, чтобы фон документа не отвлекал внимание посетителя сайта от контента страницы. При оформлении основного фона страницы допустимо использование текстурных подложек, но не используйте их в качестве фона для текста – это серьезно снизит комфорт при его чтении.
Фон, на котором располагается текст, должен контрастировать с цветом шрифта, но не должен «резать глаз» и раздражать читателя!
Ни для кого не секрет, что пользователь редко читает текст, а если и читает, то «по-диагонали», именно поэтому чтение должно быть как можно комфортнее. Чем удачнее вы подберёте цветовую комбинацию шрифта и фона текстового блока, а также расположение информации на странице и размер шрифта основного текста, тем больше вероятность того, что текст будет прочитан.
Обязательно оставляйте достаточно пустого пространства в тексте, это снижает напряжение при чтении и даёт возможность глазам отдохнуть. Если текст можно разделить на абзацы – обязательно делайте между ними пустые строки! Межстрочный интервал должен быть больше единицы.
Самая важная информация на сайте должна быть выделена таким образом, чтобы за неё обязательно «цеплялся глаз». Текст, несущий разную смысловую или функциональную нагрузку, должен отличаться внешне, например, заголовок статьи и основной текст или основной текст и ссылка и т.д.
Если вам не удаётся самим подобрать хорошо сочетаемые цвета, то я настоятельно рекомендую посетить сайт www.colourlovers.com, на котором дизайнеры размещают готовые цветовые схемы, и вы легко сможете подобрать подходящее для вас сочетание цветов.
2.3. Использование шрифтов
Безусловно, основной миссией сайта является донесение информации до той или иной группы пользователей. А самая важная составляющая любого сайта – это его контент!
Сам контент всегда состоит из текста и графики, реже – анимации, видео и других интерактивных элементов. И если мы хотим что-то сообщить пользователю, то так или иначе, должны оставить текстовое сообщение. Из чего следует, что текст является основной составляющей каждого сайта! Поэтому, при разработке дизайн-макета сайта нужно всегда уделять должное внимание шрифтам.
«Хорошим тоном» в веб-дизайне считается использование не более чем двух типов шрифтов. Использование большего количества шрифтов допустимо только в исключительных случаях и только тогда, когда их использование является частью самой дизайн-концепции. К сожалению, многие веб-дизайнеры забывают о том, что сайт это ни что иное, как интерактивное печатное издание, и здесь действуют те же правила, что и при типографском оформлении. А правила эти сформировались не за один год и даже не за один век!
Для отображения текстовой информации на страницах сайта обычно используют стандартные шрифты, которые поддерживаются во всех браузерах и операционных системах.
В библиотеке каскадных стилей (CSS), которая отвечает за интерпретацию данных браузером, все стандартные шрифты объединены в семейства (группы) по внешним признакам.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов в одном семействе увеличивают вероятность, что хотя бы один из них будет обнаружен на компьютере посетителя. Заканчивают список обычно ключевым словом, которое описывает тип шрифта – serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Пример: div.classname { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif }
Нюансы интерпретации CSS, т.е. корректность отображения шрифтов на страницах сайта, зависят от операционной системы и браузера, используемых пользователем.
Наиболее популярными шрифтами являются: Arial, Verdana, Times New Roman.
Использование нестандартных шрифтов для отображения основного текста на страницах сайта тоже вполне возможно. Для этого необходимо осуществить подгрузку нужного шрифта в систему пользователя и обеспечить корректную их обработку используемым им браузером. Если у вас нет возможности (например, проблемы с лицензией) или навыков и знаний как это реализовать, то всегда можно использовать изображение вместо текста. Конечно, это весьма неуклюжее и давно устаревшее решение, которое применимо только к элементам меню и заголовкам стандартных информационных блоков. Но всё же и его я должен упомянуть в этой статье.
Я рекомендую использовать нестандартные шрифты только для оформления заголовков и пунктов меню, во всех остальных случаях я стараюсь использовать стандартные. Отдельно хочу упомянуть о том, что шрифты являются объектом интеллектуальной собственности и прежде, чем использовать шрифт, необходимо узнать, не является ли он коммерческим. В этом случае вам потребуется приобрести лицензию на его использование в сети интернет. Хочу обратить ваше внимание на то, что лицензия на использование шрифта на вашем компьютере и лицензия на использование его сайте – это совершенно разные вещи. Постарайтесь выяснить подобные нюансы, перед использованием какого-то нестандартного шрифта в своём дизайн-макете.
Так, чтобы облегчить себе жизнь, вы можете использовать бесплатные шрифты от Google, которые вы можете найти тут (http://www.google.com/fonts) или воспользоваться сайтом www.fontsquirrel.com. Если вы все-таки решили приобрести лицензионный шрифт, то хочу порекомендовать вам несколько ресурсов – www.Myfonts.com, www.Fonts.com, www.FontShop.com и www.Linotype.com.
Постарайтесь не забыть самое главное – шрифт должен быть читабельным!
Так, чтобы облегчить себе жизнь, вы можете использовать бесплатные шрифты от Google, которые вы можете найти тут или воспользоваться сайтом www.fontsquirrel.com. Если вы все-таки решили приобрести лицензионнй шрифт, то хочу порекомендовать вам несколько ресурсов – www.Myfonts.com, www.Fonts.com, www.FontShop.com и www.Linotype.com.
Постарайтесь не забыть самое главное – шрифт должен быть читабельным!
3. Правила оформления основных элементов сайта
3.1. Организация навигационного меню сайта
Навигационное меню – один из важнейших элементов сайта, так как панель навигации является основным инструментом при перемещении пользователя по разделам или страницам ресурса. Кроме того, у навигационного меню есть и другая функция, о которой нередко забывают дизайнеры – сформировать у пользователя общее представление о структуре сайта, на основе которого у посетителя будет складывается первое впечатление о самом проекте и его актуальности.
Существует множество вариантов организации навигации на сайте. Говорить о самых элементарных решениях для несложных сайтов с ограниченным количеством страниц не имеет особого смысла, поэтому мы сразу перейдём к освещению проблемы организации навигационной панели для крупных проектов. Здесь разработчикам приходится находить компромисс между информативностью навигационного блока и объёмом пространства, занимаемого им. Часто на крупных информационных ресурсах или корпоративных сайтах с разветвленной структурой практически невозможно вывести подробное навигационное меню, не пожертвовав значительным участком пространства на странице. На сегодняшний день, у разработчиков сайтов в инструментарии есть несколько «стандартных решений», позволяющих обойти вышеописанную проблему:
- Разделение навигационного блока на логические составляющие
Навигационное меню может быть разделено на два отдельно стоящих блока. Это «основной навигационный блок», с помощью которого осуществляется перемещение пользователя по основным разделам сайта, и «дополнительный навигационный блок», который позволяет пользователю перемещаться по подразделам текущего раздела сайта. Эти навигационные блоки (меню) должны быть разделены логически, и могут иметь разное оформление, если это допускает дизайн-концепция.
В редких случаях допускается использование нескольких блоков навигационного меню, пункты которых находятся «на одном уровне вложенности» относительно главной страницы сайта. Данное решение, как правило, требует «сквозного размещения» навигационных блоков на всех страницах сайта, а сами блоки должны содержать идентичную структуру с неизменным содержанием (пункты меню). А само разделение должно иметь под собой логическое обоснование. Ярким примером такого решения является рубрикатор статей на сайте, который сам по себе занимает достаточно большое пространство и не может быть «вписан» в основное меню сайта, как с технической точки зрения, так и с точки зрения логики. - Разворачивающиеся списки
В данном случае навигационное меню представляет собой сокращённую карту сайта («дерево сайта»), на котором отображены основные рубрики проекта, где при клике мышью по нужной рубрике под ней разворачивается список дочерних объектов, т.е. вложенных в этот раздел подразделов. Как правило, такая навигационная панель имеет вид рубрикатора. - Динамические блоки
Нередко на сайтах можно встретить и другое, не менее интересное решение, когда навигационная панель имеет достаточно простой и скромный вид, но при наведении курсора на любой пункт меню под ним разворачивается список с дополнительными пунктами. При перемещении курсора на другой пункт основной панели старый список исчезает, а под текущим пунктом меню разворачивается новый, соответствующий выбранному разделу. В этом случае пункты основного меню состоят из корневых рубрик проекта, а в динамических списках отображаются подрубрики каждого из пунктов меню.
Такое решение очень удобно, если одни разделы сайта имеют большое количество вложений, а другие не имеют их и вовсе.
Пункты меню, находящиеся в динамических списках, могут иметь, в свою очередь, свои «вложенные объекты». Таким образом, можно говорить о допустимости формирования N-мерных динамических списков, если они не нарушают эстетичности вида сайта и не ухудшают юзабилити проекта. Сегодня такой вид меню является самым популярным и имеет самый огромный потенциал в развитии.
Оформление навигационных блоков может быть каким угодно, здесь всё зависит от общей дизайн-концепции проекта и воображения дизайнера, но самое главное, чтобы навигация по сайту была удобной и доступной для понимания пользователя, другими словами, полностью соответствовала своей функции!
3.2. Информационные блоки сайта
Все дополнительные информационные блоки сайта должны иметь единое стилевое оформление. Основной контентный блок может быть оформлен идентично дополнительным блокам, но может иметь и своё собственное графическое оформление, если оно не нарушает целостность дизайн-концепции сайта. Подложки («плашки») заголовков информационных блоков, включая и основной контентный блок, и их подписи могут иметь отличные друг от друга цветовые решения, но только в тех случаях, если это необходимо и допустимо с точки зрения общей дизайн-концепции. Это касается и фона, и/или подложки основного текста, находящегося в дополнительных блоках. Но, в любом случае, все вышеупомянутые элементы должны иметь идентичный вид и единый стиль.
Для оформления текста в дополнительных информационных блоках должен быть использован один тип шрифта и кегля, в соответствии с каждым видом объекта (заголовок, ссылка, основной текст и т.д.). При оформлении основного контентного блока допускается использование набора шрифтов и других элементов оформления, отличного от оформления дополнительных информационных блоков. Также, в редких случаях допустимо создание подобного «уникального» комплекта атрибутов дизайна для одного из дополнительных блоков, если требуется обособить и/или выделить его на фоне других составляющих сайта. Это допустимо только в тех случаях, когда он несет особую смысловую или функциональную нагрузку (например, «корзина» на сайте интернет-магазина).
4. Разработка комплекта дизайн-макетов для страниц сайта
Для передачи дизайн-макета на вёрстку необходимо подготовить некоторую серию дизайн-макетов, которая бы отражала целиком и полностью оформление всех типовых страниц сайта и охватывала все элементы веб-страниц проекта. Все скриншоты должны содержать образцы контента (т.е. содержимое страниц). Совсем необязательно вставлять в макет актуальное содержание рабочего сайта, здесь важно не «заполненность» сайта, а оформление текстовых блоков на страницах. То есть, шрифты текстовых блоков, их цвета и размеры с учётом всех допустимых на сайте типов текстовой информации (основной текст, заголовки, ссылки). Это касается и графических элементов в контентной области.
Верстальщик заранее должен знать, какие элементы контента будут на каждой типовой странице сайта, чтобы корректно задать оформление нужных классов и типов контента.
- Главная страница сайта
- Типовая страница «статичного» раздела (Например, «О компании»)
- Типовая страница «динамического» раздела, содержащая список материалов или их анонсов (Например, вывод заголовков статей в разделе «Статьи» или «лента» в блоге)
- Типовая «конечная» страница «динамического» раздела (Например, публикация из раздела «Статьи»)
- Страница с наглядным выводом рубрик для каталога продукции, если для этого не используется сложное меню или основной контентный блок на главной странице сайта
- Типовая страница рубрики/подрубрики каталога продукции
- Типовая конечная страница продукта или услуги
- Страница оформления «корзины» покупок, если это интернет-магазин
- Страница контактов, если она имеет особое оформление или содержит элементы, требующие дополнительной работы дизайнера (Например, карта с маршрутом, проложенным от ближайшего транспортного узла и ориентира)
Также хочу отметить, что на плечи дизайнера ложится не только проработка общей концепции дизайна, но и стилистическое оформление основных элементов контента, которым относится ссылки в контенте, списки, цитаты, таблицы, изображения и прочие элементы, которые могут содержаться в материалах сайта.
(голосов - 15, средний балл: 7,00 из 7)Поделиться
