Mina personliga erfarenheter från gruppuppgiften som gick ut på att vi skulle skapa en fiktiv webbyrå med tillhörande webbplats. Resultatet hittar du det på Northern Skills webbplats.

Då sätter vi väl igång då!

Som grupp såg vi fram emot att börja med projektet, och att äntligen få börja skriva kod på riktigt, utan restriktioner.

Vi började med att dra in alla i samma slack-kanal och diskutera vilken typ av tjänst vår fiktiva webbyrå skulle kunna erbjuda. Eftersom vi bara är fyra anställda så bestämde vi oss efter lite diskustioner för att rikta oss till mindre företag, som vi kan erbjuda handgjort webbplattform åt. Vi filade på olika namn och beslöt oss tillsist för en kombination av Amelies och Magnus förslag och fastnade för Northern Skills.

Designprocessen

Härnäst var det dags för logotypdesign, jag gjorde en variant med en kompass eftersom jag ville framhäva “Northern” i vårt namn, men också för att av en händelse så började orden i vårt namn på N och S (som Nord och Syd). Vi beslutade oss dock för att använda Albins design.

Vi höll framförallt kontakten via skypemöten som vi hade lite då och då när det gick att få ihop för alla i gruppen. Vi designade vår skiss gemensamt över skype så vi alla kunde vara delaktiga i de grafiska besluten. Allt ifrån typsnitt till webbplatsens utformning var en gemensam process. Färgtemat på webbplatsen följde den logotypdesign vi valde att använda. Alla medlemmar kom med förslag och exempel på saker de tyckte om, eller tyckte var snygga och användarvänliga på andra webbplatser.

Bland annat rutsystemet i vår portfoliodel är inspirerad från en annan webbplats där de hade ett rutnät med bilder över projekt där de visade text om dem när man förde musen över. Vi valde att offra lite av det stilrena för bättre användbarhet i.o.m. att vi valde att alltid visa rubrikerna på våra bilder (så att de ska vara lättare för användaren att se vad de handlar om utan att behöva göra något extra jobb).

Kodaporna

Efter att vi kände oss nöjda så delade vi upp webbplatsen i olika sektioner (intro/landing, om oss, portfolio, kontakt, meny/header och footer) och gjorde kort för var och en på vår Trello-board, som vi använde för att dela upp arbetet samt se vilka delar som var kvar att göra. Jag åtog mig att koda intro-sektionen samt headern med menyn.

Det som funkade riktigt bra var våra återkommande skypemöten där vi kunde fråga om råd, diskutera lösningar och helt enkelt dela med oss av våra olika kunskaper. Efter att ha klurat ett tag på hur jag bäst kunde lösa min uppgift och testat några olika lösningar (och fått lite input från medlemmarna i gruppen) så gick det relativt fort att koda ihop den slutgiltiga produkten. Det fanns till och med tid för lite extra finslipning i form av animationer på vår logotyp i headern när man scrollar ner på sidan, samt en animation på hamburgerikonen som ersättert menyn när webbläsarens fönster är för litet för att få plats med hela menyn.

Och slutligen…

Alla i gruppen hade olika kunskapsnivåer när det kom till design och front-end-utveckling. Men jag tyckte vi löste projektet ganska bra utifrån de förutsättningar vi hade.

Uppgift B_4 där vi skulle bygga designen en gång till fast med hjälp av ramverk gick väldigt smidigt, framförallt då vi valde att använda oss av Bootstrap och jQuery, som är två ramverk (nåväl, ett ramverk och ett bibliotek) som vi nyligen haft föreläsningar om på kursen, samt att vi precis kodat webbplatsen en gång innan, gjorde att den uppgiften gick väldigt smärtfritt.