Hvordan å jobbe med et webbyrå

Skrevet av Frode Bjerved

DCode har mange partnerkunder som vi er teknisk partner til. Dette er reklame og designbyråer som sitter på stor kompetanse innen design og kommunikasjon, men som mangler eller ikke har kapasitet til å gjøre utviklingen selv. Det DCode hjelper dem med er den tekniske kunnskapen som skal til for å forandre de flate designfilene til levende websider.

Mange designere, artdirectors og formgivere føler det kan være meget frustrerende å ikke ha like stor kontroll på utfallet eller resultatet. Det som i trykkdesign er ganske satt og konstant er mye mer flytende i webdesign. I trykkdesign kan man definere farger basert på cmyk verdier og pantone vifter og dermed være ganske sikker på at resultatet vil bli slik man har tenkt. Å designe layout ut fra en fast størrelse er mye enklere enn å designe for enn en flate som forandrer seg basert på hva den blir vist på. Å tenke på navigering gjennom siden er mer som å skape et storyboard til en film, enn et trykkoppslag en annonse eller en brosjyre.

Når alt dette er på plass gjenstår den store jobben med å lage levende sider. Dette kan være nok et hinder dersom det er vanskelig å prate med sin tekniske partner. Hvis forventninger og krav er forskjellige kan utfallet fort bli preget av rotete kommunikasjon og en lang prossess mot ferdige sider. Vi på DCode har lang erfaring i å jobbe tett opp med våre partnerkunder og for oss er det viktig at vi gjør denne prosessen mot en ferdig webløsning så enkel og tydlig som mulig.


Så hvordan er det å jobbe med et webbyrå? Nedenfor har jeg skissert noen deler og faser av det vi gjør og hvordan vi jobber med dere.

 

Mål og behovsanalyse

For å få til en god og målrettet webside er den tidlige jobben før man starter på designet viktig. Dette inkluderer å få en god forståelse av kundens behov, og hva kunden ønsker å formidle gjennom nettsidene. Dette kalles en behovsanalyse.
Som partnerkunder er dette ofte noe dere allerede har gjort før dere tar kontakt med oss. Gjennom samtaler med kunden har dere avdekket og kartlagt disse behovene. For oss som teknisk leverandør er det viktig, i en innledende fase, å også avdekke spesielle tekniske behov. Vi vil kontrollere om det er definert et mål med siden? Om kunden har noen bestemte funksjoner de må ha? Om nettsiden skal knyttes til andre datakilder (eks et crm system, regnskapssystemer, medlemssystemer eller lignende). Om nettsiden skal trackes på noen bestemt måte? Om det er snakk om nettbutikk vil vi også avdekke spesielle behov her som betalingsløsning / frakt / gavekort mm.

 

Designfase og overlevering til oss

Etter en slik definering er det igang med det vanskelige og morsomme arbeidet som er å designe løsningen. Dette er noe dere vil gjøre sammen med kunden, men dere kan bruke oss i DCode og i denne prosessen. Blir dere usikre på om designet dere lager vil fungere optimalt på en nettside, vil vi med vår erfaring raskt gi dere tilbakemelding på dette, og i sammarbeid med dere komme med forslag på forbedringer og endringer.
Lager dere en spesiell nettside og er usikker på om designet blir en god nettside kan det være lurt å få en tilbakemelding fra oss før dere sender designet til endelig godkjenning fra kunden. Når dere sender designet til DCode vil vi gå gjennom designet og løsningen som dere har sendt. Vi vil prøve å avdekke om det er tenkt på ulike brukermønstre,  og om navigasjonen er klar og tydelig samt hvordan det er tenkt at siden skal brekkes opp i forskjellige skjermstørrelser. Vi ser på fonter - er det tenkt på en bestemt webfont, og om det er tatt høyde for fargebruk i forhold til universel tilpasning.
Når designet er “klart” og evnt designspørsmål er oppklart, så begynner vi å kode siden. Da legges alt inn i getynet platformen, og sidene tar form.

Getynet admin cms

Tilgang til cms

Når sidene nærmer seg 100% slik sluttproduktet skal se ut får partnerkundene tilgang til cms systemet, slik at de kan gjøre seg kjent med hvordan siden ser ut i Getynet cms. Det er her alle endringer av tekst og bilder gjøres. Her kan er det også mulig å legge til og endre brukere som har tilgang til å gjøre endringer på innholdet.

 

Legge inn innhold
 

Den siste fasen før publisering er å få lagt inn alt innhold. Dette står våre partnerkunder for. Vi kan hjelpe med å legge til innhold dersom ønskelig mot en avtalt timesrate. På større løsningner har vi og hjulpet til med å importere data fra eksisterende løsninger inn i den nye nettsiden.

 

