Designerhåndbog til at arbejde med stilguider og stilfliser

Oprettelse af en branded identitet er ingen nem opgave. Det kræver hårdt arbejde, men det er også en af ​​de mest givende kreative opgaver. Web projekter ofte mix branding med interface design. Dette kan være forvirrende, fordi der er så meget at gøre i begge områder. Style guider og stil fliser er gode ressourcer til webdesignere, og mens de lyder ens, opnår de to forskellige opgaver.

I dette indlæg vil jeg gerne dykke ind i begge dele og dække de fordele, du kan få fra disse kreative aktiver. Ikke alle har brug for (eller lignende) at skabe stilguider eller stilfliser. Men hver designer skal i det mindste forstå, hvad disse er, og hvordan de virker.

Style Guides For The Web

Jeg har læst varierende meninger om stilguider. Nogle siger, at det er digitale mockups, mens andre siger, at kodebaserede stilguider er de mest nyttige.

På nogen måde er målet med en stilguide det samme for internettet som ethvert andet projekt. Det definerer konsekvente mønstre, brugergrænseflademoduler og kreative præferencer anvendt i designprocessen. Du kan få meget specifikke og fastsætte pixel-perfekte målinger for visse elementer, eller du kan være løs og tilbyde retningslinjer med visuelle eksempler.

Der er ingen enkelt måde at lave en stil guide på. Den eneste forkerte måde er at skabe en ressource, der simpelthen kan ikke forstås af andre.

Målet er at skabe et aktiv, der vil stå tidens test. Det bør være åben for redigeringer hvis der oprettes nye ressourcer. Det skal også være tilgængeligt for alle, der går sammen med holdet, så de nemt kan dykke ind i guiden.

En stil guide skal være så detaljeret som nødvendigt for projektet. Det omfatter normalt genanvendelige aktiver, f.eks. typografi, knapper, farveprøver, teksturer og almindelige sideelementer.

Vi er for nylig dækket levende stil guide værktøjer der kan hjælpe dig med at opbygge levende stilguider fra bunden. Disse levende guider er mere til frontend-udviklere, men de kan være lige så nyttige for designere. Du kan læse mere om dette emne i dette Smashing Magazine-indlæg.

Min absolutte favorit ressource er StyleGuides.io. Det dækker Grundlæggende om stilguider til internettet, inklusive levende eksempler og casestudier.

MailChimps mønsterbibliotek er et af de bedste eksempler, du kan finde på StyleGuides.io. Det er en online live stil guide der definerer MailChimps gitter, typografi og sideelementer.

Når du designer en stilguide til et webfirma, er det almindeligt at sætte alt online, men du kan også oprette interne guider, og opbevar dem på et lokalt intranet eller vær dem privat bag en bruger login side. Den måde du får adgang til en stilguide, betyder ikke noget. De tjener alle samme formål med at formidle bestemte farver, mønstre og billeder match temaet for et web-projekt.

For at lære mere om emnet, tjek disse andre indlæg på stilguider:

• Front-end Style Guides (24ways.org)
• Opret en hjemmeside stil guide (Creativebloq.com)
• Sådan laver du den perfekte webdesign stilguide (Dtelepathy.com)

Forgrening i stilfliser

Style fliser er et andet dyr helt og holdent. Disse fliser er kreative aktiver anvendt i den tidlige designfase når man forsøger at søm ned en bestemt æstetik.

Style Tiles hjemmeside blev oprettet af Samantha Warren, og det har alt, hvad du måske ville have brug for at vide. Der er ingen specifik skabelon til design af en stil flise. Men Samanthas eksempler bruger overskrifter og afsnitstyper, links, mønstre, og mulige farvevalg sammen med a branded logo.

Når du arbejder med stilfliser, er dit mål i sidste ende at præsentere 2-3 forskellige stilfliser til klienten eller den kreative direktør. Disse fliser er mere detaljeret end et humørbræt, endnu meget mindre detaljeret end en fuld mockup.

Fliser skal være lige detaljerede nok til at give en følelse af identitet og stemning på hjemmesiden. Samantha opmuntrer ved hjælp af adjektiver at beskrive hver flise i detaljer.

Kunder kan se gennem de forskellige fliser, og vælg deres yndlingsstykker. Dette sparer dig tid når designe, fordi klienten allerede har set aktiver, de kan lide, så der er mindre chance for omfattende revisioner.

Her er et godt citat fra Style Tiles hjemmeside:

Sammenligning af stilfliser til en indretningsdesigners værktøjskasse er ret apt analogi. Du ønsker ikke at hælde indsats i en pixel-perfekt mockup kun for at få klienten til at indse, at de hader de fleste farver og skrifttyper.

I stedet skal du bruge stilfliser til at finde en fælles tema eller visuelt sprog at blive brugt på tværs af hele webstedet. Dette kan omfatte branding / identitet men kan også omfatte UI funktioner, f.eks. dropdown-menuer eller CTA-knapper.

