Vsebina
- Odzivna metodologija
- Kako najprej obdržim vsebino?
- Zakaj?
- 01. Določite svoje poslovne in uporabniške cilje
- 02. Navedite jih ob vsaki priložnosti
- 03. Ne bojte se potiskati nazaj
- 04. Potisnite tudi svojo ekipo
- 05. Vnaprej določite vse svoje vsebinske potrebe
- Kako abstrahiram vsebino iz predstavitve?
- Nehati moramo razmišljati o vsebini v smislu postavitve
- Prisilite svoje stranke, da načrtujejo svojo vsebino neodvisno od zasnove
- Pred oblikovanjem dokončajte svojo vsebino
- Uporabite pravo vsebino - vsakič
- Kako torej žični okvirji delujejo pri odzivnih oblikovalskih projektih?
- Skiciranje
- Okvir v brskalniku
- Pripisi
- V žičnih okvirih uporabite pravo vsebino
- Kako najprej oblikujem male zaslone?
- Abstraktne zasnove naprav na začetku
- Uporabite ploščice Style
- Ustvari harmonijo vmesnika
- Oglejte si vse v brskalniku
- Poiščite ravnovesje s statičnimi programi
- Zaključek
Bodimo jasni: oblikovanje je rešitev le, če se osredotoča na globlje zadeve, zakaj in za vsem. Pri našem delu bi moral vedno voditi trden postopek, vendar moramo sprejeti nekaj bolj prilagodljivega. Naš medij se je končno izkazal za tekočega, ali ne bi tudi naš postopek? Pomislite na zasnovo sistema: videti morate celotno sliko in drobne podrobnosti. Nemogoče? Daleč od tega!
Frank Chimero to lepo opisuje v svoji knjigi Oblika oblikovanja: »Obstaja del, ko se umetnik umakne s stojala, da pridobi nov pogled na delo. Slika je enaka deli od blizu in daleč: kadar je blizu, umetnik trdo dela, da bi naredil pečat; ko je daleč, delo oceni, da bi analiziral njegove lastnosti. Stopi nazaj, da mu delo govori. «
Pustiti moramo svoje delo, medij, da govori z nami. Z naraščanjem odzivnega oblikovanja končno sprejemamo svoj medij, kakršen naj bi bil: fluid. Čudovit čas je, da stopimo nazaj in ocenimo delo, analiziramo in sprejmemo nov način dela, nov postopek. Časi statičnih modelov in spletnih oblikovalcev, ki ne razumejo kode, so minili. Čas je za odziven postopek.
Odzivna metodologija
Na začetku tega članka bomo izdali veliko skrivnost trdnega procesa. Ker smo tako nori. Pripravljeni? Odziven postopek je odgovoren postopek. Nejasno? Mogoče. Neumno? Ne. Tako kot gibanje spletnih standardov pred tem tudi odzivno oblikovanje potisne splet naprej s prihodnost prijaznimi metodami.
Kot vsak postopek oblikovanja bi se moral osredotočiti na "zakaj", ki stoji za vsem tem. Zakaj torej obstajajo spletne strani? Za dostavo vsebine. To bi lahko temeljilo na nalogah, socialno, informacijsko ... ni pomembno. Vse se pripelje do tega: začnite s pomembnimi razlogi, dobro strukturirano vsebino in interakcijami.
Tu so vprašanja, ki jih najpogosteje slišimo o našem odzivnem postopku oblikovanja.
Kako najprej obdržim vsebino?
Vsi smo na začetku projekta tako optimistični. "Najprej vsebina!" rečemo. »Uporabniški cilji! Ne pozabite, kaj je pomembno! " Res je. Kaj pa to pomeni? Kako implementirate postopek, ki temelji na vsebini?
Tudi če veste (ali mislite, da veste), je med potekom projekta enostavno pozabiti. Dolgoročni projekti se običajno vlečejo in nadaljujejo (in naprej ... in naprej ...). Nehamo razmišljati o tem, zakaj, in se začnemo osredotočati na to, kako. Zavajamo se, da mislimo, da lahko naše projekte razdelimo na ločeni fazi „odkrivanja“ in „razvoja“, ki lahko obstajata neodvisno.
Resnica je, da se moramo ves čas spraševati, zakaj. Ne glede na to, koliko mislite, da veste, ne glede na to, koliko načrtovanja ste naredili - vsakič, ko se odločite, vsakič, ko oblikujete gumb ali napišete naslov, morate vprašati ...
Zakaj?
Zakaj to počnem? Za koga je? Kateri poslovni cilj bo moji stranki pomagal doseči? Kaj bo pomagalo mojim uporabnikom? Najprej ne hranite samo vsebine. Najprej obdržite zakaj.
Tako se sliši enostavno. Da pa boste to dobro naredili, boste morali pritiskati. Potisnite svoje stranke in svojo ekipo, da najprej opredelijo, zakaj. Ne Lorem Ipsum, ne 'do tega bomo prišli pozneje'. Naredi svojo domačo nalogo! Vsi vaši koraki se morajo začeti s trdnim razlogom. Pri Rumenem svinčniku je to pomenilo velike spremembe v načinu, kako načrtujemo, ocenjujemo, načrtujemo in načrtujemo projekte. Za trdne raziskave, strategijo in načrtovanje smo si morali prizadevati za proračun in čas. Mogoče tudi ti. Ko pa bodo vaše stranke in vaše ekipe že vnaprej videle izjemne prednosti določanja potreb po vsebini, se ne bodo nikoli več ozirale nazaj.
In naša naloga je, da jih izobražujemo. (Če želite izvedeti več o ravnanju s strankami, preberite izvrstno knjigo Mikea Monteira Design is a Job.) Stranke težko razumejo, kako pomembno je, da vse te raziskave in delo delajo vnaprej. In zakaj bi? Na koncu ne dobijo ničesar 'dokončanega' - prepogosto pa dobijo le račun in velik ol 'Wordov dokument.
To ni njihova krivda - mi smo krivi. Naša odgovornost je, da si bolje pokažemo to vrednost. Na vsakem koraku moramo vse skupaj vrniti k najpomembnejšemu, zakaj.
To je še posebej pomembno za odziven dizajn. Odzivno spletno mesto ne zahteva veliko več napora za razvoj, pomeni pa veliko več načrtovanja. Resnično načrtuje, da bi morali to početi ves čas. Pričajte trenutni projektni cikel prenove vsakih treh let. Ali želite to nadaljevati? Mi zagotovo ne.
Tu so torej trije koraki za ohranjanje vsebine na prvem mestu v procesu projekta.
01. Določite svoje poslovne in uporabniške cilje
Vzpostavite prednostni seznam poslovnih in uporabniških ciljev za svoj projekt. Kaj vaši uporabniki najbolj želijo vedeti ali narediti? Naredite svoje raziskave. Ugotovite informirane sklepe, ne divjih ugibanj. Poskrbite, da se strinjajo vse zainteresirane strani.
02. Navedite jih ob vsaki priložnosti
Vsakič, ko se odločite, vsakič, ko nekdo predlaga novo funkcijo ali element oblikovanja ali stran z vsebino, ga prosite, naj zahtevo preslika na poslovni in uporabniški cilj. Kakšne resnične potrebe bo izpolnila ta funkcija? Kaj je resnični razlog? (Namig: "Ker hočem" ali "Resnično imam rad modro" ali "vsi so na Facebooku", ne štejejo.)
03. Ne bojte se potiskati nazaj
To je lahko težko. Odnosi s strankami so lahko občutljivi in lahko je skušnjava opustiti bitko za zmago v vojni. Ampak ne pozabite, vsi smo v tem skupaj! Ne gre za poslovanje v primerjavi z uporabnikom; nas vs njimi.
Izpolnjevanje potreb uporabnikov je najboljši način za zadovoljevanje poslovnih potreb. Ker brez naših uporabnikov nimamo podjetja! Stranke (dobre stranke) vas ne najemajo, da bi rekli vsem "da". Torej, če vaša stranka prosi za nekaj, kar ne bo ustrezalo njenim ciljem ali potrebam uporabnikov, se je ne bojte izzivati. Ne gre za ego. Gre za ustvarjanje najboljše možne rešitve.
04. Potisnite tudi svojo ekipo
To je lahko izziv tudi pri delu znotraj kreativne ekipe. Ločitev vlog - vizualno oblikovanje, uporabniška izkušnja, informacijska arhitektura, vsebinska strategija, izdelava vsebin - lahko privede do napačne komunikacije. Zaposlimo se, zasujemo z elektronsko pošto. Težko je ostati pri projektu od začetka do konca, še posebej, ko je končano 'vaše' delo.
Odnos vaše ekipe je vsaj tako pomemben kot odnos s stranko. Spomniti se moramo, zakaj, tako kot to počnemo tudi pri svojih strankah. Ključno je sodelovanje. Ne morete preprosto 'oddati' vsebinskega načrta, žičnih okvirjev ali modelov. Kolikor je le mogoče, moramo delati z roko v roki. Enostavno je 'končati' končni rezultat in preiti na nekaj drugega. Veliko težje je ostati pri projektu, ko postane težko.
Slapovski pristop k ustvarjalnemu delu preprosto ne deluje. Agilno in skupno delo članov ekipe omogoča boljše rezultate.
05. Vnaprej določite vse svoje vsebinske potrebe
Gre za naslednje: načrtovanje odzivnih spletnih mest traja dlje. Ne načrtujemo več samo enega konteksta. Načrtujemo vse okoliščine, ki jih poznamo zdaj, in nekatere, ki še ne obstajajo.
Toda za načrtovanje vseh teh zapletenosti potrebujete veliko manj časa kot za vrnitev nazaj in prenovo funkcij in funkcij, ki jih niste upoštevali. Torej porabite čas / trud / proračun. Prisilite svoje stranke in svojo ekipo, da opredelijo (in se zavežejo!) Vso njihovo vsebino, preden se lotite oblikovanja. Uporabite tabele strani. Uporabite strukturirano vsebino. Zaščitite svojo vsebino v prihodnosti! Ali pa jokati kasneje.
Kako abstrahiram vsebino iz predstavitve?
To veliko slišite v internetni sferi. Toda počakaj, kaj? In počakaj - zakaj?
Ker se predstavitev lahko (in bo) spremenila. Način, kako smo oblikovali spletna mesta pred 15 leti, je skoraj neprepoznaven od tega, kako jih zdaj predstavljamo. Ampak veste, kaj se ni spremenilo? Besede. Še vedno jih uporabljamo. Internet obstaja predvsem za (besedilno) vsebino. Še vedno ga uporabljamo za reševanje informacijskih težav; za izpolnjevanje nalog. Če pa je vaša vsebina odvisna od predstavitvenega sredstva (uvodne strani Flash, kdo?), Obstaja velika verjetnost, da čez nekaj let ne bo več uporabna. In to je zanič.
Nehati moramo razmišljati o vsebini v smislu postavitve
Mi (kot panoga) smo svoje stranke naučili, da vsebino razmišljajo v smislu postavitve. "Daj v stransko vrstico," pravimo. "To bi moralo iti v nogo." Nehaj! Prenehaj. Nehaj. Ne gre za lokacijo. Gre za prednost. Katera je najpomembnejša vsebina za vaše uporabnike? Ker uganite kaj: postavitev se spreminja v različnih kontekstih. Na zasnovi vašega majhnega zaslona (verjetno) ne bo stranske vrstice.
Ogromen super-meni, ki ga želi vaša stranka? Ne bom letel na iPhonu.
Prisilite svoje stranke, da načrtujejo svojo vsebino neodvisno od zasnove
V redu, ni vam jih treba siliti. Spodbujajte jih. Močno spodbujajte. Tabele strani so za to odlične. Če je še niste prebrali, takoj pojdite na Strategijo vsebine za splet Kristine Halvorson in Melisse Rach za več informacij o tem, kako jih ustvariti. Organizirajte jih v prednostnem vrstnem redu. Ne omenjajte lokacije ali postavitve. To bo vašim strankam pomagalo, da o svoji vsebini razmišljajo bolj produktivno, prav tako pa se bo postopek ustvarjanja vsebine premaknil pred dokončanimi žičnimi okvirji ali oblikovanjem.
Pred oblikovanjem dokončajte svojo vsebino
V redu, to ni vedno mogoče. Toda več negotovosti lahko odpravite, preden začnete s projektiranjem, manj se boste morali kasneje vrniti in stvari spremeniti.
Uporabite pravo vsebino - vsakič
Če je mogoče, uporabite robno vsebino - strankam pokažite najbolj zapletene strani, slike in menije. Tako se boste izognili presenečenjem kasneje, ko bodo v končnem izdelku videli svojo najbolj nerodno vsebino.
Funkcionalni žični okviri v brskalniku naredijo nekaj novega. Dovolite svojim strankam, da opazujejo, kako se njihova vsebina premika in spreminja na različnih velikostih zaslona. Izpostavite to, ko predstavljate svoje žične okvirje (pripravljate osebne predstavitve, kajne?) Pokažite jim, kako prednost njihovih informacij ostaja enaka na vseh velikostih zaslona, medtem ko se postavitev spreminja.
Kako torej žični okvirji delujejo pri odzivnih oblikovalskih projektih?
Trdno smo prepričani, da mora oblikovanje interakcij za RWD hitro in pogosto priti v brskalnik. Skoraj nemogoče je ustvariti statični dokument, ki bo vse opisal. Seveda bi lahko ustvarili dokument, ki prikazuje tri, štiri ali pet prelomnih točk, vendar je to le delček zgodbe. Kaj pa vsi trenutki med prekinitvami? To se zgodi v brskalniku.
Skiciranje
Kljub temu je dobro, da lahko svoje ideje hitro skicirate v sodelovanju. To se ni treba zgoditi v nobenem določenem mediju, je pa nekaj o svinčniku na papirju. Bistvo je v tem, da ideje hitro in iterativno dobimo. Obožujemo risanje desk, kadar koli je to mogoče, in za to obstaja celo aplikacija: UI Sketcher.
Okvir v brskalniku
Tu je prava vstopnica za nas. Pri demonstraciji RWD v brskalniku radi ponovno uporabimo vzorce in sisteme. Seveda bi lahko vsakič ustvarili svoj sistem iz nič, vendar to ne pomaga nam ali našim strankam.
Radi uporabljamo tudi okvire za hitro odzivanje prototipov, kot sta Twitterjev Bootstrap ali Zurbova fundacija. Osebno se nagibamo k Fundaciji, ker ustreza našemu poteku dela. Odlično bi bilo, če bi se kdo odločil za majhen zaslon, najprej z nizko pasovno širino, toda tako se premikamo.
Pripisi
Pripisi za žične okvirje RWD so bistveni, vendar ugotavljamo, da jih pogosto spregledamo. Povejte na glas: dokumentacija, dokumentacija, dokumentacija! Nekaj primerov tega smo videli od prijateljev in mislimo, da je žirija še vedno na najboljši način, da pravilno označi odzivne žične okvire v brskalniku. Kot smo že omenili, redno uporabljamo Foundation by Zurb in radi uporabljamo dodatek Reveal za prikaz naših pripisov. Ti pripisi so prikazani samo na večjih zaslonih in jih je v idealnem primeru mogoče vklopiti in izklopiti.
V žičnih okvirih uporabite pravo vsebino
O Loremu Ipsumu je bilo veliko razprav o žičnih okvirih in oblikovalskih maketah, če pa v žičnih okvirjih nimate prave vsebine, to delate narobe. Vsebina obvešča o odločitvah o interakciji in vam pove, kdaj se bo zlomil dizajn. Kako lahko Lorem Ipsum to stori?
Kako najprej oblikujem male zaslone?
Leta smo oblikovali z določeno ločljivostjo. To je bila privzeta nastavitev. Ne glede na to, ali skiciramo v zvezke, ustvarjamo žično mrežo v OmniGraffle, delamo v Photoshopu ali oblikujemo v brskalniku, vedeli smo, kakšna bo naša velikost platna. Tisti dnevi so minili. Zelo verjamemo v to, da najprej načrtujemo zaslon za male zaslone in ga postopoma izboljšujemo. Torej, kako oblikovalec spremeni svoj potek dela iz fiksne velikosti platna v tekočino?
Abstraktne zasnove naprav na začetku
Če ne načrtujemo določene naprave, je bistveno, da nehamo razmišljati o napravah in začnemo razmišljati o izkušnjah. Vse naslednje tehnike pomagajo oblikovalcem, da oblikujejo svoje izkušnje, hkrati pa lahko ostanejo agnostični (do določene točke).
Uporabite ploščice Style
Uporabite slog ploščice za določanje smeri in hitro ponovitev. Style Tiles omogoča oblikovalcu, da določi smer oblikovalskega sistema, ne da bi bil preveč natančen. Njihova ustvarjalka Samantha Warren jih opisuje tako:
“Style Tiles je namenjen, kadar je moodboard preveč nejasen in comp preveč dobeseden. Style Tiles vzpostavijo neposredno povezavo z dejanskimi elementi vmesnika, ne da bi definirali postavitev. "
Ustvari harmonijo vmesnika
Predstavljajte si platno z vsemi vizualnimi in interaktivnimi elementi. Ne zato, da bi videli določeno postavitev uporabniškega vmesnika, ampak da bi videli, kako vsi elementi delujejo skupaj. To je platno harmonije vmesnika. Platno harmonije vmesnika omogoča oblikovalcu, da ideje drži skupaj, vendar ne osredotočenih na katero koli velikost zaslona. Poleg tega je to odličen način za učinkovito komunikacijo in dokumentiranje oblikovanih elementov, namesto da bi ustvarili popoln slog vodič.
Če vas zanima nadaljnje branje, lahko tukaj in tukaj najdete dva izvrstna članka na temo harmonije vmesnikov.
Oglejte si vse v brskalniku
Vse je treba združiti v brskalnik. Tu dizajn UI resnično zaživi. Ključnega pomena je videti, kako dejanska vsebina sodeluje z vizualnimi elementi. V statičnem okolju tega ni mogoče pravilno storiti. Videti morate, kako se bo odzval v maternem mediju.
Poiščite ravnovesje s statičnimi programi
Med brskalnikom in statičnimi programi, kot je Photoshop, teče pretok. Moral bi obstajati ravnotežje, ki omogoča oblikovanje sistema na tekoč in naraven način. Seveda se bo to zgodilo v Photoshopu, toda oblikovalec, ki odzivno načrtuje, se mora naučiti kreativno razmišljati tudi v brskalniku.
Zaključek
Še enkrat z občutkom: začnite z razlogom, z dobro strukturirano vsebino in interakcijami, ki so pomembne. Najprej se osredotočite na majhen zaslon in nizko pasovno širino ter postopoma izboljšujte svoje odzivne koncepte. Naš medij je polnoleten. Imamo priložnost, da stvari naredimo pravilno in spremenimo svet, en spletni projekt naenkrat.
Odkrijte najboljših 20 orodij za oblikovanje žic
Steve Fisher koordinira raziskave, analize, oblikovanje in strategijo pri rumenem svinčniku v Kanadi in govori o temah, kot so RWD, UX in odprtokodna koda. Alaine Mackenzie je strateg vsebine pri Yellow Pencil.
