Sadržaj
- Reagirajuća metodologija
- Kako prvo zadržati sadržaj?
- Zašto?
- 01. Definirajte svoje poslovne i korisničke ciljeve
- 02. Uputi ih na svaku priliku
- 03. Ne bojte se odgurnuti
- 04. Pogurajte i svoj tim
- 05. Unaprijed definirajte sve svoje potrebe za sadržajem
- Kako apstrahirati sadržaj iz prezentacije?
- Moramo prestati razmišljati o sadržaju u smislu izgleda
- Prisilite svoje klijente da planiraju svoj sadržaj neovisno o dizajnu
- Dovršite svoj sadržaj prije dizajna
- Koristite pravi sadržaj - svaki put
- Pa kako žičani okviri rade za responzivne dizajnerske projekte?
- Skiciranje
- Okvir unutar preglednika
- Bilješke
- Koristite stvarni sadržaj u žičanim okvirima
- Kako prvo dizajnirati za male zaslone?
- Sažetak dizajna s uređaja na početku
- Koristite pločice stila
- Stvorite sklad sučelja
- Pogledajte sve u pregledniku
- Nađite ravnotežu sa statičkim programima
- Zaključak
Budimo jasni: dizajn je rješenje samo ako se usredotoči na dublja pitanja koja su u pitanju i zašto sve stoji iza svega. Čvrst proces uvijek bi trebao voditi naš posao, ali moramo prihvatiti nešto fleksibilnije. Naš se medij napokon pokazao fluidnim, pa ne bi li i naš proces trebao? Razmislite o dizajnu sustava: morate vidjeti i cijelu sliku i sitne detalje. Nemoguće? Daleko od toga!
Frank Chimero to lijepo opisuje u svojoj knjizi Oblik dizajna: „Postoji dio u kojem se umjetnik odmakne od štafelaja kako bi stekao novu perspektivu djela. Slikanje je jednak dio izbliza i iz daleka: kad je u blizini, umjetnik naporno radi kako bi ostavio trag; kada je daleko, on procjenjuje djelo kako bi analizirao njegove kvalitete. Odmakne se da pusti da mu posao govori. "
Moramo pustiti da naš rad, naš medij, razgovaraju s nama. Porastom responzivnog dizajna napokon prihvaćamo svoj medij kakav je trebao biti: fluid. Sjajno je vrijeme za korak unatrag i procjenu rada, analizu i prihvaćanje novog načina rada, novog procesa. Prošla su vremena statičnih maketa i web dizajnera koji ne razumiju kôd. Vrijeme je za odgovarajući proces.
Reagirajuća metodologija
Otkrit ćemo veliku tajnu čvrstog postupka odmah na početku ovog članka. Jer smo takvi ludi. Spreman? Reagirajući proces je odgovoran proces. Nejasno? Može biti. Budalica? Ne. Poput pokreta web-standarda prije njega, i responzivni dizajn tjera web naprijed metodama prilagođenim budućnosti.
Kao i svaki postupak dizajniranja, i on bi se trebao usredotočiti na 'zašto' iza svega. Pa zašto web stranice postoje? Za isporuku sadržaja. To bi moglo biti zasnovano na zadacima, socijalno, informativno ... nema veze. Sve se svodi na ovo: započnite s razlozima zašto, dobro strukturiranim sadržajem i interakcijama.
Evo pitanja koja najčešće čujemo o našem responzivnom procesu dizajna.
Kako prvo zadržati sadržaj?
Svi smo tako optimistični na početku projekta. "Sadržaj prvi!" kažemo. “Korisnički ciljevi! Sjetite se što je važno! " To je istina. Ali što to znači? Kako implementirate postupak koji je bitan za sadržaj?
Čak i ako znate (ili mislite da znate), lako je zaboraviti kako projekt napreduje. Dugoročni projekti imaju tendenciju odugovlačenja (i dalje ... i dalje ...). Prestajemo razmišljati o tome zašto i počinjemo se fokusirati na to kako. Zavaravamo se misleći da se naši projekti mogu podijeliti u zasebne faze „otkrića“ i „razvoja“ koje mogu samostalno postojati.
Istina je, moramo se stalno pitati zašto, cijelo vrijeme. Bez obzira koliko mislite da znate, bez obzira koliko planirali - svaki put kada donosite odluku, svaki put kad dizajnirate gumb ili napišete naslov, morate pitati ...
Zašto?
Zašto to radim? Za koga je to? Koji će poslovni cilj pomoći mom klijentu da postigne? Koja će pomoć pomoći mojim korisnicima? Nemojte samo prvo zadržati sadržaj. Prvo zadržite zašto.
Zbog toga zvuči lako. Ali da biste to dobro izveli, morat ćete gurnuti. Gurajte svoje klijente i svoj tim da prvo definiraju zašto. Nema Lorem Ipsum, nema ‘doći ćemo do toga kasnije’. Napiši domaću zadaću! Sve vaše potrebe moraju započeti s čvrstim razlogom. To je kod Žute olovke značilo velike promjene u načinu na koji planiramo, procjenjujemo, planiramo i planiramo projekte. Morali smo zalagati za proračun i vrijeme za solidno istraživanje, strategiju i planiranje. Mogli biste i vi. Ali kad vaši klijenti i timovi unaprijed vide ogromne prednosti definiranja potreba za sadržajem, više se neće osvrtati.
A naš je posao educirati ih. (Pročitajte izvrsnu knjigu Mikea Monteira Dizajn je posao ako želite naučiti više o ophođenju s klijentima.) Klijenti teško mogu razumjeti vrijednost provođenja svih tih istraživanja i unaprijed pripremljenih radova. A zašto bi? Na kraju ne dobivaju ništa 'završeno' - a prečesto dobivaju samo račun i veliki stari Wordov dokument.
To nije njihova krivnja - mi smo krivi. Naša je odgovornost učiniti bolji posao demonstriranjem te vrijednosti. Na svakom koraku sve to moramo vratiti na najvažnije zašto.
To je posebno važno za responzivan dizajn. Odzivna web stranica ne zahtijeva puno više napora u razvoju, ali znači puno više planiranja. Zapravo, planiramo da smo to trebali raditi cijelo vrijeme. Svjedočite trenutnom redizajniranju projektnog ciklusa svake tri godine. Želite li to i dalje raditi? Sigurno ne.
Evo tri koraka kako zadržati sadržaj na prvom mjestu u procesu projekta.
01. Definirajte svoje poslovne i korisničke ciljeve
Uspostavite prioritetni popis poslovnih i korisničkih ciljeva za svoj projekt. Što vaši korisnici najviše žele znati ili učiniti? Istražite. Napravite informirane zaključke, a ne nagađanja. Neka se sve vaše dionice slože.
02. Uputi ih na svaku priliku
Svaki put kad donesete odluku, svaki put kad netko predloži novu značajku ili element dizajna ili stranicu sadržaja, natjerajte ih da mapiraju zahtjev u poslovni i korisnički cilj. Koju će stvarnu potrebu ispuniti ova značajka? Koji je pravi razlog? (Savjet: ‘Jer to želim’ ili ‘Jako volim plavo’ ili ‘svi su na Facebooku’ ne računaju se.)
03. Ne bojte se odgurnuti
Ovo može biti teško. Odnosi s klijentima mogu biti osjetljivi i može biti primamljivo odustati od bitke za pobjedu u ratu. Ali upamtite, svi smo u ovome zajedno! Nije posao u odnosu na korisnika; nas vs njih.
Udovoljavanje potrebama korisnika najbolji je način za zadovoljavanje poslovnih potreba. Jer bez naših korisnika nemamo posao! Klijenti (dobri klijenti) vas ne angažiraju da biste svemu rekli 'da'. Dakle, ako vaš klijent zatraži nešto što neće ispuniti njegove ciljeve ili potrebe njihovih korisnika, ne bojte se izazvati ga. Nije stvar u egu. Riječ je o stvaranju najboljeg mogućeg rješenja.
04. Pogurajte i svoj tim
To također može biti izazov kada radite u kreativnom timu. Razdvajanje uloga - vizualni dizajn, korisničko iskustvo, arhitektura informacija, strategija sadržaja, proizvodnja sadržaja - može dovesti do pogrešne komunikacije. Zaposlimo se, zatrpaju nas mailovima. Teško je ostati s projektom od početka do kraja, pogotovo kad završite 'svoj' posao.
Odnos vašeg tima je najmanje jednako važan kao i vaš odnos s klijentom. Moramo se podsjetiti zašto, baš kao što to činimo i svojim klijentima. Suradnja je ključna. Ne možete jednostavno ‘predati’ plan sadržaja, žičane okvire ili dizajne. Što je više moguće, moramo raditi ruku pod ruku. Lako je ‘završiti’ isporuku i prijeći na nešto drugo. Mnogo je teže ostati s projektom kad odlazak postane težak.
Vodopadni pristup kreativnom radu jednostavno ne ide. Agilni, suradnički rad članova tima daje bolje rezultate.
05. Unaprijed definirajte sve svoje potrebe za sadržajem
Evo u čemu je stvar: prilagodljivim web lokacijama treba više vremena za planiranje. Više ne planiramo samo jedan kontekst. Planiramo sve kontekste za koje sada znamo i neke koji još ne postoje.
No potrebno je mnogo manje vremena za planiranje svih tih složenosti unaprijed nego za povratak i naknadnu ugradnju značajki i funkcija koje niste uzeli u obzir. Stoga potrošite vrijeme / trud / budžet. Prisilite svoje klijente i vaš tim da definiraju (i obvežu se!) Sav njihov sadržaj prije nego što se upustite u dizajn. Koristite tablice stranica. Koristite strukturirani sadržaj. Zaštitite svoj sadržaj odmah! Ili plači kasnije.
Kako apstrahirati sadržaj iz prezentacije?
To puno čujete oko internetske o-sfere. Ali čekaj, što? I čekajte - zašto?
Jer prezentacija se može (i hoće) promijeniti. Način na koji smo dizajnirali web stranice prije 15 godina gotovo je neprepoznatljiv od načina na koji ih sada predstavljamo. Ali znate što se nije promijenilo? Riječi. Još uvijek ih koristimo. Internet postoji prvenstveno za sadržaj (temeljen na tekstu). I dalje ga koristimo za rješavanje informacijskih problema; za izvršavanje zadataka. Ali ako vaš sadržaj ovisi o načinu prezentacije (uvodne stranice s Flashom, bilo tko?), Postoji velika vjerojatnost da neće biti upotrebljiv za nekoliko godina. I to je sranje.
Moramo prestati razmišljati o sadržaju u smislu izgleda
Mi (kao industrija) smo obučili naše klijente da razmišljaju o sadržaju u smislu izgleda. "Stavite to u bočnu traku", kažemo. "To bi trebalo ići u podnožje." Stop! Prestani. Stop. Nije stvar u lokaciji. Radi se o prioritetu. Koji je najvažniji sadržaj za vaše korisnike? Jer pogodite što: izgled se mijenja u različitim kontekstima. Na vašem dizajnu malog zaslona (vjerojatno) neće biti bočne trake.
Divovski super-jelovnik koji želi vaš klijent? Neću letjeti na iPhoneu.
Prisilite svoje klijente da planiraju svoj sadržaj neovisno o dizajnu
Dobro, ne morate ih prisiljavati. Ohrabrite ih. Snažno ohrabriti. Tablice stranica su izvrsne za ovo. Ako ga već niste pročitali, odmah prijeđite na strategiju sadržaja za Kristinu Halvorson i Melissu Rach za više informacija o tome kako ih stvoriti. Organizirajte ih prema prioritetu. Ne referencirajte mjesto ili izgled. To će pomoći vašim klijentima da razmisle o svom sadržaju na produktivniji način, a također će pokrenuti postupak stvaranja sadržaja, prije finaliziranih žičanih okvira ili dizajna.
Dovršite svoj sadržaj prije dizajna
Dobro, to nije uvijek moguće. No, što više nesigurnosti možete ukloniti prije nego što započnete s dizajniranjem, manje ćete se morati vratiti i stvari kasnije promijeniti.
Koristite pravi sadržaj - svaki put
Ako je moguće, koristite rubni sadržaj - pokažite svojim klijentima najsloženije stranice, slike i izbornike. To će izbjeći iznenađenja kasnije u procesu, kada u gotovom proizvodu vide svoj najnevažniji sadržaj.
Funkcionalni žičani okviri unutar preglednika čine razliku u svijetu. Dopustite svojim klijentima da promatraju njihov sadržaj koji se kreće i mijenja na različitim veličinama zaslona. Istaknite to dok predstavljate svoje žičane okvire (radite osobne prezentacije, zar ne?) Pokažite im kako prioritet njihovih podataka ostaje isti na svim veličinama zaslona, dok se izgled mijenja.
Pa kako žičani okviri rade za responzivne dizajnerske projekte?
Čvrsto smo uvjereni da dizajn interakcija za RWD mora brzo i često ući u preglednik. Prilično je nemoguće stvoriti statički dokument koji će sve opisati. Svakako, mogli bismo stvoriti dokument koji pokazuje tri, četiri ili pet prijelomnih točaka, ali to je samo djelić priče. Što je sa svim trenucima između točaka prekida? To se događa u pregledniku.
Skiciranje
Ipak, dobro je imati mogućnost zajedničkog brzog skiciranja svojih ideja. To se ne treba dogoditi u bilo kojem određenom mediju, ali postoji samo nešto o olovci na papiru. Cijela je stvar ovdje u tome da se ideje izvuku brzo i iterativno. Volimo skicirati kad god je to moguće, a za to postoji čak i aplikacija: UI Sketcher.
Okvir unutar preglednika
Evo prave karte za nas. Volimo ponovno koristiti uzorke i sustave kada demonstriramo RWD u pregledniku. Naravno, svaki bismo put mogli stvoriti vlastiti sustav, ali to ne pomaže ni nama ni našim klijentima.
Također volimo koristiti okvire za brzo reagiranje prototipova kao što su Twitter's Bootstrap ili Zurb's Foundation. Osobno se priklanjamo Zakladi jer ona odgovara našem tijeku rada. Bilo bi sjajno kada bi bilo tko prihvatio pristup malom zaslonu s niskom propusnošću, ali upravo se tako krećemo.
Bilješke
Bilješke za žičane okvire s vodenim pogonom su ključne, ali, nalazimo, često se zanemaruju. Recite to naglas: dokumentacija, dokumentacija, dokumentacija! Nekoliko smo primjera toga vidjeli od prijatelja i mislimo da je porota još uvijek na ‘najboljem’ načinu da pravilno označi žičane okvire koji odgovaraju internetskim preglednicima. Kao što je gore spomenuto, redovito koristimo Foundation by Zurb i volimo koristiti njegov dodatak Reveal za prikaz naših napomena. Te se napomene pojavljuju samo na većim zaslonima i idealno ih je uključiti i isključiti.
Koristite stvarni sadržaj u žičanim okvirima
Oko Lorema Ipsuma bilo je puno rasprava u žičanim okvirima i dizajnerskim maketama, ali ako u svojim žičanim okvirima nemate stvarnog sadržaja, radite to pogrešno. Sadržaj informira o odlukama o interakciji i govori vam kada će se dizajn slomiti. Kako Lorem Ipsum to može učiniti?
Kako prvo dizajnirati za male zaslone?
Godinama smo dizajnirali s posebnom rezolucijom na umu. Bila je to zadana postavka. Bez obzira na skiciranje u bilježnicama, izradu žičanog okvira u OmniGraffleu, rad u Photoshopu ili dizajniranje u pregledniku, znali smo koja će biti naša veličina platna. Ti dani su prošli. Ogromno vjerujemo u to da prvo dizajniramo za male ekrane i postupno ga poboljšavamo. Pa kako dizajner mijenja svoj radni tok iz fiksne veličine platna u fluidan?
Sažetak dizajna s uređaja na početku
Ako ne dizajniramo za određeni uređaj, bitno je da prestanemo razmišljati o uređajima i početi razmišljati o iskustvima. Sve sljedeće tehnike pomažu dizajnerima da stvore svoja iskustva, a pritom mogu ostati agnostični na uređaju (do određene točke).
Koristite pločice stila
Koristite pločice za stil da biste uspostavili smjer i brzo ponavljali. Stilske pločice omogućavaju dizajneru da postavi smjer dizajnerskog sustava, a da ne postane previše specifičan. Njihova kreatorica Samantha Warren opisuje ih ovako:
„Style Tiles su za slučajeve kada je moodboard previše nejasan, a komp previše doslovan. Style pločice uspostavljaju izravnu vezu sa stvarnim elementima sučelja bez definiranja izgleda. "
Stvorite sklad sučelja
Zamislite platno sa svim vizualnim i interaktivnim elementima spojenim zajedno. Ne da biste vidjeli određeni raspored korisničkog sučelja, već da biste vidjeli kako svi elementi rade zajedno. Ovo je platno harmonije sučelja. Platno harmonije sučelja omogućuje dizajneru da ideje drži na okupu, ali da nije usredotočeno na bilo koju veličinu zaslona. Osim toga, to je izvrstan način za učinkovitu komunikaciju i dokumentiranje dizajniranih elemenata, umjesto izrade cjelovitog vodiča za stil.
Ako vas zanima daljnje čitanje, ovdje i ovdje možete pronaći dva izvrsna članka na temu harmonije sučelja.
Pogledajte sve u pregledniku
Sve treba spojiti u preglednik. Tu UI dizajn stvarno oživljava. Ključno je vidjeti kako stvarni sadržaj komunicira s vizualnim elementima. Ne postoji način da se to učini pravilno u statičnom okruženju. Morate vidjeti kako će reagirati u izvornom mediju.
Nađite ravnotežu sa statičkim programima
Postoji protok između preglednika i statičnih programa poput Photoshopa. Trebala bi postojati ravnoteža koja omogućuje stvaranje dizajnerskog sustava na fluidan i prirodan način. Svakako, to će se dogoditi u Photoshopu, ali dizajner koji dizajnira responzivno mora naučiti kreativno razmišljati i u pregledniku.
Zaključak
Još jednom, s osjećajem: započnite s razlogom, s dobro strukturiranim sadržajem i interakcijama koje su važne. Prvo se usredotočite na mali zaslon i malu propusnost te postupno poboljšavajte svoje koncepte koji odgovaraju. Naš medij postaje punoljetan. Imamo priliku ispravno postupiti i promijeniti svijet, jedan po jedan web projekt.
Otkrijte najboljih 20 alata za žičano oblikovanje dizajnera
Steve Fisher koordinira istraživanje, analizu, dizajn i strategiju na Yellow Pencilu u Kanadi i govori o temama kao što su RWD, UX i open source. Alaine Mackenzie strateg je sadržaja u Yellow Pencilu.
