Како креирати водич за стил: Почните с УИ оквиром

Питања и одговори са УР дизајнером АдРолл-а о томе зашто смо то урадили и шта смо научили

Овај блог је први у низу који хроника путовање стилским водичем, од његовог стварања, до пружања зрелог оквира корисничког сучеља за наше тимове и на крају дестилације јединственог гласа и тона за наше производе.

Ћао! Ја сам Ариа Сринивасан, истраживачица УКС-а у АдРолл-у. Сео сам са Масон Лее-ем, УКС дизајнером који ради на АдРолл-овом производу АПИ-ја за матичне огласе, да разговарам о његовом раду на развоју АдРолл-овог водича за стил.

Ариа: Да бисте започели ствари, зашто сте покренули пројекат вођења стила? Који је проблем био потребан за решавање?

Масон: Проблем је био неусклађеност дизајна, како у свим производима, тако иу оквиру једног производа. На пример, дугме које би требало да изгледа исто свугде, али заправо варира у боји, тежини фонта и стилу обруба.

Дугмад изгледају другачије у изгледу појединих дизајнера и нашим апликацијама.

Брз раст АдРолл-а значио је да смо фокусирани на брзину. Сада смо већа компанија са више производа, па као дизајнер верујем да је важно да нагласимо доследност у начину на који презентујемо наше производе: кроз дизајн.

Да бисмо се фокусирали на дизајн, прво смо морали да исправимо постојеће недоследности. УКС дизајнери се овде обично фокусирају на један или два производа, тако да бих натерао наш тим да размисли о дизајну на свим производима, основао сам недељни „УИ Смацкдовн“ састанак на коме смо разговарали о УИ смерницама.

У сваком састанку размотрили смо недоследности у дизајну да бисмо одлучили о једном дизајну. Након неколико састанака, дизајнери су ме још увек питали о правилној боји или подлози итд. Требао нам је централни документ са свим одговорима, па сам изградио наш УИ Фрамеворк у Скетцх-у као ресурс за дизајнере. Кад год схватимо да недостаје компонента или желимо да укључимо нову компоненту, разговарамо о њој и додамо је у матичну датотеку УИ Фрамеворк.

Ариа: Споменули сте да желите да АдРолл буде дизајнерска компанија - шта под тим мислите?

Масон: Желим да АдРолл у први план постави дизајн тако да буде конкурентски диференцијал - који купци препознају као добро дизајниран производ који заиста решава њихове потребе.

Ариа: Који су били твоји непосредни циљеви за стилски водич? Да ли имате дугорочну визију овог пројекта?

Масон: Мој краткорочни циљ је постићи конзистентност дизајна између дизајнера стандардизовајући наше компоненте УИ. Желим да дизајнери говоре исти језик када разговарају о дизајну. На пример, у модалитету или падајућем моделу, инжењери граде на основу начина на који дизајнер предлаже. Ако су дизајнерски елементи различити између дизајнера, инжењери ће направити исти елемент на различите начине.

Мој средњорочни циљ је да овај стил дефинишемо у нашем коду у „РоллУп“, АдРолл-овој интерној библиотеци компонената корисничког сучеља. Ако имамо унапред дефинисан стил, све наше инжењере треба да копирамо. Дизајнери и инжењери могу да говоре исти језик.

Ариа: Да ли сте наишли на проблеме током креирања водича за стил? Како сте их решили?

Масон: Једна од највећих препрека била је куповина од стране људи из тимова производа. Да бих све укључио, заказао сам састанак са јасним списком тачака дневног реда који треба да покривам. Предочио сам недоследности у дизајну, као што су различити падајући менији између производа. Давање визуелних доказа покреће разговоре, а на крају, људи брину о свом производу и желе доследност.

Други изазов је било одлучивање о правилима. Када говоримо о стандардизацији компоненте, она би требало да буде применљива било где, у сваком контексту. Морате да мислите на сваки случај. Компонента мора бити флексибилна, али истовремено и довољно функционална да би била лако употребљива, потрошна и применљива.