Ferdig - gå live!

Når siden er klar er det viktig at kunden ser over at alt stemmer før nettsiden publiseres. Tiden det tar å gjøre siden LIVE på nettet etter at beskjed om at den skal publiseres er normalt ikke lang. Men det er litt avhengig av registrartjenestene (hvor domenenavnet er lagret/ administreres fra). Vi i DCode tar kontroll over denne prosessen og hjelper til for å gjøre prosessen så rask som mulig.


Noen begreper

prototyping
En slags interaktiv designskisse. Er ofte laget for å enklere forklare navigasjon og struktur av siden. Prototyping er ofte gjort i et webgrensesnitt eks Invision. Prototyping kan og bli gjort uten nett, eks i powerpoint/ keynote eller som en interaktiv pdf.

UX hensyn
UX er en forkortelse for User Experience , på norsk brukeropplevelse. Det er noe man har stadig mer fokus på. En god brukeropplevelse er ikke nødvendigvis bare på grunnlag av layout og design, men kan bli påvirket av språkbruk, tilgjengelige funksjoner, og ytre faktorer. Men i webdesign handler mye av dette om å tilrettelegge for brukere slik at de lett og oversiktlig finner den informasjonen de trenger.

Responsiv design
Betyr i grunn at designet tilpasser seg skjermen den blir vist på: Mobil, tablet eller desktop. Noen sjekkpunkter i forhold til design er om teksten er justert slik at den er lesbar på mobil og om  det er tenkt på at bildene lett skal kunne skalerest i layout. Viktig er også om navigasjonen brukes på alle enheter (mobil/tablet/desktop).

Analytics/tracking
Analyse eller tracking er å samle data om hvordan siden blir brukt, hvordan den blir funnet, og hvem som bruker den. Ofte er dette gjort i google analytics, et kraftig og gratis verktøy for å samle inn informasjon fra nettstedet ditt. Partnerkunder bruker dette ofte til å optimalisere websiden, og gjøre endringer slik at siden blir bedre, basert på hvordan siden blir brukt. Til kundene kan man levere rapporter på de punktene av trafikken som er viktig for den enkelte kunde. (Det kan være hvilket land brukerne kommer fra, hvilke eksternesider nettsiden henter den meste av sin trafikk fra, og om det er spesielle tider på døgnet hvor siden er mer besøkt enn andre osv.)

SEO
SEO står for søkemotoroptimalisering, med andre ord hvordan å sørge for at websiden blir synlig når noen søker på google / andre søkemotorer. SEO er ikke gjort i håndvending. Vi kommer til å ta for oss mer om SEO senere i bloggen.

 

Best mulig resultat med riktig filer, filtyper og struktur

Design skjer på papir, post it lapper, moodboards, og designsoftware. Vi ønsker ikke å blande oss opp i hvordan dere kommer frem til deres løsninger, men ytrer ønsker på hvordan vi i DCode raskere og mer effektivt kommer til ønsket resultat.

 

psd
De fleste utviklerene hos oss i DCode er godt kjent i photoshop. Å levere filer som utviklerne kan åpne enkelt og bruke som de er sparer oss og dere for mye tid. For å virkelig gjøre jobben best mulig og lage færrest feiltolkninger er det mye man kan tenke på i forhold til selve oppbygningen av psd filene. Her er noe av det dere kan tenke på:

Breakpoints / skjermstørrelser
De fleste prosjekt vi jobber med definerer 3 skjermområder.

  1. Desktop og store skjermer (1024pixler og opp).

  2. Tablet størrelser - stående og liggende (1024-768pixler) og

  3. mobilskjermer (320 x 480 pixler).

Noen vil si at disse størrelsene er gamle og mobilskjermene blir større, og det er delvis sant. Fremdeles bruker de nyere mobilene en størrelse på 320px som bredde på skjermen, men høyden varierer litt. Siden dekstop og mobil blir brukt om hverandre og i neste like stor grad, ber vi derfor gjerne om minst to designfiler (størst og minst skjerm), men tre dersom dere har ønsker som tilsier at dekstopversjone(den største)  ikke fungerer optimalt på tablet størrelser. Spesielt tar vi hensyn til hvordan for eksempel meny og navigasjon fungerer. Det er også viktig å tenke på hvordan man bruker mobil anderledes enn en desktop. Tenk tastatur og mus mot finger og touch.  Tenk på god lesbarhet på tekst på alle skjermer.
I Adobe Photoshop CC 2015 kan man og levere filer med flere artboards, da kan man levere en fil.

 

