Regnskapsfirma


De siste ukene har bestått av å utforme og designe en nettside for et fiktivt regnskapsfirma igjennom WordPress. Noe jeg er kjent med fra før av, men fant raskt ut at jeg trengte å oppdatere kunnskapene mine endel. Siden er bygd opp fra “standard” malen (twenty eleven), og jeg har benyttet meg av “pages” på de fleste sidene, unntatt nyhetssiden hvor man kan legge ut nyheter som på en ordinær blogg. Jeg lastet ned en plugin for å fjerne muligheten til å kommentere sidene, hentet info og bilder fra ulike nettsider og har ikke lagt inn søkeord på siden (da dette er et fiktivt firma og tror ikke mennesker som er ute etter et virkelig regnskapsfirma trenger å få opp denne siden på google)

Brukte blå som hovedfarge og (relativt) symmetrisk design for å understreke at dette er et design for en seriøs og pålitelig side (noe jeg håper å ha oppnådd med harmoni og ro). :-)

Vet egentlig ikke hva mer jeg skal skrive om siden? Lekte meg litt med logo og navn, og håper å ha fått et ok resultat på siden generelt(?)

Trykk her for å se resultatet!

Layoutstiler – CURB – del 3

Fortsettelse av oppgaven Layoutstiler – CURB – del 1 - del 2

Jeg valgte å bygge opp et layout som er en kombinasjon av symmetri og asymmetri.
Av å søke litt rundt om på nettet kom jeg fram til disse punktene når det gjelder symmetriske og asymmetriske layout:

Symmetri
- Fremtrer mer formelt, ryddig og balansert.
- Ro, fortrolighet, eleganse, rent.
- Kan virke mer seriøst.
- Kan bli oppfattet som kjedelig, statisk.

Asymmetri
- Med asymmetri kan du skape balanse (likevekt mellom elementer på hver side), eller spenning ved å ikke ha balanse på siden.
- Åpner opp for flere muligheter i designet.
- Mer dynamisk, spenning, rørelse.

Kombinasjon
- En kombinasjon av symmetri og asymmetri kan enten utnytte de beste sidene fra symmetri og asymmetri og flettes sammen, eller bli oppfattet som rotete og kaotisk.

Uansett hva man velger å designe et layout ut etter, virker det som om balanse og likevekt er de viktigste stikkordene. Man trenger ikke å oppnå balanse og likevekt, men man bør være bevisst på dette, og ta valgt utifra dette.

Jeg valgte å benytte meg av en kombinasjon i et håp om å få et ryddig og oversiktlig layout, samtidig som det blir oppfattet som dynamisk og spennende.

Trykk her for å se resultatet // hovedsiden til nettstedet.

Layoutstiler – CURB – del 2

Fortsettelse av oppgaven Layoutstiler – CURB – del 1

Andre steg i oppgaven gikk ut på å velge en av skissene og utarbeide en wireframe (ved hjelp av grid)

(Da jeg startet å tegne opp wireframen og plasserte elementer fant jeg ut at skissen min ikke fungerte helt slik jeg hadde tenkt, så jeg justerte litt og byttet om på plassen på elementene nederst på siden)

Wireframe, plassering

 

Wireframe, med elementer plassert

Obg.4 Resultat

Jeg bruker Google Docs til å vise fram pdf-filen og av en eller annen grunn gjør Google Docs at kvaliteten på sidene ikke ser så bra ut, men hovedpunktet er at man får sett selve layouten.

Jeg tror jeg er fornøyd med resultatet, men det er litt vanskelig å si da det er flere år siden sist jeg har jobbet med layout på en slik kreativ måte. Magefølelsen sier at det ble bra, så da stoler vi på den! :)

Obg.4 Research

Utdrag fra fire forskjellige kokebøker, med fire helt forskjellige layout og uttrykk. (ps. husk å trykk på bildene for å se de større).

Etter å ha målt opp marger og guider på disse sidene, samt lest litt rundt om kring har jeg kommet fram til disse (litt varierende) grunnprinsippene man kan benytte seg av:

  • I sider som møter hverandre (spreadsider) er det ofte smalere marg innerst, en “regel” er at marginen ytterst på sidene skal være dobbel så tjukk som marginene innerst på sidene.
  • Det er også vanlig at margene innerst og ytterst er like store selv om sidene møter hverandre (spreadsider)
  • Margene øverst og nederst bør være omtrent like store, eller de bør være så ujevne i størrelsen at det vises godt (av det jeg har merket er det sjelden noe mellomting).
  • Alt på siden bør være på samme linje(align) som noe annet.
  • Siden bør ha et fokuspunkt (overskrift er f.eks. et naturlig fokuspunkt)
  • “Rules of Thirds”, visuelt del inn siden i tre deler, og plasser (de viktigste) elementene innenfor disse tre delene.
  • Enkelt, med sterke kontraster skaper ofte et kraftig layout.
  • Elementer rangeres etter størrelse, de største elementene er viktigst, mens de mindre ikke fult så viktig, blir layouten trang dropper man de minste elementene.
  • Øyet følger en Z når det leser av en side, det kan dermed lønne seg å visuelt se for seg denne Z’en og plassere viktige elementer deretter.
  • Repetisjon, font, farger og stil bør følges igjennom hele layouten.

Curb Magasin Layout

Slik ble da layouten til min versjon av Curb magasinet.
Jeg ville ha det enkelt og bestemte meg for å bruke en font og en (design)farge igjennom hele layouten. Jeg baserte meg på det opprinnelige oppsettet av margins og bleed, og lagde mine egne kolonner og oppsett innenfor det layoutet. For å få et litt mer helhetlig uttrykk har jeg benyttet meg av lorem ipsum til å fylle ut sidene med tekst der det skal være tekst.

Curb Magasin Layout Skisser

bakside + forside

to spread sider

Jeg ville ha et veldig enkelt og ryddig layout basert på asymmetri.
Baksiden er alikevel symmetrisk, da jeg så for meg at det stod i stil med det rene utseende jeg ville prøve å skape, og samtidig brøt opp i resten av layouten.
I spread sidene prøvde jeg å leke meg med asymmetri og samtidig skape balanse (balanse er behagelig å se på).
Jeg valgte asymmetri som en slags base for layouten min da jeg synes den layoutstilen er kanskje den mest spennende og dynamiske stilen, samtidig som den kan holdes ryddig og oversiktelig.

 

Grid, Margin


ps. på nederste bildet har jeg byttet ut de blå linjene med grønn, da det var blå linjer der fra før av i layouten.

1
margin topp: 12,2 cm
margin bunn: 9mm
indre margin: 8mm
ytre magrin: 8mm
kolonner: 3
kolonnebredde:  18cm
gutter: 3mm mellom tekstbokser, 7mm mellom tekstboks og bildeboks

2
margin topp: 7mm
margin bunn: 13 mm
indre margin:  5mm
ytre margin: 9mm
kolonner: 3
kolonnebredde: 4,4cm
gutter: 5mm og 6mm

3
margin topp: 1cm
margin bunn: 2cm
indre margin:  2cm
ytre margin: 8mm
kolonner: 3
kolonnebredde: 4,8cm
gutter: 5mm

4
margin topp: 3,8cm
margin bunn: 1,2cm
indre margin:  10mm
ytre margin: 8mm
kolonner: 3
kolonnebredde: 4,7cm
gutter: 7mm

Jeg synes alle sidene var godt lesbar. Jeg ser for meg at hvis man skal ha tynn gutter, trenger man tjukkere margins og motsatt for å beholde litt luft i layouten og det ikke skal oppstå som rotete.