Убрзајте ток рада на Интернету помоћу водича за стил

Водичи за стил: Брзе везе

Шта је водич за стил?
Где се уклапају у пројекат?
Шта укључујете?
Како се креира водич за стил?
Како се користи водич за стил?

Водичи за стил су сада чврсто успостављени као кључни део тока модерног веб дизајна. Њихова употреба у веб пројектима већ неко време континуирано расте, захваљујући повећаној свести заједнице, а разни професионалци из индустрије показују своју употребу и ефикасност. Дакле, да ли градите веб локацију од нуле или користите градитељ веб страница , од виталне је важности да направите водич за стил.



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



У овом чланку ћемо проћи кроз све што треба да знате о томе шта је водич за стил, како га саставити и како га користити. Користите брзе везе са десне стране да бисте прешли на жељени одељак.

Шта је водич за стил?

За разлику од традиционалне статике изглед веб странице композиција произведена у Скетцх-у, Пхотосхоп ЦЦ или слично, водич за стил је скуп елемената и компонената који када се користе заједно могу да чине цео изглед или делове тог изгледа. Када се правилно произведу, прилагодљиви су и флексибилни, што их чини савршеним алатом за израду одзивних дизајна. Погледај стилегуиде.ио за мноштво примера сјајних водича за стил и ресурсе за сазнавање више.



У овом чланку ћу користити термине „водич за стил“ и „систем дизајна“ наизменично, јер верујем да су водичи за стил најефикаснији када чине систем за управљање постојећим дизајном и омогућавање лакоће израде нових.

Па зашто бисте желели да пређете са традиционалног тока посла? За почетак, представљање водича за стил значи да ћете моћи брже да уђете у прегледач и проведете мање времена на радној површини алати за веб дизајн .

Најкориснији водичи за стил омогућавају вам да разрадите све своје концепте дизајна у прегледачу, поништавајући сличне Пхотосхоп-у и Скетцх-у у алате за стварање средстава, уместо у оно што користите за предвиђање изгледа.



Где се стилски водичи уклапају у пројекат?

Иако су стилски водичи првенствено алат за веб дизајнере и / или програмере, они могу бити испоручиви и за клијенте. Водичи за стил дају клијентима увид у систем дизајна који се успоставља и палету која ће чинити њихов производ. Самантха Варрен са њом детаљно истражује ову идеју Стиле Тилес ; метода за показивање визуелног језика клијентима у облику фонтова, боја и елемената интерфејса.

Веб локација америчке савезне владе садржи јасан, темељит водич кроз стил

Веб локација америчке савезне владе садржи јасан, темељит водич кроз стил

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

Многе мале нијансе - попут приказивања типова и размака - могу се променити. То може значити да се клијент осећа као да га је Пхотосхоп рендер заварао.

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

Шта укључујете у добар водич за стил?

Идеално би било да вам ваш водич за стилове пружи све што вам је потребно за дизајн и израду странице на тренутак, без отварања Пхотосхопа или Скетцх-а. Што се тиче формата, водич за стил треба да буде ХТМЛ уживо, категоризован на начин који је лако одржив за вас и све друге дизајнере који би могли доћи у контакт с њим.

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

како преокренути избор у Пхотосхопу

Тип

МаилЦхимп

Правила типографије за МаилЦхимп (кликните да бисте видели целокупан водич)

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

Решетке и размаци

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

Боја

Овде укључите примарну и секундарну палету (кликните да бисте видели целокупан водич)

Овде укључите примарну и секундарну палету (кликните да бисте видели целокупан водич)

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

Модули

најбољи кућни штампач за гицлее отиске

Модули садрже елементе као што су дугмад, поља обрасца, картице и навигација, као и колекције елемената као што су слике са насловима и мета подаци о блогу. Такође укључују комбинације елемената који раде заједно - на пример наслов чланка, датум и параграф увода, опис са малим насловом и текстом итд.

Како се креира водич за стил?

Како тачно састављате водич за стил? Ево, водићу вас кроз поступак који користим.

Почните са жичаним оквирима

Жичани оквири могу вам помоћи да успоставите елементе које ви

Жичани оквири могу вам помоћи да успоставите елементе који ће вам требати

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

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

Потражите обрасце

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

Убрзајте веб радни ток помоћу водича за стил - Маркери

Ознаке различитих боја могу вам помоћи да разликујете тип, модуле и решетке

Такође потражите обрасце који покушавају да се појаве. На пример, листа чланака на блогу може имати сличан формат као листа резултата претраживања, али рецимо да су елементи поређани у другом редоследу. Можда ће промена једне од две да одговара другој помоћи кориснику да прочита образац који је подсвесно научио негде другде у вашем производу.

како цртати као дон блутх

Каталогизирајте све

Волим да користим сет маркера страница Пост-Ит Ноте да бих означио све елементе на мојим жичаним страницама за референцу. На пример, модул попут мрвице који се јавља на скицама могао би бити означен као „М01“. „М“ означава да је то модул. Број означава који се модул случајно налази у мом систему - следећи модул би био М02, М03 и тако даље.

Сам елемент могао би се поновити негде другде, па би се овај узорак могао појавити на страници производа, као и на блогу, обе ознаке М01, тако да на крају не дизајнирам и не израђујем више верзија истог елемента када је у питању израда прототипа тхе вирефрамес.

Пређите на ХТМЛ

Након што завршите с каталогизацијом и етикетирањем жичаних оквира, једноставно је ствар узети тај каталог елемената и модула и изградити их као живи ХТМЛ водич кроз стил.

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

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

Како се користи водич за стил?

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

У свом (углавном) целовитом стању, водич за стил је референца за обимни визуелни језик производа који градите. То значи да можете да замислите како се нове функције могу обликовати, као и изглед и осећај који усвајају. Такође је жива библиотека тестираних елемената и компонената које се могу користити за брзу конструкцију нових екрана или делова производа, што га чини најефикаснијим начином за брзу изградњу пројеката у било ком обиму.

Убрзајте веб радни ток помоћу водича за стил - Означите свој водич за стил

Означите свој водич за стил живота како бисте могли да укрштате жичане оквире и свој комплет компонената

Важно је да се водич кроз стил одржава и даље од почетне концепције. Мора остати актуелна, уместо да буде снимак како је систем дизајна производа изгледао у одређено време. То би требало да буде визуелни лексикон вашег пројекта - ентитета са којим се консултујете кад год се донесе одлука о дизајну након скицирања. Све нове компоненте и модули направљени су од његове ДНК, тако да ће из перспективе корисничког искуства сви нови комади изгледати доследно као део комплетне слике бренда.

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

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

Овај чланак се првобитно појавио у нет магазине . Претплатите се овде.

Опширније: