Як створити прототип веб-сайту з каркасної мережі

Можливо, ви чули давню приказку: «Два рази відміряй, один раз відріж». Ну, саме тому вам слід спланувати веб-сайт, перш ніж створювати його. І ось тут з’являється прототипування.

Коли ми розробляємо наші веб-сайти, ми переходимо від каркасного проектування до створення прототипів і, нарешті, до повного дизайну.

Я хотів вивчити і розширити, що насправді означає створення прототипів, провівши вас через весь процес.

Зверніть увагу, що я створив ще один курс, який охоплює перший крок проектування веб-сайту: побудова каркасного каркасу. Ви можете прочитати про каркасний каркас і подивитися мій 30-хвилинний відео-курс тут.

У цьому підручнику ми розглянемо:

  1. Що таке ранній прототип
  2. Створення структури: рамки, рядки, стовпці
  3. Додавання вмісту: Заголовок, Повзунок, Про програму
  4. Проектування розділів
  5. Висновок: те, що ми дізналися з процесу створення прототипів

Що таке ранній прототип?

Прототип, як правило, є вторинною ітерацією дизайну, оскільки він побудований поверх каркасу.

Каркасний каркас, як правило, передбачає простий намальований ескіз за допомогою паперу, ручки або Інтернет-інструменту. Далі ми створюємо прототип, який є нашим більш досконалим макетом для веб-сайту або програми.

Давайте поглянемо на ранній каркас, який ми побудували в попередній статті:

У ньому є ряд сторінок, розділів та областей, куди пізніше буде додано текст та зображення.

Тож метою прототипу є побудова цього візуально, але без додавання кольору або зображень.

У цьому прикладі я буду використовувати Figma для створення прототипу. Ви можете переглянути весь прототип Figma тут.

Як створити структуру прототипу веб-сайту: рамки, рядки, стовпці

Коли ми створювали каркасний каркас, ми розглядали сітки - але вони були намальовані від руки.

Роблячи ранній прототип, ми повинні їх правильно визначити, щоб уся конструкція відповідала структурі сітки.

У цьому прикладі я буду використовувати 12-стовпчастий дизайн із регулярною шириною 1140 пікселів, який традиційно використовується і зустрічається в дизайні Bootstrap. Це дає нам запас 15-30 пікселів між одиницями сітки.

Це буде корисно пізніше, коли ми згорнемо стовпці до рядків для мобільної реакції.

Ви можете створити власну структуру сітки на Figma. Але майте на увазі, що вам (або комусь іншому) пізніше доведеться фактично кодувати ці конструкції.

Кожного разу, коли ви щось розробляєте, обов’язково враховуйте розробника.

Як додати вміст до прототипу веб-сайту: заголовок, повзунок, розділи

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

Це не означає додавання кольорів або зображень. Але це означає, що ми повинні показувати реальний текст.

На цьому етапі чудовою ідеєю є переконатися, що заголовок та розділи відображаються з фактичним вмістом, який вони будуть призначені для розміщення. Це дозволить краще вибирати кольори та зображення на пізніх стадіях проектування.

У цій частині прикладу я створив повзунок з текстом героя та описом під ним. На цьому етапі процесу створення прототипу слід звернути увагу на кілька речей:

  • Розмір та розміщення шрифту
  • Розташування вмісту та інтервали
  • Поля та відступи між розділами та вмістом

Як розробляти розділи прототипу веб-сайту

Для створення прототипів та остаточного макету важливо розпочати розшарування груп та розділів. Розділи можуть включати такі речі, як заголовок, розділ "про нас" та розділ про спонсорів.

Ви можете створювати групи у своєму інструменті інтерфейсу користувача (Figma робить це за допомогою Ctrl + G). Позначте розділи та встановіть їх з різними кольорами тла. Це полегшить їх ідентифікацію та дозволить легко їх пересувати.

Дуже багато разів мене просили переміщати певні частини веб-сайту вгору та вниз по групуванню. Групуючи всі свої компоненти за розділами, ви значно полегшите собі роботу на етапі прототипу проектних робіт.

Висновок: те, що ми дізналися з процесу створення прототипів

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

Захопитися легко. Але мета створення прототипу після каркасу - забезпечити можливість продовжувати планувати розробку веб-сайту.

Набагато простіше виявити проблеми та проблеми на ранніх етапах планування та оновити їх, перш ніж заглибитися у створення повного дизайну. Подібне створення прототипу може зайняти у вас лише кілька годин, але це може заощадити дні, що витрачаються на зусилля в подальшому процесі.

Після того, як ви прототипували кілька сторінок, ви можете перейти до повної фази проектування макету. Це передбачатиме з’ясування теорії кольорів, типографіки та зображень, які працюють відповідно. Ми розглянемо це в наступній статті цієї серії наступного місяця.

Бонус: Додавання інтерактивного запуску прототипу

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

Ця емуляція дуже корисна для проведення демонстраційних демонстрацій, тестування реакції клієнтів на реальний приклад раннього макету та перегляду потоку всіх ваших посилань.

Сподіваюся, вам сподобалась ця стаття. Якщо ви не знаєте, хто я, я Адріан з Австралії. ? У мене є крихітний канал у Twitter та YouTube, тож якщо ви хочете дізнатись більше про мене або насолодитися моїм вмістом, завітайте колись?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog