Style Tiles: Et alternativ til full design Comps
Dette innlegget er en del av en serie som heter All About stil Guides.Maintain Konsistens med et nettsted stil GuideMaking det meste av stil Fliser for slankere design
Hvis du er som meg, vil du enig i at den innledende designfasen av et prosjekt kan være tidkrevende, full av frustrasjon og sjelden møter kundens forventninger i første godkjenning møtet. Hva hvis det var en bedre måte å nærme seg ting? Med Stil Fliser, den nyeste gutten på designmetodikk blokk, er det.
Noen sier at dagene av å skape fulle mockups for webdesign prosjekter i Photoshop er døende, om ikke regelrett døde. Andre sier at å designe-in-the-browser er ikke alt som det sprakk opp til å være heller. Men er vi alle får foran oss? Kanskje det er ikke verktøyet som vi skal se på, men hele veien at vi går om å designe et nytt nettsted og administrere klientgodkjenningsprosessen.
I denne opplæringen, vi kommer til å ta en nærmere titt ved Style Fliser - en ny måte å tenke på de opprinnelige designfasen, en design tilnærming skapt og unnfanget ved Den uforlignelige Samantha Warren. Vi kommer til å ta en titt på hva de er, hvorfor du bør bruke dem og gå deg gjennom prosessen med å lage og gjennomføre en stil Fliser til ditt neste prosjekt.
[stil Fliser tillate du] ... Presentere klienter med grensesnitt valg uten å gjøre investeringen i flere photoshop mockups. - Samantha Warren
Klar for å lære mer? La oss komme i gang.
Hva er stil fliser?
I sin enkleste form, er en stil Tile en enkelt side samling av felles elementer inkludert farger, typografi, teksturer, mønstre og design. Hvor en interiørarkitekt kan presentere sin klient med en stemning ombord omfatter maling chips, tekstiler og utklipp fra blader, kan den progressive webdesigner presentere sine interessenter med et sett med stil fliser.
Det viktigste å huske om stil Fliser er at de ikke er en bokstavelig gjengivelse av hvordan området vil se; i stedet, de hjelper definere stemningen, tone og "følelse" av et område basert på hva du har lært fra klienten i din første kickoff møter.
En annen ting å huske på er at stilen Tile tilnærming ikke er en ramme, som er definert prosess eller til og med et verktøy. I stedet er stil Fliser bygget rundt et sett med retningslinjer, teknikker og tilnærminger som tillater deg å fokusere på hva som virkelig er viktig i utformingen (i hvert fall i de innledende fasene av et nytt prosjekt). Start med å laste ned en psd mal for å hjelpe deg med å komme i gang, men gjerne forme din stil Fliser til din egen arbeidsflyt og kreative estetiske.
Eksempler
La oss ta en titt på et par eksempler vise deg et hvordan stil Fliser kan bli presentert. Jeg tilbakekonstrueres to nettstedene for å vise deg hva deres stil Fliser kan Denne stilen Tile er basert på den nylig fornyet Tuts + Premium nettstedet. Som du kan se, essensen av Tuts + Premium Stedet har blitt pent fanget i denne stilen Tile. Vi har oppmerksomt definert noen av designelementene i hoved oransje presentasjon delen av området, samt formidlet følelsen og utseendet på blogginnlegg (dvs. opplæringen oppføringer). Viktigere, fordi stil Tile er ikke presentert for en bestemt skjermstørrelse, orientering eller noe bortsett fra "digital", er det lett å forestille seg hvordan området vil se på alle enheter fra en stasjonær til en tablett til en smarttelefon. For litt moro, her er min tolkning av hva http://styletil.es stedet selv kan ha sett ut på den innledende design stadiet: Vær spesielt oppmerksom på adjektivet i denne stilen Tile. Alle farger, typografi valg og design teksturer på noen måte snakke med disse adjektivene, slik at stilen Tile er konsistent både når det gjelder design samt tone og merke meldingen. La oss ta en titt på noen av de delte likheter av disse to stil Tiles: Som jeg nevnte før, stil Fliser ikke følger et fast format. Faktisk kan du inkludere omtrent alt - så lenge det er på en eller annen måte grunnleggende for designkonsept. For eksempel kan du velge å droppe den "knappene" -delen og erstatte den med en tilpasset videospiller, en widget av noen beskrivelse eller noen form elementer. Oppsummering, fange den generelle retningen av området i stil Tile, men gjerne bøye dine kreative muskler. stil Fliser er ikke bare en wishy-washy-beste-praksis-hvis-du-ha -the-time-tilnærming for å samle støv i bunnen av webdesign verktøykasse. De har en rekke ganske imponerende fordeler for både deg og klienten når de er implementert på riktig måte: Mer enn noe, stil Fliser holde den innledende designfasen og klient godkjenningsprosessen enkel. Presentere klienter med en fullverdig utforming comp etter det første møtet risikerer mangler skogen for bare trær. I stedet for klienten å bli hengt opp på små designelementer ("hmmm ... Jeg tror de sosiale knapper trenger å være litt mer 'poppier'»), kan kundene snakke tillitsfullt om hvordan den generelle designen retning reflekterer sine mål ("Jeg som hvordan disse fargene gir en følelse av tillit, som er perfekt for min Acme widget "). Husk at våre kunder er generelt ikke designere, men ofte vet hva de vil, selv om det er bare i generelle vendinger. Stil Fliser er et perfekt verktøy for å tillate layperson å snakke om design som en helhet uten heaping på dusinvis av individuelle designelementer som raskt kan bli forvirrende og overveldende. piksel- perfekte mockups ta tid. Sanntid. Timer og timer av gangen. Ikke bare trenger du å faktor i hele denne kostnaden i den endelige fakturaen, dersom du opprette tre separate comps, er at to tredjedeler av tiden som kommer rett inn i "ubrukte Ressurser "mappe på harddisken - og ikke minst to tredjedeler av kundens penger for den del av den endelige regningen også går opp i røyk Med Stil Fliser, på den annen side, er det en veldig rask prosess. å veksle forskjellige versjoner, og like raske til å gjøre endringer på fly. Bruke stil Fliser betyr at du kan effektivisere designprosessen, holde opp fremdriften i de tidlige fasene av prosjektet og svare på endre forespørsler på minutter i stedet for timer. For å sette dette i perspektiv, de to eksempel stil Fliser over tok meg ca 20 minutter hver (og ville ha tatt 15 minutter hver hvis jeg var flinkere til å navngi mine lag som jeg går). Jeg er bare snakker av erfaring her - hver designer er forskjellig - men hvis du oppretter tre separate Photoshop spotter, er det ikke uvanlig å lage en som er perfekt Selv om du opprette tre perfekte comps som du vil være stolt over å kode, er det lett å bli kreativt forblindet. Style Fliser lar deg raskt eksperimentere med ulike designkonsepter, og tilbyr ekte designalternativer for klienten basert på sine definerte behov. Ok, så la oss si at du ikke bruk stil fliser, og du har valgt å presentere kunden med et sett av full design comps. Hva gjør du presentere dem med? En 960 x bredt skrivebordsversjonen? Hva med en iPad-versjon? Ikke glem en iPhone-versjon også. Oh, men pass på at du også ta Kindles, Blackberrys og 500 + mobile Android-enheter som har blitt produsert i løpet av de siste årene. Og hva med når de spør "Hvordan vil dette se ut på min favoritt Palm Pilot som jeg har hatt siden Bush var president?" stil Fliser innebærer ikke dimensjoner eller enhet; bare at design skal være digital. - Samantha Warren Nettet er tilgjengelig i bokstavelig talt hundrevis av måter i dag, hver enhet med sitt eget sett med stoppunkter, quirks og funksjoner En bedre måte å tilnærme den innledende designfasen av. prosjektet er å ta enheten helt ut av ligningen. Det flotte med stil fliser er at de er helt enhet agnostiker. Selvfølgelig må du ta opp hvordan nettstedet vil svare og /eller tilpasse seg ulike enheter senere i prosjektet, men i innledende fasene, bare muddies det vannet til å blande etablere et helhetlig design retning med nettstedet endelige funksjonalitet. Nå som du har lært hva stil Fliser er, og du er solgt på fordelene ved å bruke dem som et alternativ til full design comps, er jeg sikker på at du er klar til å sprekke åpne Photoshop og begynne å lage din første stil Tile. Whoa det , cowboy. Hold dine hester! Godt før du begynner å presse piksler, må vi identifisere kundens behov og målsettinger og oversette dem til begreper som tillater oss å danne informerte design beslutninger De fire-trinns prosess i å skape en stil Tile er som følger.: Forvirret? Ikke vær. La oss ta en titt på hvert trinn i detalj. Enten du setter deg ned i person med klienten, snakke med dem på Skype eller stole på e-post, vil du alltid trenger å bruke noen reell tid og krefter på å bli kjent med deres virksomhet og deres hjemmeside mål. Å ikke gjøre dette sender du ned en mørk, skremmende veien forutsetninger og gjetting som nesten alltid vil sikre et mislykket endelig resultat og en ulykkelig klient. Denne prosessen med oppdagelsen handler om mye mer enn bare å be dem deres favoritt farger og hva andre nettsteder de liker på "net. Mens vi kunne lett ha en hel tutorial på effektiv klient avhør, her er noen funn strategier for å komme i gang: Alle liker å snakke om hva som er viktig til dem .. Når du får en klient snakker om sin virksomhet, vil du ofte finne det vanskelig å få dem til å stoppe. . Faktisk, på dette stadiet, jo mer snakker de gjør om sin virksomhet, jo bedre vil det være for det endelige resultatet Her er noen innledende spørsmål for å varme opp din klient til å snakke om sin virksomhet: < .no> Når du ' har fått noen av de grunnleggende spørsmålene ut av veien og du har en bedre forståelse av sin virksomhet, er det på tide å grave litt dypere og virkelig identifisere behovene til klienten og plukke ut noen sentrale begreper som vil hjelpe deg å lage en designretning . i neste trinn Mens folk ofte synes det er vanskelig å oversette abstrakte begreper og følelser inn uttalelser, folk elsker å snakke i metaforer - forutsatt at du stiller de riktige spørsmålene Her er noen spørsmål. at du kan be om å få i gang: Når du har fått til kjernen av kundens prosjekt, er det på tide å etablere en baseline tone-of-voice for den generelle design. Det er forskjellige måter å gjøre dette, men en effektiv tilnærming er å ha klienten gjennomføre en interaktiv undersøkelse. Med litt kreativ HTML, CSS og Javascript, kan du opprette et sett med glidere som tillater kunden å posisjonere merkevaren sin mellom en rekke dikotomier: Ser på dette eksempelet, jeg allerede tenker på en morsom, fargerik retro-inspirert design for våre fiktive klient. Hva design konsepter umiddelbart hoppe til tankene når du ser dette? Når vi har avhørt vår klient, er det på tide å destillere essensen av kundens prosjekt, produkt og behov for deres hjemmeside . Hensikten med denne delen av prosessen er å definere et utvalg som beskriver ord som vil befolker "Adjektiver" i vår stil Tile. La oss ta en titt på et eksempel. Her er noen uttalelser som vår fiktive klient sier til deg under discovery fasen: Fra disse uttalelsene, er din jobb å identifisere en enkelt adjektiv som beskriver hovedbudskapet fra hva de har sagt til deg. Her er fire adjektiver som vi kan bruke til å oppsummere de ovennevnte uttalelser, får til hjertet av hva klienten er virkelig Nå som vi har definert dette settet av adjektiver, har vi flyttet til et punkt der vi faktisk kan begynne å oversette ord til design. Selv om du kan ha en litt annen tolkning av de ovennevnte adjektiver enn jeg gjør, er det ganske sannsynlig at våre design ville dele felles elementer - eller i det minste, vil vi være i stand til å beskrive for hverandre hvorfor vi gjorde de valgene som vi gjorde . Phew! Alle snakket ut? Gode nyheter: Vi har gjort grovarbeidet, nå får vi til å ha det litt gøy. Når vi har boilded hele discovery fasen ned til fire til seks dynamitt adjektiver, er det på tide å lage din første stil Tile. Kjør over til http://styletil.es og laste ned Photoshop mal (eller lage din egen). De neste trinnene er helt opp til deg. Vær kreativ! Jeg antar at du allerede har en ganske god forståelse av Photoshop, så jeg vil ikke gå gjennom hvert eneste skritt (The Photoshop malen er veldig lett å tilpasse), men hovedideen er å skape en rekke designelementer (farger, teksturer, knapper, typografi, etc) som taler til de adjektiver som dere kom frem til i forrige trinn. Vil du gå dypere inn i hvordan å skape et fargevalg og velge typografi motstandere for din stil Tile (og mye mer)? Her er noen Webdesigntuts + artikler for deg å gjennomgå: Når du har opprettet din første stil Tile, er det på tide å rydde skifer og iterasjon. Det er ikke satt i stein antallet versjoner du bør lage, men 03:57 stil fliser for hvert prosjekt er sannsynligvis en god balanse mellom å utforske tilstrekkelig uavhengig designkonsepter og ikke overveldende dine kunder med altfor mange alternativer. Husk, dine adjektiver kan være den samme for hver stil Tile, men de kan også være annerledes - spesielt hvis du har funnet det vanskelig å sammenbrudd kundens behov, eller de har presentert deg med noen forskjellige alternativer for å utforske som en del av avhør scenen . For eksempel fra våre funn spørsmål fra trinn to, vi kan ha kommet opp med tre separate sett av adjektiver som alle er like, men forskjellige nok til å ta ulike tilnærminger til design for våre fiktive klient: Som du kan se, er disse tre sett av adjektiver kan alle føre til en helt annen design retning. Det er der stil Fliser virkelig kommer til sin rett. Med noen raske farge og typografi endringer, kan du enkelt lage tre helt forskjellige iterasjoner i en veldig liten tid. Sørg for at kunden vet hva de skal forvente Nå som du har opprettet din sett stil fliser, er det på tide å presentere dem til klienten. Som med hvert trinn i denne prosessen, er det en rekke strategier for å iverksette for å sikre at du får de beste resultatene og at klienten din er trygg fortsetter med de neste trinnene i prosjektet. Din klient bør ikke være forventer du å presentere en full design komp bare for deg å trekke ut din stil fliser. Ved avslutningen av avhørene fase, viser klient eksempler på andre stil Fliser at du har opprettet, og forklare sin valuta for å sette design retning av nettstedet. Sørg for at kunden vet hva du vil skal vise dem før presentasjonen møtet! La din klient snakke fritt om dine designkonsepter, men pass på at du ikke la dem på kroken for lett. Oppmuntre kundene dine til å utvide på sine uttalelser. Med litt effektiv avhør, kan vi slå tomme uttalelser i unntaks uttalelser: Husk at mens du utforme nettsteder hele dagen, hver dag, er det svært sannsynlig at dette er noe som kunden ikke vil ha hatt en mye tidligere erfaring med. Vær tålmodig, hjelpe klienten avklare sine uttalelser, veilede dem mot å gjøre verdifulle uttalelser, men aldri gjøre antagelser basert på kundens generelle, off-the-cuff reaksjoner på arbeidet ditt. stil Fliser er et bedre alternativ til full design comps i den tidlige fasen av prosjektet (dvs. under klientgodkjenningsprosessen), men avhengig av hvordan du liker å jobbe, kan en full mockup være neste skritt for prosjektet , hvis det er en del av etablert arbeidsflyten. Nå som du har definert retning av design og kunden har signert av på en av dine stil Tile versjoner, kan du være sikker på at din komp vil være mye nærmere å møte kundens forventninger enn om du hoppet rett inn åpne opp Photoshop etter det første møtet. Ikke bare vil det mockup være mye nærmere passerer mønstringen, er det heller ikke behov for å opprette flere gjentakelser av design - at arbeidet er allerede gjort med vår stil Fliser Avhengig av hvordan du liker å nærme klienten. arbeid, disse er alle helt levedyktige eksempler på arbeidsflyt for resten av prosjektet: Takk for at du bor hos meg og lese alt om hva, hvordan og hvorfor of Style Fliser - Jeg håper du likte å lære om dem så mye som jeg har hatt glede skrive om å introdusere dem til deg! stil Fliser er en revolusjonerende måte å tilnærme seg designprosessen og hjelpe deg og din klient danne en klar retning for nettsiden fra selv de mest involvert og komplisert prosjekt.
ha sett ut i de innledende designfaser:
tutsplus.com
styletil. es
Vanlige Nøkkelfunksjoner Anmeldelser
Client Logo: Bare fordi de ikke er bokstave mock-ups, det betyr ikke at vi kan 't merke dem til den spesifikke kunden. Tross alt, dette er profesjonell kunde presentasjon
Mulig Farger: Et utvalg av de viktigste fargene. Du er ikke begrenset til fem farger - gjerne bruke så mange eller så få farger som prosjektet krever
Tekstur:. Ikke forveksle teksturer med Photoshop mønstre. Dette området brukes til å kirsebær plukke noen viktige designelementer som sterkt formidle et bestemt budskap. Tenk på teksturer mer som designelementer. Du vil se i ovennevnte stil Fliser eksempel jeg har plukket ut kanten av et bånd, en numerisk header og en del av en illustrasjon som alle formidle et bestemt budskap som taler til den generelle designen regi av prosjektet.
Adjektiv: Uten tvil den viktigste delen av stil Tile er Adjektiver delen en destillasjon av de viktigste ordene som beskriver klienten, merkevare eller nettside formål. Vi skal snakke mer om hvordan å komme frem til disse adjektiver litt senere på
Typografi:.. Bruk denne delen til å definere områdets potensielle overskrifter, avsnitt tekst og lenker
Knapper: Begge disse områdene er i ferd med å få besøkende til området for å utføre en bestemt handling: i tilfelle av Tuts + området, er det å få brukeren til å melde seg til Premium-programmet. I tilfelle av stil fliser, det er for brukeren å laste ned Photoshop mal. Som sådan, i begge disse tilfeller vil det "oppfordring til handling" knappene på den endelige området er svært viktig. For andre områder hvor knappene er ikke nødvendig (for eksempel en blogg), kan du velge å utelate denne delen, og erstatte den med noe annet
Bakgrunn:. Mens ikke nødvendig for en stil Tile, har jeg valgt å sette bakgrunnsmønstre begge områdene inn i stilen Tile selv. Igjen, i begge de endelige nettsteder, bakgrunnsmønster er sentrale designelementer. Planlegger å holde utformingen enkelt? Bare holde på bakgrunn av stil Tile som en nøytral farge
Version:. Hver stil Tile skal gjennomføre prosjektet navnet og versjonsnummeret. Dette gjør at du enkelt kan snakke om design med klienten og redusere forvirring (for eksempel: "Jeg liker fargene fra versjon 1, men foretrekker knappene fra versjon 3").
Hvorfor skal jeg bruke stil fliser?
redusere kompleksiteten og Avklare Mål
Spar tid
Hold Your Own Standards Høy
, en som er ganske bra Hotell og én som er ganske gjennomsnittlig
, og langt fra det beste arbeidet. Du presenterer de tre til klienten, prøver å selge dem på flaggskip design, og alltid de velge en design som du liker minst ... og nå er du stuck koding et nettsted som du ikke er stolt av, og også isn ' t til beste for kunden, heller.
Hold Innledende Design Device Agnostic
Hvordan skaper du et stil Tile?
Lytt
Tolk
Define
Iterate
Lytt
forstå deres marked, økonomi og Produktanmeldelser
Hvem er din typiske kunde? Hva slags person ønsker du å besøke nettstedet ditt?
Hva er viktig for kundene dine? (Prøv å få mer enn "en lav pris" - dette er nesten aldri
det eneste viktige for en sluttbruker av et produkt eller tjeneste)
Hva handlingen (e) gjør du. ønsker en besøkende til nettstedet ditt for å fullføre? (f.eks Meld deg på et nyhetsbrev /kjøpe et produkt /følge sin Twitter-konto /etc.)
Kom deg ut av boksen for å få til Rett til deres behov
Hvis du kunne velge hvilken som helst kjendis til å støtte din merkevare, hvem ville de være? Hva med dem reflekterer din merkevare /produkt /tjeneste?
Etablere den rette tonen for prosjektet
Tolk
"Mitt produkt er komplisert, og mine kunder er vanligvis prøver å lære mer uten å få mer forvirret enn de allerede er"
"Mine konkurrenter er alle svært alvorlig. Jeg vil at nettstedet mitt for å være svært annerledes enn sine kjedelige nettsider"
"Jeg vil at mine besøkende til nettstedet mitt for å føle deg komfortabel og skal ikke skremt av produktet "
" Mine klienter er for det meste unge kvinner som ikke har mye tålmodighet for markedsføring snakke eller sjargong "
sier til oss:
To-the-point
Fun
Accessible
bakke
Definer
En introduksjon til fargeteori for webdesignere
En nybegynners guide til Sammenkobling Fonts
Velg riktig Font : En praktisk guide til typografi på nettet
Prinsipper for vellykket knapp design
Iterate
Alternative Adjektiv Stiller
Version One: Til punktet, tilgjengelig, morsom, jordnær
Versjon to:. Quirky, unike, informativ, humoristisk
Versjon tre: Friendly, familiar, avslappet, trustworthy
Presentere stil Fliser til Kunden
Klar Presentasjon på PhotoDune
"Jeg liker dette fordi jeg tror du har fanget den muntre natur mitt merkevare"
"Jeg liker ikke dette fordi det minner meg for mye av min konkurrent nettsted, og jeg ønsker å sette min virksomhet fra hverandre"
"Dette design må pop mer ved å legge i en lys rosa farge som mine kunder all kjærlighet "
" Jeg liker ikke denne burgunder farge fordi det gjør produktet mitt virke gammel og prippen "
" Kan du gjøre det ser mer ut som Apples nettsted fordi mine kunder er all teknologi fokusert early adopters "
Hva er neste steg?
Stil Tile > Rammeverk > Mockup > Kode
Stil Tile > Rammeverk > Kode
Stil Tile > Mockup > Kode
Stil Tile > Kode
Konklusjon
< p> Hva er dine tanker? Kommer du til å bruke stil Fliser i ditt neste prosjekt? Vi vil gjerne høre dine tanker i kommentarfeltet! Anmeldelser