Sisältö
- Reagoiva menetelmä
- Kuinka pidän sisältöä ensin?
- Miksi?
- 01. Määritä yrityksesi ja käyttäjän tavoitteet
- 02. Kerro heille jokaisesta mahdollisuudesta
- 03. Älä pelkää työntää takaisin
- 04. Työnnä myös oma joukkueesi
- 05. Määritä kaikki tarvitsemasi sisältö etukäteen
- Kuinka erotan sisällön esityksestä?
- Meidän on lopetettava sisällön ajattelu ulkoasun suhteen
- Pakota asiakkaasi suunnittelemaan sisältöään suunnittelusta riippumatta
- Viimeistele sisältösi ennen suunnittelua
- Käytä todellista sisältöä - joka kerta
- Joten miten lankakehykset toimivat reagoivissa suunnitteluprojekteissa?
- Luonnos
- Selaimen sisäinen kehys
- Merkinnät
- Käytä todellista sisältöä lankakehyksissä
- Kuinka suunnittelen ensin pienille näytöille?
- Abstraktit mallit laitteista alussa
- Käytä tyylilaattoja
- Luo käyttöliittymän harmonia
- Näytä kaikki selaimessa
- Tasapaino staattisten ohjelmien kanssa
- Johtopäätös
Olkaamme selvät: muotoilu on ratkaisu vain, jos se keskittyy syvempiin kysymyksiin, miksi kaiken takana. Vakaan prosessin tulisi aina ohjata työtämme, mutta meidän on omaksuttava jotain joustavampaa. Välineemme on vihdoin osoittautunut sujuvaksi, joten eikö prosessimme pitäisi? Ajattele järjestelmän suunnittelua: sinun täytyy nähdä sekä koko kuva että pienet yksityiskohdat. Mahdotonta? Kaukana siitä!
Frank Chimero ilmaisee sen kauniisti kirjassaan The Shape of Design: ”On osa, jossa taiteilija astuu taaksepäin maalaukselta saadakseen uuden näkökulman teokseen. Maalaus on yhtä suuria osia lähellä ja kaukana: kun taiteilija on lähellä, hän tekee kovasti töitä tehdäkseen jälkensä; kaukana hän arvioi työtä analysoidakseen sen ominaisuuksia. Hän astuu taaksepäin antamaan työn puhua hänelle. "
Meidän on annettava työmme, välineemme puhua meille. Reagoivan suunnittelun nousun myötä olemme vihdoin omaksuneet välineemme sellaisena kuin sen oli tarkoitus olla: juokseva. On loistava aika astua taaksepäin ja arvioida työtä, analysoida ja omaksua uusi tapa tehdä asioita, uusi prosessi. Staattisten mallien ja verkkosuunnittelijoiden päivät, jotka eivät ymmärrä koodia, ovat ohi. On aika reagoivalle prosessille.
Reagoiva menetelmä
Annamme tämän vankan prosessin suuren salaisuuden heti tämän artikkelin alussa. Koska olemme niin hulluja. Valmis? Reagoiva prosessi on vastuullinen prosessi. Epämääräinen? Voi olla. Typerä? Ei. Kuten sitä edeltävä verkkostandardiliike, reagoiva suunnittelu ajaa verkkoa eteenpäin tulevaisuutta edistävillä menetelmillä.
Kuten minkä tahansa suunnitteluprosessin, sen tulisi keskittyä kaiken takana olevaan miksi. Joten miksi verkkosivustoja on olemassa? Toimittaa sisältöä. Se voi olla tehtävälähtöistä, sosiaalista, informatiivista ... sillä ei ole väliä. Kaikki johtuu täältä: aloita miksi, hyvin jäsennellyllä sisällöllä ja tärkeillä vuorovaikutuksilla.
Tässä ovat kysymykset, jotka kuulemme useimmiten reagoivasta suunnitteluprosessistamme.
Kuinka pidän sisältöä ensin?
Olemme kaikki niin optimistisia projektin alussa. "Sisältö ensin!" sanomme. ”Käyttäjätavoitteet! Muista mikä on tärkeää! " Se on totta. Mutta mitä se tarkoittaa? Kuinka toteutat sisältö ensin -prosessin?
Vaikka tiedätkin (tai luulet tietäväsi), se on helppo unohtaa projektin edetessä. Pitkäaikaisilla hankkeilla on taipumus venyä ja jatkaa (ja… ja…). Lopetamme miettimisen miksi, ja alamme keskittyä miten. Huijaamme itsemme ajattelemaan, että projektimme voidaan jakaa erillisiksi "löytö" ja "kehitys" vaiheiksi, jotka voivat olla olemassa itsenäisesti.
Totuus on, että meidän on jatkuvasti kysyttävä miksi. Ei ole väliä kuinka paljon luulet tietäväsi, riippumatta siitä, kuinka paljon suunnittelua olet tehnyt - aina kun teet päätöksen, joka kerta kun suunnittelet painikkeen tai kirjoitat otsikon, sinun on kysyttävä…
Miksi?
Miksi teen tämän? Kenelle se on? Mikä liiketoiminnan tavoite auttaa asiakasta saavuttamaan? Mitä tarvetta se auttaa käyttäjiäni ottamaan yhteyttä? Älä vain säilytä sisältöä ensin. Pidä ensin miksi.
Tämä tekee siitä äänen helppoa. Mutta jos haluat tehdä sen hyvin, sinun on painettava. Työnnä asiakkaasi ja tiimisi määrittelemään heidän miksi ensin. Ei Lorem Ipsumia, ei "tulemme siihen myöhemmin". Tee kotitehtäväsi! Kaikkien sinun on aloitettava vakaalla miksi. Keltaisella lyijykynällä tämä on merkinnyt suuria muutoksia tapaan, jolla hankkeemme arvioidaan, arvioidaan, budjetoidaan ja suunnitellaan. Olemme joutuneet vaatimaan budjettia ja aikaa tekemään vankkaa tutkimusta, strategiaa ja suunnittelua. Saatat myös. Mutta kun asiakkaasi ja tiimisi näkevät sisällöntarpeiden määrittelemisen valtavat edut, he eivät koskaan katso taaksepäin.
Ja meidän tehtävämme on kouluttaa heitä. (Lue Mike Monteiron erinomainen kirja Suunnittelu on työ, jos haluat oppia lisää asiakkaiden tekemisestä.) Asiakkailla voi olla vaikea ymmärtää kaiken tutkimuksen ja työn etua. Ja miksi heidän pitäisi? He eivät saa mitään "valmiita" lopussa - ja aivan liian usein he vain saavat laskun ja ison Word-asiakirjan.
Se ei ole heidän vikansa - se on meidän vikamme. Velvollisuutemme on tehdä parempaa työtä osoittamalla tämä arvo. Jokaisella askeleella meidän on saatettava kaikki takaisin tärkeään miksi.
Tämä on erityisen tärkeää reagoivan suunnittelun kannalta. Reagoiva verkkosivusto ei vaadi paljon enemmän kehitystyötä, mutta se tarkoittaa paljon enemmän suunnittelua. Todellakin, se suunnittelee, että meidän olisi pitänyt tehdä koko ajan. Todista nykyinen uudelleensuunnittelu joka kolmas vuosi. Haluatko jatkaa sen tekemistä? Emme varmasti.
Joten tässä on kolme vaihetta sisällön pitämiseksi ensin projektin prosessissa.
01. Määritä yrityksesi ja käyttäjän tavoitteet
Laadi priorisoitu luettelo projektisi liiketoiminnan ja käyttäjien tavoitteista. Mitä käyttäjät haluavat eniten tietää tai tehdä? Tee tutkimuksesi. Tee tietoisia päätelmiä, älä villi arvailuja. Pyydä kaikkia sidosryhmiä sopimaan.
02. Kerro heille jokaisesta mahdollisuudesta
Aina kun teet päätöksen, joka kerta kun joku ehdottaa uutta ominaisuutta tai ulkoasua tai sisältöä, saa hänet kartoittamaan pyyntö yrityksen ja käyttäjän tavoitteisiin. Mikä todellinen tarve tämä ominaisuus täyttää? Mikä on todellinen syy? (Vihje: "Koska haluan" tai "Pidän todella sinisestä" tai "Kaikki ovat Facebookissa" ei lasketa.)
03. Älä pelkää työntää takaisin
Tämä voi olla vaikea. Asiakassuhteet voivat olla herkkiä, ja voi olla houkuttelevaa luopua taistelusta sodan voittamiseksi. Mutta muista, että olemme kaikki tässä yhdessä! Se ei ole yritys vs. käyttäjä; meitä vastaan heitä.
Käyttäjätarpeiden täyttäminen on paras tapa vastata liiketoiminnan tarpeisiin. Koska ilman käyttäjiämme meillä ei ole yritystä! Asiakkaat (hyvät asiakkaat) eivät palkkaa sinua sanomaan "kyllä" kaikkeen. Joten jos asiakkaasi pyytää jotain, joka ei vastaa heidän tavoitteitaan tai käyttäjien tarpeita, älä pelkää haastaa heitä. Kyse ei ole egosta. Kyse on parhaan mahdollisen ratkaisun luomisesta.
04. Työnnä myös oma joukkueesi
Tämä voi olla myös haaste työskenneltäessä luovassa tiimissä. Roolien - visuaalinen suunnittelu, käyttökokemus, tietoarkkitehtuuri, sisältöstrategia, sisällöntuotanto - erottaminen voi johtaa väärään viestintään. Olemme kiireisiä, meitä ylikuormittaa sähköpostit. On vaikea pysyä projektissa alusta loppuun, varsinkin kun "sinun" työsi on tehty.
Tiimisi suhde on vähintään yhtä tärkeä kuin asiakassuhteesi. Meidän on muistettava itsestämme miksi, aivan kuten asiakkaamme. Yhteistyö on avainasemassa. Et voi yksinkertaisesti "luovuttaa" sisältösuunnitelmaa, lankakehyksiä tai malleja. Meidän on työskenneltävä mahdollisimman paljon käsi kädessä. Suorituskyky on helppo viimeistellä ja siirtyä johonkin muuhun. On paljon vaikeampaa pysyä projektissa, kun meneminen vaikeutuu.
Vesiputouksen lähestymistapa luovaan työhön ei vain toimi. Ketterä, yhteistyöryhmän jäsenten välinen työ parantaa tuloksia.
05. Määritä kaikki tarvitsemasi sisältö etukäteen
Tässä on asia: reagoivien verkkosivustojen suunnittelu kestää kauemmin. Emme enää suunnittele vain yhtä kontekstia. Suunnittelemme kaikkia asiayhteyksiä, joista tiedämme nyt, ja joitain, joita ei vielä ole olemassa.
Mutta kaikkien näiden monimutkaisuuksien suunnittelu vie paljon vähemmän aikaa kuin palata ja jälkiasentaa ominaisuuksia ja toimintoja, joita et ottanut huomioon. Joten viettää aikaa / vaivaa / budjettia. Pakota asiakkaasi ja tiimisi määrittelemään (ja sitoutumaan!) Koko sisältö ennen kuin aloitat suunnittelun. Käytä sivutaulukoita. Käytä jäsenneltyä sisältöä. Turvaa sisältösi nyt! Tai itkeä myöhemmin.
Kuinka erotan sisällön esityksestä?
Kuulet tämän paljon Internet-o-spheren ympärillä. Mutta odota, mitä? Ja odota - miksi?
Koska esitys voi (ja tulee) muuttua. Tapa, jolla suunnittelemme verkkosivustoja 15 vuotta sitten, on melkein tunnistamaton siitä, miten esitämme niitä nyt. Mutta tiedätkö, mikä ei ole muuttunut? Sanat. Käytämme edelleen niitä. Internet on pääasiassa (tekstipohjaista) sisältöä varten. Käytämme sitä edelleen tieto-ongelmien ratkaisemiseen; tehtävien suorittamiseen. Mutta jos sisältösi riippuu esitystavasta (Flash-introsivut, kuka tahansa?), On todennäköistä, että sitä ei voi käyttää muutaman vuoden kuluttua. Ja se on perseestä.
Meidän on lopetettava sisällön ajattelu ulkoasun suhteen
Olemme (toimialana) kouluttaneet asiakkaitamme ajattelemaan sisältöä ulkoasun suhteen. "Laita se sivupalkkiin", sanomme. "Sen pitäisi mennä alatunnisteeseen." Lopettaa! Lopeta. Lopettaa. Kyse ei ole sijainnista. Kyse on prioriteetista. Mikä on tärkein sisältö käyttäjillesi? Koska arvaa mitä: asettelu muuttuu eri tilanteissa. Pienen näytön suunnittelussa ei todennäköisesti ole sivupalkkia.
Jättimäinen supervalikko, jota asiakkaasi haluaa? Ei aio lentää iPhonella.
Pakota asiakkaasi suunnittelemaan sisältöään suunnittelusta riippumatta
Okei, sinun ei tarvitse pakottaa heitä. Kannusta heitä. Rohkaise voimakkaasti. Sivupöydät ovat tähän hyviä. Jos et ole vielä lukenut sitä, siirry välittömästi Kristina Halvorsonin ja Melissa Rachin verkkostrategiaan saadaksesi lisätietoja niiden luomisesta. Järjestä ne tärkeysjärjestyksessä. Älä viittaa sijaintiin tai asetteluun. Tämä auttaa asiakkaitasi ajattelemaan sisältöään tuottavammin ja saa sisällön luomisprosessin liikkumaan ennen viimeisteltyjä lankakehyksiä tai suunnittelua.
Viimeistele sisältösi ennen suunnittelua
Okei, tämä ei ole aina mahdollista. Mutta mitä enemmän epävarmuutta voit poistaa ennen suunnittelun aloittamista, sitä vähemmän sinun täytyy palata takaisin ja muuttaa asioita myöhemmin.
Käytä todellista sisältöä - joka kerta
Jos mahdollista, käytä reunakotelosisältöä - näytä asiakkaillesi monimutkaisimmat sivut, kuvat ja valikot. Näin vältetään yllätykset myöhemmin prosessin aikana, kun he näkevät lopullisessa tuotteessaan mahdollisimman jyrkän sisällön.
Toimivat selaimen sisäiset lankakehykset tekevät maailmasta eron. Salli asiakkaidesi tarkkailla heidän sisällönsä liikkumista ja muutosta eri näyttökokojen välillä. Osoita se, kun esität lankakehyksiä (teet henkilökohtaisia esityksiä, eikö?) Osoita heille, kuinka heidän tietonsa prioriteetti pysyy samana koko näytön kokoisena samalla kun asettelu muuttuu.
Joten miten lankakehykset toimivat reagoivissa suunnitteluprojekteissa?
Uskomme vakaasti, että RWD: n vuorovaikutussuunnittelun on päästävä selaimeen nopeasti ja usein. On melkein mahdotonta luoda staattista asiakirjaa, joka kuvaa kaiken. Toki voisimme luoda asiakirjan, joka osoittaa kolme, neljä tai viisi taittopistettä, mutta se on vain murto-osa tarinasta. Entä kaikki katkaisupisteiden väliset hetket? Se tapahtuu selaimessa.
Luonnos
Silti on hyvä pystyä luonnostelemaan ideoitasi nopeasti yhteistyössä. Tämän ei tarvitse tapahtua missään tietyssä välineessä, mutta paperikynässä on vain jotain. Tässä on tarkoitus saada ideoita nopeasti ja toistuvasti. Rakastamme skeittausta aina kun mahdollista, ja siihen on olemassa jopa sovellus: UI Sketcher.
Selaimen sisäinen kehys
Tässä on todellinen lippu meille. Rakastamme käyttää malleja ja järjestelmiä uudelleen, kun näytämme RWD: tä selaimessa. Tietenkin voisimme luoda oman järjestelmämme alusta alkaen, mutta se ei auta meitä tai asiakkaitamme.
Haluamme myös käyttää nopeasti reagoivia prototyyppikehyksiä, kuten Twitterin Bootstrap tai Zurb's Foundation. Kannatamme henkilökohtaisesti säätiötä kohti, koska se sopii työnkulkuun. Olisi hienoa, jos jompikumpi lähestyisi ensin pienen näytön, matalan kaistanleveyden lähestymistapaa, mutta juuri niin me käytämme.
Merkinnät
RWD-lankakehysten merkinnät ovat välttämättömiä, mutta huomaamme, että ne jätetään usein huomiotta. Sano se ääneen: dokumentaatio, dokumentaatio, dokumentaatio! Olemme nähneet muutamia esimerkkejä ystäviltä ja uskomme, että tuomaristo on edelleen parhaalla mahdollisella tavalla merkitä selaimen reagoivat langalliset kehykset oikein. Kuten yllä mainittiin, käytämme Foundation by Zurbia säännöllisesti ja haluamme käyttää sen Reveal-lisäosaa merkintöjen näyttämiseen. Nämä merkinnät näkyvät vain suuremmissa näytöissä, ja mieluiten ne voidaan kytkeä päälle ja pois päältä.
Käytä todellista sisältöä lankakehyksissä
Lankakehyksissä ja muotoilumalleissa on keskusteltu paljon Lorem Ipsumin ympärillä, mutta jos lankakehyksissäsi ei ole todellista sisältöä, teet sen väärin. Sisältö ilmoittaa vuorovaikutusta koskevat päätökset ja kertoo, milloin muotoilu rikkoutuu. Kuinka Lorem Ipsum voi tehdä sen?
Kuinka suunnittelen ensin pienille näytöille?
Vuosien ajan suunnittelimme tietyn resoluution mielessä. Se oli oletusasetus. Olitpa luonnostelu muistikirjoissa, lankakehys OmniGrafflessa, työskentely Photoshopissa tai suunnittelu selaimessa, tiesimme, mikä kankaamme koko tulee olemaan. Ne päivät ovat poissa. Olemme valtavasti uskovia suunnittelemalla ensin pienen näytön ja parantamalla sitä asteittain. Joten miten suunnittelija muuttaa työnkulunsa kiinteästä kankaan koosta sujuvaksi?
Abstraktit mallit laitteista alussa
Ellemme suunnittele tiettyä laitetta, on välttämätöntä, että lopetamme laitteiden ajattelun ja alamme ajatella kokemuksia. Kaikki seuraavat tekniikat auttavat suunnittelijoita muokkaamaan kokemuksiaan samalla, kun he voivat pysyä laitteen agnostisina (pisteeseen asti).
Käytä tyylilaattoja
Käytä tyylilaattoja suunnan määrittämiseen ja nopeaan iterointiin. Tyylilaattojen avulla suunnittelija voi asettaa suunnittelujärjestelmän suunnan liian tarkaksi. Heidän luojansa, Samantha Warren, kuvaa heitä näin:
”Tyylilaatat ovat tarkoitettu, kun tuulilauta on liian epämääräinen ja pakkaus liian kirjaimellinen. Tyylilaatat muodostavat suoran yhteyden todellisiin käyttöliittymäelementteihin määrittelemättä asettelua. "
Luo käyttöliittymän harmonia
Kuvittele kangas, johon on yhdistetty kaikki visuaaliset ja interaktiiviset elementit. Ei nähdä tiettyä käyttöliittymän asettelua, vaan nähdä, kuinka kaikki elementit toimivat yhdessä. Tämä on käyttöliittymän harmonian kangas. Käyttöliittymän harmonian kankaalla suunnittelija voi pitää ideat yhdessä, mutta ei keskittynyt yhteen näytön kokoon. Lisäksi se on loistava tapa kommunikoida ja dokumentoida suunniteltuja elementtejä tehokkaasti sen sijaan, että tuotettaisiin täydellinen tyyliopas.
Jos haluat lukea lisää, löydät täältä ja täältä kaksi erinomaista artikkelia käyttöliittymän harmoniasta.
Näytä kaikki selaimessa
Kaikki on koottava yhteen selaimessa. Tässä käyttöliittymäsuunnittelu todella herää eloon. On tärkeää nähdä, miten todellinen sisältö on vuorovaikutuksessa visuaalisten elementtien kanssa. Ei ole mitään tapaa tehdä tätä kunnolla staattisessa ympäristössä. Sinun täytyy nähdä, miten se reagoi natiivimateriaalissa.
Tasapaino staattisten ohjelmien kanssa
Selaimen ja staattisten ohjelmien, kuten Photoshopin, välillä on virta. Olisi oltava tasapaino, jonka avulla suunnittelujärjestelmä voidaan luoda sujuvalla ja luonnollisella tavalla. Toki tämä tapahtuu Photoshopissa, mutta reagoivan suunnittelijan on opittava myös ajattelemaan luovasti myös selaimessa.
Johtopäätös
Jälleen kerran tunteella: aloita miksi, strukturoidulla sisällöllä ja tärkeillä vuorovaikutuksilla. Keskity ensin pieneen näyttöön ja pieneen kaistanleveyteen ja paranna asteittain reagoivia käsitteitäsi. Mediumimme on tulossa ikään. Meillä on mahdollisuus tehdä asiat oikein ja muuttaa maailmaa, yksi verkkoprojekti kerrallaan.
Löydä parhaat 20 lankakehystyökalua suunnittelijoille
Steve Fisher koordinoi tutkimusta, analyyseja, suunnittelua ja strategiaa Kanadan keltaisessa lyijykynässä ja puhuu aiheista, kuten RWD, UX ja avoimen lähdekoodin. Alaine Mackenzie on Yellow Pencilin sisältöstrategia.