Folders /mappestruktur i fila.

Når designet skal deles opp i fornuftige layoutbiter er det lurt å gruppere layers i folderere. Vi liker å få enkeltsider i en folder, og enkelte seksjoner på siden i egne folderere. 
Eks _ OM OSS folder for om oss websiden, og under denne er det kanskje en folder som heter  “section1” , “section2”  og en som heter “kontakt oss skjema”. Dette er for å lettere forstå hva som henger sammen, og lettere ta tak i de elementene vi trenger for å fullføre utviklingen.


Labels / lagnavn

Merk alle layers som har betydning for designet med et fornuftig navn. Eks på filnavnstruktur kan være : Heading_blablabla, Paragraph_blablabla, Logo, Button, TextLink osv. Alle de elementene som skal til for et komplett design er det fint at dere merker så tydelig som mulig.

 

Active / hoverstates

Dersom man ønsker en bestemt effekt eller spesielle ønsker på hvordan lenker og knapper skal oppføre seg er det lurt å lage dette i et eget layer over den aktuelle lenken eller knappen. Kall lager active eller hover + layernavn.

 


Fargekoder

Ikke noe nytt her egentlig, vi bruker fremdeles RGB på skjerm, enn så lenge. Alle nyere programvarer har funksjoner for å finne hex kode (verdi) på fargene man bruker. Disse “websafe” fargene er definert av 6 tegn, disse bruker vi når vi koder sidene. Leverer dere en fargepalett med ferdig rgb eller hexkoder er videre arbeid mye lettere. Farger er subjektivt, koder er ikke. Husk å snakke med kundene om hvordan skjerminstillinger påvirker resultatet. Lysstyrke, kontraster, fargeprofiler gjør at skjermene ofte viser samme farge ganske forskjellig.

 


Fonter

Som mang en designer har forståelse for er ikke fonter bare -bare når det gjelder websider. Heldigvis er det fremskritt her og, så med webfont støtten som alle nyere browsere har står man igjen nesten fritt til å velge skriftyper i webdesign. Det man må huske på er å sjekke om fonten man vil bruke har en “webfont” - og at man kjøper lisens for å bruke fonten på det aktuelle domene. Google har mange fonter som egner seg meget bra på websider som er gratis å bruke.


 

Verktøy webbyrået bruker

Skype - for enklere og raskere tilbakemeldinger. Funksjonen del skjerm bruker vi ofte når vi tar et skypemøte for å gå gjennom webdesignet. Enklere å forklare når man ser på det samme. Tidsbesparende for oss da vi ikke bruker for mye tid på møter.

Mail - god kommunikasjon handler om tydlighet, det gjelder og gode tilbakemeldinger.

Bugherd - Et online verktøy for å gi tilbakemeldinger på websider som er i utvikling.

Invision - Et verktøy som er supert for å lage prototyper av statiske designfiler. Vi kan trygt anbefale dette for alle våre partnerkunder. Her kan man og samle tilbakemeldinger og benytte dette i en designfase for å samle godkjente skisser, skisser i utvikling mm.

Fargesjekker (Colour contrast checker) UIA - Sjekk gjerne font mot bakgrunnsfargen, for å se om fargekontrasten er god nok for å være universel tilpasset.

Vi har og erfaring i basecamp, visual studios og andre lignende prosjektstyringsverktøy.

Nerdspeak

Du trenger ikke nerdspeak for å jobbe med oss i DCode. Dessverre kan vi ikke love at du ikke kommer til å plukke med deg noen fraser og uttrykk som vi selv bruker, du vil altså etterhvert forstå litt nerdspeak. Noe av de mest brukte uttrykk som man hører og som de fleste etterhvert kjenner til er: css - kodespråk som definerer hvordan en nettside ser ut som f.eks. avrunding av knapper, fonter, farger mm. 
html - selve byggeklossene , stilaset i websidene. Vi er nå på versjon 5 av kodespråket, og det er både blitt enklere, men mye større og dermed mer overveldende å lære (kanskje). 
Javascript/JS - et annet kodespråk som ofte brukes til det som skjer på nettsiden etter at nettsiden er ferdig lastet.

 

Til slutt vil vi bare oppfordre alle til å ta kontakt med oss vi tar gjerne en tur innom for å dele av våre erfaringer i partnersammarbeid. Vi er stolte av våre partnerkunder og håper å kunne forsatt bidra til å få dere til å levere gode og veldesignet nettsider for deres kunder! 

Sharing is caring

Del artikkelen på sosiale medier

Mer digitalprat

nysgjerrig eller inspirert?