Wireframe som visar sidans struktur. Vi valde att lägga allt innehåll på en sida av ett par skäl. 1/ Det är sannolikt en bättre användarupplevelse då allt innehåll är synligt och navigationen mellan sektionerna är enklare än sidbyten. 2/ Att minska antalet sidbyten minskar energiåtgången och tiden som spenderas på sidan. Det innebär alltså att mindre ström förbrukas i onödan.

Vi skapade tre olika stilriktningar och kunden fick välja den som kändes bäst att gå vidare med.

Spår 2- lavender valdes för vidareutveckling

Stilspåret implementerat på startsidan. Vi upptäckte snart att den nedtonade färgkontrasten ledde till problem såsom svårlästa texter och navigations-svårigheter. Särskilt de med en funktionsnedsättning skulle ha problem att navigera på sidan.

Moodboard för den uppdaterade stilriktningen

Målet med stilguiden var att förtydliga stilspåret som valts utan att tappa dess själ. Det innebär att jobba med tydligare färgkontraster och större fonter bland annat. Förutom tydlighet var det viktigt att uttrycka den dubbla innebörden i Petras konstnärsskap: musik och produktion genom att använda färg och form för att uttrycka kontraster.

Sidan i desktop-läge. Den är byggd som en lång scroll utan undersidor med en flytande meny som hjälper användaren att hitta rätt sektion snabbt.

Hemsidan på en större skärm. Tanken var att designen ska kännas likartad på såväl stora som små skärmar. Samma meny används därför på stora skärmar och rubriker anpassar sig för att påminna om utseendet på mobila enheter.

Startsidan i mobilläget. En FAB (Floating Action button) i grönt leder till en meny för sidan. Knappen hänger med oavsett scroll-position.

Menyn i expanderat läge. När man trycker på en länk som justeras "scroll-höjden" till rätt sektion på sidan. Innehållet befinner sig på en lång sida men för att minska scrollandet finns alternativen i menyn.