Этапы создания дизайн-проекта
Вы должны иметь представление о том, как будет выглядеть дизайн, прежде чем откроете фотошоп или скетч. Иначе будете стрелять из пушки по воробьям и часами пропадать в редакторе.
Как правильно начинать работу над дизайн-проектами:
1. Основные смыслы
Прежде чем открыть графический редактор, возьмите лист бумаги и выпишите всё, что связанно с проектом. Результат брифинга, все основные смыслы компании, сфера деятельности, утп, портрет целевой аудитории, как можно больше цифр и фактов.
2. Анализ конкурентов
После этого идём на сайты конкурентов. Смотрим, что у них часто встречается, как расположены блоки и какая структура. Если какой-нибудь элемент повторяется у многих конкурентов, значит он может быть важен и есть смысл его использовать.
3. Вдохновение
Далее следует найти референсы. Бихенс/Дрибббл/Пинтерест, ищем
интересный дизайн, делаем скриншоты конкретных элементов и собираем сайт «по блокам». Определяемся со стилистикой проекта и с тем, как он будет выглядеть.
4. Текстовый прототип
После этого составляем текстовый прототип сайта. Иногда этим занимается копирайтер, иногда сам дизайнер. Начинать работу без текстового прототипа очень проблематично. Для интернет-магазин или другого крупного проекта следует создать карту движения по сайту. Начиная с главной страницы, нужно расписать все возможные пути передвижения по сайту.
5. Скетч
Исходя из всех предыдущих пунктов, возьмите лист бумаги и нарисуйте от руки будущий интерфейс. На листе намного больше свободы, вы можете быстро набрасывать множество концепций, а затем выбрать лучшую.
6. Прототип (вайрфрейм)
Когда у вас будет готовый скетч на бумаге, перенесите его в программу по прототипированию. Детально проработайте расположение всех элементов. На этом этапе не думайте о визуальной части, сконцентрируйтесь только на удобстве пользования.
7. Анимированный прототип
Чтобы разработчики знали, как должен выглядеть ваш макет в динамике, вы должны заанимировать его. Для небольших проектов необязательно использовать анимированный прототип, в нем почти нет необходимости. Если же вам нужна анимация, для которой не хватает возможностей программ по прототипированию, вы должны уже готовый макет заанимировать в After Effects.
8. Дизайн
Только сейчас, когда есть почти полное представление о проекте, открываем графический редактор и создаём дизайн. У ваc обязательно должно быть представление того, как будет выглядеть ваш макет. Если этого представления до сих пор нет — возвращаемся на бихансы и дриббблы.
Спасибо за внимание. Если материал был для вас интересным, то подписывайтесь на мой телеграм-канал, где я пишу о дизайне и визуальном искусстве.
