Inhoud
- Een responsieve methodologie
- Hoe houd ik de inhoud eerst?
- Waarom?
- 01. Bepaal uw zakelijke en gebruikersdoelen
- 02. Gebruik ze bij elke kans die je krijgt
- 03. Wees niet bang om terug te duwen
- 04. Duw ook je eigen team
- 05. Bepaal van tevoren al uw inhoudsbehoeften
- Hoe vat ik inhoud van een presentatie samen?
- We moeten stoppen met het denken aan inhoud in termen van lay-out
- Dwing uw klanten om hun inhoud onafhankelijk van het ontwerp te plannen
- Rond uw inhoud af voordat u deze gaat ontwerpen
- Gebruik echte inhoud - elke keer weer
- Dus hoe werken wireframes voor responsieve ontwerpprojecten?
- Schetsen
- In-browser framework
- Annotaties
- Gebruik echte inhoud in wireframes
- Hoe ontwerp ik eerst voor kleine schermen?
- Abstracte ontwerpen van apparaten in het begin
- Gebruik stijltegels
- Creëer interfaceharmonie
- Bekijk alles in de browser
- Vind een evenwicht met statische programma's
- Conclusie
Laten we duidelijk zijn: design is alleen de oplossing als het zich richt op de diepere problemen, het waarom achter alles. Een solide proces moet altijd leidend zijn voor ons werk, maar we moeten iets flexibeler omarmen. Ons medium heeft eindelijk bewezen vloeibaar te zijn, zou ons proces dat niet moeten doen? Denk aan systeemontwerp: je moet zowel het hele plaatje als de kleine details zien. Onmogelijk? Verre van dat!
Frank Chimero verwoordt het prachtig in zijn boek The Shape of Design: “Er is een deel waar de kunstenaar een stap terug doet van de ezel om een nieuw perspectief op het werk te krijgen. Schilderen is gelijke delen dichtbij en veraf: wanneer hij dichtbij is, werkt de kunstenaar hard om zijn stempel te drukken; wanneer ver, beoordeelt hij het werk om de kwaliteiten ervan te analyseren. Hij doet een stap achteruit om het werk tot hem te laten spreken. "
We moeten ons werk, ons medium, tot ons laten spreken. Met de opkomst van responsive design, omarmen we eindelijk ons medium zoals het bedoeld was: vloeibaar. Het is een schitterende tijd om een stapje terug te doen en het werk te beoordelen, te analyseren en een nieuwe manier van doen, een nieuw proces te omarmen. Voorbij zijn de dagen van statische mock-ups en webontwerpers die code niet begrijpen. Het is tijd voor een responsief proces.
Een responsieve methodologie
We gaan aan het begin van dit artikel het grote geheim voor een solide proces prijsgeven. Omdat we zo gek zijn. Klaar? Een responsief proces is een verantwoord proces. Vaag? Kan zijn. Dwaas? Nee. Net als de beweging voor webstandaarden ervoor, duwt responsive design het web vooruit met toekomstvriendelijke methoden.
Zoals elk ontwerpproces, moet het zich concentreren op het ‘waarom’ erachter. Dus waarom bestaan websites? Om inhoud te leveren. Dat kan taakgericht, sociaal, informatief ... het maakt niet uit. Het komt allemaal hierop neer: begin met het waarom, goed gestructureerde inhoud en interacties die ertoe doen.
Dit zijn de vragen die we het vaakst horen over ons responsieve ontwerpproces.
Hoe houd ik de inhoud eerst?
We zijn allemaal zo optimistisch aan het begin van een project. "Inhoud eerst!" wij zeggen. “Gebruikersdoelen! Onthoud wat belangrijk is! " Het is waar. Maar wat betekent het? Hoe implementeer je een content-first-proces?
Zelfs als je het weet (of denkt te weten), vergeet je het gemakkelijk naarmate een project vordert. Langlopende projecten hebben de neiging om maar door te slepen (en door… en door…). We stoppen met nadenken over het waarom, en beginnen ons te concentreren op het hoe. We houden onszelf voor de gek door te denken dat onze projecten kunnen worden opgesplitst in afzonderlijke ‘ontdekking’ en ‘ontwikkeling’ fasen die onafhankelijk van elkaar kunnen bestaan.
De waarheid is dat we ons de hele tijd moeten blijven afvragen waarom. Hoeveel je ook denkt te weten, hoeveel planning je ook hebt gemaakt - elke keer dat je een beslissing neemt, elke keer dat je een knop ontwerpt of een kop schrijft, moet je vragen ...
Waarom?
Waarom doe ik dit? Voor wie is het? Welk zakelijk doel helpt het mijn klant om te bereiken? Welke behoefte zal het mijn gebruikers helpen bij het adresseren? Bewaar niet alleen de inhoud op de eerste plaats. Houd het waarom eerst.
Hierdoor klinkt het eenvoudig. Maar om het goed te doen, moet je pushen. Duw uw klanten en uw team om eerst hun waarom te bepalen. Geen Lorem Ipsum, nee ‘daar komen we later op terug’. Doe je huiswerk! Al je hows moeten beginnen met een solide waarom. Bij Yellow Pencil betekende dit grote veranderingen in de manier waarop we projecten pitchen, schatten, budgetteren en plannen. We moesten ons inzetten voor budget en tijd om gedegen onderzoek, strategie en planning te doen. Jij misschien ook. Maar zodra uw klanten en uw teams de enorme voordelen zien van het vooraf definiëren van inhoudsbehoeften, zullen ze nooit meer achterom kijken.
En het is onze taak om ze op te leiden. (Lees Mike Monteiro's uitstekende boek Design is a Job als je meer wilt weten over het omgaan met klanten.) Klanten kunnen het moeilijk vinden om de waarde van al dat onderzoek en werk van tevoren te begrijpen. En waarom zouden ze? Ze krijgen aan het eind niets ‘af’ - en maar al te vaak krijgen ze alleen een factuur en een groot oud Word-document.
Dat is niet hun schuld - het is onze schuld. Het is onze verantwoordelijkheid om die waarde beter aan te tonen. Bij elke stap moeten we het allemaal terugbrengen naar het allerbelangrijkste waarom.
Dit is vooral belangrijk voor responsive design. Een responsive website vereist niet veel meer ontwikkelingsinspanningen, maar het betekent wel veel meer planning. Maar het is echt van plan dat we dat al die tijd hadden moeten doen. Wees getuige van de huidige projectcyclus van elke drie jaar opnieuw ontwerpen. Wil je dat blijven doen? Zeker niet.
Dus hier zijn drie stappen om de inhoud voorop te houden in uw projectproces.
01. Bepaal uw zakelijke en gebruikersdoelen
Stel een geprioriteerde lijst op van zakelijke en gebruikersdoelen voor uw project. Wat willen uw gebruikers het liefst weten of doen? Doe je onderzoek. Maak weloverwogen conclusies, geen wilde gissingen. Zorg dat al uw belanghebbenden het erover eens zijn.
02. Gebruik ze bij elke kans die je krijgt
Elke keer dat u een beslissing neemt, elke keer dat iemand een nieuwe functie of een nieuw ontwerpelement of een pagina met inhoud voorstelt, laat ze het verzoek dan toewijzen aan een bedrijfs- en gebruikersdoel. Aan welke echte behoefte zal deze functie voldoen? Wat is de echte reden? (Hint: ‘Omdat ik het wil’ of ‘Ik hou echt van blauw’ of ‘iedereen is op Facebook’ tellen niet mee.)
03. Wees niet bang om terug te duwen
Dit kan moeilijk zijn. Klantrelaties kunnen delicaat zijn en het kan verleidelijk zijn om de strijd om de oorlog te winnen op te geven. Maar onthoud, we zitten allemaal in hetzelfde schuitje! Het zijn geen zaken versus gebruiker; wij versus hen.
Voldoen aan de behoeften van gebruikers is de beste manier om aan de zakelijke behoeften te voldoen. Omdat we zonder onze gebruikers geen bedrijf hebben! Klanten (goede klanten) huren je niet in om overal ‘ja’ te zeggen. Dus als uw klant iets vraagt dat niet voldoet aan zijn doelen of de behoeften van zijn gebruikers, wees dan niet bang om hem uit te dagen. Het gaat niet om ego. Het gaat erom de best mogelijke oplossing te creëren.
04. Duw ook je eigen team
Dit kan ook een uitdaging zijn bij het werken in een creatief team. Scheiding van rollen - visueel ontwerp, gebruikerservaring, informatiearchitectuur, contentstrategie, contentproductie - kan leiden tot miscommunicatie. We krijgen het druk, we worden overweldigd door e-mails. Het is moeilijk om van begin tot eind bij een project te blijven, vooral als ‘jouw’ werk erop zit.
De relatie van uw team is minstens zo belangrijk als uw klantrelatie. We moeten onszelf eraan herinneren waarom, net als onze klanten. Samenwerking staat centraal. U kunt niet zomaar een inhoudsplan, wireframes of ontwerpen ‘overdragen’. We moeten zoveel mogelijk hand in hand werken. Het is gemakkelijk om een resultaat te ‘afmaken’ en door te gaan naar iets anders. Het is veel moeilijker om bij een project te blijven als het moeilijk wordt.
Een watervalbenadering van creatief werk werkt gewoon niet. Agile, samenwerking tussen teamleden zorgt voor betere resultaten.
05. Bepaal van tevoren al uw inhoudsbehoeften
Dit is het probleem: het plannen van responsieve websites duurt langer. We plannen niet meer alleen voor een enkele context. We plannen voor alle contexten die we nu kennen, en sommige die nog niet bestaan.
Maar het kost veel minder tijd om al die complexiteiten van tevoren te plannen dan om terug te gaan en functies en functies aan te passen waar u geen rekening mee had gehouden. Besteed dus de tijd / moeite / budget. Dwing uw klanten en uw team om al hun inhoud te definiëren (en zich eraan te committeren!) Voordat u aan het ontwerpen begint. Gebruik paginatabellen. Gebruik gestructureerde inhoud. Maak uw inhoud nu toekomstbestendig! Of huil later.
Hoe vat ik inhoud van een presentatie samen?
Je hoort dit veel rond de internet-o-bol. Maar wacht, wat? En wacht - waarom?
Omdat presentatie kan (en zal) veranderen. De manier waarop we 15 jaar geleden websites hebben ontworpen, is bijna onherkenbaar van hoe we ze nu presenteren. Maar weet je wat er niet is veranderd? Woorden. We gebruiken ze nog steeds. Het internet bestaat voornamelijk voor (tekstgebaseerde) inhoud. We gebruiken het nog steeds om informatieproblemen op te lossen; om taken te volbrengen. Maar als uw inhoud afhankelijk is van een presentatiemiddel (Flash-intropagina's, iemand?), Is de kans reëel dat deze binnen een paar jaar niet meer bruikbaar is. En dat is klote.
We moeten stoppen met het denken aan inhoud in termen van lay-out
Wij (als branche) hebben onze klanten getraind om inhoudelijk te denken in termen van lay-out. "Zet het in de zijbalk", zeggen we. "Dat hoort in de voettekst te staan." Hou op! Hou op. Hou op. Het gaat niet om locatie. Het gaat om prioriteit. Wat is de belangrijkste inhoud voor uw gebruikers? Want wat denk je: lay-out verandert in verschillende contexten. Er zal (waarschijnlijk) geen zijbalk zijn op uw ontwerp op een klein scherm.
Het gigantische supermenu dat uw klant wil? Ik ga niet vliegen op een iPhone.
Dwing uw klanten om hun inhoud onafhankelijk van het ontwerp te plannen
Oké, je hoeft ze niet te forceren. Moedig ze aan. Moedig sterk aan. Paginatabellen zijn hier geweldig voor. Als je het nog niet hebt gelezen, ga dan onmiddellijk naar Kristina Halvorson en Melissa Rach's inhoudsstrategie voor het web voor meer informatie over hoe je ze kunt maken. Organiseer ze in volgorde van prioriteit. Verwijs niet naar locatie of lay-out. Dit zal uw klanten helpen om op een productievere manier over hun inhoud na te denken, en zal ook het proces voor het maken van inhoud op gang brengen, voordat de wireframes of het ontwerp definitief zijn.
Rond uw inhoud af voordat u deze gaat ontwerpen
Oké, dit is niet altijd mogelijk. Maar hoe meer onzekerheid u kunt wegnemen voordat u begint met ontwerpen, hoe minder u later terug hoeft te gaan om dingen te veranderen.
Gebruik echte inhoud - elke keer weer
Gebruik indien mogelijk edge case-inhoud - laat uw klanten de meest gecompliceerde pagina's, afbeeldingen en menu's zien. Dit voorkomt verrassingen later in het proces, wanneer ze hun meest rommelige inhoud in het eindproduct zien.
Functionele wireframes in de browser maken een wereld van verschil. Laat uw klanten zien hoe hun inhoud beweegt en verandert op verschillende schermformaten. Wijs erop terwijl je je wireframes presenteert (je doet persoonlijke presentaties, toch?) Laat ze zien hoe de prioriteit van hun informatie hetzelfde blijft op verschillende schermformaten, terwijl de lay-out verandert.
Dus hoe werken wireframes voor responsieve ontwerpprojecten?
We zijn er vast van overtuigd dat interactieontwerp voor RWD snel en vaak in de browser moet komen. Het is vrijwel onmogelijk om een statisch document te maken dat alles beschrijft. Natuurlijk zouden we een document kunnen maken dat drie, vier of vijf breekpunten laat zien, maar dat is maar een fractie van het verhaal. Hoe zit het met alle momenten tussen de breekpunten? Dat gebeurt in de browser.
Schetsen
Toch is het goed om snel samen uw ideeën te kunnen schetsen. Dit hoeft in geen enkel medium te gebeuren, maar er is gewoon iets met potlood op papier. Het hele punt hier is om ideeën snel en iteratief naar buiten te brengen. We houden ervan om waar mogelijk te sketchboarden, en daar is zelfs een app voor: UI Sketcher.
In-browser framework
Hier is het echte ticket voor ons. We houden ervan patronen en systemen te hergebruiken bij het demonstreren van RWD in de browser. We zouden natuurlijk elke keer ons eigen systeem kunnen creëren, maar dat helpt ons en onze klanten niet.
We gebruiken ook graag snel reagerende prototyping-frameworks zoals Twitter's Bootstrap of Zurb's Foundation. We neigen persoonlijk naar Foundation omdat het past in onze workflow. Het zou geweldig zijn als een van beide een benadering zou kiezen voor een klein scherm met lage bandbreedte, maar dat is precies hoe we rollen.
Annotaties
Annotaties voor RWD-wireframes zijn essentieel, maar worden vaak over het hoofd gezien. Zeg het hardop: documentatie, documentatie, documentatie! We hebben een paar voorbeelden hiervan van vrienden gezien en denken dat de jury nog steeds op zoek is naar de ‘beste’ manier om correct reagerende wireframes in de browser te annoteren. Zoals hierboven vermeld, gebruiken we regelmatig Foundation by Zurb en gebruiken we graag de Reveal-add-on om onze annotaties weer te geven. Deze annotaties verschijnen alleen voor grotere schermen en kunnen idealiter in- en uitgeschakeld worden.
Gebruik echte inhoud in wireframes
Er is veel discussie geweest over Lorem Ipsum in wireframes en ontwerpmodellen, maar als je geen echte inhoud in je wireframes hebt, doe je het verkeerd. De inhoud informeert de interactiebeslissingen en vertelt je wanneer een ontwerp zal breken. Hoe kan Lorem Ipsum dat doen?
Hoe ontwerp ik eerst voor kleine schermen?
Jarenlang hebben we ontworpen met een specifieke resolutie in gedachten. Het was een standaardinstelling. Of het nu gaat om schetsen in notitieboekjes, wireframing in OmniGraffle, werken in Photoshop of ontwerpen in de browser, we wisten wat onze canvasgrootte zou zijn. Die dagen zijn voorbij. We geloven enorm in ontwerpen voor het kleine scherm en geleidelijk verbeteren. Dus hoe verandert een ontwerper zijn of haar workflow van een vast canvasformaat in een vloeiende?
Abstracte ontwerpen van apparaten in het begin
Tenzij we ontwerpen voor een specifiek apparaat, is het essentieel dat we niet meer aan apparaten denken en gaan nadenken over ervaringen. Alle volgende technieken helpen ontwerpers om hun ervaringen te creëren terwijl ze apparaat-agnostisch kunnen blijven (tot op zekere hoogte).
Gebruik stijltegels
Gebruik stijltegels om richting vast te stellen en snel te herhalen. Style Tiles stellen een ontwerper in staat om de richting van een ontwerpsysteem uit te zetten zonder al te specifiek te worden. Hun maker, Samantha Warren, beschrijft ze als volgt:
“Style Tiles zijn er voor als een moodboard te vaag is en een compilatie te letterlijk. Style Tiles brengen een directe verbinding tot stand met daadwerkelijke interface-elementen zonder de lay-out te definiëren. "
Creëer interfaceharmonie
Stel je een canvas voor met alle visuele en interactieve elementen bij elkaar. Niet om een bepaalde UI-layout te zien, maar om te zien hoe alle elementen samenwerken. Dit is een interface-harmonie-canvas. Een interface-harmonie-canvas stelt een ontwerper in staat om ideeën bij elkaar te houden, maar niet gericht op één schermgrootte. Bovendien is het een geweldige manier om op een efficiënte manier te communiceren en ontworpen elementen te documenteren in plaats van een volledige stijlgids te produceren.
Als u verder wilt lezen, kunt u hier en hier twee uitstekende artikelen vinden over het onderwerp interfaceharmonie.
Bekijk alles in de browser
Alles moet in de browser worden samengebracht. Dit is waar het UI-ontwerp echt tot leven komt. Het is cruciaal om te zien hoe de echte inhoud interageert met de visuele elementen. Er is geen manier om dit correct te doen in een statische omgeving. U moet zien hoe het zal reageren in het oorspronkelijke medium.
Vind een evenwicht met statische programma's
Er is een stroom tussen de browser en statische programma's zoals Photoshop. Er moet een balans zijn waardoor het ontwerpsysteem op een vloeiende en natuurlijke manier kan worden gemaakt. Natuurlijk gebeurt dit in Photoshop, maar een ontwerper die responsief ontwerpt, moet ook leren creatief te denken in de browser.
Conclusie
Nogmaals, met gevoel: begin met het waarom, met goed gestructureerde inhoud en interacties die ertoe doen. Concentreer u eerst op het kleine scherm en de lage bandbreedte en verbeter uw responsieve concepten geleidelijk. Ons medium wordt volwassen. We hebben de kans om dingen goed te doen en de wereld te veranderen, één webproject tegelijk.
Ontdek de 20 beste wireframing-tools voor ontwerpers
Steve Fisher coördineert onderzoek, analyse, ontwerp en strategie bij Yellow Pencil in Canada en spreekt over onderwerpen als RWD, UX en open source. Alaine Mackenzie is contentstrateeg bij Yellow Pencil.
