Introduksjon

For å lage en god webløsning kreves et bra brukergrensesnitt, kode og ikke minst et bra design. Det kanskje ikke alle tenker over er hvordan designet teknisk sett skal implementeres på nettsiden. Mange designere i dag har vel kanskje mest erfaring med å lage grafisk design for trykk, hvor det er andre tekniske detaljer å forholde seg til.

I dette rammeverket ønsker vi å påpeke detaljer som er viktige å tenke på når man skal lage et webdesign, spesielt med tanke på layout, brukergrensesnitt og overlevering av designet til en utvikler.

Format på designet

Det viktigste for en utvikler er å kunne hente ut verdier fra designet, slik som marger, fontstørrelser, linjehøyde, farger og mer til. Dette er detaljer som er vanskelig å hente ut fra ei bildefil.

Før du begynner på designet bør du forhøre deg med den aktuelle utvikleren om hvilket format han ønsker å motta designet i. I mange tilfeller er Photoshop greit, men det finnes mange utviklere som blant annet kjører Linux eller som ikke har Photoshop eller ønsker å benytte andre verktøy.

Størrelse på designet

Mer enn 50% av trafikken på internett verden over kommer fra mobiltelefoner. I Norge er vi på litt over 30%. Det er derfor viktig at webløsningene vi lager fungerer like godt på mobil som på andre skjermer. Man bør derfor tenke design for mobil og for større skjermer. Hvis man har spesielle krav til visning på nettbrett kan designe spesifikt for dette.

For PC eller større skjermer bør designet være 1920px bredt, slik at du visualiserer hele skjermbredden på en full HD-skjerm. På mobil bør bredden være 360px, slik at du er sikker på at designet du leverer fungerer på de minste skjermene.

For nettbrett bør designet være i den bredden hvor du ønsker at layouten skal flyte over til i “nettbrettmodus”.

Typografi og tekstformatering

Hvis designet sendes i Photoshop eller Adobe XD, eller annen lignende programvare, klarer utvikler som regel å hente ut fontstørrelser, skriftsnitt, linjeavstander, avsnittsavstand, innrykk m.m. Men det blir enda mer produktivt om man setter opp en oversikt over de forskjellige tekstmalene som skal benyttes og hvordan disse typograferes:

Fontweight eller varianter av skriftsnitt

For å beskrive tykkelsen eller om skrifttypen er en halvfet, fet, mager eller en annen variant benyttes disse tallene i CSS. Her er standard konverteringstabell for de mest brukte variantene:

• 100 Thin (Hairline)
• 200 Extra Light (Ultra Light)
• 300 Light
• 400 Normal
• 500 Medium
• 600 Semi Bold (Demi Bold)
• 700 Bold
• 800 Extra Bold (Ultra Bold)
• 900 Black (Heavy)

Tekstmaler

Tekstmaler i HTML fungerer noenlunde likt i nettleseren når man velger ønsket mal som i andre programmer som benytter en slik ordning. Tekstmalene er forhåndsdefinerte og sikrer konsekvent og gjennomført typografi for nettstedet.

Standard tekstmaler som alle bør defineres:

H1 tittel Open Sans 300 34px/41px

Linjeavstand defineres i pixler (41px) eller faktor av teksthøyde. Ved faktor 1,2 vil linjeavstanden her bli: 34 x 1,2 = 40,8, avrundes til 41 pixler. Avstand før avsnitt er mulig å definere, men vi anbefaler at foregående tekstmal definerer avstand til neste avsnitt istedet. Avstand etter avsnitt = Margin bottom.

H2 tittel Open Sans 400 24px

H3 tittel Open Sans 400 22px

H4 tittel Open Sans 400 18px

H5 TITTEL ALL CAPS OPEN SANS 400 18PX

H6 tittel Open Sans 400 16px

P paragraf Open Sans 400 16px

Lister:

Trenger man å liste innhold bør typografien her også defineres og beskrives. Her er eksempler på punktliste og nummerert liste:

Punktliste:

• Tynn
• Lett
• Normal
• Medium
• Fyldig
• Fet
• Tung

Nummerert liste:

1. Tynn
2. Lett
3. Normal
4. Medium
5. Fyldig
6. Fet
7. Tung

Blokksitat (Blockquote):

Blokksitat er nyttig for å fremheve innhold, og benyttes ofte.

Blokksitat er en tekstmal som er avgjørende for å kunne fremheve og kommunisere viktig innhold!

Med et slikt kart tilgjengelig kan utvikler enkelt definere verdier tidlig i stilarket, slik at man slipper å definere dette for alle elementer. Dette gjør jobben mye enklere for utvikler, bedre for sluttbruker og man unngår samtidig unødvendig mye regler i stilarket.

