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

Этап №1. Постановка задачи и создание чек-листа.
На этом этапе я задаю себе вопрос: «Что нужно сделать по пунктам, чтобы завершить процесс?» и быстро накидываю примерный план. Каракули еще те, но так выглядит процесс на самом деле без прикрас.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Этап №2. Скетчинг или создание эскиза.
На следующем этапе я создаю так называемый «скетч». Скетч — это быстрый набросок сайта от руки. Простыми словами это эскиз. Здесь важно не думать долго и не уделять много усилий, чтобы было красиво. Здесь важно выгрузить все идеи на бумагу. Как видите у меня получается довольно коряво.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Этап №3. Создание прототипа в Adobe Illustrator.
Почему Adobe Illustrator вместо photoshop? Просто мне так удобно. Итак, начинаем.  На скетче 8 блоков с информацией. Если, придут идеи  по ходу работы, то обязательно, что-то добавлю.

Блок №1. Придумываю идею для первого экрана.
Всего я придумал 4 варианта. Первый вариант — ракета в центре, а на заднем фоне множество иконок. Хммм… Что еще придумать?

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Второй вариант — ракета в центре, без иконок. Слишком скучновато.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Третий вариант — ракета слева + фон без иконок. Также изменена цветовая гамма самой ракеты. Это уже более интересно…Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Четвертый вариант шапка с заголовком по середине и иконками на заднем плане. Чего-то не хватает. Останавливаюсь на варианте №3.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Нужно добавить форму регистрации на первый экран. У меня уже есть готовые формы, которые я создал в программе Adobe Muse, а затем сделал скриншоты для быстрого создания прототипов. Есть много готовых элементов, что ускоряет процесс работы многократно. По моим подсчетам примерно в 5 раз.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Вот так выглядит папка с формами регистрации. Цвета можно изменять и трансформировать формы.Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Перетаскиваю готовую картинку в Adobe illustrator. Вуаля!  Первый экран готов. 
Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

Блок №2. Смотрим на созданный ранее скетч. Что дальше по списку?
Иконки в виде шестеренок. Добавляю их при помощи плагина flat icon, который Вы можете найти по этой ссылке.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Внутрь шестеренок добавляю иконки и делаю подписи внизу. Пока все просто. 2 блока из 8 задуманных готовы.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.


Блок №3. Робот или лампа?

Можно сделать робота, который будет показывать на текст.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

А можно сделать лампу в стиле 3d. Что выбрать? Пожалуй остановлюсь на лампе.Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

Блок 4. Идем дальше. Слудующий блок будет в виде увеличительного стекла в формате иллюстрации. По моему выглядит просто и довольно красиво. Без лишних наворотов и визуального шума.Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

Блок 5. Создаю раздел «Наша команда».
Я думаю Вам понятна идея? Здесь я создал увеличительное стекло с обрезанным краем и круглыми фотографиями команды.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Может добавить каких-то эффектов? Попробую добавить сверху фон с треугольниками. Данный фон Вы можете создать пройдя по этой ссылке. 
Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Вот, что получилось в итоге. Слишком много шума. Пожалуй остановлюсь на предыдущем варианте.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

Блок 6. Добавим инфографики.

Этого блока не было в моем скетче. Поэтому всего будет 9 блоков, вместо 8 задуманных.Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Изменим цвет и добавим иконок.Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

Снова изменим цвет… Что-то не то…
Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

А вот этот вариант мне больше нравится. Довольно просто и легко воспринимается. Нет лишнего шума.Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

Блок 7. Отзывы.
Добавлю уже готовый блок, который сделал до этого ранее. Просто добавлю скриншот.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Сделаю замену заднего фона, чтобы разбавить однотонность сайта.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Блок 8. Таблица цен.
Этот блок у меня тоже готов и добавлю его картинку в прототип. Цвета позже изменю, когда буду верстать сам сайт в программе Adobe Muse.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.
Блок №9. Последний блок с формой регистрации.

Добавлю уже готовый вариант данного блока.
Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Пусть лучше робот будет указывать на данную форму.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Добавлю подвал сайта (футер) и прототип сайта готов!
Рабочий процесс создания прототипа сайта в Adobe Illustrator. Рабочий процесс создания прототипа сайта в Adobe Illustrator.

 

В итоге получилось 9 блоков с информацией. Теперь нужно превратить эту картинку в сайт в программе Adobe Muse. Это сделать можно очень просто.Рабочий процесс создания прототипа сайта в Adobe Illustrator.

Вот что получилось в итоге.

Рабочий процесс создания прототипа сайта в Adobe Illustrator.