Seilmast 1.0. Et nettsidekonsept laget av Kevin Bodi for Kongelig Norsk Seilforening.

Transkript

1 Seilmast 1.0 Et nettsidekonsept laget av Kevin Bodi for Kongelig Norsk Seilforening. Stadig flere benytter seg av internettet til å få informasjon, planlegge og kommunisere. Det er viktig at man leverer tjenester som er brukervennlig og lett tilgjengelig for alle. Også de med nedsatt syn, nevrologiske eller kognitive hemninger. Derfor skal en nettside blant annet inkludere klare kontraster, enkel og forståelig navigering, kunne leses av TTS programvarer (text-to-speech) og verken være kognitivt, visuelt eller motorisk overbelastende. I dag bruker også mer enn 50%, internettet på mobile enheter og det er derfor veldig viktig at man kan levere optimale og skalerbare opplevelser for alle enheter. Seilmast 1.0 er designet for å overkomme disse problemene.

2 Seilmasten Det første du vil se når du kommer på en hovedside. Er delen som kalles en seilmast. Dette er ofte et bilde eller tema som dekker mye av skjermen. Denne delen er med på å sette en stemning og kan også styrke avsenderens troverdighet. I noen tilfeller kan også seilmasten benyttes til å gi en kort beskjed eller et CTA (call to action) og ha en medfølgende lenke. Uten en seilmast, en halv- eller heldekkende «splash screen» kan førsteinntrykket av siden og også organisasjonen bli påvirket av støy. I dette temaet brukes seilmast på hovedsiden, «dirigerings-sider» som shop-, medlem- og privatsiden og øverst i artikler. På grunn av seilmastens viktighet i temaet og dens klengende relevans med seiling, er det denne komponenten som har gitt navn til konseptet. En «seilmast»

3 Seksjontyper & Navigasjonsbar Nettsiden består av tre typer sider. Det er de offentlige sidene, medlemssidene og privatsidene. Hele tiden når du er på siden, indikerer headeren hvilken. Offentlig side Blå header indikerer at man er på en offentlig side. Dette er standardtypen og inneholder alle sider som er ment for å nåes offentlig og av søkemotorer. Medlemsside Rød header indikerer at man er på en medlemsside. Her er innhold som er laget for og kun er tilgjengelig for medlemmer. Privatside Gullheader indikerer at man er på en privatside. Privatsider består av innhold som bare er tilgjengelig for den innloggede brukeren. På mobil brukes det en bunn-navigasjonsbar som er «fixed» til bunnen av skjermen og synlig hele tiden. Denne løsningen er blitt mye mer vanlig fordi den ikke gjemmer bort viktige deler av siden. Bunn-navigasjonsbar

4 Knapper & Lenker Det skal være et klart skille mellom når man bruker knapper og lenker. Lenker skal helst kun brukes i brødtekst. Det vil si i tekst som er del av setninger, større avsnitt og artikler. Det anbefales at du bruker knapper til CTAs (Call-to-actions). Altså når du vil kalle brukeren til å utføre en handling. Knapper anbefales også å bruke i layoutet til å for eksempel få brukeren til å navigere til sider du mener er viktig for dem og finne og kan også for eksempel brukes til handlinger som en påmelding. Det er viktig at både knapper og lenker har en tydelig kontrast fra mesteparten av innholdet i siden. Knappene bør ha skygge og hvis de er over bilder, ha en 90% fyldighet (10% gjennomsiktighet). Har du flere knapper på en side, men noen er viktigere enn andre, bør knappene som skal prioriteres være røde og de andre blå. Bli medlem Prioritert knapp Les mer Mindre viktig knapp

5 Footeren Footeren er delen som man finner i bunnen over hele nettsiden. Footeren skal kunne skaleres etter dataskjerm, mobil og ultrabred. I dette konseptet ligner footeren veldig på den i dagens nettside. Her er sponsorene flyttet til footeren og skriftfargen og fargene på lenkene er mye tydeligere og i større kontrast med bakgrunnen. Man finner lenker til sosiale medier og ekstralenker som presse, pressefoto, arkiv og dokumenter er bare tilgjengelig her fordi det tenkes at de som ser etter dette ville sett her. Lenkene som havn, kran, nyhetsbrev, frivillig og lover skal også være tilgjengelig på steder som for eksempel medlemssidene og «min side». Til slutt kommer et obligatorisk logo etterfulgt av rettighetserklæringen.

6 Skalering Dataskjerm Mobil På mobil, halveres antallet kolonner. Ultrabred skjerm På skjermer bredere enn 1920 punkter, stopper innhold å ekspandere til sidene.

7 Forsiden På forsiden er den første handlingen brukeren blir vist, «Meld på Nyhetsbrev». Denne handlingen er valgt fordi nyhetsbrevet kan sikre at brukeren kommer tilbake og blir en fast bruker. Nyheter, medlemskap, om KNS og seilsportsenteret er de neste sidene en vil at brukeren skal sjekke ut.

8 Medlemssiden På medlemssiden, skal medlemmer kunne få informasjon om regattaer, kurs og andre medlemshendelser. Det skal også være tilgang til medlemsfordelsprogrammet, et forum for diskusjon og mulighet til å få nøkkelkort og adgang til brygga. På sidelinjen skal værmeldinger fra «Hav og kyst» vises, dette er tilgjengelig for fritt bruk fra Det skal også være en tidsplan som viser kommende hendelser (Denne tidsplanen skal ikke være en månedskalender, men en kronologisk liste over de neste hendelsene) Eksempler på hvordan værvarsler kan vises her Eksempel på en tidsplan

9 Privatsiden På «Min side» skal man få tilgang til å se kursene man har gjennomført, oversikt over kommende og utførte påmeldinger, kvitteringer fra kjøp og det skal være mulig å se medlemsnummer og informasjon man er registrert med. Det skal også være mulig å endre på noe av dette.

10 Shop

11 Artikler

12 Profil Tittelfont og farger er bestemt av reoslo.no Derimot har jeg bestemt brødtekstfont og ikon-font i dette konseptet Titillium Web Tittelfont Fargeprofil Font Awesome Ikon-font Roboto Brødtekst (Skal i hovedsak være farget #16243D)

13 Bilder Bildene brukt i dette prosjektet, tillater fritt bruk og er funnet på sider som unsplash.com og picjumbo.com. Jeg forteller hvor jeg fant bildene i tilfelle man skulle ønske å bruke de. Ingen Tittel Fotograf Ryan McGuire Kilde -> Søk «Water» Detail of Sailboat Bow Fotograf Viktor Hanacek Kilde Ingen Tittel Fotograf Taduuda Kilde Blue Leather Boat Shoes Fotograf Viktor Hanacek Kilde Ingen Tittel Fotograf Sonja Langford Kilde

14 Prototype Skissene er laget som en prototype som kan sjekkes ut her: I prototypen kan man: - Klikke på knappene på skjermen for å komme deg rundt. - Dobbeltklikke på et tomt sted og skjermen blinke der det er muligheter for å klikke. - Kommentere - Klikke på det røde «bokmerket» / «øret» øverst i venstre hjørne. Da kan man se skjermen slik den ville sett ut på mobil. I mobildelen kan man bruke «meny-knappen» / «hamburger-knappen» til å se datavisning igjen. - Bruke «Fullskjermknappen» øverst til venstre for å se siden uten mye forstyrrelser som f.eks rammer.