Ръководство на дизайнера за работа със стил ръководства & стил плочки

Създаване на a фирмена идентичност не е лесна задача. Това изисква усилие, но е и една от най-полезните творчески задачи. Уеб проектите често смесете марката с дизайн на интерфейса. Това може да бъде объркващо, защото има толкова много неща в двете области. Ръководства за стил и стил плочки са големи ресурси за уеб дизайнери и макар и да звучат подобно, те постигат две различни задачи.

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

Ръководства за стил за уеб

Чел съм различни мнения за стилни ръководства. Някои казват, че това са цифрови макети, докато други казват, че кодовите стилови ръководства са най-полезни.

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

Няма един-единствен правилен начин да се направи ръководство за стил. Единственият грешен начин е да се създаде ресурс, който просто не могат да бъдат разбрани от другите.

Целта е да се създаде актив, който ще има издържайте изпитанието на времето. Трябва да бъде отворен за редактиране ако се създават нови ресурси. Тя трябва да бъде достъпна и за всеки, който се присъедини към екипа, за да се потопи направо в ръководството с лекота.

Трябва да има ръководство за стил както е необходимо за проекта. Обикновено включва активи за многократна употреба, като типография, бутони, цветни мостри, текстури и общи страници.

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

Моят абсолютен любим ресурс е StyleGuides.io. Тя обхваща основи на стилни ръководства за мрежата, включително живи примери и казуси.

Библиотеката с шаблони на MailChimp е един от най-добрите примери, които можете да намерите в StyleGuides.io. Това е онлайн наръчник за стил на живо определя мрежата на MailChimp, типографията и елементите на страницата.

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

За да научите повече по темата, разгледайте тези други публикации в ръководства за стил:

• Предни ръководства за стил (24ways.org)
• Създайте ръководство за стила на уебсайта (Creativebloq.com)
• Как да направим идеалния уеб дизайн стил Ръководство (Dtelepathy.com)

Разклоняване в стиловите плочки

Плочки стил са съвсем различен звяр. Тези плочки са творческите активи, използвани в ранната фаза на проектиране когато се опитвате да забиете специфична естетика.

Уебсайтът Style Tiles е създаден от Саманта Уорън и има всичко, което би трябвало да знаете. Има няма конкретен шаблон за проектиране на стил плочки. Но примерите на Саманта използват заглавия и типове параграфи, връзки, модели, и възможни цветови решения заедно с a логото на марката.

Когато работите със стилови плочки, целта ви в крайна сметка е да представете 2-3 различни плочки стил на клиента или на креативния директор. Тези плочки са по-подробни от настроения борд, още много по-малко подробен от пълен макет.

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

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

Ето една чудесна цитат от уебсайта Style Tiles:

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

Вместо това използвайте стилови плочки, за да намерите a обща тема или визуален език да се използва в целия сайт. Това може да включва брандиране / идентичност но също така може да включва Функции на потребителския интерфейс, като падащи менюта или бутони CTA.

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

Ако искаш потъвам повече в стил плочки разгледайте тези свързани публикации.

• Стил и плочки и как работят
• Стил на плочки: Алтернатива на пълния дизайн Comps
• Създаване на стилови плочки: Лесен подход към дизайн посока

Стилови ръководства срещу стилни плочки

Разликата между стил ръководства и стил плочки е неясно, но определено. А ръководство за стил е много повече подробен и трябва да се използва като постоянен справочник за творческия екип. А стил плочки може да се използва като moodboard да се парцел идеи визуално за вас или за клиента. Те често са свикнали проучвайте идеи, и след като проектът приключи, те не служат много за цел.

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

И двете имат своите предимства и недостатъци. Стилът е с плочки бързо и забавно, но ефимерен в природата. Пътеводители за стил са обстоен и се държат като визуална документация, но и те изисква много работа.

И така, коя трябва да използвате? В крайна сметка зависи от проекта.

По-малки проекти като например за малки бизнес сайтове работят по-добре с плочки стил. Изграждането на цял ръководство за стил за малък бизнес сайт би изисквало прекалено много работа и натрупани часове. Това вероятно не си струва цената за повечето клиенти.

Обаче a голям проект като препроектиране на NY Times ще се възползват от двете стил плочки и стил ръководства.

Намиране на език и настроение за нов проект винаги е ценен процес. Това прави стиловите плочки идеален за почти всеки сценарий.

Можете също така да се справите без да създава нито едно от тези активи. Някои дизайнери отиват направо от кабелни рамки да се подробни макети. А някои клиенти дори не искат ръководство за стил, защото няма да се използват.

Работете по проект и решете какво е най-добро за всеки един от тях.

Примери на живо

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

Ръководства за стил

Този невероятен Airbnb стил ръководство е създаден от Дерек Брадли. Това е много просто, но ясно илюстрира основни модели, цветове и елементи на страници може да се намери в дизайна.

Ето много по-голям дигитален пътеводител, създаден от дизайнера Наошад Алам. Този пример е много по-организирани с раздели за цветове, типография, форми, елементи на интерфейса и други функции на потребителския интерфейс.

По-подробни стилови ръководства биха поставили всички тези елементи на дизайна в мрежата включва кодови фрагменти за всеки един.

Дизайнерът Купи Вонг направи това ръководство за AfterShip. Типография, бутони, избор на цвят и общи елементи на страницата са внимателно изработени и организирани заедно в секции.

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

Дизайнерът на потребителския интерфейс Грег Длубач сподели своя собствен ръководство за стила на потребителския интерфейс за уеб проект. Това нещо е огромно. Прегледът на цял екран обхваща 21 000 пиксела!

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

Плочки за стил

UI / UX дизайнер Abdus Salam създаде този стил плочки за органични храни магазин уебсайт. Това е много основно с плоски елементи на дизайна, някои незначителни функции на UI, и a цветова палитра.

Дизайнерът Ейдриън Кантелми наистина се справи с подробностите си. Той има цветове и типография, но също така включва векторни илюстрации.

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

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

Ако можете да почувствате как може да изглежда сайтът с един поглед тогава правиш правилно.

Ето един забавен пример за отхвърлен стил, използван за пътнически проект. Дизайнерът Brennan Gleason предоставя само малка извадка от плочката, но все още можете усетите атмосферата на сайта.

Заключителни думи

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