Suunnittelu selaimessa, joka pelotti minua. Ei siksi, että se tuntui kovaa, mutta koska ajattelin, että päädyin pieniin laatikoihin, joista jotain oli niin yleistä ja hämmästelevää, päädyin tekemään sitä uudelleen Photoshopissa.
Tämä pelko osoittautui täysin perusteettomaksi. Suunnitelmani keskittyivät paitsi, myös viimeistelin niitä nopeammin ja saivat aikaisemmin prosessissa mukana olevia asiakkaita vuorovaikutuksen ja keskustelun kautta.
Suunnittelu on muotoilua. Ei ole väliä onko se tehty ohjelmistossa tai kirjoitettu koodiksi. Suunnittelu selaimessa ei ole vaikeampaa kuin suunnitella Photoshopissa. Kuten minkä tahansa työkalun, sinun on käytettävä sitä oppiaksesi ja lopulta hallitsemaan sitä.
Suunnittelu on iteratiivinen prosessi, joka vaikeutuu toimimalla asiakkaille. Asiakkaille on vaikeaa kuvailla tarkalleen mitä kuvaat; selaimessa suunnittelu voi saada ne mukaan koko prosessin sijaan vain suunnitteluvaiheeseen.
Pohjimmiltaan suunnittelu- ja kehitysvaiheet ovat sulautuneet yhteen, ja jos olet luonnollisesti hyvä suunnittelu- ja etupään kehitystyössä, suunnittelet selaimessa, kuten ankka vie veden.
Suunnittelun tärkein etu selaimessa on, että voimme suunnitella realististen odotusten perusteella. Joskus ohjelmistosuunnittelu voi aiheuttaa ennakoimattomia ongelmia etupään kehittämiseen. UI-elementit voitiin suunnitella valehteleviksi tai ehkäpä heillä ei ole mitään järkeä, asiakkaalle on vaikea selittää, miksi muutit jotain, ei siksi, että he eivät ymmärrä, vaan koska olet jo asettanut sen suunnittelussa ja sait sen hyväksytty. Suunnittelu selaimessa sopii yksinkertaisuuden ajatukseen.
Ennen kuin ajattelen suunnittelua, tarvitsen suunnitelman. Vain siksi, että käytän jotain muuta työkalua, ei tarkoita prosessin muuttamista. Minulla on melko vahva suunnitelma ennen kuin aloitan suunnittelun, ja minun on tiedettävä, mitä olen suunnittelemassa, miksi suunnittelemme, jonka suunnittelemme, asiakkaan taustasta ja kaikista palveluista tai tuotetiedoista, jotka minun on keskityttävä päällä.
Kun olen päättänyt näistä asioista, minulla on parempi käsitys siitä, mikä tuote on tai mitä asiakas tekee, kuinka kauan he ovat tehneet sen, mikä erottaa heidät kilpailustaan, kenen käyttäjäasema on ja mikä ensisijainen ja toissijainen sivuston tavoitteet tulevat olemaan.
Henkilökohtaisesti haluan saada dokumentaatiosta kaikesta. Tyypillisesti minulla on dokumentaatiota sivustokarttaan, sisältöön, toimintapyyntöihin ja sivuston arkkitehtuuriin. Aina kun aloitan suunnittelun, minulla olisi oltava selkeä strategia suunnittelulle ja kaiken sisällön olisi pitänyt kerätä.
Luominen on avain, jos aiot suunnitella mitä tahansa selaimessa. Voin karkkia sisältöalueita lyijykynällä ja paperilla, saada palautetta ja nopeasti iteraatiota suunnitteluni perustaksi.
Luonnostelen edellä kuvatun suunnitelman perusteella ja varmistan, että minulla on kaikki sisältöalueet ja kehotukset toiminnalle. Piirtämisen pitäisi olla nopeaa, älä käytä paljon aikaa täydentämään mitään. Sen pitäisi olla riittävän hyvä näyttää asiakkaalle, mutta riittämätön, jotta voit saada ne valmiiksi alle tunnissa.
Seuraavaksi haluan prototyypin sivustosta HTML- ja CSS-skenaareistani. Prototyyppi on paljon harmaita laatikoita, joissa on tekstiä ja kuvia paikanvaraajille. Harmaat laatikot toimivat säiliöinä, kun aloitan suunnittelun. Suurin hyöty koodin prototyypissä on se, että asiakas voi olla vuorovaikutuksessa prototyypin kanssa ja nähdä, miten sivuston arkkitehtuuri toimii, joten mikäli mikä tahansa on pois tai sitä on parannettava, voimme käsitellä sitä nyt eikä laukaisupäivänä.
Ennen kuin voimme aloittaa suunnittelun, tarvitsemme jonkinlaista tyyliä, jotta suunnittelumme voidaan perustaa. Meidän on määriteltävä värit ja fontit, joita käytämme mahdollisten tekstuureiden ja kuvioiden kanssa. Tässä tyyli laatat tulevat pelaamaan.
Tyyli laatat luotiin Samantha Warren ja olen käyttänyt niitä hetken aikaa. Ne auttavat asiakkaita näkemään varhaisen ja hyvin yksinkertaisen tyyliohjeen, jota voimme käyttää suunnittelun aloittamiseen. Haluan luoda useita näistä, jotta näen, mistä asiakas haluaa, jotta voin kaventaa sitä yhdeksi. Mielestäni nämä ovat myös erittäin tärkeitä hyväksyntämenettelyssä ja auttavat estämään suoran hylkäämisen.
Nyt olemme valmiit aloittamaan suunnittelun. Jos olet tottunut suunnittelemaan ohjelmistossa, kuten Photoshop tai Sketch, tämä ei ole kovin erilainen. Prototyyppitiedostomme avulla voimme lisätä pilkata sisältöä merkinnöissämme. Tässä vaiheessa tiedämme tarkalleen, mitä jokaisessa merkintäosassa on, ja verkko on jo määritetty, joten sen ei pidä kestää niin kauan.
Nyt aloittelen tekstejäni tyylejä. Aion lisätä perusstylejä väreille, typografialle ja ulkoasulle. Kun pohjatyypit ovat valmiit, astuessani pois ja tarkastelemaan sitä. Tykkään näyttämään tietyistä suunnittelun osista myöhemmin viittauksen.
Kun olen tyytyväinen peruskerrokseen, pidän muistiinpanoja siitä, mitä tarkentaa. Näiden muistiinpanojen perusteella aion todennäköisesti käyttää sitä photoshop tai Luonnos lisätä tekstuuria tai jotain tuntuvaa tunnelmaa. Photoshop ja Sketch ovat hienoja työkaluja monimutkaisten UI-elementtien hienosäätämiseen nopeasti, joten tallennan kaiken, mikä saattaa olla kipu koodata enemmän kuin kerran
Syynä minulle on se, että haluan, että koodibussi on vähäinen ja puhdas, ja mitä enemmän koodit, kommentoisit ja poistat, sitä herkempi ja paisunut koodibussi muuttuu.
Jos sinun tarvitsee suunnitella selaimesta tyhjästä joka kerta, asiat saattavat tuntua viihtyvän ikuisesti, mutta jos aloitat mukautetusta tukikohdasta, voit poistaa kaikki toistuvat vaiheet. Aluksi minun on muokattu versio Initializr että käytän mukautetun reagoivan verkon Sassissa (http://sass-lang.com/). Oman kehyksen käyttäminen antaa minulle pään aloitus prototyyppien suunnittelulle.
Kirjasto, jolla on yhteiset UI-mallit, on myös erinomainen tapa rakentaa nopea prototyyppi, ja se tekee selaimessa suunnittelun tehokkaammaksi. käytän Sublime-teksti koodi ja yksi asia, jonka olen oppinut hyödyntämään, on omat katkelmat, jotka voit luoda. Olen lisännyt useita variaatioita navigointiin, luetteloihin, sivupalkkeihin ja muihin yhteisiin elementteihini ristikkoluettelooni, jotta voin nopeasti sijoittaa ne merkintään yksinkertaisella toiminnolla. Käytän myös tiliä Codepen ja JSFiddle tallentaa kuvioita. Dan Cederholm loi suuren WordPress-teeman tavallisten kuvien tallentamiseksi päärynät . Se käyttää viestejä tallentaa koodia, jota voit muokata etukäteen elävänä testata ja katsella muutoksia.
Harjoittelu ja käytännön sovellus tekevät sinusta paremman suunnitelman selaimessa. On todennäköistä, että jos sinulla on jonkinlainen front-end-kehitystoiminta, sinulla on jo peruskehys ja sinulla on jo käytössään joitain yleisiä malleja.
Nyt sinun tarvitsee vain aloittaa suunnittelu selaimessa ja lopulta tulet työnkulkuun, joka on tehokasta ja toimii prosessin aikana. Käytännössä saat vain nopeammin.