Робочий процес створення прототипу сайту в adobe illustrator, секрети веб-дизайну

Етап №1. Постановка завдання і створення чек-листа.
На цьому етапі я задаю собі питання: «Що потрібно зробити по пунктах, щоб завершити процес?» І швидко накидаю приблизний план. Каракулі ще ті, але так виглядає процес насправді без прикрас.

Етап №2. Скетчінга або створення ескізу.
На наступному етапі я створюю так званий «скетч». Скетч - це швидкий начерк сайту від руки. Простими словами це ескіз. Тут важливо не думати довго і не приділяти багато зусиль, щоб було красиво. Тут важливо вивантажити всі ідеї на папір. Як бачите у мене виходить досить кострубато.

Етап №3. Створення прототипу в Adobe Illustrator.
Чому Adobe Illustrator замість photoshop? Просто мені так зручно. Отже, починаємо. На скетчі 8 блоків з інформацією. Якщо, прийдуть ідеї по ходу роботи, то обов'язково, щось додам.

Блок №1. Придумую ідею для першого екрану.
Всього я придумав 4 варіанти. Перший варіант - ракета в центрі, а на задньому фоні безліч іконок. Хммм ... Що ще придумати?

Другий варіант - ракета в центрі, без іконок. Занадто нудно.

Третій варіант - ракета зліва + фон без іконок. Також змінена колірна гамма самої ракети. Це вже цікавіше ...

Четвертий варіант шапка з заголовком по середині і іконками на задньому плані. Чогось не вистачає. Зупиняюся на варіанті №3.

Потрібно додати форму реєстрації на перший екран. У мене вже є готові форми, які я створив в програмі Adobe Muse, а потім зробив скріншоти для швидкого створення прототипів. Є багато готових елементів, що прискорює процес роботи багаторазово. За моїми підрахунками приблизно в 5 разів.

Ось так виглядає папка з формами реєстрації. Кольори можна змінювати і трансформувати форми.
Перетягую готову картинку в Adobe illustrator. Вуаля! Перший екран готовий.

Блок №2. Дивимося на створений раніше скетч. Що далі за списком?
Іконки у вигляді шестерень. Додаю їх за допомогою плагіна flat icon, який Ви можете знайти за цим посиланням.

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

Блок №3. Робот або лампа?
Можна зробити робота, який буде показувати на текст.

А можна зробити лампу в стилі 3d. Що вибрати? Мабуть зупинюся на лампі.

Блок 4. Йдемо далі. Слуда блок буде у вигляді збільшувального скла в форматі ілюстрації. На мою виглядає просто і досить красиво. Без зайвих наворотів і візуального шуму.

Блок 5. Створюю розділ «Наша команда».
Я думаю Вам зрозуміла ідея? Тут я створив збільшувальне скло з обрізаним краєм і круглими фотографіями команди.

Може додати якихось ефектів? Спробую додати зверху фон з трикутниками. Даний фон Ви можете створити пройшовши за цим посиланням.

Ось, що вийшло в результаті. Занадто багато шуму. Мабуть зупинюся на попередньому варіанті.

Блок 6. Додамо інфографіки.

Цього блоку не було в моєму скетчі. Тому все буде 9 блоків, замість 8 задуманих.

Змінимо колір і додамо іконок.

Знову змінимо колір ... Щось не те ...

А ось цей варіант мені більше подобається. Досить просто і легко сприймається. Немає зайвого шуму.

Блок 7. Відгуки.
Додам вже готовий блок, який зробив до цього раніше. Просто додам скріншот.

Зроблю заміну заднього фону, щоб розбавити однотонність сайту.

Блок 8. Таблиця цін.
Цей блок у мене теж готовий і додам його картинку в прототип. Кольори пізніше зміню, коли буду верстати сам сайт в програмі Adobe Muse.

Блок №9. Останній блок з формою реєстрації.

Додам вже готовий варіант даного блоку.

Нехай краще робот буде вказувати на дану форму.

Додам підвал сайту (футер) і прототип сайту готовий!

У підсумку вийшло 9 блоків з інформацією. Тепер потрібно перетворити цю картинку в сайт в програмі Adobe Muse. Це зробити можна дуже просто.

Ось що вийшло в результаті.