Tartalom
- Reszponzív módszertan
- Hogyan tarthatom meg először a tartalmat?
- Miért?
- 01. Határozza meg üzleti és felhasználói céljait
- 02. Hivatkozz rá minden lehetőségre
- 03. Ne féljen visszalökni
- 04. Tolja a saját csapatát is
- 05. Határozza meg minden tartalmát, amire szüksége van
- Hogyan elvonhatom a tartalmat a prezentációtól?
- Meg kell állítanunk a tartalom elrendezésbeli gondolkodását
- Kényszerítse az ügyfeleket, hogy tervüketől függetlenül tervezzék meg tartalmukat
- Véglegesítse tartalmát a tervezés előtt
- Valódi tartalmat használjon - minden alkalommal
- Tehát hogyan működnek a drótvázak az adaptív tervezési projekteknél?
- Rajzolás
- Böngészőbeli keretrendszer
- Megjegyzések
- Használjon valódi tartalmat drótvázakban
- Hogyan tervezzek először kis képernyőkhöz?
- Absztrakt minták eszközökből az elején
- Használja a stíluslapokat
- Hozzon létre interfész harmóniát
- Mindent megtekinthet a böngészőben
- Megtalálni az egyensúlyt a statikus programokkal
- Következtetés
Tisztázzuk: a tervezés csak akkor jelent megoldást, ha a mélyebb kérdésekre koncentrál, a miértek mögött minden. Mindig egy szilárd folyamatnak kell irányítania a munkánkat, de valami rugalmasabbat be kell fogadnunk. A közegünk végül bebizonyította, hogy folyékony, ezért nem kellene a folyamatunknak? Gondoljon a rendszer tervezésére: látnia kell mind a teljes képet, mind az apró részleteket. Lehetetlen? Messze van tőle!
Frank Chimero A tervezés alakja című könyvében gyönyörűen megfogalmazza: „Van egy rész, ahol a művész visszalép a festőállványtól, hogy új perspektívát nyerjen a műről. A festészet egyenlő részek közeli és távoli: amikor a közelben van, a művész keményen dolgozik, hogy lenyomja a jegyét; ha messze van, értékeli a művet, hogy elemezze annak minőségét. Visszalép, hogy a mű beszéljen vele.
Hagynunk kell, hogy munkánk, közegünk beszéljen velünk. A reszponzív tervezés növekedésével végre magunkévá tesszük a közeget, aminek azt szánták: folyékony. Ragyogó idő visszalépni és értékelni a munkát, elemezni és átfogni a dolgok új módját, egy új folyamatot. Elmúltak azok a statikus modellek és webdesignerek napja, akik nem értenek a kódhoz. Itt az ideje egy reagáló folyamatnak.
Reszponzív módszertan
A szilárd folyamat nagy titkát el fogjuk adni a cikk elején. Mert ilyen őrültek vagyunk. Kész? A reszponzív folyamat felelős folyamat. Homályos? Talán. Bolondos? Nem. Az előtte lévő webes szabványok mozgalmához hasonlóan az adaptív tervezés jövőbarát módszerekkel mozdítja előre a webet.
Mint minden tervezési folyamatnak, ennek is a „miértre” kell összpontosítania. Tehát miért léteznek weboldalak? Tartalom kézbesítésére. Ez lehet feladat-alapú, társadalmi, információs ... nem számít. Az egész ebben áll: kezdje a miértekkel, a jól felépített tartalommal és a fontos interakciókkal.
Itt vannak azok a kérdések, amelyeket leggyakrabban hallunk az adaptív tervezési folyamatunkról.
Hogyan tarthatom meg először a tartalmat?
Mindannyian olyan optimisták vagyunk a projekt kezdetekor. „Először a tartalom!” azt mondjuk. „Felhasználói célok! Ne feledje, mi a fontos! ” Ez igaz. De mit jelent ez? Hogyan valósítja meg a tartalom első folyamatát?
Még akkor is, ha tudja (vagy azt hiszi, hogy tudja), a projekt előrehaladtával könnyű elfelejteni. A hosszú távú projektek hajlamosak tovább húzódni (és tovább ... és tovább ...). Megáll a gondolkodás a miértre, és elkezdünk a hogyanra koncentrálni. Becsapjuk magunkat, hogy azt gondoljuk, hogy projektjeink különálló „felfedezési” és „fejlesztési” szakaszokra oszthatók, amelyek függetlenül létezhetnek.
Az igazság az, hogy folyamatosan kérdeznünk kell, miért. Bármennyire is gondolja, hogy tud, bármennyire is tervezgetett - minden egyes döntés meghozatalakor, minden gomb megtervezésekor vagy címsor megírásakor kérdeznie kell…
Miért?
Miért csinálom ezt? Kinek lesz? Milyen üzleti célt fog segíteni az ügyfelemnek? Milyen igényt fog segíteni a felhasználóimnak? Ne csak a tartalmat tartsa meg először. Először tartsa meg a miértet.
Ez megkönnyíti a hangzást. De ahhoz, hogy jól csináld, meg kell nyomnod. Kényszerítse ügyfeleit és csapatát, hogy először meghatározzák a miértjeiket. Nincs Lorem Ipsum, nincs „erre később rátérünk”. Csináld meg a házi feladatodat! Valamennyi előadásodnak egy szilárd miértel kell kezdődnie. A sárga ceruzánál ez nagy változásokat jelentett a projektek ütemezésének, becslésének, költségvetésének és tervezésének módjában. Meg kellett szorítanunk a költségvetést és az időt szilárd kutatás, stratégia és tervezés elvégzéséhez. Lehet, hogy te is. De ha ügyfelei és csapatai látják a tartalmi igények meghatározásának óriási előnyeit, soha többé nem néznek vissza.
És a mi feladatunk, hogy oktassuk őket. (Olvassa el Mike Monteiro Kiváló dizájn egy munka című könyvét, ha többet szeretne megtudni az ügyfelekkel való kapcsolattartásról.) Az ügyfelek nehezen tudják megérteni az összes kutatás és elöljáró munka értékét. És miért kellene? A végén nem kapnak semmit „készen” - és túl gyakran csak egy számlát és egy nagy „Word” dokumentumot kapnak.
Ez nem az ő hibájuk - ez a mi hibánk. A mi felelősségünk, hogy jobb munkát végezzünk ezen érték bemutatásában. Az út minden lépésében vissza kell hoznunk az egészet a legfontosabb miérthez.
Ez különösen fontos az adaptív tervezésnél. A reszponzív weboldal nem igényel sokkal több fejlesztési erőfeszítést, de sokkal több tervezést jelent. Valóban, ez azt tervezi, hogy végig kellett volna tennünk. Tanúja lehet a jelenlegi háromévenkénti átalakítás projektciklusának. Szeretné folytatni ezt? Biztosan nem.
Tehát itt van három lépés a tartalom elsődleges megtartására a projekt folyamatában.
01. Határozza meg üzleti és felhasználói céljait
Hozzon létre egy prioritásos listát a projekt üzleti és felhasználói céljairól. Mit akarnak tudni vagy tenni a felhasználók a legjobban? Végezze el a kutatását. Tegyen megalapozott következtetéseket, ne vad találgatásokat. Hívja az összes érdekelt felet egyetértésre.
02. Hivatkozz rá minden lehetőségre
Minden alkalommal, amikor döntést hoz, valahányszor valaki új funkciót, tervezési elemet, vagy tartalmi oldalt javasol, kérje rá, hogy a kérelmet egy üzleti és felhasználói célhoz kapcsolja. Milyen valódi igényt fog kielégíteni ez a szolgáltatás? Mi az igazi oka? (Tipp: „Mert szeretnék” vagy „Nagyon szeretem a kéket” vagy a „Mindenki a Facebookon van”.)
03. Ne féljen visszalökni
Ez nehéz lehet. Az ügyfélkapcsolatok kényesek lehetnek, és csábító lehet feladni a csatát a háború megnyerése érdekében. De ne feledje, mindannyian ebben vagyunk együtt! Ez nem üzleti vs felhasználó; minket velük szemben.
A felhasználói igények kielégítése a legjobb módszer az üzleti igények kielégítésére. Mert a felhasználóink nélkül nincs üzletünk! Az ügyfelek (jó ügyfelek) nem vesznek fel mindenre igent mondani. Tehát, ha ügyfele olyasmit kér, amely nem felel meg céljainak vagy felhasználói igényeinek, ne féljen kihívást jelenteni számukra. Ez nem az egóról szól. A lehető legjobb megoldás létrehozásáról szól.
04. Tolja a saját csapatát is
Ez egy kreatív csapatban végzett munka során is kihívást jelenthet. A szerepek szétválasztása - látványterv, felhasználói élmény, információs architektúra, tartalmi stratégia, tartalom előállítás - téves kommunikációhoz vezethet. Elfoglaltak vagyunk, elárasztanak bennünket az e-mailek. Nehéz maradni egy projekttől az elejétől a végéig, különösen, ha a „te” munkád elkészült.
A csapatod kapcsolata legalább olyan fontos, mint az ügyfélkapcsolat. Emlékeztetnünk kell magunkat a miértre, ugyanúgy, mint ügyfeleinknek. Az együttműködés kulcsfontosságú. Nem lehet egyszerűen „átadni” egy tartalmi tervet, drótvázakat vagy terveket. Amennyire lehetséges, kéz a kézben kell dolgoznunk. Könnyű „befejezni” egy szállítmányt, és továbblépni valami másra. Sokkal nehezebb egy projekt mellett maradni, ha a menet nehéz lesz.
A kreatív munka vízeséses megközelítése egyszerűen nem működik. A csapattagok közötti agilis, együttműködő munka jobb eredményeket hoz.
05. Határozza meg minden tartalmát, amire szüksége van
A lényeg: az adaptív weboldalak tervezése hosszabb ideig tart. Már nem csak egyetlen kontextust tervezünk. Tervezünk minden összefüggést, amelyről most tudunk, és néhányra, amely még nem létezik.
De sokkal kevesebb időbe telik az összes ilyen összetettség megtervezése, mint a visszalépés és az olyan funkciók és funkciók utólagos felszerelése, amelyekkel Ön nem számolt. Szóval töltse az időt / erőfeszítést / költségvetést. Kényszerítse ügyfeleit és csapatát, hogy határozzák meg (és kötelezzék el magukat!) Minden tartalmukról, mielőtt belekezdenének a tervezésbe. Használjon oldaltáblázatokat. Használjon strukturált tartalmat. Jövőbiztos a tartalma most! Vagy sírj később.
Hogyan elvonhatom a tartalmat a prezentációtól?
Ezt sokat hallja az internet-o-gömb körül. De várj, mi van? És várj - miért?
Mert a prezentáció változhat (és fog is). A weboldalak 15 évvel ezelőtti kialakításának módja szinte felismerhetetlen abból a szempontból, ahogyan most bemutatjuk őket. De tudod, mi nem változott? Szavak. Még mindig használjuk őket. Az internet elsősorban (szöveges) tartalmakra létezik. Még mindig információs problémák megoldására használjuk; feladatok elvégzésére. De ha a tartalma függ a bemutatási módtól (Flash bevezető oldalak, bárki?), Akkor valószínû, hogy néhány éven belül nem lesz használható. És ez szar.
Meg kell állítanunk a tartalom elrendezésbeli gondolkodását
Mi (mint iparág) képeztük ügyfeleinket arra, hogy a tartalomra az elrendezés szempontjából gondoljanak. "Tedd az oldalsávba" - mondjuk. - Ennek a láblécben kell lennie. Álljon meg! Hagyd abba. Álljon meg. Ez nem a helyszínről szól. A prioritásról szól. Mi a legfontosabb tartalom a felhasználók számára? Mert tippelj mit: az elrendezés kontextusban változik. (Valószínűleg) nem lesz oldalsáv a kis képernyős kialakításánál.
Az óriási szupermenü, amelyet az ügyfeled szeretne? Nem fog repülni iPhone-on.
Kényszerítse az ügyfeleket, hogy tervüketől függetlenül tervezzék meg tartalmukat
Oké, nem kell őket erőltetni. Bátorítsd őket. Erősen ösztönözzön. Az oldaltáblázatok erre kiválóak. Ha még nem olvasta el, haladjon tovább Kristina Halvorson és Melissa Rach internetes tartalmi stratégiájához, ahol további információt találhat a létrehozásukról. Rendezze őket elsőbbségi sorrendbe. Ne hivatkozjon a helyszínre vagy az elrendezésre. Ez segíti az ügyfeleket abban, hogy produktívabban gondolkodjanak a tartalmukról, és mozgásba lendítse a tartalom létrehozásának folyamatát a végleges drótvázak vagy tervezés előtt.
Véglegesítse tartalmát a tervezés előtt
Oké, ez nem mindig lehetséges. De minél több a bizonytalanság kiküszöbölhető a tervezés megkezdése előtt, annál kevesebbet kell visszamennie és később változtatnia a dolgokon.
Valódi tartalmat használjon - minden alkalommal
Ha lehetséges, használjon éles tartalmat - mutassa meg ügyfeleinek a legbonyolultabb oldalakat, képeket és menüket. Ez elkerüli a meglepetéseket a folyamat későbbi szakaszában, amikor a legtermékenyebb tartalmat a késztermékben látják.
A funkcionális, böngészőben található drótvázak változást hoznak a világban. Engedje meg ügyfeleinek, hogy figyeljék tartalmuk mozgását és változását a különböző képernyőméretek között. Mutasson rá, amikor bemutatja drótvázát (személyes prezentációkat készít, igaz?). Mutassa be nekik, hogy információik prioritása a képernyőméretek között ugyanaz marad, miközben az elrendezés változik.
Tehát hogyan működnek a drótvázak az adaptív tervezési projekteknél?
Meggyőződésünk, hogy az RWD interakció-tervezésének gyorsan és gyakran be kell jutnia a böngészőbe. Nagyjából lehetetlen olyan statikus dokumentumot létrehozni, amely mindent leír. Természetesen létrehozhatunk egy dokumentumot, amely három, négy vagy öt töréspontot mutat be, de ez csak a történet töredéke. Mi van a töréspontok közötti pillanatokkal? Ez a böngészőben történik.
Rajzolás
Mégis jó, ha gyorsan összefoghatod ötleteidet. Ennek nem kell megtörténnie egyetlen adott közegben sem, de a papíron lévő ceruzával csak van valami. A lényeg itt az, hogy az ötleteket gyorsan és iteratív módon hozzuk ki. Szeretjük a vázlatot, amikor csak lehetséges, és még erre is van egy alkalmazás: UI Sketcher.
Böngészőbeli keretrendszer
Itt van az igazi jegy számunkra. Szeretjük újrafelhasználni a mintákat és rendszereket, amikor az RWD-t bemutatjuk a böngészőben. Természetesen minden alkalommal létrehozhatnánk a saját rendszerünket a semmiből, de ez nem segít minket vagy ügyfeleinket.
Szeretünk olyan gyors prototípus-keretrendszereket is használni, mint a Twitter Bootstrap vagy a Zurb's Foundation. Személy szerint hajlunk az Alapítvány felé, mert ez megfelel a munkafolyamatunknak. Nagyszerű lenne, ha bármelyikük kicsi képernyős, először kis sávszélességű megközelítést alkalmazna, de csak így gördülünk.
Megjegyzések
Az RWD drótvázakhoz tartozó kommentárok elengedhetetlenek, de úgy találjuk, hogy ezeket gyakran figyelmen kívül hagyják. Mondja ki hangosan: dokumentáció, dokumentáció, dokumentáció! Láttunk néhány példát erre a barátainktól, és úgy gondoljuk, hogy a zsűri még mindig a „legjobb” módszerrel rendelkezik a böngészőben reagáló drótvázak megfelelő kommentálásához. Mint fent említettük, rendszeresen használjuk az Foundation by Zurb-t, és a Reveal kiegészítőt szeretjük használni a kommentárjaink megjelenítéséhez. Ezek a jelölések csak nagyobb képernyőkön jelennek meg, ideális esetben be- és kikapcsolhatók.
Használjon valódi tartalmat drótvázakban
Sok vita folyt a Lorem Ipsum körül drótvázakban és makettekben, de ha a drótvázaiban nincs valódi tartalom, akkor rosszul csinálod. A tartalom tájékoztatja az interakciós döntéseket, és megmondja, hogy mikor törik össze a tervezés. Hogyan tudja ezt megtenni Lorem Ipsum?
Hogyan tervezzek először kis képernyőkhöz?
Éveken keresztül sajátos felbontást szem előtt tartva terveztük. Alapértelmezett beállítás volt. Akár vázlatot készítünk notebookokban, drótvázolunk az OmniGraffle-ban, dolgozunk a Photoshopban, akár tervezünk a böngészőben, tudtuk, hogy mi lesz a vászon méretünk. Azok az idők elmúltak. Hatalmas hívők vagyunk abban, hogy először a kis képernyőt tervezzük és fokozatosan fejlesszük. Tehát hogyan változtatja meg a tervező a munkafolyamatát egy fix vászonméretről folyékonyra?
Absztrakt minták eszközökből az elején
Hacsak nem egy konkrét eszközre tervezünk, elengedhetetlen, hogy abbahagyjuk az eszközökre való gondolkodást és a tapasztalatokon való gondolkodást. Az alábbi technikák mindegyike segíti a tervezőket tapasztalataik kidolgozásában, miközben képesek agnosztikusak maradni (egy pontig).
Használja a stíluslapokat
Használja a stíluslapokat az irány megállapításához és a gyors iteráláshoz. A stíluscsempék lehetővé teszik a tervező számára, hogy meghatározza a tervezési rendszer irányát anélkül, hogy túl konkrét lenne. Alkotójuk, Samantha Warren így írja le őket:
„A stíluscsempék arra szolgálnak, amikor a hangulattábla túl homályos, a comp pedig túl szó szerinti. A stíluscsempék közvetlen kapcsolatot hoznak létre a tényleges interfészelemekkel, az elrendezés meghatározása nélkül. ”
Hozzon létre interfész harmóniát
Képzeljen el egy vásznat, amelyen az összes vizuális és interaktív elem együtt van. Nem egy adott felhasználói felület elrendezését, hanem azt, hogy az összes elem hogyan működik együtt. Ez egy interfész harmónia vászon. Az interfész-harmonika vászon lehetővé teszi a tervező számára, hogy ötleteket tartson össze, de nem egyetlen képernyőméretre összpontosít. Ráadásul nagyszerű módja a tervezett elemek hatékony kommunikációjának és dokumentálásának, nem pedig teljes stílusú útmutató készítése.
Ha érdekel a tovább olvasás, két kiváló cikk található a felület harmóniájának témájában itt és itt.
Mindent megtekinthet a böngészőben
Mindent össze kell hozni a böngészőben. Itt válik igazán életre a felhasználói felület kialakítása. Létfontosságú látni, hogy a valós tartalom hogyan hat a vizuális elemekkel. Statikus környezetben erre nincs mód. Látnod kell, hogyan fog reagálni a natív közegben.
Megtalálni az egyensúlyt a statikus programokkal
A böngésző és a statikus programok, például a Photoshop folyik. Olyan egyensúlynak kell lennie, amely lehetővé teszi a tervezési rendszer folyékony és természetes módon történő létrehozását. Persze, ez a Photoshopban fog megtörténni, de egy tervezőnek, aki reagálva tervez, meg kell tanulnia, hogyan kell kreatívan gondolkodni a böngészőben is.
Következtetés
Még egyszer, érzéssel: kezdje a miértekkel, jól strukturált tartalommal és a fontos interakciókkal. Először a kis képernyőre és az alacsony sávszélességre összpontosítson, és fokozatosan fejlessze érzékeny koncepcióit. Közegünk nagykorú. Lehetőségünk van arra, hogy helyesen tegyük a dolgokat és megváltoztassuk a világot, egyszerre egy-egy webprojektet.
Fedezze fel a legjobb 20 drótvázas eszközt a tervezők számára
Steve Fisher koordinálja a kutatást, elemzést, tervezést és stratégiát a sárga ceruzával Kanadában, és olyan témákban beszél, mint az RWD, az UX és a nyílt forráskódú. Alaine Mackenzie a Yellow Pencil tartalmi stratégája.
