2.2 Byggeklosser

Ta for deg 3 varierte nettsteder fra forrige aktivitet.
– Definer hva som er nettstedenes byggeklosser og elementer.
– Lag en wireframe illustrasjon av hovedsiden på de 3 nettstedene, og sett navn på de forskjellige byggeklossene.

Først prøvde jeg å lage et oppsett av hvordan nettstedene så ut i Photoshop, men strevde en del med å få elementene på riktig plass og bytte farge. Åpnet Illustrator og fortsatte arbeidet der, og det gikk overraskende bra.

Valgte først å ta for meg nettstedet Apple for å bli mer bevisst på hvordan denne siden er bygd opp og hva som er elementene. Her er illustrasjonen min:

Boksene i illustrasjonen viser byggeklossene, mens teksten viser hvor de ulike elementene er plassert. I den øverste linjen finner vi logoen plassert til venstre, deretter en meny med en del kategorier, og tilslutt helt til høyre et eget søkefelt. Under menyen er det et stort bilde av et produkt Apple selger, og ved siden av bildet er det tittel og tekst, samt et lite bilde og en link. Helt i bunn av siden finner vi 4 små bilder av flere av produktene Apple tilbyr, og tekst til hvert bilde.

Mitt andre valg falt på ebay, som er ganske annerledes bygd opp enn Apple sitt nettsted. Her er illutrasjonen som viser hvordan dette nettstedet er bygd opp og elementer som blir brukt:

De fargede boksene viser byggeklossene til nettstedet, mens teksten viser hvor de ulike elementene er plassert. Den øverste linjen viser logo, tittel og linker, samt en liten meny til høyre. Den andre linjen er bygd opp med 3 søkefelt og en søkeknapp, siden nettstedet er designet for at man skal kunne søke opp det man er på jakt etter. Under søkefeltet finner vi en meny med mange kategorier til venstre og ved siden av en del bilder med tekst. Den nederste linjen viser logg inn og registrer deg felt, samt tekst til venstre, 3 bilder med linker i midten, og tekst, bilde samt knapp til å komme i gang til høyre på siden.

Tilslutt valgte jeg nettstedet til Maybelline, har er det noen elementer som gjentar seg, samt noen byggeklosser som er ganske ulike fra de andre nettstedene. Her er illustrasjonen min:

Boksene illustrerer nettstedets byggeklosser, mens tekst viser hvor de ulike elementene er plassert. Øverst på nettstedet finner vi Maybelline logoen, som er midtstilt. Under finner vi hovedmenyen som viser mange kategorier, og tilslutt et eget søkefelt. I midten av nettstedet og svært dominerende er det en reklamevideo som viser noen nye produkter. Under videoen er det en del bilder som man kan klikke på og kommer til andre sider. Nederst er det en liten meny og ikoner som du kan bruke for å følge Maybelline, enten det er på Facebook, Twitter eller Youtube.

– Annette B. D.

Advertisements

One thought on “2.2 Byggeklosser

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s