Hönnun í vafranum notaði til að hræða mig. Ekki vegna þess að það virtist erfitt en vegna þess að ég hélt að ég myndi enda með hönnun sem samanstóð af mörgum litlum kassa, eitthvað sem var svo almennt og blátt að ég myndi endað að endurtaka hana í Photoshop.
Þessi ótta virtist vera alveg óviðeigandi. Ekki aðeins varð hönnunin minni, ég náði þeim líka hraðar og fékk viðskiptavinum þátt í því fyrr í gegnum samskipti og umræðu.
Hönnun er hönnun. Það skiptir ekki máli hvort það sé gert í hugbúnaði eða verið skrifað í kóða. Hönnun í vafranum er ekki erfiðara en að hanna í Photoshop. Eins og hvaða tól þú þarft að nota það til að læra það og að lokum ná góðum tökum á henni.
Hönnun er endurtekið ferli, eitt sem er erfiðara með því að vinna fyrir viðskiptavini. Það er erfitt stundum fyrir viðskiptavini að mynda nákvæmlega það sem þú lýsir; að hanna í vafranum getur tekið þátt í öllu ferlinu frekar en bara hönnunarstigið.
Í meginatriðum eru hönnunar- og þróunarstigin sameinandi og ef þú ert náttúrulega góður í hönnun og framhlið þróun sem þú tekur til að hanna í vafranum eins og önd tekur til vatns.
Ein stór ávinningur af hönnun í vafranum er að við getum hannað á grundvelli raunhæfar væntingar. Stundum getur hönnun í hugbúnaði skapað ófyrirséð vandamál fyrir þróun frammistöðu. UI þættir gætu verið hönnuð wonky eða kannski gera þeir bara ekkert vit, það er erfitt að útskýra fyrir viðskiptavini hvers vegna þú breyttir eitthvað, ekki vegna þess að það skilur ekki heldur vegna þess að þú hefur þegar sett það í hönnunina og átti það samþykkt. Hönnun í vafranum bendir til hugmyndarinnar um einfaldleika.
Áður en ég hugsa jafnvel um hönnun þarf ég að hafa áætlun. Bara vegna þess að ég nota annað tól þýðir ekki breytingar á ferli mínum. Mér finnst gaman að hafa nokkuð traustan áætlun áður en ég byrjar að hanna og ég þarf að vita hvað ég er að hanna, hvers vegna ég er að hanna, hver ég er að hanna fyrir, viðskiptavinarbakgrunn og hvaða þjónustu eða vöruupplýsingar sem ég þarf að einblína á á.
Eftir að ég ákvarði þetta mun ég hafa betri hugmynd um hvað varan er eða hvað viðskiptavinurinn gerir, hversu lengi þeir hafa verið að gera það, hvað setur þau í sundur frá keppni þeirra, hverjir eru notendur og hvaða grunn- og framhaldsskóli Markmið vefsins eru að verða.
Mér finnst persónulega að hafa gögn um allt. Venjulega er ég með skjöl fyrir vefsíðuna, efni, kallar til aðgerða og vefsvæðis arkitektúr. Þegar ég byrjar að hanna ég ætti að hafa skýran stefnu fyrir hönnunina og allt efni ætti að hafa verið safnað.
Skissa er lykillinn ef ég ætla að hanna eitthvað í vafranum. Ég get gróft út innihaldsefni með blýant og pappír, fengið endurgjöf og fljótt endurtekið í grunninn á hönnun minni.
Ég skissa byggt á áætluninni sem ég lýsti hér að ofan og ég er viss um að ég sé með öll innihaldsefni og kallar til aðgerða sem settar eru fram. Skissa ætti að vera fljótleg, ekki eyða miklum tíma til að bæta við neinu. Það ætti að vera nógu sterkt til að sýna viðskiptavininum en slæmt nóg að þú getur fengið þau lokið á innan við klukkustund.
Næst langar mig til að frumrita síðuna frá teikningum mínum í HTML og CSS. The frumgerð er mikið af gráum kassa með texta og myndum fyrir staðgengla. Gráu kassarnir virka sem gáma fyrir efni þegar ég byrjar í raun að hanna. Stærsti kosturinn í frumgerð með kóða er að viðskiptavinurinn geti haft samskipti við frumgerðina og séð hvernig síða arkitektúr virkar, þannig að ef eitthvað er slökkt eða þarf hreinsað getum við séð það núna frekar en á upphafsdag.
Áður en við getum byrjað að hanna þurfum við einhvers konar stíl til að byggja hönnun okkar af. Við þurfum að ákvarða liti og leturgerðir sem við munum nota með hugsanlegum áferð og mynstri. Þetta er þar sem stíll flísar koma inn í leik.
Stíll flísar voru búin til af Samantha Warren og ég hef notað þau um stund núna. Þeir hjálpa viðskiptavinum að sjá snemma og mjög einfaldan stíl fylgja sem við getum notað til að byrja að hanna með. Mér finnst gaman að búa til nokkrar af þessum til að sjá hver viðskiptavinurinn vill með þessum hætti get ég minnkað það niður í einn. Ég kemst að því að þetta er líka mjög mikilvægt í samþykki og hjálpar til við að koma í veg fyrir beinan höfnun.
Nú erum við tilbúin til að byrja að hanna. Ef þú ert vanur að hanna í hugbúnaði eins og Photoshop eða skissu er þetta ekki mikið öðruvísi. Notkun frumritaskrárinnar okkar byrjar að bæta við mocka efni í merkinu okkar. Á þessum tímapunkti vitum við nákvæmlega hvað er að gerast í hverju innihaldsefni í merkingunni og ristin hefur þegar verið skilgreind svo það ætti ekki að taka það lengi.
Nú ætla ég að byrja að laga stíl á efni mínu. Ég ætla að bæta við grunnstíll fyrir lit, leturfræði og útlit. Þegar grunnstíllinn er búinn mun ég stíga í burtu og líta á það. Mér finnst gaman að skjár skot tiltekinna hluta hönnunarinnar tilvísun seinna.
Þegar ég er ánægður með grunnlagið líkar ég við að taka athugasemdir um hvað ég á að betrumbæta. Byggt á þessum skýringum mun ég líklegast nota Photoshop eða Skissa að bæta við áferð eða eitthvað með áþreifanlegum tilfinningu. Photoshop og Sketch eru frábær verkfæri til að hreinsa flókin UI þætti hratt þannig að ég vista eitthvað sem gæti verið sársauki að kóðast meira en einu sinni
Ástæðan fyrir því að ég geri þetta er vegna þess að ég vil að kóða minn sé lélegur og hreinn og því meira sem þú kóðar, skrifar ummæli og eyðir, því meira slæmt og uppblásið kóða þín verður.
Ef þú þurftir að hanna í vafranum frá grunni í hvert skipti, það kann að virðast eins og þær taka að eilífu en ef þú byrjar frá sérsniðnum stöð, ramma geturðu útrýmt endurteknum skrefum. Til að byrja með hef ég sérsniðna útgáfu af Initializr sem ég nota með sérsniðnum móttækilegu rist byggt á Sass (http://sass-lang.com/). Notkun sérsniðinna ramma gefur mér upphafshugmyndir fyrir frumgerð og hönnun.
Að hafa safn af algengum UI-mynstur er einnig frábær leið til að byggja upp hratt frumgerð og það gerir hönnun í vafranum skilvirkara. ég nota Háleit texti að kóða og eitt sem ég hef lært að nýta mér er sérsniðin útlit sem þú getur búið til. Ég hef bætt við nokkrum afbrigðum af leiðsögn, listum, hliðarslóðum og öðrum algengum þáttum í lista yfir lista minn svo að ég geti fljótt sett þau í mína merkingu með einföldum aðgerðum. Ég nota líka reikninga á Codepen og JSFiddle til að vista mynstur. Dan Cederholm skapaði frábært WordPress þema til að geyma sameiginlegt mynstur sem heitir Perur . Það notar færslur til að geyma kóða sem þú getur breytt lifandi í framhliðinni til að prófa og forskoða breytingar.
Practice og hagnýt umsókn mun gera þér betur við hönnun í vafranum. Líkurnar eru ef þú gerir einhvers konar framhlið þróun sem þú hefur nú þegar grunn ramma til að byrja frá og þú hefur nú þegar nokkrar algengar mynstur til að nota.
Nú er allt sem þú þarft að gera er að byrja að hanna í vafranum og að lokum kemur þú upp á vinnustraum sem er skilvirk og vinnur í vinnslu þinni. Með æfingu munt þú aðeins fá hraðar.