Данная статья призвана формализовать отличительные и сходные моменты в процессе творчества двух направлений дизайна. Статья предназначена для дизайнеров полиграфической продукции (и смежных направлений), желающих получить навык дизайна интернет проектов. Это подразумевает, что читатели уже состоявшиеся дизайнеры в своем направлении. В статье раскрываются только основные (фундаментальные) вопросы, без рассмотрения конкретных примеров. Статья является личным мнением автора и не претендует на академичность изложения и исследования.
Общие цели
У обоих направлений дизайна есть общие цели, потому как это Дизайн, но только для разных сфер применения. В результате творчества должны быть эстетика, эргономичность, смысловая связанность и прочее. Приведу одно из определений Дизайна, которое больше всего подходит к дизайну интернет сайтов (далее. Дизайн сайтов):
Дизайн — творческий метод, процесс и результат художественно-технического проектирования промышленных изделий, их комплексов и систем, ориентированного на достижение наиболее полного соответствия создаваемых объектов и среды в целом возможностям и потребностям человека, как утилитарным, так и эстетическим.
Углубляться в тонкости целей и функций дизайна не буду. В этих общих определениях кроется главная мысль – оба направления дизайна имеют больше общего, нежели различного.
Частные различия
Отличительные особенности существуют по одной главной причине – это различные носители, материальная форма содержания (информации).
- Полиграфический дизайн. Основные носители: печатные материалы небольших размеров (от визитки, до больших чертежей) и рекламные конструкции (постеры, билборды);
- Дизайн сайтов. Основной носитель – дисплей компьютерных устройств (от персонального компьютера до платежного терминала).
Технические возможности и ограничения дисплеев электронных устройств, особенности использования определяют отличительные особенности в процессе и результате Дизайна сайтов.
Дополнительная причина различий – это другая культура и метод восприятия информации в сети интернет. Основная особенность этой культуры – очень ограниченное время отведенное пользователем для отдельных элементов, смысловых посланий, единиц информации. На практике, часто это беглое чтение анонсов, выдержек сообщений и только малый процент внимания на развернутой информации. В то время как на книги, журналы, рекламные буклеты пользователи изучают более спокойно, размеренно, затрачивая в итоге больше времени на единицу полезной информации.
Про общность и различия я изложил для понимания источника особенностей, так сказать «откуда ноги растут». Далее изложу основные моменты которые должен учитывать каждый дизайнер сайтов в работе.
«Габаритные» размеры макета сайта
Ширина и высота печатного макета измеряется в миллиметрах или дюймах, макеты сайта – в пикселях.
На свете очень много устройств с совершенно различными физическими размерами экрана. Но среди разнообразия экранов (устройств) выделяются сегодня выделяются три основных вида:
- Монитор персонального компьютера или ноутбука с размерами экрана от 10 до 34 и более дюймов (980px и больше для обычных дисплеев, 1200px и больше для широкоформатных больших);
- Планшетный компьютер от 5″ до 12″ (767px и меньше);
- Мобильный телефон или коммуникатор от 2″ до 5″ (480px и меньше).
В идеале дизайн для одного сайта должен включать три макета под каждый из трех видов экранов. В подавляющем большинстве сайт имеет прежде всего макет для персональных компьютеров. Есть продвинутые Фреймворки CSS и готовые наборы элементов дизайна для графических элементов которые помогают сделать так называемый «Адаптивный дизайн» который меняется в зависимости от типоразмера экрана пользователя. На практике это означает, например, что для мобильных устройств автоматически, меняются шрифты, размер изображений, и даже композиция элементов дизайна сайта!
В итоге размер экрана определяет ширину макета, в которой дизайнер пытается уместить элементы и блоки информации. Высота же макета в теории ни чем не ограничена, т.к. объемные страницы, не влезающие в ширину-высоту экрана можно показать через вертикальный «Скроллинг». Скроллинг почти как разворот в журнале, один макет на две и более страниц журнала. С правой стороны экрана браузера всегда появится полоса прокрутки, когда содержимое страницы не умещается в экран. Горизонтальная полоса прокрутки внизу сайта, вина проектировщиков или программистов, и является плохим тоном. Кроме случаев когда сайт имеет только горизонтальную прокрутку и это уместно для удобного просмотра. Например, как картины на стене в галерее, вы так же будете двигаться слева-направо по залу вдоль стены.
Высота сайта не ограничена, но есть условные ограничения «вежливости», не стоит делать «портянки» высотой в 3 и более экрана. Длинные тексты, не разбитые на страницы неудобно читать, это доказывает анализ проведения пользователей различных сайтов. Пользователь хочет получить ценную информацию в первой половине экрана, или хотя бы к его концу. Если пользователь не заинтересовался, дальше «скролить» он не будет и закроет страницу. Но данное правило не всегда работает в журнальных статьях и блогах. Все потому, что информация на этих страницах действительно уникальна и пользователь зная это не уходит на другие сайты за более «сжатым» вариантом. Для удобства пользователя длинный текст (контент) разбивают на страницы и добавляют навигацию по этим страницам (пагинация).
Резюме: варианты ширины макета для ПК 960, 1200 пикселей. Для мобильных устройств: 360, 720 пикселей. Высота «плавает» в зависимости от количества информации на каждой из страниц сайта. Желательно не превышать высоту в 2-3 экрана. При необходимости использовать «пагинацию».
Параметры шрифтов, пиктограмм, элементов управления
На свете много операционных систем и браузеров, да еще множество версий. Факт – все они по разному показывают один и тот же сайт. Больше всего проблем это доставляет верстальщику макета сайта. Но дизайнер призван учесть следующие моменты:
- Есть десяток шрифтов которые поддерживают все операционные системы. Начертание этих шрифтов удобно для пользователя (читателя) сайта. Их и нужно стараться использовать. Для основного текста желательно использовать шрифт без «зесечек». На практике можно использовать почти любой шрифт на сайте, но не у всех пользователей в компьютере будет этот шрифт или поддержка технологий и сайт будет выглядеть по другому;
- Только в крайних случаях используйте калиграфические шрифты;
- Не используйте более 3-4 шрифтов на странице (сайте);
- Если в интерфейсе сайта используются пиктограммы (иконки) – они должны верно передавать смысл даже без текста. Использование понятных пиктограмм экономит время пользователя. Например, ссылка на главную страницу общепринято изображается как значок «домика»;
- Элементы управления сайта экономят пространство упрощают взаимодействие пользователя с сайтом. Например действие “добавить” обозначаются символом “+”, удалить элемент значком “корзина” и т.д.
Резюме: перед началом работы следует знать перечень безопасных и рекомендуемых шрифтов для веб-дизана, желательно упрощать интерфейс сайта с помощь пиктограмм и элементов управления.
Оформление интерактивных элементов
Страница сайта всегда содержит интерактивные элементы в отличие от визитки или журнала. Ссылки, кнопки, элементы управления и прочие элементы взаимодействия с пользователем. Это главное отличие от статического макета для типографии. При разработке дизайна нужно предусмотреть, как будут меняться элементы страницы при взаимодействии с пользователем. Пользователь должен получать ответ на свои действия и получать ожидаемый результат – один из главных принципов «Юзабилити» сайтов. Основное значение – показать, что некоторые элементы сайта интерактивны, ждут действий пользователя и отвечают на эти действия.
Если на сайте не выделены интерактивные элементы и не предусмотрены их ответы на действия пользователя, это тоже самое, как если бы вы подошли к незнакомой двери, увидели 5 кнопок открывания двери, внешне одинаковые, и при нажатии на каждую кнопку – нет щелчка открывания замка. Вам непонятно как открыть дверь быстро и открылась ли она после нажатия на кнопку. Вывод – дверь «дурацкая» и вы пойдете искать другую дверь (сайт).
Пользователь может сделать следующие действия с интерактивными элементами:
- Наведение курсора на элемент. Результат: изменение цвета, появление рамки, увеличение размеров, подчеркивание текста.
- Клик по элементу (нажатие). Результат тот же, плюс возможно видоизменение информации на странице, переход на другую страницу, запус какого либо процесса (просмотр видео).
- Перетаскивание элемента. Результат: элемент перетаскивается на новое место, пододвигая другие элементы – изменяет положение. Перетаскиванием можно обозначить удаление элемента, перетаскивание в корзину или за пределы какой либо области.
Обычно дизайнер закончив макет страницы имеет несколько вариантов внешнего вида, на которых показано что будет происходить с интерактивными элементами страницы.
Резюме: Каждая ссылка и кнопка на сайте должны быть понятна пользователю и иметь несколько состояний: наведение курсора, нажатие. Результат последующий за действием пользователя должен быть ему ясен до совершения этого действия. Пример: переходя по ссылке заказать пользователь направляется на страницу «Заказ». Нажимая на миниатюру изображения пользователь получает увеличенный размер для подробного просмотра и т.д. Текст ссылки должен говорить о том куда ведет ссылка.
Композиция элементов макета
Страницы сайта состоят из нескольких основных элементов (блоков), блоков информации. Дизайнер обязан их отделить различными приемами и составить из них органичную композицию. Как упоминалось выше, особенности дизайна сайтов определяются тем что информация воспринимается с экрана. Центр внимания пользователя распространяется от левого верхнего угла экрана (если макет равномерно заполнен блоками).
Опытным путем было установлено, что пользователь большую часть внимания уделяет верхней части макета (экрана), далее вниз по левой части экрана, последняя точка внимания в правом нижнем углу. Дизайнер всегда может сделать макет, который будет иметь иной путь внимания и это мастерство.
Есть обязательные блоки в макете сайта: навигационный блок и блок контента. Первый – выполняет роль «Содержания» сайта, позволяет переходить от страницы к странице, показывает логическую структуру страниц как в книгах. Блок контента наполнен информацией которую создатель сайта пытается донести до пользователей. Это два основных блока, без которых многостраничный сайт не обойдется. Чем функциональнее и содержательней сайт – тем больше может быть дополнительных блоков информации и вариантов макета страниц одного сайта. Далее некоторые дополнительные блоки:
- Заголовок (шапка сайта). Самый первый и заметный блок, призван озаглавить весь сайт, дать понять о чем все содержание. В коммерческих проектах указываются контактные телефоны или инструменты заказа товаров.
- Дополнительное навигационное меню. Используется при сложных и многоуровневых структурах сайта, для облегчения навигации по соседним разделам, обозначения местонахождения пользователя на сайте. Располагается у левого края макета или под основным навигационным меню.
- Форма поиска. Как понятно из названия – это инструмент поиска информации по сайту. Бывает простой и сложный. Простой содержит поле запроса и кнопку “Найти”. Сложный поиск содержит дополнительные параметры: область поиска, временной период, имя автора, цена товара и т.д. Распологается там, где это удобно. В заголовке сайта, в левой колонке, в конце сайта (в подвале).
- Блок рекламных объявлений. Блок содержит рекламу других сайтов или разделов этого же сайта. Позволяет направить поток пользователей на определенные страницы сайта, например для продажи товара по акции. Местоположение определяется степенью «рекламной агрессивности» создателей сайта. Самые заметные и в тоже время раздражающие места для рекламы: Заголовок сайта, непосредственно в тексте страницы (содержательной части), в конце текста страницы. Вообще рекламу желательно расположить в ненавязчивом месте, где то по краям от центральной содержательной части, но при рекламные места теряют свою эффективность.
- Формы отправки данных. Служат ввода какой либо информации на сайт, отправку файлов. Вариантов полей форм, элементов управления данными огромное множество. Чаще всего такие формы располагают в блоке контента. Корзина заказа, личный кабинет пользователя, страница контактных данных и тд., практически всегда содержат какие либо формы отправки данных.
- Нижний колонтитул сайта (подвал, футер). Последний, нижний блок сайта. Здесь часто располагается правовая информация,указывается владелец сайта, контактные данные, ссылка на разработчиков сайта, список партнеров и т.д.
Применение сеток макетирования
В дизайне сайтов часто удобно применять сетки для облегчения верстки макета по «газетному» типу. На практике это означает разделение страницы по ширине на N-ое столбцов и пробелов межу ними. Для сайтов есть несколько таких проверенных сеток на 12, 16 и 24 столбца. Сетка упорядочивает выравнивание блоков по горизонтали, сайт выглядит органичным. Блок занимает N-ое количество целых столбцов, с точностью до пикселя. Раз высота страниц сайта различная, то по вертикали (высоте) ни каких сеток не применяется. Высоту различных блоков дизайнер определяет сам (можно применять пропорции 4:3, золотое сечение и пр.).
Резюме: Макетные сетки экономят время.
Правила хорошего тона в создании макета сайта
После того, как макет сверстан и утвержден за работу принимается верстальщик сайта. В общем смысле, верстальщик нарезает макет на отдельные картинки и перемешивает его с программным кодом. Программный код обрабатывается браузером и на выходе получается набор страниц текста с картинками, ссылками и кнопками – «сайт оживает». Что бы сверстать сайт по макету, дизайнер должен выполнить ряд технических правил при работе в графических пакетах (Photoshop, Fireworks, Paint и прочих):
- Текст и задний фон (кнопок, картинок, навигационного меню и тд.) должен быть на отдельных слоях, без слияния;
- Если необходимо использовать не стандартные шрифты, используйте из набора Google Fonts;
- Выполняйте остальные Правила хорошего тона в «Фотошопе»;
- Обсуждайте с верстальщиком элементы макета на предмет реальности HTML верстки.