Uge 10 – Grids

Opgave 1
Du skal vurdere website’s design ud fra følgende:

– Design-principper
– Komposition
– Kontraster
– Grid
– Samlet oplevelse

Løsningsforslag

Jeg har kigget på www.waldkindergarten.dk

Forsiden er temmelig rodet og proppet med links, så der ikke rigtig er noget blikfang. Opbygningen af artikelteaserne i hovedindholdet er også meget rodet og ikke opbygget, så de hver især virker som en enhed, eks. står “Tags:” sådan lidt udenfor det hele (samtidig med, at de ikke bliver brugt, så de nok bare skulle deaktiveres).

Klikker man videre til næste side, bliver ondt til værre:

For det første, holder billederne ikke register. For det andet, ville det være meget bedre, at samle flere billeder eks. i en billed-slider eller som Lightbox-popup.

Selve sidens mood er ikke særlig “nej-hvor-børnene-hygger-her”-agtig; men mere steril og kedelig. Da denne børnehaves kendetegn er, at det er en skovbørnehave, kunne man sammen med logoet (et blad… som er skjult “nederst til højre” på siden) og ved brug af “skovfarver” (grøn, brun, gul eller lign.) skabe den rette stemning i forhold til børnehavens udgangspunkt.

Sidens informationsarkitektur trænger til en gennemgang. Der er forholdsvis mange links, så en gennemgang af, hvilke man evt. kunne droppe er tilrådelig. Jeg vurderer, at man kunne skabe en meget bedre og overskuelig struktur på indholdet, ved at gennemgå alle siderne og evt. vha. en card-sorting at oprette nye menupunkter så man bedre kan finde det man søger efterea.

Et sidste kritikpunkt jeg il nævne er,  at siden ikke er responsive. Her sidst i år 2018 burde alle sider også være optimeret til mobile-devices.

 

Opgave 2
Din opgave er at komme med et forslag til minimum 2 sider med ens brug af grids. Hver af de redesignede sider skal uploades til din portfolio – enten som håndtegnede sketches, wireframes eller endnu bedre som digitale mock-ups.

Løsningsforslag

Jeg har lavet dette layout hvor jeg har forbedret nogle af de kritikpunkter jeg nævnte i opgave 1.

Jeg har lavet layoutet i Photoshop og derefter lagt det over i Adobe XD så man får “hjemmeside-fornemmelsen”. Jeg har kun lavet en ny forside, men jeg har lagt en illustration ved, hvor man kan se det bagvedliggende 1200 px grid, som   jeg har brugt. Siderne kan ses her:

https://xd.adobe.com/view/6f235306-0f71-4fb0-75bc-58b61b3e099e-1912/