Share
Hvis du er som meg, er du enig i at prosjektets innledende designfase kan være tidkrevende, full av frustrasjon og sjelden oppfyller klientens forventninger ved det første godkjenningsmøtet. Hva om det var en bedre måte å nærme seg ting til? Med Style Tiles, er det nyeste barnet på design-metodikkblokken, der.
Noen sier at dagene med å lage fulle mockups for webdesignprosjekter i Photoshop er døende, om ikke helt døde. Andre sier at design-i-nettleseren ikke er alt som det er sprakk opp for å være heller. Men kommer vi alle foran oss selv? Kanskje det ikke er verktøyet vi bør se på, men hele måten vi går på å designe et nytt nettsted og administrere klientens godkjenningsprosess.
I denne opplæringen skal vi ta en nærmere titt på Style Tiles - en ny måte å tenke på de første designstadiene, en design tilnærming mønstret og unnfanget av den uendelige Samantha Warren. Vi skal ta en titt på hva de er, hvorfor du skal bruke dem og gå deg gjennom prosessen med å lage og implementere en stilkilde for ditt neste prosjekt.
[Style Tiles tillater deg å] ... Nåværende kunder med grensesnitt valg uten å investere i flere photoshop mockups. - Samantha Warren
Klar til å lære mer? La oss komme i gang.
I sin enkleste form er en Style Tile en enkeltsamling av vanlige elementer, inkludert farger, typografi, teksturer, mønstre og designfunksjoner. Der en interiørdesigner kan presentere sin klient med et humørbrett som består av malingbrikker, tekstiler og magasinutklipp, kan den progressive webdesigneren presentere sine interessenter med et sett med stilfliser.
Det viktige å huske om stilfliser er at de ikke er en bokstavelig fremstilling av hvordan nettstedet skal se ut. i stedet hjelper de med å definere stemningen, tonen og "følelsen" til et nettsted basert på det du har lært fra klienten i dine første kickoff-møter.
En annen ting å huske på er at Style Tile-tilnærmingen ikke er et rammeverk, en definert prosess eller et verktøy. I stedet er Style Tiles bygget opp rundt et sett med retningslinjer, teknikker og tilnærminger som lar deg fokusere på det som er veldig viktig i designen (i hvert fall i innledningsfasen av et nytt prosjekt). Start med å laste ned en psd-mal for å hjelpe deg med å komme i gang, men vær så snill å støpe Style-fliser til din egen arbeidsflyt og kreative estetiske.
La oss ta en titt på et par eksempler for å vise deg hvordan stilfliser kan presenteres. Jeg omvendt-konstruerte to nettsteder for å vise deg deres Style Tiles kunne har sett i de første designfasene:
Denne stilflisen er basert på den nylig renoverte Tuts + Premium-siden.
Som du kan se, har essensen av Tuts + Premium-nettstedet blitt pent tatt i denne stilkanten. Vi har nøye definert noen av designelementene i den viktigste oransje presentasjonsseksjonen av nettstedet, samt formidlet og følelsen av blogginnleggene (dvs. opplæringsoppføringene).
Viktig, fordi stilkanten ikke er presentert for en bestemt skjermstørrelse, orientering eller noe annet enn "digital", er det lett å forestille seg hvordan nettstedet skulle se på en hvilken som helst enhet fra et skrivebord til en nettbrett til en smarttelefon.
For litt moro, her er min tolkning av hva http://styletil.es nettstedet selv kan ha sett på den første designfasen:
Vær særlig oppmerksom på adjektivdelen av denne stilflisen. Alle farger, typografivalg og designtekstur snakker på noen måte med disse adjektiver, og sikrer at stilkanten er konsistent både når det gjelder design, samt tone og merkevaremelding.
La oss ta en titt på noen av de felles likhetene i disse to stilfliser:
Som jeg nevnte før, følger ikke Style Tiles et fast format. Faktisk kan du inkludere omtrent alt - så lenge det på en eller annen måte er grunnleggende for designkonseptet. For eksempel kan du velge å slippe delen "knapper" og erstatte den med en tilpasset videospiller, en widget med noen beskrivelse eller noen formelementer.
Oppsummere, ta opp den overordnede retningen av nettstedet i Style Tile, men vær så snill å bøye dine kreative muskler.
Style Tiles er ikke bare en annen wishy-washy-best-practice-hvis-du-ha-tiden-tilnærming til å samle støv nederst på webdesignverktøyet ditt. De har en rekke flotte fantastiske fordeler for både deg og klienten når de er implementert på riktig måte:
Mer enn noe, holder Style Tiles den første designfasen og klient godkjenningsprosessen enkel.
Å presentere klienter med en fullverdig designkompis etter det første møtet løper risikoen for å savne skogen for trærne. I stedet for at klienten henger opp på små designfunksjoner ("hmmm ... Jeg tror at sosiale knapper må være litt mer" poppier "), kan klienter trygt snakke om hvordan den overordnede designretningen gjenspeiler målene sine (" Jeg liker hvordan disse fargene gir en følelse av tillit, som er perfekt for min Acme-widget ").
Husk at våre kunder generelt ikke er designere, men vet ofte hva de liker, selv om det bare er generelt. Stil fliser er et perfekt verktøy for å la lekmannen snakke om designet som helhet uten å heaping på dusinvis av individuelle designelementer som raskt kan bli forvirrende og overveldende.
Pixel-perfekte mockups tar tid. Realtid. Timer og timer.
Ikke bare trenger du å faktor i alle disse kostnadene i din endelige faktura, hvis du lager tre separate comps, er det to tredjedeler av tiden din som går rett inn i mappen "Ubrukte ressurser" på harddisken din - for ikke å nevne to Tredjedeler av kundens penger for den delen av den endelige regningen går også opp i røyk.
Med stilfliser, derimot, er det en veldig rask prosess å gjenskape forskjellige versjoner, og like raskt å gjøre endringer i fly. Bruke Style Tiles betyr at du kan strømline designprosessen, holde styr på momentet i de tidlige stadiene av prosjektet og svare på endringsforespørsler i minutter i stedet for timer.
For å sette dette i perspektiv tok de to eksemplene Style Tiles ovenfor meg ca 20 minutter hver (og ville ha tatt 15 minutter hver hvis jeg var bedre til å navngi lagene mine mens jeg går).
Jeg snakker bare fra erfaring her - hver designer er annerledes - men hvis du lager tre separate Photoshop-mocks, er det ikke uvanlig å lage en som er perfekt, en som er ganske bra og en som er ganske gjennomsnittlig, og langt fra ditt beste arbeid. Du presenterer de tre til klienten, prøver å selge dem på flaggskipet ditt, og de velger alltid det ene designet som du liker minst ... og nå sitter du fast og kodes et nettsted du ikke er stolt av, og det er heller ikke T i kundens beste, heller ikke.
Selv om du lager tre perfekte comps som du vil være stolt av å kode, er det lett å bli kreativt blinket. Style Tiles lar deg raskt eksperimentere med ulike designkonsepter, og tilby ekte designalternativer for kunden basert på deres definerte behov.
Ok, så la oss si at du ikke bruker Style Tiles, og du har valgt å presentere klienten med et sett med fulle designkomposisjoner.
Hva presenterer du dem med? En 960px bred desktop versjon? Hva med en iPad-versjon? Ikke glem en iPhone-versjon også. Å, men sørg for at du også adresserer Kindles, Blackberrys og de 500 + mobile Android-enhetene som har blitt produsert i løpet av de siste årene. Og hva med når de spør "Hvordan vil dette se på min favoritt Palm Pilot som jeg har hatt siden Bush var president?"
Stil fliser betyr ikke dimensjoner eller enhet; bare at designet blir digitalt. - Samantha Warren
Internett er tilgjengelig i bokstavelig talt hundrevis av måter i dag, hver enhet med sitt eget sett av brytepunkt, kjennskap og funksjoner.
En bedre måte å nærme seg den første designfasen av prosjektet er å ta enheten helt ut av ligningen. Den gode tingen med Style Tiles er at de er helt enhet agnostisk.
Selvfølgelig må du ta opp hvordan nettstedet skal reagere og / eller tilpasse seg ulike enheter senere i prosjektet, men i de første faser mudder det bare vannene som skal blandes, og etablerer en generell designretning med nettstedets endelige funksjonalitet.
Nå som du har lært hva Style Tiles er, og du er solgt på fordelene ved å bruke dem som et alternativ til fulle designkompetasjoner, er jeg sikker på at du er klar til å knekke åpen Photoshop og begynne å lage din første Style Tile.
Whoa der, cowboy. Hold hestene dine! Vel før du begynner å skyve piksler, må vi identifisere klientens behov og mål og oversette dem til begreper som gjør at vi kan danne informerte designbeslutninger..
Den fire-trinns prosessen med å lage en stilflise 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 din, snakker med dem på Skype eller stole på e-post, må du alltid bruke litt tid og krefter for å bli kjent med sin virksomhet og deres nettsidemål. Hvis du ikke gjør det, sender du deg ned en mørk, skummel vei med antagelser og gjetning som nesten alltid sikrer et mislykket resultat og en ulykkelig klient.
Denne oppdagelsesprosessen handler om mye mer enn bare å spørre dem deres favorittfarger og hvilke andre nettsteder de liker på nettet. Selv om vi lett kunne få en hel veiledning om effektiv klientforespørsel, er det noen få oppdagelsesstrategier for å komme i gang:
Alle elsker å snakke om hva som er viktig for dem ...
Når du får en klient som snakker om sin virksomhet, vil du ofte finne det vanskelig å få dem til å stoppe. Faktisk, på dette stadiet, jo mer snakker de om deres virksomhet, desto bedre blir det til sluttresultatet.
Her er noen innledende spørsmål for å varme opp klienten din til å snakke om sin virksomhet:
Når du har noen av de grunnleggende spørsmålene ute av veien, og du har en bedre forståelse av sin virksomhet, er det på tide å grave litt dypere og virkelig identifisere kundens behov og velge noen viktige konsepter som vil hjelpe deg med å opprette en designretning i neste trinn.
Mens folk ofte finner det vanskelig å oversette abstrakte konsepter og følelser til uttalelser, elsker folk å snakke i metaforer - forutsatt at du stiller de riktige spørsmålene.
Her er noen spørsmål du kan be om å komme i gang:
Når du har kommet til kjernen i klientens prosjekt, er det på tide å etablere en baseline tone-of-voice for den overordnede designen.
Det er forskjellige måter å gjøre dette på, men en effektiv tilnærming er å få klienten til å fullføre en interaktiv undersøkelse. Med litt kreativ HTML, CSS og Javascript kan du opprette et sett med glidebrytere som gjør at klienten kan plassere sitt merke mellom en rekke dikotomer:
Ser på dette eksempelet, tenker jeg allerede på en morsom, fargerik retro-inspirert design for vår fiktive klient. Hvilke designkonsepter hopper øyeblikkelig opp når du ser dette?
Når vi har stilt spørsmål til vår klient, er det på tide å destillere essensen av kundens prosjekt, produkt og behov for deres nettside. Formålet med denne delen av prosessen er å definere et utvalg av beskrivende ord som vil fylle ut "Adjektiver" -delen av vår stilkledning.
La oss ta en titt på et eksempel. Her er noen uttalelser som vår fiktive klient sier til deg i løpet av funnfasen:
Fra disse uttalelsene er jobben din å identifisere en enkelt adjektiv som beskriver nøkkelmeldingen til hva de har sagt til deg.
Her er fire adjektiver som vi kan bruke til å oppsummere de ovennevnte uttalelsene, komme til hjertet av hva kunden er egentlig sier til oss:
Nå som vi har definert dette settet med adjektiver, har vi flyttet til et punkt der vi faktisk kan begynne å oversette ord til design. Selv om du kanskje har en litt annen tolkning av de ovennevnte adjektiver enn jeg, er det ganske sannsynlig at våre design vil dele vanlige elementer - eller i det minste kunne vi beskrive for hverandre hvorfor vi tok de valgene vi laget.
Puh! Alle snakket ut? Gode nyheter: Vi har gjort det grunne arbeidet, nå får vi litt moro. Når vi har boilded hele oppdagingsfasen ned til fire til seks dynamitt adjektiver, er det på tide å lage din første Style Tile.
Gå videre til http://styletil.es og last ned Photoshop-malen (eller lag din egen).
De neste trinnene er helt opp til deg. Bli kreativ! Jeg antar at du allerede har en ganske god forståelse av Photoshop, så jeg vil ikke gå deg gjennom hvert trinn (Photoshop-malen er veldig enkel å tilpasse), men hovedideen er å lage en rekke designelementer (farger, teksturer, knapper, typografi osv.) som snakker til adjektiver som du ankom i forrige trinn.
Ønsker du å dype dypere inn i hvordan du lager et fargeskjema og velg typografiparings for din stilflise (og mye mer)? Her er noen webdesigntuts + artikler for deg å vurdere:
Når du har opprettet din første Style Tile, er det på tide å rengjøre skifer og iterere. Det er ingen sett i stein antall versjoner du bør opprette, men tre til fire stiltefliser for hvert prosjekt er sannsynligvis en god balanse mellom å utforske tilstrekkelige uavhengige designkonsepter og ikke overveldende dine kunder med for mange alternativer.
Husk at adjektivene dine kan være de samme for hver stilkilde, men de kan også være forskjellige - spesielt hvis du har funnet det vanskelig å bryte ned kundens behov eller de har presentert deg med noen forskjellige alternativer for å utforske som en del av spørsmålstegn.
For eksempel, fra våre funn spørsmål fra trinn to, kan vi ha kommet opp med tre separate sett med adjektiver som alle er like, men forskjellige nok til å ta forskjellige tilnærminger til utformingen for vår fiktive klient:
Som du kan se, kan disse tre settene med adjektiver alle resultere i en helt annen designretning. Dette er hvor Style Tiles virkelig kommer inn i seg selv. Med noen få raske farger og typografiendringer kan du enkelt lage tre helt forskjellige iterasjoner på svært kort tid.
Pass på at klienten vet hva du kan forvente
Nå som du har opprettet ditt sett med stilfliser, er det på tide å presentere dem til klienten din. Som med hvert trinn i denne prosessen er det en rekke strategier å implementere for å sikre at du får de beste resultatene og at klienten din er sikker på å fortsette med de neste trinnene i prosjektet.
Din klient bør ikke forvente at du skal presentere en full design-kompis kun for at du skal trekke ut dine stiltefliser. Ved avslutningen av spørsmålsfasen, vis klientens eksempler på andre stiltefliser du har opprettet, og forklar deres verdi for å angi designretningen til nettstedet.
Sørg for at klienten vet hva du vil vise dem før presentasjonsmøtet!
Forbereder presentasjonen på PhotoDune La kunden snakke fritt om designkonceptene dine, men sørg for at du ikke lar dem løsne kroken for enkelt. Oppfordre kundene dine til å utvide deres uttalelser. Med en liten effektiv spørring kan vi slå tomme setninger til eksepsjonelle utsagn:
Husk at mens du designer nettsteder hele dagen, er det veldig sannsynlig at dette er noe som din klient ikke har hatt mye tidligere erfaring med. Vær tålmodig, hjelp klienten din til å klargjøre sine uttalelser, veilede dem til å gjøre verdifulle uttalelser, men legg aldri antagelser ut fra klientens generelle svar på arbeidet utenom mansjettene på arbeidet ditt.
Stilfliser er et bedre alternativ til fulle designkomponenter i de tidlige stadiene av prosjektet (dvs. i løpet av klientens godkjenningsprosess), men avhengig av hvordan du liker å jobbe, kan en full mockup være det neste skrittet for prosjektet, hvis det er en del av din etablerte arbeidsflyt.
Nå som du har definert retningen til designet og klienten har logget av på en av dine Style Tile-versjoner, kan du være sikker på at kompisen din vil være mye nærmere å møte kundens forventninger enn hvis du hoppet rett inn i å åpne Photoshop etter det første møtet. Ikke bare vil mockupen være mye nærmere passerende mønster, det er heller ikke nødvendig å lage flere iterasjoner av designet - det arbeidet har allerede blitt gjort med våre stilfliser.
Avhengig av hvordan du liker å nærme deg klientarbeidet ditt, er dette alle helt levedyktige eksempler på arbeidsflyt for resten av prosjektet:
Takk for at du bodde hos meg og leser alt om hva, hvordan og hvorfor av Style Tiles - jeg håper du likte å lære om dem så mye som jeg har hatt å skrive om å introdusere dem til deg!
Style Fliser er en revolusjonerende måte å nærme seg designprosessen på og hjelpe deg og din klient til å danne en klar retning for nettstedet fra selv det mest involverte og kompliserte prosjektet.
Hva er dine tanker? Vil du bruke Style Tiles i ditt neste prosjekt? Vi vil gjerne høre dine tanker i kommentarene!
Accentsconagua