Как да проектираме прототип на уебсайт от каркасна мрежа

Може би сте чували старата поговорка: „Измерете два пъти, изрежете веднъж“. Ами точно затова трябва да планирате уебсайт, преди да го изградите. И тук идва прототипирането.

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

Исках да проуча и да разширя какво всъщност означава прототипирането, като ви преведа през пълния процес.

Имайте предвид, че създадох друг курс, който обхваща първата стъпка от проектирането на уебсайт: изграждане на каркасна рамка. Можете да прочетете за каркасното изграждане и да гледате моя 30-минутен видео курс тук.

В този урок ще разгледаме:

  1. Какво е ранен прототип
  2. Създаване на структура: рамка, редове, колони
  3. Добавяне на съдържание: Header, Slider, About
  4. Проектиране на раздели
  5. Заключение: Какво научихме от процеса на прототипиране

Какво е ранен прототип?

Прототипът обикновено е вторичната итерация на дизайна, тъй като е изграден върху телена рамка.

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

Нека да разгледаме ранния каркас, който изградихме в предишната статия:

Той има редица страници, раздели и области, където текстът и изображенията ще бъдат добавени по-късно.

Тогава целта на прототипа е да се изгради това визуално, но без добавяне на цвят или изображения.

В този пример ще използвам Figma, за да направя прототипа. Можете да видите целия прототип на Figma тук.

Как да създадем структура на прототип на уебсайт: рамка, редове, колони

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

Когато правим ранен прототип, трябва да ги дефинираме правилно, така че целият дизайн да следва структурата на мрежата.

В този пример ще използвам дизайн с 12 колони с редовна ширина 1140px, който традиционно се използва и се вижда в Bootstrap дизайни. Това ни дава 15-30px марж между мрежовите единици.

Това ще бъде полезно по-късно, когато свием колоните в редове за мобилна реакция.

Можете да създадете своя собствена структура на мрежата във Figma. Но имайте предвид, че по-късно вие (или някой друг) ще трябва действително да кодирате тези проекти.

Винаги, когато проектирате нещо, не забравяйте да вземете под внимание разработчика.

Как да добавите съдържание към прототип на уебсайт: заглавка, плъзгач, раздели

За разлика от Wireframe, ние вече не представяме текст с редове и заглавки с блокове. Вместо това трябва да попълним съдържание за макет.

Това не означава добавяне на цветове или изображения. Но това означава, че трябва да показваме истински текст.

На този етап е чудесна идея да се уверите, че заглавката и секциите са показани с действителното съдържание, което ще бъдат предназначени да съдържат. Това ще позволи по-добър избор на цветове и изображения в по-късните етапи от дизайна.

В тази част от примера изградих плъзгача с текст на герой и описание отдолу. На тази фаза от процеса на прототипа трябва да внимавате за няколко неща:

  • Оразмеряване и позициониране на шрифта
  • Местоположение на съдържанието и интервали
  • Маржове и подплънки между раздели и съдържание

Как да проектираме раздели на прототипа на уебсайта

За прототипиране и окончателния макет е важно да започнете да наслоявате групите и секциите си. Разделите могат да включват неща като заглавката, раздела „за нас“ и раздела за спонсори.

Можете да създавате групи във вашия инструмент за потребителски интерфейс (Figma прави това с Ctrl + G). Обозначете разделите си и ги задайте с различни цветове на фона. Това ще улесни идентифицирането им и ще ви позволи лесно да ги премествате.

Твърде много пъти са ме молили да преместя определени части от уебсайт нагоре и надолу по групирането. Като групирате всичките си компоненти в секции, ще улесните значително себе си по време на прототипната фаза на проектантската работа.

Заключение: Какво сме научили от процеса на прототипиране

Докато разработваме останалата част от дизайна, важно е да се гарантира, че този ранен прототип не се превръща в пълен макет за дизайн на уебсайт.

Лесно е да се увлечете. Но целта на създаването на прототип след каркасна рамка е да се гарантира, че можем да продължим да планираме развитието на уебсайта.

Много по-лесно е да идентифицирате проблеми и проблеми в ранните етапи на планиране и да ги актуализирате, преди да се потопите в създаването на пълния дизайн. Подобно прототипиране може да ви отнеме само няколко часа, но може да спести усилия, струващи дни по-късно в процеса.

След като прототипирате няколко страници, можете да преминете към пълната фаза на проектиране на макет. Това ще включва измисляне на теорията на цветовете, типографията и изображенията, които работят съответно. Ще разгледаме това в следващата статия от тази поредица следващия месец.

Бонус: Добавяне на интерактивно изпълнение на прототип

Създадохме само една страница за този пример. Това каза, прототипирането също ви позволява да създадете емулиран пример за работа на сайта.

Тази емулация е много полезна за провеждане на демонстрации, тестване на това как клиентите реагират на виждането на реален пример за ранен макет и преразглеждане на потока на всички ваши връзки.

Надявам се тази статия да ви е харесала. Ако не знаете кой съм, аз съм Адриан от Австралия. ? Имам малък канал в Twitter и YouTube, така че ако искате да знаете повече за мен или да се насладите на съдържанието ми, проверете ме някога?

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