Vi har följt en design vi fått från ett annat team - Amorella. Vårt mål var att implementera designen för mobile, tablet och desktop på 8 arbetsdagar med chans att fråga om vägledning under tiden. Vi har använt oss av följande tekniker för uppbyggnaden av sidan.
Tech stack:
- HTML 5
- CSS 3
- Sass
- JavaScript
- GSAP
- Prettier
- Grid/flexbox
Animationerna på sidan har gjorts med Green Sock och CSS 3.
Samtliga skärmstorlekar:
- Länkarna i menyn blir understrukna inifrån och ut när man kommer till den sektionen på sidan.
- De små ikonerna på glasskorten åker upp och ned.
Mobile:
- En hamburgerikon som animeras till ett "X" när en drop-down meny öppnas.
- "NEW" på det första glasskortet på home-sektionen har en konstant pulserande effekt.
Tablet/desktop:
- "NEW" på home-sektionen har en konstant pulserande effekt.
- "NEW" på ett tredje glasskort ändrar färg med en en pulserande effekt.
Desktop:
- Bubblor bubblar upp från botten till toppen av sidan.
Design team Amorella @CarolineVarsaga @JariPii @Zileena6 @RalfiSlask
Developer team @LilithSWE @DiemBang @MustafaaMehdi @VictoriaLundberg
https://medieinstitutet.github.io/fed23d-grafiska-verktyg-amorella/
Ledord:
- Mjuk
- Lekfull
- Harmoni
- Lugn
- Händelserik
Vi har skapat en enkel sida där det samtidigt händer någonting. Vi har gett liv till sidan genom att lägga in:
- En stjärna bakom den nya glassens namn
- ”Bubblor”
- En vit våg (mobilläge)
- ”Glasspölar” i About-sektionen
- En ”månikon” ovanför footern, kan också ses som en glasskula
- Produktbilderna zoomas in när man hovrar över dem
- Den lilla "fruktikonen" animeras lite lätt när man hovrar över produktbilden.
Glass är mjukt, det vill vi förmedla med mjuka ändar och rundningar. Inga skarpa kanter.
Vi valde Modak som typsnitt då det känns lekfullt. Lite ”bubbligt”. Väldigt passande för den nya glassmaken ”Bubblegum Bliss”. För att bryta av det bubbliga typsnittet använder vi Fira Sans. Den är läsbar, enkel och lekfull på samma gång. Ett rundat typsnitt som går väl ihop med resterande element på sidan.
Färgen rosa är både lekfull och uppiggande. Den passar bra till ett glassföretag. Vi tänkte även att det hör ihop med Bubblegum.
Först hade vi tänkt använda mintgrönt som bryter av det rosa. Sedan ur ett tillgänglighetsperspektiv kan det bli problem om man är färgblind. Därför valde vi gult. Det bryter av på ett lugnt och harmoniskt sätt.
Knapparna är runda, som mycket annat på vår sida. I hoverläge blir de gula med en mörk border och text.
Här har vi kollat runt och tagit inspiration från andra glassföretags hemsidor. I mobilversionen blir den en hamburgermeny.