Om malene skal variere mellom mobil/nettbrett/skrivebord bør du sette opp en oversikt for hver av disse.

Fargekart

Sett gjerne opp et fargekart som viser alle fargene som skal brukes i designet. For utviklere som bruker SCSS eller LESS kan dette settes opp som variabler tidlig i stilarket, slik at man enkelt kan skrive inn variabler i stedet for fargekoder videre nedover i stilarket.

 

Dette gjør det også superenkelt å endre fargene dersom det skulle skje endringer i fargekartet, ved at man kun behøver å endre de kanskje 5 variablene i stedet for reglene på hver enkelt plass hvor fargen er satt. Med andre ord kan man gjøre en endring som potensielt sett kunne tatt 15-30 minutter på 1 minutt.

Luft (margin og padding)

Før vi hiver oss ut i hva som bør gjøres her, bør vi se nærmere på hva margin og padding er.
Margin er luften som dytter rundt et element, mens padding er luften som dyttes på innsiden av et element (illustrasjon nedenfor).

De fleste designere har vel dette innøvd allerede, da dette også har litt med visuell presentasjon å gjøre. Bruk lik luft over alt.

Margin og padding kan gjerne være forskjellig, men margin eller padding bør være likt gjennom hele designet. Dette gjør det igjen lettere å sette opp stilark, da margin og padding også kan settes som variabler. I tillegg blir det enklere å beregne prosentvis bredde på kolonner og mer til.

Illustrasjon:

Layout

Det er når det kommer til layout må man tenke teknisk, spesielt om nettsiden skal bygges på et publiseringsverktøy som for eksempel WordPress.

Posisjonering av elementer

Alle elementer i en webløsning ligger praktisk talt under hverandre. Med CSS kan man riktig nok fikse dette, men man bør tenke på hvordan ting kollapser når skjermbredden endrer seg. Man bør også tenke over hva som skjer når elementer som ligger ved siden av hverandre endrer størrelse.

Skjermbredde

Vi anbefaler at du starter med å lage mobildesignet først, da det er mye enklere å skalere opp enn å skalere ned.

I hovedsak på mobil bør alt listes under hverandre, da det er lite plass til elementer ved siden av hverandre. Vi selv har vært på tanken med at horisontale slideshow med innhold/funksjoner kan være en flott idé, men har erfart at brukere ikke forstår dette helt. Den naturlige forklaringen er vel at folk flest er vant til at alt listes ut under hverandre på mobil.

Kort fortalt: desto mindre trykking/sviping, desto bedre.

Merk at elementer til venstre havner over, og at elementer til høyre havner under.
I hovedsak kan du snu en en-rekkers kolonne 90 grader med klokken for å visualisere dette.

Når du har mobildesignet på plass, kan du starte på skrivebordsdesignet. Her tar du enkelt de elementene du har på mobil, og setter de opp enten under hverandre eller ved siden av hverandre.

Gjenbruk av layouts

Lag et design per visning brukeren skal bli presentert med. Eksempler på dette er:

• Forsidevisning
• Sidevisning
• Innleggsvisning
• Arkivvisning/kategorivisning (utlisting av publiserte innlegg).
• Side for søkeresultater.
• Eventuelt 404-side.
• Eventuelle skreddersydde visninger for skreddersydde funksjoner.

Det er viktig og alltid ha i bakhodet at alt av innhold skal kunne redigeres, tenk derfor svært nøye over hvor innholdet vil flyte dersom det blir mer/mindre innhold. Samtidig vil vi anbefale at designelementer/moduler gjenbrukes over hele designet.

Kolonner

Et kolonneoppsett bør i de fleste tilfeller alltid få lov til å bruke hele skjermbredden. Årsaken er at det raskt blir ekstremt smalt når skjermbredden blir litt mindre.

Hvis du er usikker kan det alltids lønne seg å sende designet over til den aktuelle utvikleren å spørre om designet lar seg løse på en teknisk bra måte, eller om man eventuelt bør revurdere enkelte visninger.

Sircon kan WordPress, design-implementering og programmering samt drift av webløsninger basert på åpen kildekode.

Vi konverterer deres design basert på f.eks Adobe XD eller Photoshop til et ferdig, fullt fungerende, responsivt og fleksibelt WordPress nettsted. 100% klart til innlegging av innhold.

Vi tar også ansvar for domene, oppsett av midlertidig utviklings-nettsted samt migrering og lansering når alt er klart.

Fast lavpris: Fra 14.800,-

Ta kontakt for mer info.