Мокети на уебсайтове: 4 популярни подхода за изследване
Мокетите на уебсайтове могат да бъдат създадени по много различни начини. Вярно е, че няма „най-добър“ подход, но в зависимост от стиловете и предпочитанията на дизайнерите на UI и UX (и процеса на проектиране), някои ще работят по-добре от други.
В тази статия ще разгледаме плюсовете и минусите на четири от най-популярните опции: UX инструменти от край до край, инструменти за макет, инструменти за графичен дизайн, както и кодирани дизайни, които започват да размиват линиите между макетите на уебсайтове и прототипи.
Ако се интересувате специално от инструментите за каркасно проектиране, вижте тази публикация в най-добрите каркасни инструменти , или за по-широка колекция, разгледайте нашия мега-обзор на най-добрите инструменти за уеб дизайн .
Не правете грешката да мислите, че всички макети на уебсайтове са еднакви. Простите решения относно платформите, верността и кодирането ще доведат до значително различни резултати. Знайте какво искате и какви са вашите цели, преди дори да започнете процеса на проектиране - ако искате инструмент, който поддържа и трите фази, най-добре е да започнете да го използвате, отколкото да превключите наполовина. По същия начин, ако имате нужда от звезден, напълно реалистичен макет, имайте предвид, че в даден момент ще използвате редактор за графичен дизайн.
01. UX инструменти от край до край
На най-високо ниво са инструментите от край до край, които имат за цел да задоволят целия работен процес: макети, прототипиране, документация, предавания на разработчици и системи за проектиране. UXPin се грижи за тази нужда от началото на 2010-те, но редица други марки, като Adobe и InVision, сега също се опитват да създадат „един инструмент, който да ги управлява всички“.
И така, как тези инструменти се подреждат само за създаване на макет? Те могат да се справят с тях без проблем - и след това някои. С UXPin например можете да създавате макети с множество състояния и взаимодействия. Дори имитира някои функции на Photoshop и Sketch, като включва инструмент Pen.
От друга страна, Студио от InVision , позволява доста красива редакция на анимация; докато Adobe XD ви позволява да отваряте файлове на Photoshop и Sketch във вашия XD дизайн и да прилагате цветове, символи, линейни градиенти и стилове на символи.
Най-важното е, че инструментите от край до край сега предлагат системи за дизайн, за да осигурят последователност на макетите в проектите. Системите за проектиране дават на всеки един източник на истина за активите и принципите на проектиране в различните инструменти. Ако планирате да създадете много макети, тази функция става почти задължителна.
Когато избирате инструмент от край до край за създаване на макет на вашия уеб сайт, струва си да вземете предвид следните аспекти:
- Верност : Колко мощен е инструментът за визуален дизайн и дизайн на взаимодействие?
- Последователност : Какви функции гарантират последователност на дизайна във вашата работа?
- Точност : Отразяват ли елементите, с които работите, „източника на истината“ във вашата организация?
- Сътрудничество : Можете ли да си сътрудничите със заинтересовани страни или други дизайнери?
- Предаване на разработчика : Как инструментът генерира спецификации и активи за разработчиците?
02. Специални инструменти за макет
По-малко стабилни решения като Принцип , Фреймър , Moqups или Balsamiq все още може да ви предостави всичко, от което се нуждаете, за да създадете своя макет - просто ще загубите допълнителните функции на работния процес и последователността на дизайна. Тези инструменти са предназначени да улеснят процеса на създаване възможно най-лесно, така че можете да се съсредоточите повече върху стилистични решения и по-малко върху това как да манипулирате програмата.
Специализираните инструменти за макет имат ясни предимства: Начинаещите се възползват от тяхната лекота на използване, докато експертите оценяват дизайните, специално съобразени с техните напреднали нужди. В по-напредналия край инструменти като Framer и Principle се специализират в анимации и взаимодействия за макети.
В долния край Moqups и Balsamiq предоставят повече функционалност от непроектиращите инструменти, които понякога се използват за телени рамки и макети (като Основен доклад ), но те са ограничени само до дизайни с ниска точност. Те обаче могат да бъдат доста полезни, ако целта е да се създадат много бързо телени рамки с ниска точност.
Що се отнася до инструментите за макет, трябва да решите дали просто решение за каркасно проектиране ще свърши работа или се нуждаете от по-усъвършенстван дизайн на екрана. Без значение какъв инструмент за макет изберете, просто се уверете, че сте готови да приемете загубата в съвместния работен процес и по-малко функции за последователност на дизайна, предлагани от инструментите от край до край.
03. Софтуер за графичен дизайн
Някои дизайнери се кълнат в софтуер като Photoshop CC , Скица или Илюстратор CC , особено тези особено квалифицирани или запознати с инструменти, които предлагат контрол до пиксела. Платформите за графичен дизайн работят най-добре, ако се стремите към най-високото ниво на реализъм и визуална вярност. И както обясняваме в нашето ръководство за бързо прототипиране с помощта на Photoshop CC , може да е по-лесно, отколкото си мислите.
Работата в софтуер за графичен дизайн ви дава достъп до почти безкраен избор от силно дефинирани цветове, така че ако работите в рамките на ограниченията на твърда и предварително зададена цветова схема - например при определени правила за брандиране - тогава тези програми може да са най-добрите ви опция. Повече от цветовите опции, тези програми предлагат много повече визуални инструменти, които ви позволяват да се справите с подробностите в детайлите.
Недостатъкът на използването на този тип софтуер обаче е, че може да бъде трудно да се преведе, когато е време да започнете да кодирате дизайна. Това, което е работило в Photoshop, не винаги може да работи в код (елементи като шрифтове, сенки, градиентни ефекти и т.н.), което може да се превърне в загубено време за намиране на решения за фазата на прототипиране.
За стилни страници може да ви помогне да изчукате конкретните визуални детайли по време на фазата на макет, като в този случай Photoshop или Sketch ще ви дадат най-много опции. По същия начин, ако имате работа с придирчив или труден за удоволствие клиент, представянето им с разкошен и впечатляващ макет може да ги спечели по-лесно.
Също така си струва да се спомене, че макетите, създадени във Photoshop или Sketch, могат да се плъзгат и пускат във фазата на прототипиране с UXPin. Това ви позволява лесно да анимирате всички слоеве (без изравняване) с няколко щраквания и гарантира, че няма нужда да започвате от нулата, когато е време за прототип.
Ако визуалните изображения не са единственият ви приоритет, може би ще бъдете по-ефективни, като използвате инструмент, който ви позволява да правите картиране, макети и прототипиране на едно място. Софтуерът за графичен дизайн може да създаде повече проблеми, отколкото си струва за макетите, освен ако не търсите оптимална визуализация - определено ще трябва да общувате редовно с вашия разработчик, тъй като тези инструменти не са предназначени за сътрудничество.
04. Кодирани макети
Ако основно сте дизайнер и не се чувствате добре с кодирането, това очевидно не е опция. Както беше обсъдено в Ръководството за макети , кодираните макети не са избор по подразбиране.
Повечето кодиране могат да бъдат отложени до етапа на прототипиране (ако създавате HTML / JavaScript прототип) или дори по-късно (ако използвате инструмент за прототипиране). Но въпреки сложността и потенциалните пречки, има много уважавани дизайнери, които се застъпват за въвеждането на код във фазата на макет.
Докато подобренията в инструментите и технологиите означават, че се откриват все повече и повече възможности в дизайна на оформлението, не всичко е лесно (или дори възможно) да се пресъздаде в код. Започването с код ви дава възможност веднага да разберете какво можете и какво не можете да правите. Ако се чувствате добре с кода, може също така да се твърди, че като се започне с това е по-малко разточително - макетът така или иначе ще завърши в HTML / CSS.
Но както споменахме по-рано, макетите с кодиране не са популярна стратегия, поради повече причини, отколкото трудността на кодирането. Започването на кодиране твърде рано може да ограничи вашата креативност и готовност за експериментиране, тъй като е лесно да се притеснявате за осъществимостта на идеите си в кода, а не колко вълнуващи биха могли да изглеждат.
От вас зависи кога да въведете кодирането. Просто се уверете, че знаете целите на дизайна си и информирайте разработчиците за това как давате приоритет на функциите.
Прочетете още:
- 12 най-добри инструмента за прототипиране
- 6 грешки в потребителския интерфейс, които убиват вашите конверсионни проценти
- 5 начина за ускоряване на вашите уебсайтове и приложения
