С чего начинается сайт. Дизайн
Всем привет! Прошлый раз мы выяснили, с чего начинается работа над сайтом (а также над многими другими интернет-ресурсами) – с проектирования. И рассмотрели одну из ведущих программ, которая позволяет создавать интерактивные прототипы – Axure RP 9. Тема сегодняшнего поста – как превратить качественный проект в качественный дизайн.
От прототипа к дизайну
Напомню основные тезисы о прототипе:
- Прототип — план/проект сайта/страницы сайта, отражающий структуру. Он даёт ответ на вопросы: что есть на странице, зачем это, где расположено и как работает.
2. На этапе прототипирования визуальная составляющая не играет большой роли. Основное внимание - структуре и функциям проекта.
3. На прототипах с шрифтами и цветом элементов не балуемся, чем меньше каких-то визуальных штучек, тем больше будет у дизайнера свободы самовыражения.
4. Все размеры и формы либо стандартные, либо взятые из фирменного стиля заказчика, если таковой имеется.
5. Контент на прототипе примерный, точное содержимое фото и текста значения не имеют
По своей сути этап дизайна заключается в «раскраске» прототипа и приведении его в вид красивого графического макета, с учетом брендбука заказчика (его фирменных шрифтов, цветов и т.д.). Ниже картинка для понимания разницы между прототипом, эскизом и финальным вариантом дизайна.
Дизайн сайта в программе Photoshop
Рассмотрим создание дизайна в программе Photoshop CC 2019. Открываем программу и создаём пустую страницу. При этом задаем нужные высоту и ширину макета, учитывая эти данные, глядя на прототип.
После создания документа на чистом листе ставим направляющие, которые помогут нам работать в определенных рамках макета. Выделяем место под шапку, футер и контент. В зависимости от прототипа ограничиваем эти области на макете.
Как только мы задали все параметры, которые утверждены на этапе прототипирования – всё оказывается в руках дизайнера, его понимания задачи и попадания во вкус заказчика. Тут можно смело играть цветами, а при отсутствии брендбука – шрифтами, формами и прочими визуальными элементами дизайна. Ниже показан результат работы – адаптивный дизайн главной страницы сайта в обрамлении направляющих и интерфейса Photoshop.
И снова у внимательного читателя возникает вопрос – почему же не нарисовать это всё в программе Paint? Оказывается, в программе Photoshop делать дизайн сайтов удобнее из-за наличия слоёв, то есть всё изображение строится послойно: сначала фон, сверху большие элементы, выше мелкие. Для работы с этим инструментом на изображении ниже показан интерфейс, позволяющий работать со слоями. Заметьте, что элементы, логически объединенные в дизайне, зачастую помещают в папки: на примере это папки «подвал» «меню» и так далее.
В примере на верхнем изображении показана возможность раскрывать папки и работать с каждым помещенным в них элементом, кроме того можно скрыть папку целиком или один из слоёв внутри неё. Это показано на примере папки «выпадающее меню». Если же мы отобразим эту папку, поставив напротив неё значок глаза, то увидим скрытые ранее элементы, смотрите изображение ниже.
Основные инструменты, которые используются в работе над макетом сайта: слои и папки, текст, заливка и градиент, выделение, штамп, пипетка, кисть. Для каждой задачи инструменты могут отличаться, кроме того разные дизайнеры могут иметь свой набор любимых инструментов. Ниже показаны примеры различных дизайнов от разных исполнителей. Можно заметить различную работы с папками, их структурой и разбитием слоёв по ним.
Кроме привычного вида дизайна сайта для десктопных мониторов, есть варианты дизайна для планшетов и мобильных телефонов. Отличаются они тем, что в них учитывается удобство работы для пользователя того или иного устройства. Если ранее делался отдельно сайт для каждого устройства, сейчас повсеместно применяется технология адаптивной верстки, соответственно и дизайн рисуется так, чтобы он мог достаточно легко адаптироваться под любые устройства. Ниже наглядный пример такого дизайна. В мобильном варианте сразу виден вертикально ориентированный интерфейс + удобство для нажимания пальцем. Слева десктопный вариант, справа – мобильный.
В чём же заключается особенность адаптивных дизайнов? В целом в том, чтобы быть удобными на любом устройстве и подстраиваться под разрешение экрана. Зачастую для этого мобильный вид делается в колонку. То есть десктопный вариант должен иметь такую структуру, чтобы это было возможно. Самый простой и часто используемый приём – разбитие на колонки контента дизайна для монитора. На примере выше видно, как удобно в колонку складывается горизонтальная строка «как работает система глонасс», перечень новостей, лого партнеров.
Подводя итог сегодняшнему посту, остановлюсь на основных тезисах:
- Дизайн сайта – это прототип в цвете.
2. Ограничения для дизайнера – брендбук заказчика, рамки утвержденного прототипа, ТЗ и фантазия
3. Результат должен быть адаптивным – то есть при вёрстке должна быть возможность сделать удобный вертикальный пальцеориентированный интерфейс.
Собственно, и всё. В следующий раз – о том, как превратить картинку в страницу, на которой можно всё нажимать. Ещё это иногда называют вёрстка сайта.