Sisu
- Reageeriv metoodika
- Kuidas ma kõigepealt sisu hoian?
- Miks?
- 01. Määratlege oma ettevõtte ja kasutaja eesmärgid
- 02. Viidake neile igal võimalusel
- 03. Ärge kartke tagasi lükata
- 04. Lükake ka oma meeskonda
- 05. Määratlege kogu teie sisuvajadus
- Kuidas eraldada sisu esitlusest?
- Peame lõpetama sisu mõtlemise paigutuse osas
- Sundige oma kliente kavandama oma sisu kujundusest sõltumata
- Lõpeta oma sisu enne kujundamist
- Kasutage tõelist sisu - iga kord
- Niisiis, kuidas traadiraamid töötavad tundlike disainiprojektide puhul?
- Visandamine
- Brauserisisene raamistik
- Annotatsioonid
- Kasutage traadiraamides tõelist sisu
- Kuidas kõigepealt väikeste ekraanide jaoks kujundada?
- Abstraktsed kujundused seadmetest alguses
- Kasutage stiiliplaate
- Looge liidese harmoonia
- Vaadake kõike brauseris
- Staatiliste programmidega tasakaalu saavutamine
- Järeldus
Olgem selged: disain on lahendus ainult siis, kui see keskendub käsitletavatele sügavamatele küsimustele, miks kõige taga. Meie tööd peaks alati juhtima kindel protsess, kuid peame omaks võtma midagi paindlikumat. Meie meedium on lõpuks tõestanud, et on voolav, kas ei peaks siis meie protsess? Mõelge süsteemi kujundusele: peate nägema nii tervikpilti kui ka pisikesi detaile. Võimatu? Kaugel sellest!
Frank Chimero sõnastab selle oma raamatus The Shape of Design kaunilt: „On osa, kus kunstnik astub molbertilt tagasi, et saada teosele uus vaatenurk. Maal on võrdsed osad lähedal ja kaugel: lähedal olles teeb kunstnik oma jälje tegemiseks kõvasti tööd; kui kaugel, hindab ta tööd, et analüüsida selle omadusi. Ta astub tagasi, et lasta teosel end rääkida. "
Peame laskma oma tööl, meediumil endaga rääkida. Reageeriva disaini tõusuga võtame lõpuks omaks oma meediumi, nagu see pidi olema: voolav. On suurepärane aeg tagasi astuda ja tööd hinnata, analüüsida ja omaks võtta uus tegemisviis, uus protsess. Möödas on staatiliste makettide ja veebidisainerite päevad, kes koodist aru ei saa. On aeg reageerivaks protsessiks.
Reageeriv metoodika
Anname kindla protsessi suure saladuse kohe selle artikli alguses. Sest me oleme sellised hullud. Kas olete valmis? Reageeriv protsess on vastutustundlik protsess. Ebamäärane? Võib olla. Rumal? Ei. Nagu enne seda toiminud veebistandardite liikumine, sunnib ka reageeriv disain veebi tulevikusõbralike meetoditega edasi liikuma.
Nagu iga disainiprotsess, peaks ka see keskenduma selle kõige taga olevale miksile. Miks siis veebisaidid olemas on? Sisu edastamiseks. See võib olla ülesandepõhine, sotsiaalne, informatiivne ... see pole oluline. Kõik taandub sellele: alustage olulistest põhjustest, hästi struktureeritud sisust ja interaktsioonidest.
Siin on küsimused, mida kuuleme kõige sagedamini meie tundliku disainiprotsessi kohta.
Kuidas ma kõigepealt sisu hoian?
Oleme kõik projekti alguses nii optimistlikud. "Esiteks sisu!" ütleme. „Kasutaja eesmärgid! Pidage meeles, mis on oluline! " See on tõsi. Aga mida see tähendab? Kuidas rakendate sisu kõigepealt protsessi?
Isegi kui teate (või arvate teadvat), on projekti edenedes seda lihtne unustada. Pikaajalistel projektidel on kalduvus venida ja jätkuda (ja edasi ... ja edasi ...). Lõpetame mõtlemise miks ja hakkame keskenduma sellele, kuidas. Lollime end mõttega, et meie projektid saab jagada eraldi „avastamis-” ja „arendusfaasideks”, mis võivad eksisteerida iseseisvalt.
Tõde on see, et me peame kogu aeg küsima, miks. Ükskõik kui palju te arvate teadvat, olenemata sellest, kui palju planeerimist olete teinud - iga kord, kui otsustate, iga kord, kui kujundate nuppu või kirjutate pealkirja, peate küsima…
Miks?
Miks ma seda teen? Kellele see on? Mis ärieesmärki see aitab mu kliendil saavutada? Millist vajadust aitab see kasutajatel lahendada? Ärge hoidke kõigepealt sisu alles. Esmalt hoidke miks.
See muudab selle heli lihtsaks. Kuid selleks, et seda hästi teha, peate suruma. Pange oma kliendid ja meeskond esmalt määratlema nende miks. Ei Lorem Ipsumit, ei ‘jõuame selle juurde hiljem’. Tee oma kodutöid! Kõik teie viisid peavad algama kindla miks. Kollases pliiatsis on see tähendanud suuri muudatusi projektide koostamise, hindamise, eelarve koostamise ja kavandamise viisis. Oleme pidanud püüdma eelarve ja aja järele, et teha põhjalikke uuringuid, strateegiat ja planeerimist. Võib ka. Kuid kui teie kliendid ja meeskonnad näevad sisuvajaduste määratlemise tohutut kasu, ei vaata nad enam kunagi tagasi.
Ja meie ülesanne on neid harida. (Kui soovite lisateavet klientidega suhtlemise kohta, lugege Mike Monteiro suurepärast raamatut Kujundus on töö.) Klientidel võib olla raske mõista, kui väärtuslik on kogu see teadustöö ja töö alguses. Ja miks nad peaksid? Neil ei ole lõpus midagi lõppenud - ja liiga sageli saavad nad lihtsalt arve ja suure Wordi dokumendi.
See pole nende süü - see on meie süü. Meie kohustus on teha paremat tööd selle väärtuse näitamiseks. Igal sammul peame selle kõik tagasi tooma ülitähtsa põhjuse juurde.
See on eriti oluline tundliku disaini jaoks. Reageeriv veebisait ei vaja palju rohkem arendustegevust, kuid see tähendab palju rohkem planeerimist. Tõesti, see on plaan, mida me oleks pidanud kogu aeg tegema. Tunnista praegust ümberkujundamise projekti iga kolme aasta tagant. Kas soovite seda jätkata? Kindlasti mitte.
Nii et siin on kolm sammu, et sisu projektiprotsessis kõigepealt hoida.
01. Määratlege oma ettevõtte ja kasutaja eesmärgid
Koostage oma projekti jaoks prioriteetsete ettevõtete ja kasutajate eesmärkide loend. Mida teie kasutajad kõige rohkem teada tahavad või teevad? Tehke oma uuringud. Tehke teadlikke järeldusi, mitte metsikuid oletusi. Pange kõik oma sidusrühmad nõustuma.
02. Viidake neile igal võimalusel
Iga kord, kui otsustate, laseb keegi iga kord uue funktsiooni või kujunduselementi või sisulehte välja pakkuda, et ta vastaks ettevõtte ja kasutaja eesmärkidele. Millist tegelikku vajadust see funktsioon rahuldab? Mis on tegelik põhjus? (Vihje: "Sest ma tahan" või "Mulle väga meeldib sinine" või "Kõik on Facebookis" ei loe.)
03. Ärge kartke tagasi lükata
See võib olla karm. Kliendisuhted võivad olla delikaatsed ja võib olla ahvatlev loobuda lahingust sõja võitmiseks. Kuid pidage meeles, et me kõik oleme selles koos! See pole äri vs kasutaja; meie vs nemad.
Kasutajate vajaduste rahuldamine on parim viis ärivajaduste rahuldamiseks. Sest ilma meie kasutajateta pole meil äri! Kliendid (head kliendid) ei palka teid kõigele jah-sõna ütlema. Nii et kui teie klient küsib midagi, mis ei vasta tema eesmärkidele ega kasutajate vajadustele, ärge kartke teda proovile panna. See pole seotud egoga. See on parima võimaliku lahenduse loomine.
04. Lükake ka oma meeskonda
See võib olla väljakutse ka loomingulises meeskonnas töötades. Rollide lahutamine - visuaalne kujundus, kasutajakogemus, infoarhitektuur, sisustrateegia, sisutootmine - võib põhjustada valesti suhtlemist. Me oleme hõivatud, meil on tohutult kirju meilidega. Projektist algusest lõpuni on raske püsida, eriti kui teie töö on tehtud.
Teie meeskonna suhe on vähemalt sama oluline kui teie kliendisuhe. Peame endale meelde tuletama, miks, nii nagu me teeme seda ka oma klientidega. Koostöö on võtmetähtsusega. Te ei saa lihtsalt sisuplaani, traadiraame ega kujundust „kätte anda”. Nii palju kui võimalik, peame töötama käsikäes. Toodet on lihtne viimistleda ja minna millegi muu juurde. Palju keerulisem on projekti juures püsida, kui käik läheb raskeks.
Kosk lähenemine loometööle lihtsalt ei toimi. Parem tulemuse annab meeskonna liikmete vaheline vilgas ja koostöö.
05. Määratlege kogu teie sisuvajadus
Siin on asi: tundlike veebisaitide kavandamine võtab kauem aega. Me ei plaani enam ainult ühte konteksti. Kavandame kõiki kontekste, mida praegu teame, ja mõnda, mida veel pole.
Kuid kõigi nende keerukuste kavandamine võtab palju vähem aega kui see, et minna tagasi ja paigaldada funktsioone ja funktsioone, mida te ei arvestanud. Nii et kulutage aega / vaeva / eelarvet. Enne disainiga alustamist sundige oma kliente ja meeskonda kogu oma sisu määratlema (ja pühenduma sellele!). Kasutage lehe tabeleid. Kasutage struktureeritud sisu. Teie sisu on tulevikukindel! Või hiljem nutma.
Kuidas eraldada sisu esitlusest?
Interneti-o-sfääris kuulete seda palju. Aga oota, mis? Ja oodake - miks?
Sest esitlust saab (ja saab) muuta. See, kuidas me 15 aastat tagasi veebisaite kujundasime, on peaaegu äratuntav sellest, kuidas neid praegu esitleme. Aga tead, mis pole muutunud? Sõnad. Me kasutame endiselt neid. Internet eksisteerib peamiselt (tekstipõhise) sisu jaoks. Kasutame seda endiselt infoprobleemide lahendamiseks; ülesannete täitmiseks. Kuid kui teie sisu sõltub esitlusviisist (Flash-intro lehed, keegi?), On tõenäoline, et seda ei saa mõne aasta pärast kasutada. Ja see on nõme.
Peame lõpetama sisu mõtlemise paigutuse osas
Oleme (tööstusharuna) koolitanud oma kliente mõtlema sisust küljenduse osas. "Pange see külgribale," ütleme. "See peaks minema jalusesse." Lõpeta! Lõpeta. Lõpeta. Asi pole asukohas. See on prioriteedist. Mis on teie kasutajate jaoks kõige olulisem sisu? Sest arvake ära: paigutus muutub kontekstides. Teie väikese ekraani kujunduses pole (tõenäoliselt) külgriba.
Hiiglaslik supermenüü, mida teie klient soovib? Ei lenda iPhone'iga.
Sundige oma kliente kavandama oma sisu kujundusest sõltumata
Olgu, te ei pea neid sundima. Julgustage neid. Julgelt julgustage. Lehe tabelid sobivad selleks suurepäraselt. Kui te pole seda veel lugenud, jätkake kohe nende loomise kohta lisateabe saamiseks Kristina Halvorsoni ja Melissa Rachi veebi sisustrateegiaga. Korraldage need prioriteetses järjekorras. Ärge viidake asukohale ega paigutusele. See aitab teie klientidel mõelda oma sisule produktiivsemalt ja aitab ka sisu loomisprotsessi liikuda enne lõplikke traadiraame või kujundust.
Lõpeta oma sisu enne kujundamist
Olgu, see pole alati võimalik. Kuid mida rohkem ebakindlust saate enne disainiga alustamist kõrvaldada, seda vähem peate hiljem tagasi minema ja asju muutma.
Kasutage tõelist sisu - iga kord
Võimaluse korral kasutage äärekirja sisu - näidake oma klientidele kõige keerulisemaid lehti, pilte ja menüüsid. See väldib üllatusi hilisemas protsessis, kui nad näevad valmistootes oma kõige raskemat sisu.
Funktsionaalsed brauserisisesed traadiraamid muudavad maailma. Lubage oma klientidel jälgida nende sisu liikumist ja muutumist erinevates ekraanisuurustes. Juhtraamide esitamisel juhtige seda välja (teete isikupäraseid esitlusi, eks?). Näidake neile, kuidas nende teabe prioriteet jääb ekraanisuuruste lõikes samaks, samal ajal kui paigutus muutub.
Niisiis, kuidas traadiraamid töötavad tundlike disainiprojektide puhul?
Oleme veendunud, et RWD interaktsioonidisain peab brauserisse jõudma kiiresti ja sageli. Kõiki kirjeldavat staatilist dokumenti on üsna võimatu luua. Muidugi, me võiksime luua dokumendi, mis näitab kolme, nelja või viit murdepunkti, kuid see on ainult murdosa loost. Aga kõik murdepunktide vahelised hetked? See juhtub brauseris.
Visandamine
Siiski on hea, kui suudate oma ideed koostöös kiiresti visandada. See ei pea juhtuma üheski konkreetses keskkonnas, kuid paberil oleva pliiatsi kohta on midagi. Siin on kogu mõte saada ideid kiiresti ja korduvalt. Meile meeldib igal võimalusel joonistada tahvlit ja selleks on olemas isegi rakendus: UI Sketcher.
Brauserisisene raamistik
Siin on meie jaoks tõeline pilet. Me armastame mustreid ja süsteeme taaskasutada, kui demonstreerime brauseris RWD-d. Muidugi võiksime iga kord luua oma süsteemi nullist, kuid see ei aita meid ega kliente.
Meile meeldib kasutada ka kiiret reageerivat prototüübi raamistikku, näiteks Twitteri Bootstrap või Zurb's Foundation. Me kaldume isiklikult sihtasutuse poole, sest see sobib meie töövoogudega. Tore oleks, kui kumbki kasutaks kõigepealt väikest ekraani ja madala ribalaiusega lähenemist, kuid just nii me liigume.
Annotatsioonid
RWD traadiraamide märkused on hädavajalikud, kuid leiame, et need jäävad sageli tähelepanuta. Öelge see välja: dokumentatsioon, dokumentatsioon, dokumentatsioon! Oleme näinud sõpradelt selle kohta mõningaid näiteid ja arvame, et žürii on endiselt parim viis, kuidas brauseris olevaid reageerivaid traadiraame õigesti märkida. Nagu eespool mainitud, kasutame regulaarselt Foundation by Zurb'i ja soovime oma märkuste kuvamiseks kasutada selle Reveali lisandmoodulit. Need märkused ilmuvad ainult suuremate ekraanide puhul ja ideaaljuhul saab neid sisse ja välja lülitada.
Kasutage traadiraamides tõelist sisu
Lorem Ipsumi ümber on traatraamides ja kujundusmudelites palju vaieldud, kuid kui teie traatraamides pole tegelikku sisu, siis teete seda valesti. Sisu teavitab suhtlemisotsuseid ja ütleb teile, millal disain puruneb. Kuidas saab Lorem Ipsum seda teha?
Kuidas kõigepealt väikeste ekraanide jaoks kujundada?
Aastaid kujundasime konkreetset resolutsiooni silmas pidades. See oli vaikeseade. Ükskõik, kas visandite märkmikesse, traadistate OmniGraffle'is, töötate Photoshopis või kujundate brauseris, teadsime, milline saab olema meie lõuendi suurus. Need päevad on möödas. Oleme tohutult usklikud, et kujundame esmalt väikese ekraani ja täiustame seda järk-järgult. Niisiis, kuidas disainer muudab oma töövoo fikseeritud lõuendi suurusest sujuvaks?
Abstraktsed kujundused seadmetest alguses
Kui me ei kujunda konkreetset seadet, on hädavajalik, et lõpetaksime seadmetele mõtlemise ja hakkaksime mõtlema kogemustele. Kõik järgmised tehnikad aitavad disaineritel oma kogemusi kujundada, säilitades samal ajal seadme agnostika (kuni punktini).
Kasutage stiiliplaate
Suuna loomiseks ja kiireks kordamiseks kasutage stiiliplaate. Stiiliplaadid võimaldavad disaineril kujundussüsteemi suuna määratleda ilma liiga konkreetseks muutumata. Nende looja Samantha Warren kirjeldab neid nii:
"Stiiliplaadid on mõeldud siis, kui moodboard on liiga ebamäärane ja kompk liiga sõna otseses mõttes. Stiiliplaadid loovad otsese ühenduse tegelike liideseelementidega ilma paigutust määratlemata. "
Looge liidese harmoonia
Kujutage ette lõuend, kuhu on koondatud kõik visuaalsed ja interaktiivsed elemendid. Mitte konkreetse kasutajaliidese paigutuse nägemiseks, vaid selleks, et näha, kuidas kõik elemendid koos töötavad. See on liidese harmoonia lõuend. Liidese harmoonia lõuend võimaldab disaineril hoida ideid koos, kuid pole keskendunud ühele ekraanisuurusele. Lisaks on see suurepärane võimalus kujundatud elementide tõhusaks suhtlemiseks ja dokumenteerimiseks, mitte täieliku stiilijuhendi loomiseks.
Kui olete huvitatud edasi lugemisest, leiate siit ja siit kaks suurepärast artiklit liidese harmoonia teemal.
Vaadake kõike brauseris
Kõik tuleb brauseris kokku viia. Siin saab kasutajaliidese disain tõeliselt ellu. Tähtis on näha, kuidas tegelik sisu suhtleb visuaalsete elementidega. Staatilises keskkonnas pole seda võimalik korralikult teha. Peate nägema, kuidas see reageerib emakeeles.
Staatiliste programmidega tasakaalu saavutamine
Brauseri ja staatiliste programmide, näiteks Photoshopi vahel on voog. Peaks olema tasakaal, mis võimaldab kujundussüsteemi luua sujuvalt ja loomulikul viisil. Muidugi, see juhtub Photoshopis, kuid reageerivalt kujundav disainer peab õppima ka brauseris loovalt mõtlema.
Järeldus
Veel kord, tundega: alustage põhjusest, struktureeritud sisust ja olulistest koostoimetest. Esmalt keskenduge väikesele ekraanile ja väikesele ribalaiusele ning täiustage oma tundlikke kontseptsioone järk-järgult. Meie meedium on täisealiseks saamas. Meil on võimalus teha asju õigesti ja muuta maailma, üks veebiprojekt korraga.
Avastage disainerite jaoks parimad 20 traadist raamistamise tööriista
Steve Fisher koordineerib Kanadas kollase pliiatsiga seotud uuringuid, analüüse, disaini ja strateegiat ning räägib teemadel nagu RWD, UX ja avatud lähtekoodiga. Alaine Mackenzie on kollase pliiatsi sisustrateeg.
