Samstarf milli hönnuða og forritara

Gott samstarf milli hönnuða og forritara er ómissandi þegar kemur að árangri verkefna. Okkar verkflæði gerir okkur kleift að mæta kröfum viðskiptavina, bregðast hratt við breytingum og eiga góð samskipti milli teyma.

Í þessari grein verður fjallað um þau tól sem við notum og aðferðafræðina sem við tileinkum okkur í samstarfi hönnunar- og forritunarteyma hjá 1xINTERNET. Þessi grein er skrifuð frá sjónarhorni forritara.

Það getur verið flókið að byrja að þróa verkefni frá grunni, sérstaklega ef ekki er búið að setja upp gott verkflæði milli hönnunar- og forritunarteyma. Sem forritarar, skiljum við ekki alltaf fyrirhugaða notendaviðmótshönnun, eða við misskiljum stíl eða hegðun þegar við erum að innleiða útlitssnið (e. layout structures).

Oft þurfum við að athuga og endurskoða hönnunina og skoða hvern íhlut (e. component) fyrir sig til að tryggja samræmi á milli þeirra. Stundum þurfum við að giska á hegðun ákveðinna þátta (t.d. “hover”-hegðun tengla) vegna þess að ekkert var skilgreint í hönnuninni um hegðun einstakra þátta.

Það er mjög mikilvægt að skilgreina góðan grunn og strúktúr fyrir verkefnin. Þetta auðveldar þróun þar sem við vitum nákvæmlega hvar við getum fundið þær upplýsingar sem við þurfum. Þar sem við notum alltaf sama strúktúr, getum við auðveldlega hoppað á milli verkefna. Sama í hvaða verkefni við erum að vinna, vitum við hvert við eigum að fara til að finna skilgreindar upplýsingar um stíliseringar. Hvernig skilgreinum við besta verkflæðið fyrir samstarf hönnunar- og forritunarteyma?

Staðfestingarfundir - samstilling hönnuða, forritara og viðskiptavinar

Góð samskipti milli teyma eru mikilvæg. Þess vegna höfum við reglulega staðfestingarfundi til að tryggja að vinna hönnuða og forritara sé í samræmi við þarfir viðskiptavinarins. Þetta er ómissandi hluti af ferlinu þar sem við getum rétt upp hönd þegar eitthvað er óljóst, eða athugað nýjustu breytingar til að ganga úr skugga um að þær séu rétt útfærðar (sérstaklega þegar verkefnið er komið vel af stað og undir lok þess).

Sami strúktúr til að auðvelda skipti milli verkefna

Við notum alltaf sama strúktúr fyrir sniðmát, sem þýðir að það er auðvelt að laga sig að hvaða verkefni sem er, þar sem þú veist hvar hægt er að finna alla helstu þætti. Sniðmátið virkar í raun eins og brú milli hönnuða og forritara.

Stöðugar endurbætur fyrir hámarksafköst

Við fylgjum svokölluðu “review / QA” ferli. Forritarar taka þátt í verkefnum frá upphafi til enda. Þetta þýðir að ef við finnum nýjan eiginleika sem við getum notað í öðrum verkefnum þá innleiðum við hann í grunnþemað og getum svo innleitt hann í öll verkefni.

Fyrir hönnunarteymið:

Hönnun er skjalfest í Figma, sem er tólið sem við notum til að halda utan um verkflæðið milli hönnuða og forritara. Þegar við höfum sett upp verkefni er auðvelt að afrita þau og endurnýta þökk sé skilgreiningunni á hönnunartáknum (foundations), mynstrum (patterns) og íhlutum (components).

Fyrir forritunarteymið:

• Lit fyrir “Atomic” hönnun byggða á vefíhlutum (e. web components).
• Storybook til að skoða og sýna breytingar, útlit og virkni vefíhlutanna.
• Tailwind fyrir stíliseringu.
• Drupal og Twig til að samþætta íhluti við raunveruleg gögn.

Þegar við hefjumst handa við nýtt verkefni er það fyrsta sem við gerum að setja upp grunnþemað og hönnunarkerfið.

Í hönnunarkerfinu höfum við “atomic hönnun”, sem þýðir að við búum til kerfi úr hlutum sem hægt er að tengja saman til að búa til þætti (e. elements) og sniðmát. Við getum endurnýtt þetta til að búa til skilvirk og endurnýtanleg viðmótshönnunarkerfi.

Með þessa aðferðafræði í huga höfum við gátlista yfir þá þætti sem hönnuðirnir þurfa að stílisera. Við getum gert uppfærslur sem eru byggðar á sniðmátinu og dregið þannig úr fyrirhöfn í upphafi, sem tryggir samkvæmni í verkefninu. Lærðu meira um meginreglur atomic hönnunar.

Þegar við höfum uppfært hönnunarkerfið með stílum fyrir nýja verkefnið (litir vörumerkisins, leturstíll, bil o.s.frv.), er komið að næsta skrefi: að nýta lausnirnar og samþætta við Drupal til að nota með raunverulegum gögnum.

Í upphafi verkefnis þurfum við að skilja kröfur viðskiptavinarins, síðan aðlögum við hönnunina, uppfærum íhlutina og að því loknu samþættum við Drupal.

Hér er dæmi sem útskýrir hvernig við notum þessa lausn og samþættum hana:

Sem dæmi, við erum með “spjald” (e. card). Spjaldið myndi kallast “web component molecule” í atomic hönnun. Við viljum samþætta spjaldið við Drupal en til þess að gera það verðum við að finna út úr því hvaða upplýsingar við viljum að spjaldið birti. Ímyndum okkur að við viljum að spjaldið birti smá upplýsingar um tiltekna bloggfærslu.

Til eru mismunandi “gerðir” af spjöldum, þau geta t.d. birt myndir, hlekki, dagsetningar, og/eða allt annað efni sem þú vilt. Í þessu tilfelli viljum við nota spjald sem sýnir titil bloggfærslunnar, höfund hennar og svo hlekk á færsluna í heild sinni. Í blogg-“content týpunni” notum við þessi “svæði” (e. fields) sem spjaldið getur síðan sótt upplýsingar frá. Þegar um er að ræða titil spjaldsins notum við til dæmis “label”, sem kallar á upplýsingarnar úr sniðmátinu. Það sama á við um annað efni sem við viljum að birtist á spjaldinu.

Svona kemur þetta út að lokum:

Við hjá 1xINTERNET höfum þróað þessa aðferðafræði til þess að styrkja samstarf milli teymanna okkar. Þetta hjálpar okkur að byggja verkefni á skilvirkan máta. Við höfum sett upp ákveðið ferli þegar kemur að samstarfi við hönnun og leggjum áherslu á gott samstarf milli hönnuða og forritara. Þessi nálgun hefur gengið vel hjá okkur og stuðlað að:

• Góðum samskiptum: góð samvinna meðal teymis er grunnurinn að árangursríkum verkefnum.
• Stöðugleika: hönnuðir og forritarar eru samstilltir.
• Strúktúr: þegar strúktúrinn er skýr og byggður á sniðmátum, getum við breytt, uppfært og fundið út hvað við þurfum. Þetta þýðir að kóðinn okkar er endurnýtanlegur og auðvelt er að halda honum við.