Задание № 6

Задание № 6

naya bespalova


Предыдущие задания:


5. http://telegra.ph/Zadanie-5-03-14-35

4. http://telegra.ph/Zadanie-4-03-13-46

3. http://telegra.ph/Zadanie-3-03-12-111

2. http://telegra.ph/Zadanie-2-03-07-196

1. http://telegra.ph/Zadanie-1-03-06-48



В качестве шестого задания я решила написать статью о процессе дизайна веб-проекта, которую планирую заверстать и выложить на своем сайте.



Работа над веб-проектом: дизайн.


Вы решили заказать сайт. Любой веб-проект  — от простейшего лендинга до интернет-магазина — это организм со своей экосистемой. Важно понять, как подступиться к его созданию, чтобы не получить на выходе Франкенштейна. Дизайн — не единственно важная часть разработки, но одна из определяющих. Давайте рассмотрим, из каких этапов он состоит.

  1. Прототип (UX)
    Дизайн — это красиво. Но это красота хорошо работающего инструмента коммуникации между вами и вашим клиентом. Важнейшей частью дизайна является построение сценариев взаимодействия с пользователями и проработка структуры сайта и создание его прототипа.

Структура сайта в виде блок-схемы


2. Анализ конкурентов
В идеале этап дизайна должно предварять квалифицированное маркетинговое исследование, которое поможет выявить целевую аудиторию и пути взаимодействия с ней. Однако один из его блоков — анализ конкурентов — сможете провести вы сами. Скорее всего, вы и так обладаете нужной информацией и можете составить емкое сообщение на эту тему. Это поможет в том числе определиться с визуальной составляющей сайта.



2. Подбор референсов (UI)

Сочная картинка — это то, что привлекает с первых секунд. Практически каждый заказчик мечтает иметь не только удобный, но и красивый сервис. Однако руководствоваться лишь своим личным вкусом — не лучший путь. Не стоит забывать, что визуальный дизайн — это такой же инструмент коммуникации с пользователем, как и логика построения сайта.


Чтобы быстрее найти общий язык с дизайнером и отсечь тупиковые пути развития вашего общего видения, полезно перед началом работы собрать референсы — картинки, которые отображают желаемый визуальный облик вашего продукта. Это могут быть как сайты конкурентов и зарубежных компаний, работающих в данной сфере, так и сторонние ресурсы, использующие похожую механику. 


Удобный инструмент, чтобы копить идеи и ориентиры — сервис Pinterest. Там вы можете создавать доски, которые будете редактировать совместно с дизайнером. 


Pinterest



3. Разработка концепции
Следующий этап — разработка концепции. Это визуальное решение для вашего продукта, которое затем будет масштабироваться на весь сайт. На данном этапе происходит выбор и уверждение шрифтов, тон текстовых сообщений, стиль иллюстраций. Это важный этап, к которому стоит отнестись внимательно — это лишит многих проблем на дальнейших этапах разработки.



Концепт сайта


4. Проработка макетов

Далее начнется проработка макетов всех страниц и адаптация их под общую концепцию. Это самый трудоемкий и долгий этап работы, и предполагает общение заказчика и дизайнера по конкретным техническим моментам и четкое представление заказчика о механике, на которой будет строится процесс продажи. Это включает себя выбор платежных систем, способ доставки, организация менеджмента и множество тонкостей, выходящих за пределы зоны онлайн.

Макет страницы в Photoshop


5. Подготовка к верстке

Последний технический этап — подготовка макетов к верстке. На этом этапе внешний вид сайта не изменяется. В него входит составление библиотеки стилей и элементов, своего рода составление словаря для верстальщика. Это залог того, что сайт будет реализован таким, каким был задуман.

GUI сайта


6. Авторский контроль


Однако на этом работа дизайнера не заканчивается. После передачи макетов осуществляется авторский надзор. Он включает в себя консультации со специалистами, которые занимаются копирайтингом, иллюстрацией, готовят фотографии и прочий контент.


Если у вас нет специалистов, которые занимаются заполнением сайта, дизайнер может осуществлять полный арт-дирекшн. Он включает в себя подбор таких людей, написание для них технических заданий и подразумевает концептуальный контроль их работы.


































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































2





















































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































В идеале процесс дизайна должно предварять маркетинговое исследование, которое выявляет целевую аудиторию и пути взаимодействия с ней. Один из его блоков — анализ конкурентов — можете провести вы сами. Скорее всего, вы и так обладаете данной информацией и можете дать компетентное и развернутое сообщение на эту тему.