Innehåll
- En lyhörd metodik
- Hur behåller jag innehållet först?
- Varför?
- 01. Definiera dina affärs- och användarmål
- 02. Referera till dem varje chans du får
- 03. Var inte rädd för att skjuta tillbaka
- 04. Tryck också på ditt eget team
- 05. Definiera allt ditt innehåll behöver framför
- Hur gör jag abstrakt innehåll från presentation?
- Vi måste sluta tänka på innehåll när det gäller layout
- Tvinga dina kunder att planera sitt innehåll oberoende av design
- Slutför ditt innehåll innan design
- Använd riktigt innehåll - varje gång
- Så hur fungerar trådramar för responsiva designprojekt?
- Skiss
- Ramverk i webbläsaren
- Kommentarer
- Använd riktigt innehåll i trådramar
- Hur designar jag först för små skärmar?
- Abstrakt design från apparater i början
- Använd Style Tiles
- Skapa gränssnittsharmoni
- Visa allt i webbläsaren
- Hitta en balans med statiska program
- Slutsats
Låt oss vara tydliga: design är lösningen bara om den fokuserar på de djupare frågorna till hands, varför bakom allt. En gedigen process bör alltid vägleda vårt arbete, men vi måste anamma något mer flexibelt. Vårt medium har äntligen visat sig vara flytande, så borde inte vår process? Tänk på systemdesign: du måste se både hela bilden och de små detaljerna. Omöjlig? Långt ifrån!
Frank Chimero uttrycker det vackert i sin bok The Shape of Design: ”Det finns en del där konstnären går tillbaka från staffli för att få ett nytt perspektiv på verket. Att måla är lika delar nära och långt: när det är nära arbetar konstnären hårt för att sätta sitt prägel; när det är långt bedömer han arbetet för att analysera dess kvaliteter. Han går tillbaka för att låta arbetet tala till honom. ”
Vi måste låta vårt arbete, vårt medium, tala till oss. Med ökningen av lyhörd design omfamnar vi äntligen vårt medium som det var tänkt att vara: flytande. Det är en lysande tid att gå tillbaka och bedöma arbetet, analysera och omfamna ett nytt sätt att göra saker, en ny process. Borta är dagarna för statiska mock-ups och webbdesigners som inte förstår kod. Det är dags för en lyhörd process.
En lyhörd metodik
Vi kommer att ge bort den stora hemligheten för en gedigen process redan i början av den här artikeln. För att vi är galen så. Redo? En responsiv process är en ansvarsfull process. Vag? Kanske. Dumbom? Nej. Precis som rörelsen för webbstandarder före den, lyhörd design driver webben framåt med framtidsvänliga metoder.
Liksom alla designprocesser borde den fokusera på "varför" bakom allt. Så varför finns det webbplatser? Att leverera innehåll. Det kan vara uppgiftsbaserat, socialt, informativt ... det spelar ingen roll. Allt kommer ner till detta: börja med varför, välstrukturerat innehåll och interaktioner som spelar roll.
Här är de frågor vi ofta hör om vår responsiva designprocess.
Hur behåller jag innehållet först?
Vi är alla så optimistiska i början av ett projekt. “Innehåll först!” vi säger. ”Användarmål! Kom ihåg vad som är viktigt! " Det är sant. Men vad betyder det? Hur implementerar du en första innehållsprocess?
Även om du vet (eller tror att du vet) är det lätt att glömma när ett projekt fortskrider. Långsiktiga projekt har en tendens att fortsätta och fortsätta (och på ... och på ...). Vi slutar tänka på varför och börjar fokusera på hur. Vi lurar oss själva till att tro att våra projekt kan delas upp i separata fynd och utvecklingsfaser som kan existera oberoende.
Sanningen är att vi hela tiden måste fråga varför. Oavsett hur mycket du tror att du vet, oavsett hur mycket planering du har gjort - varje gång du fattar ett beslut, varje gång du designar en knapp eller skriver en rubrik, måste du fråga ...
Varför?
Varför gör jag det här? Vem är det till? Vilket affärsmål kommer det att hjälpa min klient att uppnå? Vilket behov kommer det att hjälpa mina användare att ta itu med? Håll inte bara innehållet först. Håll varför först.
Detta gör att det låter enkelt. Men för att göra det bra måste du driva. Pressa dina kunder och ditt team att definiera varför först. Ingen Lorem Ipsum, ingen 'vi kommer till det senare'. Gör dina läxor! Alla dina behov måste börja med en solid varför. På Yellow Pencil har detta inneburit stora förändringar i vårt sätt att pitcha, uppskatta, budgetera och planera projekt. Vi har varit tvungna att driva på budget och tid för att göra gedigen forskning, strategi och planering. Du kanske också. Men när dina kunder och dina team ser de enorma fördelarna med att definiera innehållsbehov framför, ser de aldrig tillbaka.
Och det är vårt jobb att utbilda dem. (Läs Mike Monteiros utmärkta bok Design is a Job om du vill lära dig mer om att hantera kunder.) Kunderna kan ha svårt att förstå värdet av att göra all den forskningen och arbeta i förväg. Och varför skulle de göra det? De får inget "färdigt" i slutet - och alltför ofta får de bara en faktura och ett stort ol-Word-dokument.
Det är inte deras fel - det är vårt fel. Det är vårt ansvar att göra ett bättre arbete med att visa det värdet. Varje steg på vägen måste vi ta tillbaka allt till det viktigaste varför.
Detta är särskilt viktigt för lyhörd design. En responsiv webbplats kräver inte mycket mer utvecklingsarbete, men det betyder mycket mer planering. Egentligen planerar det att vi borde ha gjort hela tiden. Bevittna den nuvarande redesign-vart tredje årsprojekt. Vill du fortsätta göra det? Det gör vi verkligen inte.
Så här är tre steg för att hålla innehållet först i din projektprocess.
01. Definiera dina affärs- och användarmål
Skapa en prioriterad lista över affärs- och användarmål för ditt projekt. Vad vill dina användare mest veta eller göra? Gör din forskning. Gör informerade slutsatser, inte vilda gissningar. Få alla dina intressenter att komma överens.
02. Referera till dem varje chans du får
Varje gång du fattar ett beslut, varje gång någon föreslår en ny funktion eller designelement eller innehållssida, få dem att kartlägga begäran till ett affärs- och användarmål. Vilket verkligt behov kommer den här funktionen att tillgodose? Vad är den verkliga anledningen? (Tips: "Eftersom jag vill" eller "Jag gillar verkligen blått" eller "alla är på Facebook" räknas inte.)
03. Var inte rädd för att skjuta tillbaka
Det här kan vara svårt. Kundrelationer kan vara känsliga och det kan vara frestande att ge upp kampen för att vinna kriget. Men kom ihåg, vi är alla i det här tillsammans! Det är inte affärer mot användare; oss mot dem.
Att möta användarnas behov är det bästa sättet att tillgodose affärsbehov. För utan våra användare har vi inget företag! Kunder (bra kunder) anställer dig inte för att säga ”ja” till allt. Så om din klient ber om något som inte uppfyller deras mål eller användarnas behov, var inte rädd för att utmana dem. Det handlar inte om ego. Det handlar om att skapa bästa möjliga lösning.
04. Tryck också på ditt eget team
Detta kan också vara en utmaning när man arbetar inom ett kreativt team. Rollseparation - visuell design, användarupplevelse, informationsarkitektur, innehållsstrategi, innehållsproduktion - kan leda till felkommunikation. Vi blir upptagen, vi blir överväldigade av e-postmeddelanden. Det är svårt att hålla med ett projekt från början till slut, speciellt när ”ditt” arbete är klart.
Ditt lags relation är minst lika viktig som din kundrelation. Vi måste påminna oss om varför, precis som vi gör våra kunder. Samarbete är nyckeln. Du kan inte bara ”lämna ut” en innehållsplan eller trådramar eller mönster. Så mycket som möjligt måste vi arbeta hand i hand. Det är lätt att "avsluta" en leverans och gå vidare till något annat. Det är mycket svårare att hålla med ett projekt när det blir svårt.
En vattenfallsmetod för kreativt arbete fungerar bara inte. Agilt, samarbetsarbete mellan teammedlemmar ger bättre resultat.
05. Definiera allt ditt innehåll behöver framför
Här är saken: responsiva webbplatser tar längre tid att planera. Vi planerar inte bara ett enda sammanhang längre. Vi planerar för alla sammanhang som vi känner till nu, och några som inte finns ännu.
Men det tar mycket kortare tid att planera för alla dessa komplexiteter i förväg än att gå tillbaka och eftermontera funktioner och funktioner som du inte redogjorde för. Så spendera tid / ansträngning / budget. Tvinga dina kunder och ditt team att definiera (och åta sig!) Allt deras innehåll innan du går in i design. Använd sidtabeller. Använd strukturerat innehåll. Framtidssäkert ditt innehåll nu! Eller gråta senare.
Hur gör jag abstrakt innehåll från presentation?
Du hör detta mycket runt internet-o-sfären. Men vänta, vad? Och vänta - varför?
Eftersom presentation kan (och kommer) att förändras. Hur vi utformade webbplatser för 15 år sedan är nästan oigenkännligt från hur vi presenterar dem nu. Men vet du vad som inte har förändrats? Ord. Vi använder dem fortfarande. Internet finns främst för (textbaserat) innehåll. Vi använder den fortfarande för att lösa informationsproblem; för att utföra uppgifter. Men om ditt innehåll beror på ett presentationsmedel (Flash-intro-sidor, någon?) Är det sannolikt att det inte kommer att användas om några år. Och det suger.
Vi måste sluta tänka på innehåll när det gäller layout
Vi (som bransch) har utbildat våra kunder att tänka på innehåll när det gäller layout. ”Lägg det i sidofältet”, säger vi. "Det borde gå i sidfoten." Sluta! Sluta. Sluta. Det handlar inte om plats. Det handlar om prioritet. Vad är det viktigaste innehållet för dina användare? För gissa vad: layout förändras över olika sammanhang. Det kommer (troligen) inte att finnas ett sidofält på din småskärmsdesign.
Den jätte supermeny som din klient vill ha? Kommer inte att flyga på en iPhone.
Tvinga dina kunder att planera sitt innehåll oberoende av design
Okej, du behöver inte tvinga dem. Uppmuntra dem. Uppmuntra starkt. Sidtabeller är bra för detta. Om du inte redan har läst det, fortsätt omedelbart till Kristina Halvorson och Melissa Rachs innehållsstrategi för webben för mer information om hur du skapar dem. Organisera dem i prioriterad ordning. Referera inte till plats eller layout. Detta kommer att hjälpa dina kunder att tänka på deras innehåll på ett mer produktivt sätt, och kommer också att få processen att skapa innehåll innan de slutförda trådramarna eller designen.
Slutför ditt innehåll innan design
Okej, det här är inte alltid möjligt. Men ju mer osäkerhet du kan eliminera innan du börjar designa, desto mindre måste du gå tillbaka och ändra saker senare.
Använd riktigt innehåll - varje gång
Om möjligt, använd edge case-innehåll - visa dina kunder de mest komplicerade sidorna, bilderna och menyerna. Detta kommer att undvika överraskningar senare i processen, när de ser sitt rörigaste innehåll i den färdiga produkten.
Funktionella trådramar i webbläsaren gör en värld av skillnad. Låt dina kunder observera deras innehåll rör sig och förändras över en rad olika skärmstorlekar. Peka på det när du presenterar dina trådramar (du gör personliga presentationer, eller hur?) Demonstra för dem hur prioriteringen av deras information förblir densamma över skärmstorlekar, medan layouten ändras.
Så hur fungerar trådramar för responsiva designprojekt?
Vi är övertygade om att interaktionsdesign för RWD måste komma in i webbläsaren snabbt och ofta. Det är ganska omöjligt att skapa ett statiskt dokument som beskriver allt. Visst, vi kan skapa ett dokument som visar tre, fyra eller fem brytpunkter, men det är bara en bråkdel av historien. Vad sägs om alla stunder mellan brytpunkterna? Det händer i webbläsaren.
Skiss
Det är ändå bra att snabbt kunna skissera dina idéer tillsammans. Detta behöver inte ske i något särskilt medium, men det finns bara något med penna på papper. Hela poängen här är att få ut idéer snabbt och iterativt. Vi älskar att skissa om möjligt, och det finns till och med en app för det: UI Sketcher.
Ramverk i webbläsaren
Här är den riktiga biljetten för oss. Vi älskar att återanvända mönster och system när vi visar RWD i webbläsaren. Naturligtvis kan vi skapa vårt eget system från grunden varje gång, men det hjälper inte oss eller våra kunder.
Vi gillar också att använda snabba responsiva ramar för prototyper som Twitter Bootstrap eller Zurb's Foundation. Vi lutar oss personligen mot Foundation eftersom det passar vårt arbetsflöde. Det skulle vara jättebra om någon av dem skulle ta en liten skärm, med låg bandbredd först, men det är precis så vi rullar.
Kommentarer
Kommentarer för RWD-trådramar är väsentliga, men vi tycker att de ofta förbises. Säg det högt: dokumentation, dokumentation, dokumentation! Vi har sett några exempel på detta från vänner och tror att juryn fortfarande är ute på det bästa sättet att ordentligt kommentera responsiva trådramar i webbläsaren. Som nämnts ovan använder vi regelbundet Foundation av Zurb och gillar att använda dess Reveal-tillägg för att visa våra kommentarer. Dessa anteckningar visas bara för större skärmar och kan idealiskt slås på och av.
Använd riktigt innehåll i trådramar
Det har varit mycket debatt kring Lorem Ipsum i trådramar och designmodeller, men om du inte har riktigt innehåll i dina trådramar gör du det fel. Innehållet informerar om interaktionsbesluten och berättar när en design går sönder. Hur kan Lorem Ipsum göra det?
Hur designar jag först för små skärmar?
I åratal designade vi med en specifik upplösning i åtanke. Det var en standardinställning. Oavsett om vi skissade i anteckningsböcker, wireframing i OmniGraffle, arbetade i Photoshop eller designade i webbläsaren, visste vi vad vår dukstorlek skulle bli. De dagarna är borta. Vi tror mycket på att först utforma för den lilla skärmen och gradvis förbättra. Så hur ändrar en designer sitt eller hennes arbetsflöde från en fast dukstorlek till en flytande?
Abstrakt design från apparater i början
Såvida vi inte designar för en specifik enhet är det viktigt att vi slutar tänka på enheter och börja tänka på upplevelser. Alla följande tekniker hjälper designers att tillverka sina upplevelser samtidigt som de kan förbli agnostiska enheter (upp till en punkt).
Använd Style Tiles
Använd Style Tiles för att fastställa riktning och snabbt itera. Style Tiles gör det möjligt för en designer att ange riktningen för ett designsystem utan att bli för specifik. Deras skapare, Samantha Warren, beskriver dem så här:
“Style Tiles är för när ett moodboard är för vagt och en comp är för bokstavlig. Style Tiles skapar en direkt anslutning till faktiska gränssnittselement utan att definiera layout. ”
Skapa gränssnittsharmoni
Föreställ dig en duk med alla visuella och interaktiva element samlade. Inte för att se en viss UI-layout utan för att se hur alla element fungerar tillsammans. Detta är en gränssnittsharmonikduk. En harmonisk duk med gränssnitt gör det möjligt för en designer att hålla idéer tillsammans, men inte fokusera på någon skärmstorlek. Dessutom är det ett utmärkt sätt att effektivt kommunicera och dokumentera designade element snarare än att producera en fullständig stilguide.
Om du är intresserad av att läsa vidare kan du hitta två utmärkta artiklar om gränssnittsharmoni här och här.
Visa allt i webbläsaren
Allt måste samlas i webbläsaren. Det är här UI-designen verkligen kommer till liv. Att se hur det verkliga innehållet interagerar med de visuella elementen är avgörande. Det finns inget sätt att göra detta ordentligt i en statisk miljö. Du måste se hur det kommer att reagera i det ursprungliga mediet.
Hitta en balans med statiska program
Det finns ett flöde mellan webbläsaren och statiska program som Photoshop. Det bör finnas en balans som gör att designsystemet kan skapas på ett flytande och naturligt sätt. Visst, detta kommer att hända i Photoshop, men en designer som designar responsivt måste också lära sig att tänka kreativt i webbläsaren.
Slutsats
Återigen, med känsla: börja med varför, med välstrukturerat innehåll och interaktioner som spelar roll. Fokusera först på den lilla skärmen och låg bandbredd och förbättra dina responsiva koncept gradvis. Vårt medium har blivit äldre. Vi har chansen att göra saker rätt och förändra världen, ett webbprojekt i taget.
Upptäck de 20 bästa trådlösa ramverktygen för designers
Steve Fisher samordnar forskning, analys, design och strategi vid Yellow Pencil i Kanada och talar om ämnen som RWD, UX och open source. Alaine Mackenzie är en innehållsstrateg på Yellow Pencil.