Ево примера флексибилности нашег водича за стил Наша почетна одлука за облагање у овом падајућем географском циљању била је превелика, па смо ревидирали водич за стилове да бисмо објаснили овај случај употребе.Пре (лево), После (десно)

У ствари желим још један изазов! Именовање може бити тешко. Као што сам већ рекао, желим да дизајнери и инжењери говоре истим језиком, али то треба учинити пажљиво. За нешто тако једноставно као падајући, ми заправо имамо неколико варијација (једна са потврдним оквирима, друга са потврдним оквирима и текстуалним блоком, а друга је стандардни падајући мени). Како ћемо именовати три различита падајућа места, тако да постоји универзално разумевање који је то?

Семантика је изазовна; наше именовање мора имати смисла. Користили смо неколико сјајних алата за сарадњу да бисмо постигли консензус када одлучујемо о имену. На пример, Ваке нам је помогао да прикупимо сва отворена питања и питања, разговарамо о решењима, надгледамо УИ Смацкдовн одлуке и наставимо разговор са већим тимом производа кроз интеграцију са Слацк-ом.

Како смо користили Ваке да разговарамо о недоследностима у корисничком сучељу и сарађујемо на правилима компоненти.

Ариа: Има ли нечег јединственог у корисничком сучељу АдРолл-а што бисте морали узети у обзир приликом креирања водича за стил?

Масон: Наша контролна табла је веома тешка. Поред тога, ток креирања кампање пружа оглашивачима гомилу полуга за повлачење. Да бисмо удовољили потребама мање искусних оглашивача, циљ нам је да имамо ефикасна подразумевана подешавања. У нашим производима компоненте имају сложене функције, али изгледају једноставно и лако се користе.

Ариа: Да ли постоје неке ствари за које бисте желели да знате када сте почели да стварате водич за стил?

Масон: Волео бих да дубље разумем како сви наши производи раде од почетка. На пример, делимо како функционише наш производ на нашем недељном састанку о критичкој дизајнирању, тако да знам како СендРолл (наш производ за преусмеравање е-поште) делује на површини, али немам дубоко знање о СендРолл-у који дизајнер ради. Мислим да нијансирано разумевање производа дефинитивно помаже када радим на водичу за стил, јер тада боље разумем све могуће случајеве употребе.

Ариа: Па који је најбољи начин да се постигне то заједничко разумевање дизајнерског процеса и њиховог производа?

Масон: Иако смо заиста фокусирани на испоруку наших производа, добро радимо свој посао дијељења нашег дизајнерског процеса на нашем седмичном састанку о критичкој дизајну. Мислим да можемо бити бољи око затварања петље након сваког састанка - како је дизајнер уградио повратне информације са састанка? Једном када производ буду испоручени и коришћени од стране наших оглашивача, могли бисмо делити и начин на који оглашивачи користе производе на основу увида из аналитике.

Ариа: Да ли је било ресурса о којима сте говорили током рада на овом пројекту?

Масон: Читао сам Атомиц Десигн од Брада Фроста, истраживао на мрежи и разговарао с другим УКС дизајнерима на МеетУпс-у. Ако мислите да одређена компанија практикује добар дизајн, прилично је вероватно да су они разговарали о свом водичу за стил негде на мрежи.

Ариа: Какав је статус нашег водича за стил?

Масон: Ухватио сам и прегледао све УИ елементе које користимо у нашим различитим производима и груписао их у темеље, компоненте, обрасце и странице, који ће послужити као извор истине за наше дизајнирање корисничког сучеља.

Можете да провјерите темеље и корисничке интерфејс елементе на Дрибббле-у. Ако сте упознати са Атомским дизајном, груписао сам ниво „атома“ и „молекуле“ у оно што ја називам „компоненте“. На пример, комбиновање наслова форме и уноса олакшава другим дизајнерима да лако копирају испуњени образац поље.

Хвала за читање!

Пазите на ове надолазеће теме док развијамо наш стилски водич:

  • Како оквир УИ поједностављује сарадњу
  • Развој нових табела стилова заснованих на УИ Фрамеворк-у
  • Како направити веб локацију Стиле Гуиде
  • Путовање до проналаска нашег гласа и тона