Layout og wireframes

Visuelt design

Når I i gruppen er enige om et godt informationsdesign, skal I præcisere, hvordan siderne skal se ud, og hvordan der navigeres gennem informationerne. Benyt wireframe/rough-teknik (bliver demonstreret - se desuden kilde til højre) til at producere skitserne.

Nu skal det til forskel fra før (informationsdesign/sitemap) være klart hvad, der er hvad. Benyt desuden gestaltreglerne (bliver gennemgået + se desuden kilde til højre). Overvej:

Placering (hvilke elementer er oppe, nede, til højre/venstre)
Størrelse (hvor store/små skal elementerne være i forhold til hinanden )
Farve (find frem til et forslag til farveskema ud fra teorien og gerne med hjælp fra https://paletton.com/
Evt. typografi (skrifttyper m.m.)
Interaktionsformer (menuer, knapper, links, scroll…)

(Grafisk design vil der blive gået mere i dybden med i Kommunikation & IT C efter grundforløbet)

Målet med det hele her er, at I skal have et design klargjort så I kan tage hul på næste skridt: kodning og prototyping.

Det kan derfor være en god idé hele tiden at have for øje, at det, der designes her, skal kunne implementeres (=fremstilles/produceres) ved hjælp af HTML og CSS

Løbende evaluering

Fidusen ved designfasen er, at man har nemt ved at diskutere og ændre i udformningen, inden man sidder med kodningen og de tekniske udfordringer, det giver.

Når man sammen med sin makker mener at være på plads med et godt forslag til et webdesign, skal det evalueres med henblik på at fange fejl og opdage forbedringsmuligheder.

Gå sammen med det andet makkerpar i netwerksgruppen og gå hinandens designforslag efter. Afprøv især:

om indholdet er prioriteret og fordelt på sitet, så man som bruger nemt finder frem til det man ønsker
om der er et gennemgående princip i layout (f.eks. om man er konsekvent med placering og størrelse på gennemgående elementer)
om layout følger gestaltregler og og øvrige principper for komposition og layout
om farveskemaet understøtter brugervenlighed og budskab

Dokumentation

Sørg for at få noteret, hvad du er nået frem til i løbet af aktiviteterne på dit StudieWebsite. Vis:

hvad målet med aktiviteten var
hvad du har fundet ud af om layout og wireframing
hvordan du har brugt det i dine skitser (som du har scannet/affotograferet)
hvordan det er blevet evalueret

Page updated

Google Sites

Report abuse