Du skal bruge disse som leverbare aktiver tidligt i processen. Når du er færdig med en fuld mockup, er der ingen grund til at henvise til stilfliserne mere. Alligevel i begyndelsen kan stilfliser være afgørende for den kreative proces ved sparer designtiden og Iving klienten mange muligheder at vælge imellem.

Hvis du vil dykke mere ind i stil fliser tjek disse relaterede indlæg.

• Style Fliser og hvordan de virker
• Style Fliser: Et alternativ til Fuld Design Comps
• Oprettelse af stilfliser: En nem tilgang til en designretning

Style Guides vs. Style Tiles

Forskellen mellem stil guider og stil fliser er vag men bestemt. EN stil guide er meget mere detaljeret og skal bruges som en løbende reference vejledning for det kreative team. EN stil flise kan bruges som en humørtavle til kortlægge ideer visuelt for dig selv eller kunden. De er ofte vant til udforske ideer, og når projektet er færdigt tjener de ikke meget af et formål.

Style fliser er ofte meget mere ru rundt om kanterne, og de bruges udelukkende i den tidlige kreative proces. En stil guide er beregnet til at blive brugt gennem hele designprocessen og selv bagefter for fremtidig reference for andre designere, der måske arbejder på stedet.

Begge har deres fordele og ulemper. Style fliser er hurtigt og sjovt, men flygtig i naturen. Style guider er grundig og opføre sig som visuel dokumentation, men de også kræver meget arbejde.

Så hvilken skal du bruge? Det i sidste ende afhænger af projektet.

Mindre projekter som for små virksomheder hjemmesider fungerer bedre med stil fliser. At bygge en hel stil guide til en lille virksomhed site ville kræve alt for meget arbejde og betalbare timer. Dette er sandsynligvis ikke værd at koste for de fleste kunder.

Men a stort projekt ligesom omlægning af NY Times ville have gavn af både stil fliser og stil guider.

Finde et sprog og humør for et nyt projekt er altid en værdifuld proces. Dette er hvad der gør stilfliser perfekt til næsten alle scenarier.

Du kan også komme forbi uden at skabe nogen af ​​disse aktiver. Nogle designere går lige fra wireframes til detaljerede mockups. Og nogle kunder ønsker ikke engang en stilguide, fordi den ikke bliver brugt.

Arbejde på en projektbasis og afgøre, hvad der er bedst for hver enkelt.

Live eksempler

Lad os pakke dette op ved at dække eksempler af både stil guider og stil fliser. Jeg fandt disse designs, mens du kiggede på Dribbble, og jeg tror, ​​at de eksemplificerer den kvalitet, du vil have i din egen stil guider eller stil fliser.

Style Guides

Denne utrolige Airbnb-stilguide blev oprettet af Derek Bradley. Det er meget enkelt, men det illustrerer tydeligt hovedmønstre, farver og sideelementer der findes i designet.

Her er en meget større digital stil guide skabt af designer Naoshad Alam. Dette eksempel er meget mere organiseret med sektioner til farver, typografi, formularer, grænsefladeelementer og andre brugergrænseflader.

Mere detaljerede stilguider placerer alle disse designelementer på nettet og inkludere kodestykker for hver enkelt.

Designer Cupi Wong lavede denne vejledning til AfterShip. Typografi, knapper, farvevalg og almindelige sideelementer er omhyggeligt udformet og organiseret sammen i sektioner.

Dette kunne også blive sendt til internettet og udbygget meget større som online referencedokumentation.

UI designer Greg Dlubacz delte sin egen UI stil guide til et web-projekt. Denne ting er alvorligt enorm. Forhåndsvisning af fuldskærm spænder over 21.000 pixel højt!

Absolut en af ​​de bedste digitale stil guider jeg nogensinde har set. Dette kunne også sendes til en online dokumentationsside for gruppemedlemmer til reference.

Stil fliser

UI / UX designer Abdus Salam oprettet denne stil flise til en økologisk mad butik hjemmeside. Det er meget grundlæggende med flade designelementer, nogle mindre brugergrænseflader, og a farvepalet.

Designer Adrian Cantelmi gik virkelig detaljeret med sin salgsstil flise. Det har farver og typografi, men indeholder også vektor illustrationer.

Disse vektorer hjælper til definere mærket, humøret og det overordnede farveskema af hjemmesiden.

World Cup Advisors redesign fik sin egen stil flise med meget grundlæggende funktioner. Et par ikoner, nogle farvevalg, sammen med et par knapdesigner. Enkelhed er navnet på spillet.

Hvis du kan få en fornemmelse for, hvordan webstedet kan se ud ved første øjekast så gør du det rigtigt.

Her er et sjovt eksempel på en afvist stil tegl brugt til et rejse projekt. Designeren Brennan Gleason giver kun en lille prøve af flisen, men du kan stadig få en fornemmelse for atmosfæren på hjemmesiden.

Endelige Ord

Hvis du søger rundt på nettet, finder du mange flere eksempler, tips og ressourcer til byggestilguider og stilfliser. Men jeg håber, at denne artikel kan være en primer på begge og få dig flydende forståelse og skabe disse designaktiver.