Planering

Jag planerar alla mina projekt i Notion. Det är ett gratisverktyg som har många olika mallar för ditt projekt. Det finns tex att göra listor, möjlighet att lägga in bilder och möjligheten att skapa egna mallar med olika element. Jag skapar alltid en huvudgrupp för projektet och sedan underrubriker som tex, struktur (för hemsidan) och en att göra lista. Jag anser att det finns likheter med google drive men att detta är betydligt snabbare att arbeta i samt att deras app är väldigt bra.

Sidan för detta blogginlägget som jag började planera i Notion. Till vänster ser du strukturen för CriggzDesign.

Sitemap

Det första riktiga steget i processen är att göra en sitemap efter mötet med kunden. Detta gör jag för att kunden och jag ska förstå vilka sidor som behövs och hur de ska kopplas ihop med varandra. Jag letade länge efter ett verktyg som var snabbt att jobba i. Jag har tidigare jobbat i draw.io men det tog ofta lång tid samtidigt som det inte så tilltalande ut för ögat. Efter mycket letande hittade jag whimsical. Tjänsten kostar ingenting men ger då endast tillgång till ett få antal sitemaps. Men för min del använder jag inte många samtidigt så gratisversionen funkar för mig.

En enkel sitemap över min egen sida.

Wireframe

Whimsical har också stöd för att göra wireframes. Wireframes gör jag för att snabbt kunna göra enklare skisser av hur sidan kan se ut. Wireframes är lättare att göra om än om jag hade designat sidorna. När kunden är nöjd med upplägget går jag vidare för att designa sidorna.

En enkel wireframe av min startsida.

Design

Jag designar mina sidor i Adobe XD. Tidigare gjorde jag det i Photoshop men man märker stor skillnad i effektivitet då Photoshop snabbt börjar hänga upp sig om jag har många artboards. Med Adobe XD kan man enkelt ändra saker som komponenter och huvudfärger om man lär sig programmet. Jag har fortfarande en bit kvar för att få ut full kapacitet av programmet men jag gillar det verkligen. Andra program som kan vara bra i denna fasen är Sketch och Figma.

Hur min sida såg ut efter att jag designat den i Adobe XD

Prototyp

För att kunden ska förstå vart man hamnar när man klickar på knappar och länkar skapar jag prototyper i Adobe XD. Detta ger kunden än bättre bild av upplevelsen av hemsidan där man kan upptäcka problem i navigering som man inte tänkt på tidigare.

Hur kopplingarna ser ut på min startsida vid prototypstadiet.
Hur det ser ut att klicka sig runt i prototypen i Adobe XD.

Kodning

Efter att designen har godkänts börjar jag koda upp hemsidan. Detta är en väldigt stor process som kan förklaras i ett annat inlägg. Men jag kodar i Atom. Sedna utvecklas sidan i WordPress där man redigerar text, bilder osv.

Bildkomprimering

För att sidan ska ladda snabbt brukar jag komprimera mina bilder i Squoosh. Man kan komprimera på andra sätt men jag tycker att sidan har stöd för många olika format samt en slider som visar före och efter. Slidern gör det enkelt för mig att se om kvalitén är lagom eller om den behöver justeras.

Hur det ser ut inuti Squoosh när man komprimerar en bild.

The end

Detta var hela min process. Det finns mycket mer detaljer att gå in på som möjligtvis kommer i framtida inlägg.