В предната статия ви описах какво представляват wireframe-ите и кое е добре да правите когато ги подготвяте. Да припомним накратко. Това е етапа преди направата на същинските дизайни. Подготовката им представлява много важна част от цялостния процес при изготвянето на проект. Понеже промени се правят много по-бързо и се тестват много по-лесно. Това е и етапа, при който се уточнява – от къде ще се започне, през колко стъпки ще се премине, колко време би отнело и каква е степента на трудност.
Сега е време да дадем малък пример на XD. И така. След като сме отворили вече програмата изберете 1920x1080px, така че да сме сигурни, че това което правим ще пасва добре и на големи екрани. Добре е да запаметим самия файл още в началото. Нека наименуваме mockup-а като версия V1.0. Така в последствие ако правим само леки промени можем да преименуваме на V1.1. Ако обаче се налагат големи, глобални промени, ще е добре да използваме V2.0. Това е много подходящо най-вече по време на комуникацията ни с клиенти. Понеже по този начин ще бъдем сигурни, че обсъждаме най-новата версия на проекта на този етап.
След като вече сме запаметили, следва да се съобразим с желанието на клиента дали желае сайтът му да бъде на цял екран или се нуждаем от някакъв “shell”. В случая ще дам пример от втория тип. Ако не сте сигурни за точните резолюции винаги можете да потърсите в интернет. В w3schools например ако потърсите в /browsers/browsers_display.asp ще видите различни примери за такива, както и кои са най-често използваните:

Както се вижда и на скрийншота, през последните няколко години най-често срещана резолюция е 1366x768px. На следващо място е 1290x1080px.
Можете да потърсите и в “google analytics” например > all web site data > audience > technology > browser and OS.
Разбира се, освен desktop first, съществува и mobile first. Ако ще правите първо wireframe-и за телефон е добре да видите в google analytics > all web site data > audience > mobile > overview за каква резолюция да подготвите такива.
Нека се върнем на XD
Как да направим “visual guides”, за да обозначим shell-а? Да дадем пример с 1440px. Има два варианта:
Първият. Ако минете с мишката върху левия border на artboard-а ще ви се появят двойни стрелкички. Кликнете и завлечете на разстояние 240px. Само не забравяйте да се уверите преди това, че не сте селектирали някой елемент. Следва да направим същото и за десния край на shell-а. Кликнете и завлечете отново отляво надясно на разстояние 1680px. Ще ви се получи това:

Вторият вариант – да използвате grid. Поставете отметка в панела вдясно и от падащото меню изберете “layout”. Имате възможност за избор дали да използвате grid по подразбиране или да направите някои леки промени. Ако е така – следва да изберем номер на колоните (number of the columns), .. (gutter width) и широчина на колоните (column width):

Има и още една опция в падащото меню – “square”. Използва се най-вече при подготовката на wireframe-и/дизайни за приложения (apps).
Да се върнем на нашия пример. Аз лично предпочитам да задам да имам “1 колона”. Променям широчината на колоната да бъде 1440px. Така получавам:

След като сме уточнили това, трябва да изберем и viewport height. В случая ще зададем 768px. На екрана ще се появи прекъсната линия. Това всъщност обозначава какво точно ще виждат потребителите преди скрол ако разглеждат на съответната резолюция:

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

Така вече имаме завършен първоначален “слой”, обозначаващ максималната широчина на content-а. Важно – това не включва ако има background – той може да бъде на целия екран.
Не забравяйте да преименувате и самия artboard, за да обозначите йерархията, както и широчината в px на shell-а (Homepage and add the px width of the shell). Това става при двоен клик върху името на страницата.
Нещо полезно
Друго нещо, което пропуснах да спомена, относно клавишни комбинации, които могат да ви бъдат доста полезни докато подготвяте своите wireframe-и, а по-късно и същинските дизайни:
- можете да zoom in и out-вате използвайки Ctrl и скролера на мишката или клавиши -/+.
- за хоризонтален скрол задръжте Shift
- за да преминете от един на друг artboard без да zoom-вате > задръжте hold клавиша
- при двоен клик пък върху “three dots” на artboard-а и Ctrl/Cmnd + 3 също ще ви zoom-не