Водич дизајнера за рад са стилским водичима и стилским плочицама
Креирање а брендирани идентитет није лак задатак. За то је потребан напоран напор, али и један од најзанимљивијих креативних задатака. Веб пројекти често мик брандинг са дизајном интерфејса. Ово може бити збуњујуће, јер има много тога да се уради у оба подручја. Стиле гуидес и стиле тилес су велики ресурси за веб дизајнере, и иако звуче слично, они остварују два различита задатка.
У овом посту бих желео да се упустим у оба, и покријем погодности које можете добити од ових креативних средстава. Неће свима бити потребно (или слично) креирати стилске водиче или стилске плочице. Али сваки дизајнер треба бар да разуме шта је то и како они раде.
Стилски водичи за Веб
Прочитао сам различита мишљења о стилским водичима. Неки кажу да су ово дигитални модели, док други кажу да су кодни стилски водичи најкориснији.
У сваком случају, циљ водича за стил је исти за веб као и сваки други пројекат. Дефинише конзистентне обрасце, модуле корисничког интерфејса и креативне преференције у процесу дизајнирања. Можете добити врло специфичне и одредити пиксел-савршена мјерења за одређене елементе, или можете остати слободни и понудити смјернице с визуалним примјерима.
Не постоји један прави начин да се направи стилски водич. Једини погрешан начин је да направите ресурс који једноставно не могу разумети други.
Циљ је створити имовину која хоће издржи тест времена. Треба да буде отворен за измене ако се стварају нови ресурси. Такође би требало да буде доступан свима који се придруже тиму како би лако слетели у водича.
Водич за стил би требао бити колико је потребно за пројекат. Обично укључује средства за вишекратну употребу, као што су типографија, дугмад, сватцхеви боја, текстуре и уобичајени елементи странице.
Недавно смо покрили алати за водич кроз стил живота који вам могу помоћи да изградите водиче за животни стил од нуле. Ови живи водичи су више за програмере, али могу бити корисни и дизајнерима. Више о овој теми можете прочитати у овој поруци Смасхинг Магазине.
Мој апсолутни омиљени ресурс је СтилеГуидес.ио. Покрива основе стилских водича за веб, укључујући ливе примјери и Студије случаја.
МаилЦхимп-ова библиотека образаца је један од најбољих примјера које можете пронаћи на СтилеГуидес.ио. То је онлине водич уживо дефинира мрежу, типографију и елементе странице МаилЦхимп-а.
Када дизајнирате водич за стил за веб компанију, уобичајено је да све ставите на интернет, али можете и креирати интерни водичи, и држите их на локалном интранету или их приватно угостите иза странице за пријаву корисника. Начин на који приступате водичу за стил заиста није важан. Сви они служе истој сврси преношења одређених боја, узорака и визуала одговарају теми веб пројекта.
Да бисте сазнали више о овој теми, погледајте ове друге постове у водичима за стил:
- Водичи стилова са предње стране (24ваис.орг)
- Направите водич за стил странице (цреативеблок.цом)
- Како направити Перфецт Веб Десигн Стиле Гуиде (дтелепатхи.цом)
Бранцхинг Инто Стиле Тилес
Стиле тилес су потпуно друга звер. Ове плочице су креативна средства која се користе у раној фази пројектовања када покушавате да забијете одређену естетику.
Веб страницу Стиле Тилес је креирала Самантха Варрен, и она има све што би можда требало да знате. Постоји нема специфичног шаблона за дизајнирање плочица. Али Самантини примери користе наслови и типови пасуса, везе, обрасци, и могућ избор боја заједно са брандед лого.
Када радите са стилским плочицама, ваш циљ је на крају представите 2-3 различите плочице клијенту или креативном директору. Ове плочице су детаљније од одбора за расположење, још много мање детаљан од пуног макета.
Плочице би требале бити довољно детаљне да дају смисао идентитет и расположење сајта. Самантха охрабрује користећи придјеве детаљно описати сваку плочицу.
Клијенти могу гледајте кроз различите плочице, и изаберите своје омиљене комаде. Ово штеди вам време приликом пројектовања јер је клијент већ видио средства која им се свиђају, тако да постоји мања вјероватноћа да ће се поправити.
Ево одличног цитата са веб странице Стиле Тилес:
Поређење стилских плочица са алатима дизајнера ентеријера је прилично добра аналогија. Не желите да уложите напор у савршену макету пиксела само да би клијент схватио да мрзе већину боја и фонтова.
Уместо тога, користите плочице стила да бисте пронашли заједничка тема или визуелни језик да се користи на целом сајту. Ово може укључити брендирање / идентитет али може укључивати УИ функције, као што су падајући менији или ЦТА тастери.
Требали бисте их користити као испоручива средства рано у процесу. Када довршите комплетан модел, заиста више нема потребе за референцирањем стила. Ипак, на почетку, стилске плочице могу бити пресудне за креативни процес штеди време дизајнера и Клијенту се нуди много опција за избор.
Ако желиш да пређите више у стил плочице погледајте ове повезане постове.
- Стил плочице и како они раде
- Стилови плочица: алтернатива комплетном дизајну
- Креирање стилских плочица: лак приступ дизајнерском правцу
Стиле Гуидес вс. Стиле Тилес
Разлика између стилских водича и стилских плочица је нејасна, али дефинитивна. А стиле гуиде је много више детаљно и треба да се користи као континуирани референтни водич за креативни тим. А стиле тиле може се користити као моодбоард до нацртајте идеје визуелно за себе или клијента. На њих се често навикну истражите идеје, и када се пројекат заврши, они не служе много сврси.
Стилске плочице су често много грубље око ивица и користе се само у раном креативном процесу. Водич за стил је намијењен за употребу током целог процеса пројектовања и чак и касније за будућу референцу за друге дизајнере који би могли радити на сајту.
Оба имају своје предности и недостатке. Стилске плочице су брзо и забавно, али краткотрајан у природи. Стилски водичи су темељан и понашају се као визуелна документација, али и они захтева пуно посла.
Коју би требало да користите? То на крају зависи од пројекта.
Мањи пројекти као што је за мале пословне веб странице раде боље са стил плочице. Изградња читавог водича за стил за мали пословни сајт би захтијевала превише посла и плаћених сати. Ово вероватно није вредно трошкова за већину клијената.
Међутим а велики пројекат као што би редизајнирање НИ Тимес-а имало користи од стилских плочица и стилских водича.
Проналажење језика и расположења за нови пројекат је увијек вриједан процес. То је оно што чини стил плочице савршено за скоро сваки сценарио.
Можете и ви без стварања ове имовине. Неки дизајнери иду десно од вирефрамес до детаљне моцкупс. Неки клијенти не желе чак ни водич за стил јер се неће користити.
Радите по пројекту и одлучите шта је најбоље за сваку од њих.
Ливе Примјери
Завршимо ово покривањем примери и стилских водича и стилских плочица. Нашао сам ове дизајне док сам претраживао Дрибббле и мислим да су пример квалитета који бисте желели у сопственим стилским водичима или стилским плочицама.
Стиле Гуидес
Овај невероватни Аирбнб стилски водич је креирао Дерек Брадлеи. То је врло једноставно, али јасно илуструје главне обрасце, боје и елементе странице наћи у дизајну.
Ево много већег дигиталног водича за стил којег је дизајнирао дизајнер Наосхад Алам. Овај пример је много организираније са секције за боје, типографију, форме, елементе интерфејса и друге функције корисничког интерфејса.
Детаљнији водичи за стил би ставили све ове елементе дизајна на Веб, и укључите исјечке кода за сваку од њих.
Дизајнер Цупи Вонг направио је овај водич за АфтерСхип. Типографија, дугмад, избор боја и уобичајени елементи странице пажљиво су израђени и организовани у секције.
Ово би такође могло да се пренесе на веб и да буде изграђено много више као онлине референтна документација.
Дизајнер корисничког интерфејса Грег Длубацз поделио је свој властити водич за стил корисничког интерфејса за веб пројекат. Ова ствар је озбиљна. Приказ преко целог екрана се простире на 21.000 пиксела!
Апсолутно један од најбољих дигиталних стилских водича које сам икада видео. Ово би такође могло бити пренето на страницу за документацију на мрежи за чланове тима на које се упућује.
Стиле Тилес
УИ / УКС дизајнер Абдус Салам је креирао овај стил плочице за веб страницу продавнице органске хране. Врло је основно равне елементе дизајна, неке мање функције корисничког интерфејса, и а палета боја.
Дизајнер Адриан Цантелми заиста је детаљно описао своју плочицу. Има боје и типографију, али такође укључује вецтор иллустратионс.
Ови вектори помажу дефинишите бренд, расположење и укупну схему боја веб сајта.
Редизајн светских саветника добио је свој стилски стил са веома основним карактеристикама. Неколико икона, неки избор боја, заједно са неколико дизајна гумба. Једноставност је име игре.
Ако можете да осетите како би сајт могао изгледати на први поглед онда то радите како треба.
Ево забавног примера одбијеног стила који се користи за пројект путовања. Дизајнер Бреннан Глеасон даје само мали узорак плочице, али још увијек можете осетите амбијент сајта.
Финал Вордс
Ако претражујете Веб, наћи ћете много више примера, савета и ресурса израда стилских водича и стилских плочица. Али надам се да овај чланак може бити пример и на оба начина и да сте течно разумели и креирали ове дизајнерске материјале.
