Innhold
- En responsiv metodikk
- Hvordan holder jeg på innholdet først?
- Hvorfor?
- 01. Definer dine forretnings- og brukermål
- 02. Henvis dem hver sjanse du får
- 03. Ikke vær redd for å presse tilbake
- 04. Trykk på ditt eget team også
- 05. Definer alt innholdsbehovet ditt foran
- Hvordan abstrakte jeg innhold fra presentasjonen?
- Vi må slutte å tenke på innhold når det gjelder layout
- Tving kundene dine til å planlegge innholdet uavhengig av design
- Fullfør innholdet ditt før design
- Bruk ekte innhold - hver gang
- Så hvordan fungerer trådrammer for responsive designprosjekter?
- Skisse
- Rammeverk i nettleseren
- Kommentarer
- Bruk ekte innhold i trådrammer
- Hvordan designer jeg først for små skjermer?
- Abstrakte design fra enheter i starten
- Bruk Style Tiles
- Lag grensesnitt harmoni
- Se alt i nettleseren
- Få balanse med statiske programmer
- Konklusjon
La oss være tydelige: design er løsningen bare hvis den fokuserer på de dypere spørsmålene, hvorfor det ligger bak alt. En solid prosess skal alltid lede vårt arbeid, men vi må omfavne noe mer fleksibelt. Vårt medium har endelig vist seg å være flytende, så burde ikke prosessen vår? Tenk på systemdesign: du må se både hele bildet og de små detaljene. Umulig? Langt ifra!
Frank Chimero uttrykker det vakkert i sin bok The Shape of Design: “Det er en del der kunstneren går tilbake fra staffeli for å få et nytt perspektiv på verket. Maleri er like deler nær og fjern: når kunstneren er nær, jobber han hardt for å sette sitt preg; når langt, vurderer han arbeidet for å analysere dets kvaliteter. Han går tilbake for å la arbeidet snakke til ham. ”
Vi må la vårt arbeid, vårt medium, snakke til oss. Med fremveksten av responsiv design omfavner vi endelig vårt medium slik det var ment: flytende. Det er en strålende tid å gå tilbake og vurdere arbeidet, analysere og omfavne en ny måte å gjøre ting på, en ny prosess. Borte er dagene for statiske mock-ups og webdesignere som ikke forstår kode. Det er på tide med en responsiv prosess.
En responsiv metodikk
Vi kommer til å gi bort den store hemmeligheten for en solid prosess allerede i begynnelsen av denne artikkelen. Fordi vi er gale sånn. Klar? En responsiv prosess er en ansvarlig prosess. Uklar? Kan være. Dumt? Nei. Som webstandardbevegelsen før, skyver responsiv design nettet fremover med fremtidsvennlige metoder.
Som enhver designprosess, bør den fokusere på ‘hvorfor’ bak det hele. Så hvorfor finnes nettsteder? Å levere innhold. Det kan være oppgavebasert, sosialt, informativt ... det spiller ingen rolle. Alt kommer ned til dette: start med hvorfor, godt strukturert innhold og interaksjoner som betyr noe.
Her er spørsmålene vi ofte hører om vår responsive designprosess.
Hvordan holder jeg på innholdet først?
Vi er alle så optimistiske i starten av et prosjekt. “Innhold først!” vi sier. “Brukermål! Husk hva som er viktig! " Det er sant. Men hva betyr det? Hvordan implementerer du en første innholdsprosess?
Selv om du vet (eller tror du vet), er det lett å glemme når et prosjekt utvikler seg. Langsiktige prosjekter har en tendens til å fortsette og fortsette (og på ... og på ...). Vi slutter å tenke på hvorfor, og begynner å fokusere på hvordan. Vi lurer oss selv til å tenke at prosjektene våre kan deles opp i separate 'oppdagelses-' og 'utviklingsfaser' som kan eksistere uavhengig.
Sannheten er at vi må fortsette å spørre hvorfor, hele tiden. Uansett hvor mye du tror du vet, uansett hvor mye planlegging du har gjort - hver gang du tar en beslutning, hver gang du designer en knapp eller skriver en overskrift, må du spørre ...
Hvorfor?
Hvorfor gjør jeg dette? Hvem er det til? Hvilket forretningsmål vil det hjelpe klienten min å oppnå? Hvilket behov vil det hjelpe brukerne mine til å adressere? Ikke bare hold innholdet først. Hold hvorfor først.
Dette gjør at det høres enkelt ut. Men for å gjøre det bra, må du presse. Skyv klientene og teamet ditt for å definere hvorfor det først. Ingen Lorem Ipsum, nei ‘vi kommer til det senere’. Gjør leksene dine! Alle dine måter må starte med en solid hvorfor. På Yellow Pencil har dette betydd store endringer i måten vi pitcher, estimerer, budsjetterer og planlegger prosjekter. Vi har måttet presse på budsjett og tid til å gjøre solid forskning, strategi og planlegging. Du kan også. Men når kundene dine og teamene dine ser de enorme fordelene ved å definere innholdsbehov foran, vil de aldri se tilbake.
Og det er vår jobb å utdanne dem. (Les Mike Monteiros utmerkede bok Design is a Job hvis du vil lære mer om å håndtere kunder.) Klienter kan ha vanskelig for å forstå verdien av å gjøre all den undersøkelsen og jobbe i forkant. Og hvorfor skulle de? De får ikke noe 'ferdig' på slutten - og altfor ofte får de bare en faktura og et stort ol 'Word-dokument.
Det er ikke deres feil - det er vår feil. Det er vårt ansvar å gjøre en bedre jobb med å demonstrere den verdien. Hvert trinn på veien, må vi bringe det hele tilbake til det aller viktigste.
Dette er spesielt viktig for responsiv design. Et responsivt nettsted krever ikke mye mer utviklingsinnsats, men det betyr mye mer planlegging. Virkelig skjønt, det planlegger at vi skulle ha gjort hele tiden. Bli vitne til den nåværende prosjektsyklusen for hvert tredje år. Vil du fortsette å gjøre det? Det gjør vi absolutt ikke.
Så her er tre trinn for å holde innholdet først i prosjektprosessen.
01. Definer dine forretnings- og brukermål
Lag en prioritert liste over forretnings- og brukermål for prosjektet ditt. Hva vil brukerne dine mest vite eller gjøre? Gjør din forskning. Gjør informerte slutninger, ikke ville gjetninger. Få alle interessentene dine til å bli enige.
02. Henvis dem hver sjanse du får
Hver gang du tar en beslutning, hver gang noen foreslår en ny funksjon eller designelement, eller innholdsside, kan du få dem til å kartlegge forespørselen til et forretnings- og brukermål. Hvilket reelt behov vil denne funksjonen møte? Hva er den virkelige grunnen? (Hint: 'Fordi jeg vil' eller 'Jeg liker virkelig blått' eller 'Alle er på Facebook' teller ikke.)
03. Ikke vær redd for å presse tilbake
Dette kan være tøft. Kundeforhold kan være delikate, og det kan være fristende å gi opp kampen om å vinne krigen. Men husk, vi er alle sammen i dette! Det er ikke forretning mot bruker; oss mot dem.
Å møte brukernes behov er den beste måten å møte forretningsbehovene på. For uten brukerne våre har vi ingen virksomhet! Klienter (gode klienter) ansetter deg ikke til å si ja til alt. Så hvis klienten din ber om noe som ikke oppfyller målene eller brukernes behov, ikke vær redd for å utfordre dem. Det handler ikke om ego. Det handler om å skape en best mulig løsning.
04. Trykk på ditt eget team også
Dette kan også være en utfordring når du arbeider i et kreativt team. Rolleseparasjon - visuell design, brukeropplevelse, informasjonsarkitektur, innholdsstrategi, innholdsproduksjon - kan føre til feilkommunikasjon. Vi blir opptatt, vi blir overveldet av e-post. Det er vanskelig å holde på med et prosjekt fra start til slutt, spesielt når ‘ditt’ arbeid er gjort.
Teamets forhold er minst like viktig som klientforholdet. Vi må minne oss på hvorfor, akkurat som vi gjør våre kunder. Samarbeid er nøkkelen. Du kan ikke bare 'overlevere' en innholdsplan eller trådrammer eller design. Så mye som mulig må vi jobbe hånd i hånd. Det er lett å 'fullføre' en leveranse og gå videre til noe annet. Det er mye vanskeligere å holde på med et prosjekt når det blir tøft.
En foss tilnærming til kreativt arbeid fungerer bare ikke. Agilt, samarbeidsarbeid mellom teammedlemmene gir bedre resultater.
05. Definer alt innholdsbehovet ditt foran
Her er saken: responsive nettsteder tar lengre tid å planlegge. Vi planlegger ikke bare en enkelt kontekst lenger. Vi planlegger for alle sammenhenger vi vet om nå, og noen som ikke eksisterer ennå.
Men det tar mye kortere tid å planlegge for alle disse kompleksitetene foran enn det å gå tilbake og ettermontere funksjoner og funksjoner som du ikke redegjorde for. Så bruk tiden / innsatsen / budsjettet. Tving kundene dine og teamet ditt til å definere (og forplikte seg til!) Alt innholdet deres før du begynner på design. Bruk sidetabeller. Bruk strukturert innhold. Framtidssikkert innholdet ditt nå! Eller gråte senere.
Hvordan abstrakte jeg innhold fra presentasjonen?
Du hører dette mye rundt internett-o-sfæren. Men vent, hva? Og vent - hvorfor?
Fordi presentasjon kan (og vil) endre seg. Måten vi designet nettsteder for 15 år siden er nesten ikke gjenkjennelig fra hvordan vi presenterer dem nå. Men vet du hva som ikke har endret seg? Ord. Vi bruker dem fremdeles. Internett eksisterer primært for (tekstbasert) innhold. Vi bruker den fortsatt til å løse informasjonsproblemer; å utføre oppgaver. Men hvis innholdet ditt er avhengig av et presentasjonsmiddel (Flash-intro-sider, noen?), Er det sannsynlig at det ikke vil være brukbart om noen få år. Og det suger.
Vi må slutte å tenke på innhold når det gjelder layout
Vi (som bransje) har trent våre kunder til å tenke på innhold når det gjelder layout. "Sett det i sidefeltet," sier vi. "Det skal gå i bunnteksten." Stoppe! Slutt med det. Stoppe. Det handler ikke om plassering. Det handler om prioritering. Hva er det viktigste innholdet for brukerne dine? Fordi gjett hva: layout endres på tvers av sammenhenger. Det kommer (sannsynligvis) ikke til å være et sidefelt på designen på liten skjerm.
Den gigantiske supermenyen din klient vil ha? Skal ikke fly på en iPhone.
Tving kundene dine til å planlegge innholdet uavhengig av design
Du trenger ikke å tvinge dem. Oppmuntre dem. Oppmuntre sterkt. Sidetabeller er gode for dette. Hvis du ikke allerede har lest den, kan du gå videre til Kristina Halvorson og Melissa Rachs Content Strategy for the Web for mer informasjon om hvordan du lager dem. Organiser dem i prioritert rekkefølge. Ikke referer til plassering eller layout. Dette vil hjelpe kundene dine til å tenke på innholdet på en mer produktiv måte, og vil også få innholdsopprettingsprosessen i bevegelse før de endelige trådrammene eller designet.
Fullfør innholdet ditt før design
Ok, dette er ikke alltid mulig. Men jo mer usikkerhet du kan eliminere før du begynner å designe, jo mindre må du gå tilbake og endre ting senere.
Bruk ekte innhold - hver gang
Hvis mulig, bruk edge case innhold - vis kundene dine de mest kompliserte sidene, bildene og menyene. Dette vil unngå overraskelser senere i prosessen, når de ser det rotete innholdet i det ferdige produktet.
Funksjonelle trådrammer i nettleseren gjør en verden av forskjell. La kundene dine observere innholdet deres beveger seg og endres over en rekke skjermstørrelser. Påpek det når du presenterer trådrammene dine (du lager personlige presentasjoner, ikke sant?) Demonstrer for dem hvordan prioriteten til informasjonen deres forblir den samme på tvers av skjermstørrelser, mens layoutet endres.
Så hvordan fungerer trådrammer for responsive designprosjekter?
Vi er overbevist om at interaksjonsdesign for RWD må komme inn i nettleseren raskt og ofte. Det er ganske umulig å lage et statisk dokument som vil beskrive alt. Visst, vi kunne lage et dokument som demonstrerer tre, fire eller fem bruddpunkter, men det er bare en brøkdel av historien. Hva med alle øyeblikkene mellom pausepunktene? Det skjer i nettleseren.
Skisse
Det er likevel godt å raskt kunne skissere ideene dine sammen. Dette trenger ikke skje i noe bestemt medium, men det er bare noe med blyant på papir. Hele poenget her er å få ideer ut raskt og iterativt. Vi elsker å tegne når det er mulig, og det er til og med en app for det: UI Sketcher.
Rammeverk i nettleseren
Her er den virkelige billetten for oss. Vi elsker å gjenbruke mønstre og systemer når vi demonstrerer RWD i nettleseren. Selvfølgelig kan vi lage vårt eget system fra bunnen av hver gang, men det hjelper ikke oss eller våre kunder.
Vi liker også å bruke raske responsive prototyperammer som Twitter Bootstrap eller Zurb’s Foundation. Vi lener oss personlig mot Foundation fordi det passer til arbeidsflyten vår. Det ville være flott om noen ville ta en liten skjerm, lav båndbredde-første tilnærming, men det er bare slik vi ruller.
Kommentarer
Kommentarer for RWD-trådrammer er essensielle, men vi blir ofte oversett. Si det høyt: dokumentasjon, dokumentasjon, dokumentasjon! Vi har sett noen få eksempler på dette fra venner og tror juryen fremdeles er ute etter den 'beste' måten å kommentere responsive trådrammer i nettleseren. Som nevnt ovenfor bruker vi Foundation av Zurb regelmessig og liker å bruke Reveal-tillegget for å vise kommentarene våre. Disse kommentarene vises bare for større skjermer og kan ideelt sett slås på og av.
Bruk ekte innhold i trådrammer
Det har vært mye debatt rundt Lorem Ipsum i trådrammer og designmodeller, men hvis du ikke har reelt innhold i trådrammene dine, gjør du det galt. Innholdet informerer om samhandlingsbeslutningene og forteller deg når et design vil gå i stykker. Hvordan kan Lorem Ipsum gjøre det?
Hvordan designer jeg først for små skjermer?
I mange år har vi designet med en bestemt oppløsning i tankene. Det var en standardinnstilling. Uansett om vi skisserte i notatbøker, wireframing i OmniGraffle, jobbet i Photoshop eller designet i nettleseren, visste vi hva lerretstørrelsen vår ville bli. De dagene er forbi. Vi er veldig troende på å designe for den lille skjermen først og gradvis forbedre. Så hvordan endrer en designer arbeidsflyten fra en fast lerretstørrelse til en flytende?
Abstrakte design fra enheter i starten
Med mindre vi designer for en bestemt enhet, er det viktig at vi slutter å tenke på enheter og begynne å tenke på opplevelser. Alle de følgende teknikkene hjelper designere til å lage sine opplevelser mens de kan være enhetlige agnostikere (opp til et punkt).
Bruk Style Tiles
Bruk Style Tiles for å etablere retning og raskt gjenta. Style Tiles gjør det mulig for en designer å angi retningen til et designsystem uten å bli for spesifikk. Skaperen deres, Samantha Warren, beskriver dem på denne måten:
“Style Tiles er for når et moodboard er for vagt og en comp er for bokstavelig. Style Tiles etablerer en direkte forbindelse med faktiske grensesnittelementer uten å definere layout. ”
Lag grensesnitt harmoni
Se for deg et lerret med alle de visuelle og interaktive elementene samlet. Ikke for å se et bestemt UI-oppsett, men for å se hvordan alle elementene fungerer sammen. Dette er et grensesnitt harmoni lerret. Et grensesnitt harmoni lerret gjør det mulig for en designer å holde ideer sammen, men ikke fokusert på en skjermstørrelse. I tillegg er det en fin måte å effektivt kommunisere og dokumentere designede elementer i stedet for å produsere en fullstendig stilguide.
Hvis du er interessert i å lese videre, kan du finne to gode artikler om grensesnitt harmoni her og her.
Se alt i nettleseren
Alt må samles i nettleseren. Det er her UI-designen virkelig blir levende. Det er avgjørende å se hvordan det virkelige innholdet samhandler med de visuelle elementene. Det er ingen måte å gjøre dette ordentlig i et statisk miljø. Du må se hvordan den vil reagere i det opprinnelige mediet.
Få balanse med statiske programmer
Det er en strøm mellom nettleseren og statiske programmer som Photoshop. Det bør være en balanse som gjør at designsystemet kan opprettes på en flytende og naturlig måte. Visst, dette vil skje i Photoshop, men en designer som designer responsivt, må lære å tenke kreativt også i nettleseren.
Konklusjon
Nok en gang, med følelse: start med hvorfor, med godt strukturert innhold og interaksjoner som betyr noe. Fokuser først på den lille skjermen og den lave båndbredden, og forbedr dine responsive konsepter gradvis. Mediumet vårt blir eldre. Vi har sjansen til å gjøre ting riktig og forandre verden, ett webprosjekt om gangen.
Oppdag de beste 20 wireframing-verktøyene for designere
Steve Fisher koordinerer forskning, analyse, design og strategi ved Yellow Pencil i Canada, og snakker om temaer som RWD, UX og open source. Alaine Mackenzie er en innholdsstrateg på Yellow Pencil.
