Недавно выполнил редизайн страницы музея "Эрмитаж". Вместе с ним отрисовал логотип, но это уже было мои желанием. Это тестовое задание от веб-студии, мне дали полную свободу визуального выбора (шрифты, картинки, стиль и тп.). Как вы уже поняли я выбрал ретро стиль. Этому поспособствовала череда событий: я начал читать старую книгу о дизайне, я начал слушать американскую музыку 60-х и поставил на обои ретро-картинку.
Основная атрибутика ретро-стиля в веб-дизайне.
Веб-дизайн сам по себе достаточно новая сфера деятельности и ретро стиль пошёл не от корней визуального дизайна. Это скорее выражение винтажности по воле художника. Сейчас расскажу подробнее, существует несколько принципов ретро:
Приглушённые цвета. Поскольку ретро по своей сути копирует время, в которое не существовало ярких и насыщенных красок, можно сказать, что это чуть-ли не самый важный атрибут любого ретро в веб-дизайне.
Иллюстрации, инфографика и доп.элементы. Когда я изучал тему ретро в вебе, то не раз натыкался на суперкрасивые сайты, но в основном это было из-за ретрографики (графики в стиле ретро), иллюстрации и картинки в стиле ретро могли украсить любую страницу, любой шрифт и текст, поэтому такой способ мне нравится меньше всего.
Типографика. Текст и шрифты в частности всегда служили для того, чтобы подчеркнуть какую-либо деталь или чтобы отделить важный контент от менее важного. Напомню: неважный контент на сайте не нужен, но всё же есть разделение по важности между текстом. Так, например, в ретро веб-дизайне часто используется антиква (шрифт с засечками), так как такие шрифты напоминают времена ковбоев и старые книги.
Фоны и текстуры. В этот принцип входят любые иммитации реальных поверхностей. Это называется скевоморфизм.
Процесс дизайна.
Дизайн сайта — это всегда определённый процесс. Много дизайнеров этого не понимают. У каждого он свой, но это должна быть одна большая рамка, состоящая из множества других: относительно текста, относительно сетки и тп. Мой процесс скопирован у одного дизайнера, с опытом придут корректировки, но нужно ведь на что-то опираться.
Сбор контента и анализ. В задании были приложены аватары пользователей и ориентир в виде страницы музея, я структурировал это всё и начал думать, что нужно странице, а что нет. Студия предоставила список обязательных блоков, но я пошёл дальше и создал нечто своё.
Референсы. Поскольку я хотел сделать упор на стиль, то пришлось искать два вида референсов: ретро стиль и решения для блоков. На этом этапе я определяюсь с тем, как всё будет выглядеть в общих чертах и продумываю основные блоки и решения, тут мои идеи первого этапа начинают обретать визуальный облик.
Прототип. Ранее идёт наскальный рисунок (первый набросок), а только потом версии прототипа и финальный прототип. Тут я прорабатываю каждый блок и каждое решение в соответствие с контентом, результатом анализа и референсами. В прототипе не нужен цвет, но я проработал эти моменты ещё до проекта и сразу их использовал.
Другие элементы. Сопутствующие элементы. Различные popup окна, меню и другие страницы также нужно прорисовывать. Для этой страницы потребовалось нарисовать один popup, который сообщает о наличии кнопки "меню" на сайте и о том, что есть Lite-версия для слабого интернета, и само меню, его нужно создать лишь один раз, но тут я делал с ориентиром на то, что эта страница — единственная на всём сайте, иначе я бы создавал полноценную навигацию.
Lite-версия. В одном из аватаров пользователя было описано, что часть клиентов имеет плохое соединение с интернетом. Мне сразу пришла идея сделать упрощённую версию сайта, которая будет выполнять только функцию посещения (т.е если на полной версии присутствует доп.информация, то на Lite её нет).
Адаптация. Также страницу нужно было адаптировать под маленькие мобильные устройства. Я выбрал разрешение 320х640 px. — разрешение маленького Android'а. Изменил необходимые стили текстов, размеры кнопок, изображений и слегка структуру (в одну колонку).
UI-Kit. Собрал UI-kit для цельности работы, этого не требовалось. Напомню, что это хороший тон для верстальщика, ведь он переводит всю графику в код и его не интересует внешний вид, он ему нужен в основном для сравнения с оригиналом.
Пользовательский сценарий. В пояснение к макету я составил пользовательский сценарий, описывающий то, как должно происходить пользование страницей в различных целях.
Пользователь заходит на сайт и его встречает popup окно, которое говорит, что есть Lite версия и о том, как его включить потом и то, что он делает. В основном все убранные граф.элементы служат дополнением к композиции и подкреплением текста. Итак, Максима на десктопе немного взбесило это окно, но воимя таких пользователей как Анжелика мы его оставим для всех. Сразу показана картина с Зимним дворцом и большой заголовок, всем понятно о чём страница? Думаю да :) Поскольку Максим — любитель халявы, сайт сразу предлагает ему узнать подробнее о спец.днях, в которые предоставляется скидка и тп. Текст не копирайтерский, я его растягивал и лил воду для того, чтобы всё выглядело в столбик, естественно это всё обсудится с копирайтером и будет подогнано. Так как люди зашли на страницу не на картинки посмотреть, следом идёт блок с покупкой билетов, тут всё понятно, не задерживая предлагается. После — сопутствующая информация: карта, история дворца (думаю кому-то вкратце было бы интересно узнать что-то из истории объекта). Внизу поместил блок, призывающий к действию, поскольку пока человеку не предложишь купить — он не купит. Ну, а если человек пролистал всю страницу, то скорее всего ему не так интересно идти конкретно в Зимний дворец, тут ему предлагается посетить другие мероприятия. Высока вероятность того, что заряженные на историчные походы люди купят билет и круто проведут время!
Спасибо за внимание!
Связаться со мной: