Nettsideplanleggings Guide Alt du må ta stilling til når du skal planlegge din smaching nye nettside!
Introduksjon Hva denne guiden handler om.. Nettsiden din er en viktig del av ditt foretak om ikke den aller viktigste! Nettsiden din er mer enn bare et fint sted på nettet. Det er ditt salgsverktøy nr. 1. Og av den grunn er det ikke bare å legget ut noen sider og fine bilder, og tro at det er nok til at folk vil kjøpe dine tjenester eller produkter av den grunn. Planlegging er viktig! Og første steg for å kunne planlegge er å forstå de forskjellige aspektene på en nettside, og hvordan de fungerer sammen for å nå dine mål. (Har du ikke et mål ennå? På tide å få et!) Denne guiden vil ta deg gjennom de viktigste design- og layout (oppsett) elementene for en hvilken som helst nettside. Dette vil gi deg klarhet i hvordan du vil at din nettside skal se ut. Planer om å jobbe med meg? Å bygge en nettside er en prosess som krever en innsats fra begge parter. Jo, mer du kan fortelle meg om dine ønsker. Jo, mer forskning du selv gjør for å finne ut hva du ønsker. Jo, lettere er det for meg å lage en nettside som du vil være stolt av. Denne guiden vil hjelpe deg å svare på spørsmålene i arbeidsdokumentet. LA OSS GÅ I GANG!
Layout DET FINNES 3 HOVED TYPER OPPSETT, OG BAK DETTE LIGGER DET EN STRATEGI PÅ HVORFOR ET OPPSETT FUNKER BEDRE ENN ET ANNET PÅ SPESIFIKKE SIDER. HJEM SIDEN Den første siden folk kommer inn på, er den aller viktigste å planlegge mot ditt hovedmål. Tenk nøye gjennom hva du vil at kundene dine skal gjøre aller først når de kommer inn på nettsiden din, og la dette være det mest synlige elementet. Dersom du har flere forskjellige tjenester vil du gjerne at disse skal være godt synlig, i form av en boks, knapp eller stor skrift. Dersom du ønsker å bygge e-post lister, og har en fantastisk freebie, vil du gjerne at dette skal ha fokus. Har du planer om å dele råd og tips gjennom en blogg, vil du gjerne at de siste blogginnleggene dine skal vises på forsiden. Eller hele bloggen om du vil. STANDARD TEKST SIDE Tekstsidene skal legge vekt på innholdet for akkurat den siden, men også lett kunne vise vei til andre sider. Den kan f.eks. inneholde en sidemeny, eller annen type meny eller knapper som henviser til andre sider. Dette kan være til ande tjeneste sider, en booking side, et skjema osv. SALGS/LANDING SIDE På en salgs side er det ikke noen sidemeny og mest sannsynlig heller ikke en header eller bunnfelt. Dette er veldig effektivt for det gir brukeren kun fokus på det du vil vise og gir ikke mulighet for å raskt klikke seg videre. En salgsside er perfekt å bruke f.eks. som en kursside, eller på ditt hoved produkt som du vil vise frem. En Landings side har samme layout, men er mest vanlig ved bruk av nyhetsbrev eller gratis webinar, hvor du gir bort noe mot at kunden skal legge inn sin e-post adresse. Du styrer brukeren mot landingssiden din for å få dem til å gjøre en bestemt handling. HJEM SIDE LAYOUT TEKST SIDE LAYOUT SIDEMENY LAYOUT SALG SIDE LAYOUT
Header design HEADEREN ER DET FØRSTE NOEN SER SER NÅR DE KOMMER INN PÅ NETTSIDEN DIN. HVILKET INNTRYKK ØNSKER DU Å GI DEM? Har du en logo som du vil skal være godt synlig som er litt stor så kan den settes inn her. Hvis du ikke har en logo, så kan navnet ditt og en «tagline» gjøre susen. Kanskje du vil ha et bilde her, av deg eller noe annet som representerer foretaket ditt. Bildet kan ha full vidde, hvor det strekker se over hele siden eller det kan være i samme størrelse som innholdet. Du kan ha headeren smal eller den kan faktisk dekke hele skjermbilde, hvor brukeren må skrolle for å gå videre nedover. Jeg anbefaler deg å se rundt på andre sider for å sjekke ut hva du liker. Hva tiltrekker deg og hvilken følelse gir de deg? Dette vil gi webdesigneren din innsikt i hva som blir det rette valget for deg og ditt foretak. Her er noen eksempler på header layouts.
Bilder BILDER ER EN VIKTIG DEL AV NETTSIDEN OG DET FØRSTE DU LEGGER MERKE TIL. Det er bildene som viser hva du driver med og som gjør siden levende. Har du mulighet anbefaler jeg å bruke fotograf bilder. Da får siden din et innbydende og proft uttrykk. Det er ingenting som gleder mitt webdesignerhjerte mer enn når kundene mine leverer flotte, uttryksfulle bilder, tatt av en profesjonell fotograf. Det gjør min jobb så mye lettere. Dersom du bruker en fotograf, pass på å fortelle at du skal bruke bildene på en nettside. At du trenger forskjellig format på bildene, noen som er liggende (til bruk i headeren) og noen stående og firkantete til andre sider. Det er ikke en absolutt nødvendighet med fotograf, men skal du ta bildene selv er det ett og annet du må tenke over. Du må passe på at det ikke blir for mye «støy» rundt motivet du ønsker å fremheve. Ha fokus på det som skal være i fokus. Bruk vår venn Google og søk på «gode fototips», det er masse hjelp å få! Dersom du leter etter bilder på nettet må du være oppmerksom på at bildene kan ha opphavsrettigheter. Du kan ikke bare stjele andre sine bilder for å si det sånn. Det finnes mange sider hvor du kan abonnere og kjøpe proffe bilder her f.eks.: http://www.istockphoto.com/ Det kan være en god investering.
Farger HVILKEN FØLELSE ØNSKER DU AT DE BESØKENDE SKAL FÅ NÅR DE LANDER PÅ DIN NETTSIDE? Dette er et viktig spørsmål, da alle design elementene vil henge sammen med dette. Og ikke minst når det gjelder fargevalget. Vi bruker 4-6 farger. Blir det flere kan det fort se veldig rotete og forvirrende ut. Jo, flere farger dess mindre fokus på merkevaren din og det vil bli vanskeligere for de besøkende å bruke siden. Farger du trenger: 1 2 HOVED FARGER Disse brukes som primær farger for å sette an tonen. Disse utgjør ca 60%. 1-2 AKSENT FARGER Disse brukes på strategiske områder hvor du ønsker å rette oppmerksomheten mot. Knapper, overskrifter osv. 1-2 BASE FARGER Dette vil typisk være svart, grå eller beige toner som brukes på skrift og bakgrunner. Hvordan forstå stemningen og følelsen en nettside gir.. Ta en kikk på disse fargepalettene til høyre. Hver av dem gir en spesiell vibrasjon. Kan du se det? 1. Dristig og moderne 2. Rolig og avslappende 3. Morsom og fancy 4. Naturlig og organisk
Skrifttyper SKRIFTTYPER. SÅ MANGE MULIGHETER, HVORDAN ER DET MULIG Å VELGE? LA OSS STARTE MED DET GRUNNLEGGENDE. SERIF FONTS: DE FORSKJELLIGE SKRIFTTYPENE Du skjenner denne igjen ved den karakteristiske «halen» som er på slutten av bokstaven. (Dette er en klassiker) SANS-SERIF: Den har ikke hale, eller føtter. (Dette er Futura) HÅNDSKREVET/SCRIP: Denne sier seg selv og trenger ingen beskrivelse på hva den betyr. (Denne heter Dansing Schript) DISPLAY: De fancy e unike typene. (Denne heter Herculanum) HVORDAN SKRFTTYPENE BØR BRUKES HOVEDTYPEN Det viktigste her er lesbarheten. Med områder som inneholder mye tekst, ønsker du at det skal være godt leselig. Dette er ikke området for fancy e greier. Vi blir trøtt i øynene uten egentlig å tenke over det, og hva skjer da? Vi begynner å skumlese. Eller det som verre er, vi slutter å lese. Hold deg alltid til serif eller sans serif her. OVERSKRIFTER Her kan du vise litt personlighet. Er du litt fancy velger du en script. Er du moderne og dristig? Da kan du gå for en sans-serif med kun store bokstaver. Liker du det litt koselig velger du gjerne en håndskrevet skrifttype. Uansett så må du ikke glemme at du alltid ønsker å la de besøkende forstå overskriftene din, så ikke gå helt bananas for å si det sånn. SIDE TITLER/TAGLINES/GRAFIKK Her kan du gå litt mer amok med en unik skrifttype. Ha det gøy med display typen.
Nyttige lenker HER FINNER DU LINKER TIL MINE FAVORITT SIDER MED RESSURSER! SKRIFTTYPER http://ww.google.com/fonts - Gratis skrifttyper for overskrifter og tekster, som ser bra ut på alle datamaskiner. http://fontpair.co/ - Viser hvilke google skrift tyer som passer sammen. http://www.1001freefonts.com/search.php?q=lato&search=search - 1001 gratis skrifttyper. http://www.dafont.com/ - Enda flere fancy e skrifttyper. http://andreasweis.com/webfontblender/ - Her kan du teste ut forskjellige kombinasjoner av skrifttyper på en webside. http://www.hongkiat.com/blog/fresh-minimalistic-fonts/ - Gratis skrifttyper for et minimalisitsk utseende. FARGER http://www.design-seeds.com/ - Få fargepalett ideer. https://coolors.co/ - Fargepalett generator, lag dine egne paletter. https://designschool.canva.com/blog/100-color-combinations/ - Her finner du 100 flotte fargekombinasjoner https://designschool.canva.com/blog/website-color-schemes/ Flere flotte fargepaletter http://www.pictaculous.com/ - Her kan du laste opp et bilde å få generert en fargepalett ut i fra bildet. BILDER https://www.pexels.com/ - Gratis bilder https://stocksnap.io/ - Gratis bilder https://unsplash.com/ - Min favoritt med masse nydelige gratis bilder http://kaboompics.com/?ref=makerbook - Enda flere gratis bilder
Slutten KJENNER DU NOEN SOM PLANLEGGER Å LAGE SEG NETTSIDE? DEL DENNE DA VEL! Jeg håper at denne guiden var til hjelp enten du skal lage nettsiden din selv, eller du får en profesjonell til å gjøre det. Det er uansett masse planlegging du må gjøre i forkant. Hvis du skal jobbe med meg så bruk denne guiden mens du jobber deg gjennom spørsmålene til arbeidsdokumentet. Jeg vet at det kan virke overveldende med alt dette du skal ta stilling til, men jeg er der hele veien og følger deg steg for steg! Se her hvis du trenger nettside! FACEBOOK - CAROL@CAROL.NO