Indhold
- En lydhør metode
- Hvordan holder jeg indhold først?
- Hvorfor?
- 01. Definer dine forretnings- og brugermål
- 02. Henvis dem til enhver chance, du får
- 03. Vær ikke bange for at skubbe tilbage
- 04. Skub også dit eget hold
- 05. Definer alt dit indholdsbehov foran
- Hvordan abstraherer jeg indhold fra præsentation?
- Vi er nødt til at stoppe med at tænke på indhold med hensyn til layout
- Tving dine kunder til at planlægge deres indhold uafhængigt af design
- Afslut dit indhold inden design
- Brug ægte indhold - hver gang
- Så hvordan fungerer wireframes til responsive designprojekter?
- Skitse
- In-browser rammer
- Kommentarer
- Brug ægte indhold i trådrammer
- Hvordan designer jeg først til små skærme?
- Abstrakte designs fra enheder i starten
- Brug stilfliser
- Opret interface harmoni
- Se alt i browseren
- Find en balance med statiske programmer
- Konklusion
Lad os være klare: design er kun løsningen, hvis det fokuserer på de dybere problemer, der er ved hånden, hvorfor det ligger bag alt. En solid proces skal altid lede vores arbejde, men vi er nødt til at omfavne noget mere fleksibelt. Vores medium har endelig vist sig at være flydende, så skulle ikke vores proces? Tænk på systemdesign: du skal se både hele billedet og de små detaljer. Umulig? Langt fra!
Frank Chimero udtrykker det smukt i sin bog The Shape of Design: ”Der er en del, hvor kunstneren træder tilbage fra staffeliet for at få et nyt perspektiv på værket. Maleri er lige store dele nær og langt: når kunstneren er nær, arbejder han hårdt for at sætte sit præg på; når det er langt, vurderer han arbejdet for at analysere dets kvaliteter. Han træder tilbage for at lade værket tale til sig. ”
Vi er nødt til at lade vores arbejde, vores medium, tale til os. Med stigningen i responsivt design omfavner vi endelig vores medium, som det var meningen at være: flydende. Det er en strålende tid at træde tilbage og vurdere arbejdet, analysere og omfavne en ny måde at gøre tingene på, en ny proces. Borte er de dage, hvor statiske mock-ups og webdesignere ikke forstår kode. Det er tid til en lydhør proces.
En lydhør metode
Vi vil give væk den store hemmelighed for en solid proces lige i begyndelsen af denne artikel. Fordi vi er skøre sådan. Parat? En lydhør proces er en ansvarlig proces. Vag? Måske. Fjollet? Nej. Ligesom bevægelsen på webstandarderne før den, skubber responsivt design internettet fremad med fremtidsvenlige metoder.
Som enhver designproces burde den fokusere på 'hvorfor' bag det hele. Så hvorfor findes websteder? At levere indhold. Det kan være opgavebaseret, socialt, informativt ... det betyder ikke noget. Det hele kommer ned til dette: start med hvorfor, godt struktureret indhold og interaktioner, der betyder noget.
Her er de spørgsmål, vi ofte hører om vores responsive designproces.
Hvordan holder jeg indhold først?
Vi er alle så optimistiske i starten af et projekt. "Indhold først!" vi siger. “Brugermål! Husk hvad der er vigtigt! " Det er sandt. Men hvad betyder det? Hvordan implementerer du en indholds-første proces?
Selvom du ved (eller tror du ved det), er det let at glemme, når et projekt skrider frem. Langsigtede projekter har en tendens til at trække og fortsætte (og på ... og på ...). Vi holder op med at tænke over hvorfor og begynder at fokusere på hvordan. Vi narre os selv til at tro, at vores projekter kan opdeles i separate 'opdagelses- og' udviklingsfaser, der kan eksistere uafhængigt.
Sandheden er, at vi hele tiden skal spørge hvorfor. Uanset hvor meget du tror du ved, uanset hvor meget planlægning du har lavet - hver gang du tager en beslutning, hver gang du designer en knap eller skriver en overskrift, skal du spørge ...
Hvorfor?
Hvorfor gør jeg det? Hvem er det til? Hvilket forretningsmål vil det hjælpe min klient med at nå? Hvilket behov vil det hjælpe mine brugere med at adressere? Hold ikke bare indhold først. Hold hvorfor først.
Dette gør det nemt at lyde. Men for at gøre det godt, bliver du nødt til at skubbe. Skub dine kunder og dit team til at definere deres hvorfor først. Ingen Lorem Ipsum, nej 'det kommer vi senere'. Lav dine lektier! Alle dine hows skal starte med en solid hvorfor. På Yellow Pencil har dette betydet store ændringer i den måde, vi pitcher, estimerer, budgetterer og planlægger projekter på. Vi har været nødt til at presse på for budget og tid til at foretage solid forskning, strategi og planlægning. Du kan også. Men når dine kunder og dine teams ser de enorme fordele ved at definere indholdsbehov foran, ser de aldrig tilbage.
Og det er vores job at uddanne dem. (Læs Mike Monteiros fremragende bog Design er et job, hvis du vil lære mere om at håndtere klienter.) Klienter kan have svært ved at forstå værdien af at lave al den forskning og arbejde foran. Og hvorfor skulle de? De får ikke noget 'færdigt' i slutningen - og alt for ofte får de bare en faktura og et stort ol 'Word-dokument.
Det er ikke deres skyld - det er vores skyld. Det er vores ansvar at gøre et bedre stykke arbejde med at demonstrere denne værdi. Hvert trin på vejen er vi nødt til at bringe det hele tilbage til det meget vigtige hvorfor.
Dette er især vigtigt for responsivt design. Et responsivt websted kræver ikke meget mere udviklingsindsats, men det betyder meget mere planlægning. Virkelig dog planlægger det, at vi skulle have gjort det hele tiden. Se den nuværende redesign-hvert tredje år projektcyklus. Vil du fortsætte med at gøre det? Det gør vi bestemt ikke.
Så her er tre trin til at holde indholdet først i din projektproces.
01. Definer dine forretnings- og brugermål
Opret en prioriteret liste over forretnings- og brugermål til dit projekt. Hvad ønsker dine brugere bedst at vide eller gøre? Gør din forskning. Lav informerede slutninger, ikke vilde gæt. Få alle dine interessenter til at blive enige.
02. Henvis dem til enhver chance, du får
Hver gang du træffer en beslutning, hver gang nogen foreslår en ny funktion eller et designelement eller en side med indhold, skal du få dem til at kortlægge anmodningen til et forretnings- og brugermål. Hvilket reelt behov opfylder denne funktion? Hvad er den virkelige årsag? (Tip: 'Fordi jeg vil' eller 'Jeg kan virkelig godt lide blå' eller 'alle er på Facebook' tæller ikke med.)
03. Vær ikke bange for at skubbe tilbage
Dette kan være svært. Kundeforhold kan være sarte, og det kan være fristende at opgive kampen for at vinde krigen. Men husk, vi er alle sammen i dette! Det er ikke forretning versus bruger; os vs dem.
At imødekomme brugernes behov er den bedste måde at imødekomme forretningsbehovene på. For uden vores brugere har vi ikke en virksomhed! Klienter (gode klienter) ansætter dig ikke til at sige 'ja' til alt. Så hvis din klient beder om noget, der ikke opfylder deres mål eller brugernes behov, skal du ikke være bange for at udfordre dem. Det handler ikke om ego. Det handler om at skabe den bedst mulige løsning.
04. Skub også dit eget hold
Dette kan også være en udfordring, når du arbejder i et kreativt team. Adskillelse af roller - visuelt design, brugeroplevelse, informationsarkitektur, indholdsstrategi, indholdsproduktion - kan føre til fejlkommunikation. Vi får travlt, vi bliver overvældet af e-mails. Det er svært at være med et projekt fra start til slut, især når 'dit' arbejde er udført.
Dit teams forhold er mindst lige så vigtigt som dit klientforhold. Vi er nødt til at minde os selv om hvorfor, ligesom vi gør vores kunder. Samarbejde er nøglen. Du kan ikke bare 'udlevere' en indholdsplan eller wireframes eller designs. Så meget som muligt skal vi arbejde hånd i hånd. Det er let at 'afslutte' en leverance og gå videre til noget andet. Det er meget sværere at forblive med et projekt, når det bliver svært.
En vandfaldstilgang til kreativt arbejde virker bare ikke. Adræt, samarbejde mellem teammedlemmer giver bedre resultater.
05. Definer alt dit indholdsbehov foran
Her er sagen: responsive websteder tager længere tid at planlægge. Vi planlægger ikke kun en enkelt kontekst længere. Vi planlægger alle de sammenhænge, vi kender til nu, og nogle, der ikke eksisterer endnu.
Men det tager meget kortere tid at planlægge alle disse kompleksiteter foran end det at gå tilbage og eftermontere funktioner og funktioner, som du ikke tog højde for. Så brug tiden / indsatsen / budgettet. Tving dine kunder og dit team til at definere (og forpligte sig til!) Alt deres indhold, inden du går i design. Brug sidetabeller. Brug struktureret indhold. Fremtidssikret dit indhold nu! Eller græde senere.
Hvordan abstraherer jeg indhold fra præsentation?
Du hører dette meget omkring internet-o-sfæren. Men vent, hvad? Og vent - hvorfor?
Fordi præsentation kan (og vil) ændre sig. Den måde, vi designede hjemmesider på for 15 år siden, kan næsten ikke genkendes fra den måde, vi præsenterer dem på nu. Men ved du, hvad der ikke har ændret sig? Ord. Vi bruger dem stadig. Internettet findes primært til (tekstbaseret) indhold. Vi bruger den stadig til at løse informationsproblemer; at udføre opgaver. Men hvis dit indhold afhænger af et præsentationsmiddel (Flash-intro-sider, nogen?), Er der en reel sandsynlighed for, at det ikke kan bruges om få år. Og det stinker.
Vi er nødt til at stoppe med at tænke på indhold med hensyn til layout
Vi (som industri) har uddannet vores kunder til at tænke på indhold med hensyn til layout. ”Sæt det i sidepanelet,” siger vi. "Det skal gå i sidefoden." Hold op! Stop det. Hold op. Det handler ikke om placering. Det handler om prioritet. Hvad er det vigtigste indhold for dine brugere? Fordi gæt hvad: layout ændres på tværs af sammenhænge. Der kommer sandsynligvis ikke et sidebjælke til dit lille skærmdesign.
Den gigantiske supermenu, din klient ønsker? Flyver ikke på en iPhone.
Tving dine kunder til at planlægge deres indhold uafhængigt af design
Okay, du behøver ikke at tvinge dem. Tilskynd dem. Stærkt opmuntre. Sidetabeller er gode til dette. Hvis du ikke allerede har læst den, skal du straks fortsætte til Kristina Halvorson og Melissa Rachs indholdsstrategi til internettet for at få flere oplysninger om, hvordan du opretter dem. Organiser dem i prioriteret rækkefølge. Henvis ikke til placering eller layout. Dette hjælper dine kunder med at tænke over deres indhold på en mere produktiv måde og vil også få processen til at skabe indhold i bevægelse, inden de færdige trådrammer eller design.
Afslut dit indhold inden design
Okay, dette er ikke altid muligt. Men jo mere usikkerhed du kan eliminere, inden du begynder at designe, jo mindre bliver du nødt til at gå tilbage og ændre ting senere.
Brug ægte indhold - hver gang
Hvis det er muligt, skal du bruge edge case-indhold - vis dine kunder de mest komplicerede sider, billeder og menuer. Dette undgår overraskelser senere i processen, når de ser deres rodigste indhold i det færdige produkt.
Funktionelle trådløse rammer i browseren gør en verden til forskel. Tillad dine kunder at observere deres indhold, der bevæger sig og ændrer sig på tværs af en række skærmstørrelser. Påpeg det, når du præsenterer dine wireframes (du laver personlige præsentationer, ikke?) Demonstrer for dem, hvordan prioriteten af deres oplysninger forbliver den samme på tværs af skærmstørrelser, mens layoutet ændres.
Så hvordan fungerer wireframes til responsive designprojekter?
Vi er overbeviste om, at interaktionsdesign til RWD skal komme ind i browseren hurtigt og ofte. Det er stort set umuligt at oprette et statisk dokument, der beskriver alt. Sikker på, vi kunne oprette et dokument, der demonstrerer tre, fire eller fem pausepunkter, men det er kun en brøkdel af historien. Hvad med alle øjeblikke mellem breakpoints? Det sker i browseren.
Skitse
Alligevel er det godt at være i stand til hurtigt at skitsere dine ideer sammen. Dette behøver ikke at ske i et bestemt medium, men der er bare noget ved blyant på papir. Hele pointen her er at få ideer ud hurtigt og iterativt. Vi elsker at tegne, når det er muligt, og der er endda en app til det: UI Sketcher.
In-browser rammer
Her er den rigtige billet til os. Vi elsker at genbruge mønstre og systemer, når vi demonstrerer RWD i browseren. Selvfølgelig kunne vi oprette vores eget system fra bunden hver gang, men det hjælper ikke os eller vores kunder.
Vi kan også godt lide at bruge hurtige responsive prototyperammer som Twitter's Bootstrap eller Zurb's Foundation. Vi læner os personligt mod Foundation, fordi det passer til vores arbejdsgang. Det ville være godt, hvis en af dem ville tage en lille skærm, lav-båndbredde-første tilgang, men det er bare sådan, vi ruller.
Kommentarer
Kommentarer til RWD-wireframes er vigtige, men vi finder det ofte overset. Sig det højt: dokumentation, dokumentation, dokumentation! Vi har set et par eksempler på dette fra venner og mener, at juryen stadig er ude på den 'bedste' måde at korrekt kommentere responsive wireframes i browseren. Som nævnt ovenfor bruger vi regelmæssigt Foundation af Zurb og bruger gerne Reveal-tilføjelsen til at vise vores kommentarer. Disse kommentarer vises kun på større skærme og kan ideelt set tændes og slukkes.
Brug ægte indhold i trådrammer
Der har været en masse debat omkring Lorem Ipsum i trådrammer og designmock-ups, men hvis du ikke har rigtigt indhold i dine trådrammer, gør du det forkert. Indholdet informerer interaktionsbeslutningerne og fortæller dig, hvornår et design går i stykker. Hvordan kan Lorem Ipsum gøre det?
Hvordan designer jeg først til små skærme?
I årevis har vi designet med en bestemt opløsning i tankerne. Det var en standardindstilling. Uanset om vi tegner i notesbøger, wireframmer i OmniGraffle, arbejder i Photoshop eller designer i browseren, vidste vi, hvad vores lærredstørrelse skulle være. Disse dage er væk. Vi er meget troende på at designe til den lille skærm først og gradvist forbedre. Så hvordan ændrer en designer sin arbejdsgang fra en fast lærredstørrelse til en flydende?
Abstrakte designs fra enheder i starten
Medmindre vi designer til en bestemt enhed, er det vigtigt, at vi holder op med at tænke på enheder og begynder at tænke på oplevelser. Alle de følgende teknikker hjælper designere med at skabe deres oplevelser, mens de er i stand til at forblive agnostiske enheder (op til et punkt).
Brug stilfliser
Brug Style Tiles til at fastlægge retning og hurtigt gentage. Style Tiles gør det muligt for en designer at angive retningen for et designsystem uden at blive for specifik. Deres skaber, Samantha Warren, beskriver dem på denne måde:
“Style Tiles er til, når et moodboard er for vagt, og en comp er for bogstavelig. Style Tiles etablerer en direkte forbindelse med faktiske interface-elementer uden at definere layout. ”
Opret interface harmoni
Forestil dig et lærred med alle de visuelle og interaktive elementer samlet. Ikke for at se et bestemt UI-layout, men for at se, hvordan alle elementerne fungerer sammen. Dette er et interface-harmoni-lærred. Et interface-harmoni-lærred gør det muligt for en designer at holde ideer sammen, men ikke fokuseret på en skærmstørrelse. Plus, det er en fantastisk måde at effektivt kommunikere og dokumentere designede elementer i stedet for at producere en komplet stilguide.
Hvis du er interesseret i at læse videre, kan du finde to fremragende artikler om emnet interface-harmoni her og her.
Se alt i browseren
Alt skal samles i browseren. Det er her UI-designet virkelig kommer til liv. Det er afgørende at se, hvordan det virkelige indhold interagerer med de visuelle elementer. Der er ingen måde at gøre dette ordentligt i et statisk miljø. Du skal se, hvordan det vil reagere i det oprindelige medium.
Find en balance med statiske programmer
Der er en strøm mellem browseren og statiske programmer som Photoshop. Der skal være en balance, der gør det muligt at skabe designsystemet på en flydende og naturlig måde. Sikker på, dette vil ske i Photoshop, men en designer, der designer responsivt, skal også lære at tænke kreativt i browseren.
Konklusion
Endnu en gang med følelse: start med hvorfor, med velstruktureret indhold og interaktioner, der betyder noget. Fokuser først på den lille skærm og lav båndbredde, og forbedr gradvist dine lydhøre koncepter. Vores medium er ved at blive voksen. Vi har chancen for at gøre tingene rigtigt og ændre verden, et webprojekt ad gangen.
Oplev de bedste 20 wireframing-værktøjer til designere
Steve Fisher koordinerer forskning, analyse, design og strategi ved Yellow Pencil i Canada og taler om emner som RWD, UX og open source. Alaine Mackenzie er en indholdsstrateg på Yellow Pencil.
