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

Преди единадесет години се присъединих към малка дизайнерска агенция. Бях на 20 и това беше първата ми работа на пълен работен ден. Първите няколко години прекарах в агенцията, фокусиран върху визуалния дизайн. Мога ли да направя тази текстура по-реалистична? Би ли изглеждал по-добре този уебсайт, ако източникът на светлина е от различен ъгъл? Как мога да накарам бутоните си да са още по-лъскави? Беше обичайно да чуя как клиент излага идея, след което аз си задавам няколко въпроса, отварям Photoshop и започвам да проектирам. Дни по-късно щях да представя на клиента една или две визуални направления, да получа обратна връзка, да направя ревизии и да започна да кодирам сайта в xhtml. Най-добрите дизайнери в агенцията направиха най-добре изглеждащите уебсайтове.

С напредването на кариерата ми научих, че показването на клиента на телена рамка преди да започна визуален дизайн може да ни спести и двете времена. Капаците обаче се чувстваха неловко. Тяхното намерение беше да улеснят пространството за „бързи ревизии“ пред клиента и аз „реших посока“ и започнах „процеса на проектиране.“ Те уж биха създали по-бързо от визуалните дизайни и по този начин по-бързо се променят. Въпреки това, телените рамки, очертани на хартия, се смятаха за твърде неполирани, за да се представят на клиент, така че бих прекарал време в създаване на цифрови телени рамки. След като представих телените рамки, рядко откривах, че те вдъхновяват смислен разговор. Всъщност виждането на цифровите телени рамки почти никога не ни е довело до промяна на посоката.

Гледайки назад, не намерих телените рамки за ценни, защото ги използвах за решаване на грешен проблем. Те бяха използвани като квадратче за отметка за преместване на проект от „проучвателен“ в „готов за дизайн“ - за да се предотврати клиентът да промени мнението си на по-късна дата. Това, което тогава не осъзнах, е, че в най-добрите им телени рамки се създава механизъм, който да излезе от очевидните дизайнерски парадигми. Те ви дават възможност да защитите по-добре посоката (ите), които сте избрали да следвате, и ви помагат да се забавите, за да насочите в правилната посока, преди да ускорите грешния път.

Процесът на млад дизайнер:

Кредитна снимка: Джули Джуо

Горната илюстрация е от статията на Julie Zhou, Junior Designers vs. Senior Designers. Той улавя капан, в който е лесно да попаднете: Бягайки с първата идея, която ви идва наум. Ако можех просто да изглежда по-добре, може би ще работи.

Все още е обичайно младшите дизайнери да се фокусират върху визуалния дизайн над функционалния дизайн. Визуалният дизайн е очевидно място за начало, тъй като лесно се споделя и преценява: Този екран изглежда като текущата тенденция? Получи ли много харесвания на Dribbble? Достатъчно плосък ли е? Наклонът на градиентите достатъчно ли е? Това важи особено за дизайнерите в началото на кариерата им или за тези, които се надяват да се наемат. Ефектни визуализации се създават бързо, лесно се поставят в портфейлите ни, насочват се към тях и казват „Аз създадох това“.

Процесът на старши дизайнер

Кредитна снимка: Джули Джуо

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

Боядисването на счупена кола, без значение колко голяма е работата с боя, не прави колата полезна.

И така, как да избегнете полирането на първата идея, която имате? Как да излезете с множество подходи, без да инвестирате много време? Как решавате дали един подход е по-добър от последния? Или по-добре от следващото?

Полезни рамки, които са полезни

Искам да споделя една проста техника, която сега използвам, за да се принудя да изследвам и утвърждавам множество направления, преди да се потопя във визуалния дизайн. В останалата част на тази статия „телена рамка“ е скица на хартия. Хартиените телени рамки бързо се правят и подсилват, че идеите са евтини и безопасни за изхвърляне. Хартия, също така позволява на всеки от екипа да участва в телена рамка.

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

Конфигурацията

Да започваме. Вземете тетрадка (харесвам Парижката хартия за писалки на Borden & Riley) и нарисувайте решетка от поне 20 малки правоъгълника. Ако работите с мобилен потребител, направете ги приблизително пропорционалното съотношение на устройството, за което сте проектирали. За потребителския интерфейс на компютъра, направете им съотношение на екрана на компютърен монитор.

Процеса

Сега с химикалката си (харесвам PaperMate Flairs) попълнете всяка кутия с различен подход към проблема с дизайна, който се опитвате да решите. Начертайте първо най-очевидните идеи. Махнете ги от главата си, не спирайте, докато не попълните всяка кутия с идея.

Има малък шанс да успеете да попълните всяка кутия със страхотно решение и в това е смисълът. Искате да покриете колкото се може повече ширина, за да преместите ума си от удобното в непознатото. Ако се мъчите да излезете с нова идея, настоявайте да направите нещо ограничено: Ами ако менюто е радиално? Ами ако това са само изображения? Ами ако няма изображения? Какво би направил Apple? Какво би направил Google? Какво става, ако няма списъци или мрежи? Какви са различните начини да поставите най-важните елементи най-близо до палеца на потребителя? За мен по-често нещата започват да стават интересни след първите ~ 10 скици.

Ако се опитвате да намерите най-добрия начин за оформление на екрана, е удобно да създадете ключ като: T (заглавие), V (видео), RV (свързани видеоклипове), суб (навигация) и т.н., позволявайки вие да се съсредоточите върху оформлението вместо UI елементи:

Скици за непубликувана видео страница на клиента

Или може би за връзки към документацията и за анализи:

Скици за потребителски интерфейс на таблото за управление на клиент

Ако се фокусирате върху оформлението и елементите на потребителския интерфейс, можете да скицирате в по-висока вярност:

Скици за приложението за iOS на eero

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

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

Повторете процеса

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

Сега вземете обещаващите идеи и ги начертайте в по-голяма вярност. Начертайте по-големи кутии на нова страница - намирам, че четири кутии на страница с размер A4 работи добре. В този момент се опитваме да разберем дали идеите са по-подробни:

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

Следващи стъпки

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

Какво ще правите по-нататък, зависи от вас. На този етап ми се стори полезно да се облегна на концепцията на Google Ventures „Търсене на конфликти“, за да намеря разликите между идеите и да реша най-добрия начин да продължите. По-често, отколкото не, ще повторя процеса на скициране и ще помисля как обещаващите екрани се вписват в поток. Какво идва преди този екран? Какво идва след това? След като очертах различни подходи към потока, ще създам цифрови прототипи, за да видя как се чувстват потоците на реално устройство.

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

Бонус: Прилагане на тази техника върху неща, различни от дизайна

Докато работех в Medium, Ник Фишър, който написа много от туитовете на Medium, ми каза, че често ще напише туитър десет различни начина, преди да избере този, който да публикува. Принуждава се да го напише по различни начини, преди да се настани на правилния.