Inhalt
- Eng reaktiouns Methodik
- Wéi behaalen ech fir d'éischt Inhalt?
- Firwat?
- 01. Definéiert Äre Geschäfts- a Benotzerziler
- 02. Referenzéiert se all Chance déi Dir kritt
- 03. Fäert net ze drécken zréck
- 04. Dréckt och Äert eegent Team
- 05. Definéiert all Ären Inhalt brauch vir
- Wéi abstrakt ech Inhalt vu Presentatioun?
- Mir mussen ophalen un den Inhalt am Sënn vum Layout ze denken
- Kraaft Är Clienten hiren Inhalt onofhängeg vum Design ze plangen
- Finaliséiert Ären Inhalt virum Design
- Benotzt echt Inhalter - all Kéier
- Also wéi funktionnéieren Drotframes fir reagéiert Designprojeten?
- Skizzéieren
- Am Browser Kader
- Annotatiounen
- Benotzt echt Inhalter a Wireframes
- Wéi designen ech als éischt fir kleng Bildschiermer?
- Abstrakt Designs vun Apparater um Start
- Benotzt Style Fliesen
- Erstellt Interface Harmonie
- Kuckt alles am Browser
- Gitt e Balance mat statesche Programmer
- Fazit
Loosst eis kloer sinn: Design ass d'Léisung nëmmen wann et sech op déi méi déif Themen konzentréiert, firwat firwat alles. En zolitte Prozess soll ëmmer eis Aarbecht leeden, awer mir mussen eppes méi flexibel ëmfaassen. Eist Medium huet sech endlech als flësseg bewisen, sollt eise Prozess net? Denkt un de System Design: Dir musst dat ganzt Bild an déi kleng Detailer gesinn. Onméiglech? Wäit ewech dovun!
De Frank Chimero seet et schéin a sengem Buch The Shape of Design: "Et gëtt en Deel wou de Kënschtler vun der Staffel zréckgeet fir eng nei Perspektiv op d'Aarbecht ze kréien. Molen ass gläichwäerteg Deeler no a wäit: wann no, de Kënschtler schafft schwéier fir säi Stempel ze maachen; wa wäit, hie bewäert d'Aarbecht fir seng Qualitéiten ze analyséieren. Hie geet zréck fir d'Aarbecht mat sech ze schwätzen. "
Mir mussen eis Aarbecht, eise Medium, mat eis schwätze loossen. Mat dem Opstig vu reaktiounsfäeger Design ëmfaasse mir endlech eise Medium wéi et gemengt war: flësseg. Et ass eng brillant Zäit fir zréckzekommen an d'Aarbecht ze beurteilen, ze analyséieren an eng nei Manéier ze maachen fir Saachen ze maachen, en neie Prozess. Gone sinn d'Deeg vu statesche Mock-ups a Webdesigner déi de Code net verstinn. Et ass Zäit fir e reaktiounsfäege Prozess.
Eng reaktiouns Methodik
Mir ginn de grousse Geheimnis fir e zolitte Prozess direkt am Ufank vun dësem Artikel. Well mir sinn esou verréckt. Prett? E reaktiounsfäege Prozess ass e verantwortungsvolle Prozess. Vague? Vläicht. Domm? Nee wéi d'Webstandardsbeweegung virdru, reaktiounsfäeger Design dréit de Web no vir mat zukünftegfrëndleche Methoden.
Wéi all Designprozess, sollt et sech op de 'firwat' hannert alles konzentréieren. Also firwat existéiere Websäiten? Inhalt ze liwweren. Dat kéint Aufgabebaséiert sinn, sozial, informativ ... et ass egal. Et kënnt alles drop: Fänkt mat firwat, gutt strukturéiertem Inhalt an Interaktiounen déi wichteg sinn.
Hei sinn d'Froen déi mir meeschtens iwwer eise reaktiounsfäegen Designprozess héieren.
Wéi behaalen ech fir d'éischt Inhalt?
Mir sinn all sou optimistesch um Ufank vun engem Projet. "Éischten Inhalt!" mir soen. “Benotzerziler! Denkt drun wat wichteg ass! " Et ass wouer. Awer wat heescht et? Wéi implementéiert Dir en Inhalt-éischte Prozess?
Och wann Dir wësst (oder mengt Dir wësst et), ass et einfach ze vergiessen wéi e Projet virugeet. Laangfristeg Projeten hunn d'Tendenz sech weider ze zéien (an op ... an op ...). Mir stoppen iwwer ze denken firwat a fänken op de wéi ze fokusséieren. Mir verarschen eis selwer ze denken datt eis Projeten a getrennte "Entdeckung" an "Entwécklung" Phasen opgedeelt kënne ginn déi onofhängeg existéiere kënnen.
D'Wourecht ass, mir musse weider froen firwat, déi ganzen Zäit. Egal wéi vill Dir mengt Dir wësst, egal wéi vill Planung Dir gemaach hutt - all Kéier wann Dir eng Entscheedung hëlt, all Kéier wann Dir e Knäppchen designt oder eng Iwwerschrëft schreift, musst Dir froen ...
Firwat?
Firwat maachen ech dat? Wien ass et fir? Wat fir e Geschäftsziel hëlleft et mengem Client z'erreechen? Wéi e Besoin hëlleft et meng Benotzer unzegoen? Halt net nëmmen éischt Inhalt. Halen d'firwat éischt.
Dëst mécht et einfach kléngt. Awer fir et gutt ze maachen, musst Dir drécken. Dréckt Är Clienten an Äert Team fir hir Firwat als éischt ze definéieren. Keen Lorem Ipsum, nee ‘mir kommen herno dozou’. Maach deng Hausaufgaben! All Är Wuere musse mat engem zolitte Firwat ufänken. Beim Yellow Pencil huet dëst grouss Ännerunge bedeit fir de Wee wéi mir Pitch, Devis, Budget a Projeten plangen. Mir hu musse fir Budget an Zäit drängen fir zolidd Fuerschung, Strategie a Planung ze maachen. Dir kéint och. Awer wann Är Clienten an Är Teams déi enorm Virdeeler gesinn, fir Inhaltsbedürfnisser viraus ze definéieren, kucken se ni zréck.
An et ass eis Aufgab fir se ze educéieren. (Liest dem Mike Monteiro säin exzellent Buch Design is a Job wann Dir méi wëllt léieren iwwer Clienten ëmzegoen.) Clienten kënnen et schwéier hunn de Wäert ze verstoen all déi Fuerschung ze maachen a virun ze schaffen. A firwat solle se? Si kréien um Enn näischt 'fäerdeg' - an all ze dacks kréie se just eng Rechnung an e grousst ol 'Word Dokument.
Dat ass net hir Schold - et ass eis Schold. Et ass eis Verantwortung eng besser Aarbecht ze maachen fir dëse Wäert ze demonstréieren. All Schrëtt vum Wee musse mir alles zréckbréngen op dat ganz wichtegt firwat.
Dëst ass besonnesch wichteg fir reagéiert Design. Eng reaktiouns Websäit brauch net vill méi Entwécklungseffort, awer et bedeit vill méi Pläng. Wierklech awer, et plangt datt mir déi ganzen Zäit misste maachen. Zeien den aktuellen Ëmgestaltung-all-dräi-ish-Joer Projet Zyklus. Wëllt Dir dat weider maachen? Mir maachen et sécher net.
Also hei sinn dräi Schrëtt fir den Inhalt zuerst an Ärem Projetprozess ze halen.
01. Definéiert Äre Geschäfts- a Benotzerziler
Erstellt eng prioritär Lëscht vu Geschäfts- a Benotzerziler fir Äre Projet. Wat wëllen Är Benotzer am meeschten wëssen oder maachen? Maacht Är Fuerschung. Maacht informéiert Schlussfolgerungen, net wëll Gissungen. Kritt all Är Stakeholderen averstanen.
02. Referenzéiert se all Chance déi Dir kritt
All Kéier wann Dir eng Entscheedung treffen, all Kéier wann een eng nei Feature oder Designelement, oder Säit vum Inhalt proposéiert, kritt se d'Ufro un e Geschäfts- a Benotzerziel ze mapen. Wat fir e reelle Besoin wäert dës Feature erfëllen? Wat ass de richtege Grond? (Hiweis: 'Well ech wëll' oder 'Ech hu wierklech gär Blo' oder 'Jiddereen op Facebook' zielen net.)
03. Fäert net ze drécken zréck
Dëst ka schwéier sinn. Client Bezéiunge kënne delikat sinn, an et ka verlockend sinn de Kampf opzeginn fir de Krich ze gewannen. Awer denkt drun, mir sinn all an dësem zesummen! Et ass net Geschäft vs Benotzer; eis vs hinnen.
Benotzer Bedierfnesser erfëllen ass dee beschte Wee fir Geschäftsbedürfnisser z'erreechen. Well ouni eis Benotzer hu mir kee Geschäft! Clienten (gutt Clienten) engagéieren Iech net fir 'Jo' op alles ze soen. Also wann Äre Client fir eppes freet wat net hir Ziler oder d'Benotzer vun hire Benotzer entsprécht, fäert net se erauszefuerderen. Et geet net ëm Ego. Et geet drëm déi bescht méiglech Léisung ze schafen.
04. Dréckt och Äert eegent Team
Dëst kann och eng Erausfuerderung sinn wann Dir an engem kreativen Team schafft. Trennung vu Rollen - visuellt Design, Benotzererfarung, Informatiounsarchitektur, Inhaltsstrategie, Inhaltproduktioun - kann zu Miscommunikatioun féieren. Mir kréien beschäftegt, mir ginn iwwerwältegt mat E-Mailen. Et ass schwéier mat engem Projet vun Ufank bis zum Schluss ze bleiwen, besonnesch wann 'Är' Aarbecht gemaach ass.
D'Relatioun vun Ärem Team ass op d'mannst sou wichteg wéi Är Client Bezéiung. Mir mussen eis drun erënneren, sou wéi mir eis Clienten och maachen. Zesummenaarbecht ass de Schlëssel. Dir kënnt net einfach en Inhaltsplang, oder Drotframes, oder Design 'ofginn'. Sou vill wéi méiglech musse mir Hand an Hand schaffen. Et ass einfach eng Liwwerung 'fäerdeg ze maachen an op eppes anescht ze goen. Et ass vill méi schwéier mat engem Projet ze bleiwen wann et schwéier geet.
Eng Waasserfall Approche fir kreativ Aarbecht funktionnéiert einfach net. Agile, kollaborativ Aarbecht tëscht Teammembere mécht fir besser Resultater.
05. Definéiert all Ären Inhalt brauch vir
Hei d'Saach: reaktiouns Websäiten dauere méi laang ze plangen. Mir plangen net nëmme fir een eenzege Kontext méi. Mir plangen fir all Kontexter déi mir elo wëssen, an e puer déi et nach net gëtt.
Awer et brauch vill manner Zäit fir all dës Komplexitéit vir ze plangen wéi et geet zréck a Funktiounen a Funktiounen ze retrofitéieren déi Dir net uginn hutt. Also verbréngt d'Zäit / Effort / Budget. Kraaft Är Clienten an Äert Team fir all hiren Inhalt ze definéieren (an ze engagéieren!) Ier Dir an den Design kommt. Benotzt Säit Dëscher. Benotzt strukturéiert Inhalt. Zukunftssécher Ären Inhalt elo! Oder méi spéit kräischen.
Wéi abstrakt ech Inhalt vu Presentatioun?
Dir héiert dëst vill ronderëm d'Internet-o-Sphär. Awer waart, wat? A waart - firwat?
Well Presentatioun kann (a wäert) änneren. De Wee wéi mir Websäite viru 15 Joer entwéckelt hunn ass bal net ze erkennen wéi mir se elo presentéieren. Awer Dir wësst wat net geännert huet? Wierder. Mir benotzen se ëmmer nach. Den Internet existéiert haaptsächlech fir (textbaséiert) Inhalt. Mir benotzen et ëmmer nach fir Informatiounsprobleemer ze léisen; Aufgaben ze maachen. Awer wann Ären Inhalt ofhängeg vun engem Presentatiounsmëttel (Flash Intro Säiten, iergendeen?) Et ass eng richteg Wahrscheinlechkeet datt et net an e puer Joer benotzbar ass. An dat saugt.
Mir mussen ophalen un den Inhalt am Sënn vum Layout ze denken
Mir (als Industrie) hunn eis Clienten trainéiert fir un Inhalt ze denken a Saache Layout. "Setzt et an der Sidebar", soe mir. "Dat soll an de Fousszeilen goen." Stop! Stop et. Stop. Et geet net ëm Standuert. Et geet ëm Prioritéit. Wat ass dee wichtegsten Inhalt fir Är Benotzer? Well denken wat: Layout ännert sech duerch Kontexter. Et gëtt (wahrscheinlech) net eng Sidebar op Ärem klengen Ecran Design.
De risege Supermenu deen Äre Client wëll? Net op engem iPhone fléien.
Kraaft Är Clienten hiren Inhalt onofhängeg vum Design ze plangen
Okay, Dir musst se net forcéieren. Encouragéiert se. Staark encouragéieren. Säit Dëscher si super fir dës. Wann Dir et net scho gelies hutt, gitt direkt un d'Kristina Halvorson an d'Melissa Rach Inhaltsstrategie fir de Web fir méi Informatiounen iwwer wéi Dir se erstellt. Organiséiert se a prioritärer Uerdnung. Referenzéiert net op Plaz oder Layout. Dëst hëlleft Är Clienten iwwer hiren Inhalt op eng méi produktiv Manéier nozedenken, a kritt och den Inhalt Kreatiounsprozess bewegt, ier finaliséiert Wireframes oder Design.
Finaliséiert Ären Inhalt virum Design
Okay, dëst ass net ëmmer méiglech. Awer wat Dir méi Ongewëssheet kënnt eliminéieren ier Dir ufänkt ze designen, wat Dir manner musst zréckgoen an d'Saache méi spéit änneren.
Benotzt echt Inhalter - all Kéier
Wa méiglech, benotzt Randfall Inhalt - weist Äre Clienten déi komplizéiertste Säiten, Biller a Menüen. Dëst vermeit Iwwerraschungen méi spéit am Prozess, wa se hiren messiest Inhalt am fäerdege Produkt gesinn.
Funktionell, In-Browser Wireframes maachen eng Welt vun Ënnerscheed. Erlaabt Är Clienten hir Inhalter z'observéieren déi sech bewegen a veränneren an enger Rei vu Bildschirmgréissten. Beweist et wéi Dir Är Wireframes präsentéiert (Dir maacht perséinlech Präsentatiounen, richteg?) Beweist hinnen wéi d'Prioritéit vun hirer Informatioun déi selwecht bleift iwwer Bildschirmgréissten, wärend de Layout ännert.
Also wéi funktionnéieren Drotframes fir reagéiert Designprojeten?
Mir si fest gleeweg datt d'Interaktiounsdesign fir RWD séier an dacks an de Browser muss kommen. Et ass zimlech onméiglech e statescht Dokument ze kreéieren dat alles beschreift. Sécher, mir kéinten en Dokument erstellen, dat dräi, véier oder fënnef Pauspunkte weist, awer dat ass nëmmen e Brochdeel vun der Geschicht. Wat iwwer all d'Momenter tëscht de Breakpoints? Dat geschitt am Browser.
Skizzéieren
Et ass ëmmer nach gutt fir séier Är Iddien zesummen ze skizzéieren. Dëst brauch net an engem bestëmmte Medium ze geschéien, awer et ass just eppes iwwer Bleistift op Pabeier. De ganze Punkt hei ass Iddien séier an iterativ erauszekréien. Mir gär Sketchboard wann et méiglech ass, an et gëtt souguer eng App dofir: UI Sketcher.
Am Browser Kader
Hei de richtegen Ticket fir eis. Mir hu gär Muster a Systeme weiderbenotzen wann Dir RWD am Browser demonstréiert. Natierlech kéinte mir all Kéier en eegene System erstallt hunn, awer dat hëlleft eis oder eise Clienten net.
Mir benotzen och gär séier reagéiert Prototyp Frameworks wéi Twitter's Bootstrap oder Zurb's Foundation. Mir leien eis perséinlech op d'Fondatioun well et eise Workflow passt. Et wier super wann entweder een e klengen Écran, niddereg-Bandbreed-éischt Approche géif huelen, awer dat ass just wéi mir rullen.
Annotatiounen
Annotatioune fir RWD Drotframe si wesentlech awer, mir fannen, ginn dacks iwwersinn. Sot et haart: Dokumentatioun, Dokumentatioun, Dokumentatioun! Mir hunn e puer Beispiller dovu vu Frënn gesinn an denken datt d'Jury nach ëmmer um "beschte" Wee ass fir an de Browser reaktiounsfäege Wireframes richteg ze annotéieren. Wéi uewen erwähnt, benotze mir regelméisseg Foundation by Zurb a benotze gär hir Reveal-Add-on fir eis Annotatiounen ze weisen. Dës Annotatiounen erscheinen nëmme fir méi grouss Bildschirmer an am Idealfall kënnen se un- an ausgeschalt ginn.
Benotzt echt Inhalter a Wireframes
Et gouf vill Debatte ronderëm de Lorem Ipsum a Wireframes an Design Mock-ups, awer wann Dir kee richtegen Inhalt an Äre Wireframes hutt, maacht Dir et falsch. Den Inhalt informéiert d'Interaktiounsentscheedungen a seet Iech wéini en Design brécht. Wéi kann de Lorem Ipsum dat maachen?
Wéi designen ech als éischt fir kleng Bildschiermer?
Fir Joeren hu mir mat enger spezifescher Resolutioun am Kapp entwéckelt. Et war eng Standardastellung. Egal ob Skizzen a Notizbicher, Wireframing an OmniGraffle, am Photoshop schaffen oder am Browser designen, mir woussten wat eis Leinwandgréisst géif ginn. Déi Deeg si fort. Mir sinn enorm Gleeweg fir ze designen fir de klengen Ecran als éischt a progressiv ze verbesseren. Also wéi ännert en Designer säi Workflow vun enger fester Canvasgréisst op eng flësseg?
Abstrakt Designs vun Apparater um Start
Ausser mir designen e spezifescht Gerät, ass et essentiell datt mir ophalen iwwer Apparater ze denken an un Erfahrungen ze denken. All déi folgend Techniken hëllefen Designer fir hir Experienzen ze bastelen, wärend se fäeg sinn Apparat agnostiker ze bleiwen (bis zu engem Punkt).
Benotzt Style Fliesen
Benotzt Style Tiles fir Richtung ze etabléieren a séier iteréieren. Style Tiles erméiglechen engem Designer d'Richtung vun engem Designsystem auszestellen ouni ze spezifesch ze ginn. Hirem Schëpfer, Samantha Warren, beschreift se sou:
“Style Tiles si fir wann e Moodboard ze vague ass an e Komp ze wuertwiertlech ass. Style Tiles etabléieren eng direkt Verbindung mat aktuellen Interface Elementer ouni Layout ze definéieren. "
Erstellt Interface Harmonie
Stellt Iech eng Leinwand vir mat all visuellen an interaktiven Elementer déi zesumme bruecht ginn. Net fir e bestëmmten UI Layout ze gesinn, awer fir ze kucken wéi all d'Elementer zesumme schaffen. Dëst ass en Interface Harmonie Leinwand. Eng Interface Harmonie Canvas erlaabt engem Designer Iddien zesummen ze halen, awer net op eng Écrangréisst fokusséiert. Plus, et ass e super Wee effizient ze kommunizéieren an designt Elementer ze dokumentéieren anstatt e komplette Stil Guide ze produzéieren.
Wann Dir interesséiert sidd weider ze liesen, kënnen zwee exzellent Artikelen zum Thema Interface Harmonie hei an hei fonnt ginn.
Kuckt alles am Browser
Alles muss am Browser zesumme bruecht ginn. Dëst ass wou den UI Design wierklech lieweg gëtt. Gesinn, wéi de reellen Inhalt mat de visuellen Elementer interagéiert ass entscheedend. Et gëtt kee Wee fir dëst an engem stateschen Ëmfeld richteg ze maachen. Dir musst kucken wéi et am natierlechen Medium reagéiert.
Gitt e Balance mat statesche Programmer
Et ass e Floss tëscht dem Browser an statesche Programmer wéi Photoshop. Et sollt e Gläichgewiicht sinn, deen dem Designsystem erméiglecht op eng flësseg an natierlech Manéier ze kreéieren. Sécher, dëst wäert am Photoshop geschéien, awer en Designer dee reaktiounsfäeg designt muss léieren, wéi och kreativ am Browser ze denken.
Fazit
Nach eng Kéier, mam Gefill: fänks mam firwat un, mat gutt strukturéiertem Inhalt an Interaktiounen déi wichteg sinn. Fokusséiert op de klengen Ecran an déi niddreg Bandbreet als éischt, a verbessert progressiv Är reaktiouns Konzepter. Eist Medium kënnt am Alter. Mir hunn d'Chance d'Saache richteg ze maachen an d'Welt z'änneren, ee Webprojet gläichzäiteg.
Entdeckt déi bescht 20 Wireframing Tools fir Designer
De Steve Fisher koordinéiert Fuerschung, Analyse, Design a Strategie um Yellow Pencil a Kanada, a schwätzt iwwer Themen wéi RWD, UX an Open Source. D'Alaine Mackenzie ass eng Inhaltsstrategie beim Yellow Pencil.
