Arbejdsproces. Designparametre

Transkript

1 REDEGØRELSE Om opgaven Til denne opgave skal der laves et design til easynets nye hjemmeside. Den skal være moderne, simpel i udtryk og overskuelig. Fokus på brugervenlighed. Der skal designes forside, underside, casebeskrivelse, referencevisning, moduloversigt, kontaktformular og bestilling af materiale. Firmalogoet skal også redesignes. Programvalg Webdesign: Photoshop. Udvikling og design af logo: Illustrator. AFSENDER Webbureauet easynet ApS arbejder med forretningsorienterede løsninger til digitale medier. De udvikler til alle platforme og tilbyder eget opdateringssystem (CMS), som er fundamentet for alle løsninger. Easynet består af et mindre team af engagerede medarbejdere med et stort og kompetent netværk i ryggen. Det sikrer både fleksibilitet og adgang til specialister på en lang række områder. MÅLGRUPPE Virksomheder, der ønsker at udvikle, udvide eller forbedre den digitale profil og opnå en bedre udnyttelse af mediet. opgaven indeholder Brainstorm og mindmap. Skitser til webdesign og designproces. Udvikling af logo. Valg af farver og skrifttyper. Grafik og billeder fra Photoshop. FP Flowchart, storyboard og skelet. FP Indblik i fremtidigt webdesign. FP FP = Vedlagt i fysisk portfolie. Arbejdsproces Idéudvikling (inspiration hentet fra nettet). Håndtegnede skitser (typisk kun af forsiden). Designet opsættes i Photoshop, forskellige løsninger og udtryk afprøves løbende. (denne proces gentages flere gange) Bannerproduktion til hjemmesiden. Grafik og billeder laves i Photoshop og Illustrator. Alle filer til hjemmesiden optimeres til web. Flowchart, storyboard og skelet laves. Designparametre STIL OG STEMNING: Enkelt og overskueligt design, hvor teksten er en afgørende faktor. Siden skal være indbydende og give potentielle kunder lyst til at læse videre / kontakte easynet. Stilen må ikke ende med at virke nørdet, men derimod ambitiøs. BILLEDVALG: Købebilleder af computere og andet hardware er for upersonlige. Derfor er der lagt stor vægt på at skabe nogle bannere til forsiden, der har relevans for easynets ydelser. KONTRASTER: Tekst: Overskrifter vs. brødtekst, bold vs. roman, gråtone vs. orange, negativ skrift vs. almindelig skrift. Farver: Logofarver vs. pangfarver (skaber mere liv end en hjemmeside, der kun bygger på logofarver). Omgivelser: Farvet baggrund vs. hvid hjemmeside. Indhold: Tekst vs. grafiske elementer. Bannere: Billeder vs. tekst og grafik. KOMPOSITION: Resultatet af logoet er tilfredsstillende. Jeg er glad for den opnåede enkelthed og genkendelighed, og det har mange anvendelsesmuligheder. TYPOGRAFI: Der er udelukkende anvendt websikre skrifter, der sikrer at skrifterne gengives korrekt i alle styresystemer (Windows, ios mv.) og i alle browsere (IE, Firefox, Safari mv.). Der er brugt Helvetica til både overskrifter og brødtekst - derfor er der skabt kontrast gennem farvevalg, formatering og størrelser. Teksten til bannerne er Helvetica Neue (grafik). ÆSTETIK: Der er en god balance i sammensætningen af de forskellige elementer. Der er gode kontraster, og farverne supplerer hinanden godt. Siderne er holdt enkle og overskuelige, indholdet forstyrres ikke af unødvendig støj. Kvalitetsvurdering Det er svært at vurdere resultatet. Jeg har flere gange været tilfreds - og tidligere design er også blevet godkendt, men alligevel har min mavefornemmelse fortalt mig, at det stadig kunne blive bedre. Umiddelbart er jeg godt tilfreds med det nuværende webdesign, men som det fremgår af min proces, er designprocessen stadig ikke afsluttet og jeg arbejder på at ramme en endnu mere enkel og moderne stil anno 2013.

2 PRODUKT / WEBSITE

3 PRODUKT / WEBSITE

4 PRODUKT / WEBSITE

5 PRODUKT / LOGO

6 BRAINSTORM Chefens tanker: FOKUS PÅ REFERENCER OG CASES Det primære fokus har været at tydeliggøre vores referencer, da det er blandt det mest søgte sider på websitet. Målet var at trække de bedste referencer ud som en mere integreret del af websitet, herunder specielt på forsiden og med en forbedret referencevisning. Casebeskrivelser Fokus på referencer Få menupunkter Integere referencer Enkelt udtryk Skabe større helhed Referencer på forside Collage m. referencer Kun de bedste Dækker bredt Store billeder Fokus på mersalg Søgeoptimering Procesbeskrivelser Dynamisk banner Nyhedsvisning Høj forside Gråtoner + stafage Grafikbaseret Mere praleri Ingen faste rammer Simpelt budkab Kasse-layout Billeder i fuld bredde Mobilwebsites RØD = VALGTE ELEMENTER

7 MINDMAP

8 INSPIRATION

9 INSPIRATION

10 INSPIRATION

11 SKITSE / FORSIDE

12 VALG AF FARVER UDVALGTE HEX HEX HEX HEX # da8331 # FFFFFF # # ebebeb

13 VALG AF TYPOGRAFI OVERSKRIFT BRØDTEKST / LINKS UDVALGTE (HELVETICA) OVERSKRIFT (TREBUCHET) Brødtekst topmenu Trebuchet = 12 px. (HELVETICA) OVERSKRIFT MENU Trebuchet = 18 px. (HELVETICA) OVERSKRIFT Menutitel (negativ) Trebuchet = 10 / 14 px. (HELVETICA) Brødtekst (TREBUCHET) OVERSKRIFT (HELVETICA) Brødtekst BANNER Trebuchet = 36 px. (TREBUCHET) OVERSKRIFT LINKS Trebuchet = 18 px. (TREBUCHET) OVERSKRIFT (TAHOMA) Brødtekst Tekst Trebuchet = 18 / 24 px. (ARIAL) Brødtekst (ARIAL) OVERSKRIFT MELLEMRUBRIK MELLEMRUBIK Trebuchet = 18 px. (ARIAL) OVERSKRIFT (TREBUCHET) Mellemrubrik Brødtekst Trebuchet = 12 / 16 px. (HELVETICA) Mellemrubrik (VERDANA) OVERSKRIFT (ARIAL) Mellemrubrik (VERDANA) OVERSKRIFT (TAHOMA) Mellemrubrik

14 DESIGN / UDKAST 1 FRAVALGT: Siden bliver alt for mørk og grå. Der mangler kontrast, og skyggen på kasserne er for kraftig.

15 DESIGN / UDKAST 2 FRAVALGT: Forsøg med at integrere menu og banner. Men den sorte farve bliver alt for massiv og skriften er alt for lille.

16 DESIGN / UDKAST 3a FRAVALGT: Bedre fordeling af nuancer, men den er stadig for mørk. Teksten i bunden virker ubetydelig.

17 DESIGN / UDKAST 3b FRAVALGT: Giver alt for få muligheder for kommunikation. Flere områder til budskaber. Typografien mangler udtryk / kontrast - for ordinær!

18 OPSTART: NYT DESIGN Vi er ikke tilfredse med resultatet. - ønsker, tanker og nye muligheder diskuteres. Ny designproces begynder

19 SKITSE / FORSIDE

20 VALG AF FARVER UDVALGTE HEX # e5ab41 HEX # da8331 HEX # FFFFFF HEX # HEX # 6f6f6f HEX # 9c9b9b

21 VALG AF TYPOGRAFI OVERSKRIFT BRØDTEKST / LINKS UDVALGTE (HELVETICA) OVERSKRIFT (TREBUCHET) Brødtekst topmenu Arial = 10 px. (HELVETICA) OVERSKRIFT MENU (negativ) Georgia = 18 px. (HELVETICA) OVERSKRIFT Menutitel (negativ) Arial = 10 / 16 px. (HELVETICA) Brødtekst (TREBUCHET) OVERSKRIFT (HELVETICA) Brødtekst BANNER Georgia = 48 px. (TREBUCHET) OVERSKRIFT Links Arial Bold = 14 px. (TREBUCHET) OVERSKRIFT (TAHOMA) Brødtekst (ARIAL) Brødtekst Tekst Arial = 12 / 18 px. (GEORGIA) OVERSKRIFT (GEORGIA) OVERSKRIFT (GEORGIA) OVERSKRIFT (GEORGIA) OVERSKRIFT MELLEMRUBRIK (GEORGIA) Mel.rubrik (GEORGIA) Mel.rubrik (GEORGIA) Mel.rubrik Mellemrubrik Footer Brødtekst Georgia = 18 px. Georgia = 18 px. Trebuchet = 12 / 16 px. (GEORGIA) Mel.rubrik

22 DESIGN / UDKAST 4a FRAVALGT: Bedre kontrast mellem skrifttyperne (antikva vs. grotesk). Men virker stadig for grå og kedelig.

23 DESIGN / UDKAST 4b FRAVALGT: Forsøg med den sorte farve igen. Logo et falder uden for den ønskede stil - redesign af logo vedtages. De tre kasser i bunden er for teksttunge.

24 DESIGN / UDKAST 5 FRAVALGT: Opstart med mere enkelt logo. Brug af store ikoner, store overskrifter og få linjers indledning i de tre kasser i bunden. Men stadig for mørkt.

25 DESIGN / UDKAST FRAVALGT: Adresselinje og kontaktoplysninger sættes på. Siden virker rodet, for mange forskellige skriftstørrelser og pilene i banneret fungerer ikke.

26 REDESIGN AF LOGO ORIGINALT LOGO REDESIGNET LOGO

27 REDESIGN AF LOGO

28 REDESIGN AF LOGO CMYK CMYK CMYK CMYK 1 / 59 / 98 / 0 52 / 43 / 43 / 8 0 / 35 / 85 / 0 0 / 0 / 0 / 50

29 OPSTART: NYT DESIGN Vi er ikke tilfredse med resultatet. - ønsker, tanker og nye muligheder diskuteres. Ny designproces begynder

30 SKITSE / FORSIDE

31 DESIGN / UDKAST 8 FRAVALGT: Forsøg med den grå farve igen. Mere fokus på reference i banneret. Mindre ikoner (pladsbesparende) samt mindre skrift til adressebund.

32 DESIGN / UDKAST 9 FRAVALGT: Nyt logo brugt. Den orange farve fungerer som stafage og skaber sammenhæng mellem afsender og indhold. Men det bliver for orange og gråt.

33 DESIGN / UDKAST 10 GODKENDT: Ikoner bragt i mårkegrå (matcher mouseover-funktion på menu). Bedre ligevægt i farvevalg og god kontrast i typografi (snit, farve og størrelse).

34 DESIGN / UDKAST 10 FRAVALGT: Risiko for uligevægt i antal logo er og tekst. For mange farver. FRAVALGT: Siden bliver for tung i venstre side. Fin opstilling af logo er.

35 DESIGN / UDKAST 10 GODKENDT: Højre kolonne anvendes til variende information (CTA). GODKENDT: Højre kolonne kan også bruges til små billedvisninger.

36 DESIGN / UDKAST 10 GODKENDT: Casebeskrivelse med stort diasshow, beskrivelse af billeder og kunde. Fakta om kunden og projektet til højre.

37 DESIGN / UDKAST 10 FRAVALGT: Forsøg med forskellige visninger af referencer, der indeholder billede, overskrift og indledning.

38 DESIGN / UDKAST 10 FRAVALGT: Rerefencer på mørk / lys baggrund og mønster (matcher kundens brache). Men det er alt for tidskrævende i oprettelse og i vedligeholdelse.

39 DESIGN / UDKAST 10 NEEEEEEEJ!!! Det spiller ikke! Udkast 10 blev dog godkendt, men jeg er stadig ikke tilfreds. Siden er alt for grå, trist og kedelig, og den afspejler ikke virksomheden korrekt. Der skal bruges flere farver, en mere spændende opsætning og bedre udnyttelse af de typografiske muligheder. Jeg starter forfra! GODKENDT: Rerefencer på ensartet baggrund med samme formatering af billeder og tekst.

40 OPSTART: NYT DESIGN Vi er ikke tilfredse med resultatet. - ønsker, tanker og nye muligheder diskuteres. Ny designproces begynder

41 BRAINSTORM Chefens tanker: FOKUS PÅ EGNE YDELSER OG KOMPETENCER Vi erfarede, at mange kunder ikke vidste, at vi eksempelvis lavede mobile websites eller mobil applikationer. Derfor ønskede vi i højere grad at synliggøre vores kompetencer og ydelser. Dels gennem en konkret omtale af ydelserne og dels gennem et nyt koncept, som vi kalder reality web. Her viser vi, hvordan vi folder vores ydelser ud på konkrete projekter, som brugerne inviteres til at følge på tætteste hold. Første projekt gik ud på at komme til tops på Google og dermed en udrulning af vores kompetencer inden for søgeoptimering. Andet projekt handler om at drive en webshop. Fokus på kompetencer Banner m. referencer Store tekstmængder Gråtoner + stafage Få menupunkter Grafiske elementer Stor typografi Neutralt layout Online booking Tilmeld nyhedsbrev Call-to-action Casebeskrivelser Kontaktoplysninger Integrere reality-web Simple omgivelser Lys farveskala Blikfang via farver Fokus på fremskridt Fangende budskaber Gennemtænkt tekst Kolonneopsætning Synliggøre ydelser Mobilwebsites Brug af topbilleder Sort/hvid skala RØD = VALGTE ELEMENTER

42 MINDMAP

43 SKITSE / FORSIDE

44 VALG AF FARVER UDVALGTE - PRIMÆRE HEX # fbb040 HEX # HEX # ebebec UDVALGTE - SEKUNDÆRE HEX HEX HEX HEX # e6008c # 0d014b # 61095f # c1d945

45 VALG AF TYPOGRAFI OVERSKRIFT BRØDTEKST / LINKS UDVALGTE (HELVETICA) OVERSKRIFT (HELVETICA) OVERSKRIFT (HELVETICA) OVERSKRIFT (TREBUCHET) Brødtekst (UNIVERS) Brødtekst SEK. MENU HOVEDMENU Undermenu / aktiv Helvetica = 12 px. Helvetica = 20 px. Helvetica = 12 px. Helvetica Neue LT fås kun som web- (HELVETICA NEUE) OVERSKRIFT (HELVETICA NEUE) OVERSKRIFT (HELVETICA NEUE) OVERSKRIFT (HELVETICA) Brødtekst (HELVETICA) Brødtekst Intro / link Citatboks (negativ) Brødtekst (negativ) Helvetica = 40 px. Helvetica = 18 px. Helvetica = 12 / 20 px. font mod betaling (TAHOMA) Brødtekst (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (ARIAL) Brødtekst MELLEMRUBRIK (HELVETICA) Mellemrubrik Overskrift MELLEMRUBRIK Teaser Brødtekst / link Helvetica = 38 px. Helvetica = 20 px. Helvetica = 12px. Helvetica = 12 / 20 px. (HELVETICA) Mellemrubrik

46 DESIGN / UDKAST 11 FRAVALGT: Meget mere indbydende og overskuelig opsætning, men stadig får grå og orange.

47 DESIGN / UDKAST 12 FRAVALGT: Citatboksen bruges som fast element til at skabe kontrast og blikfang på vigtig information. Stadig for grå!

48 DESIGN / UDKAST 12 FRAVALGT: Brug af billeder er ikke optimal til den digitale branche, da det ofte bliver ligegyldigt fyld eller upersonlige billeder af elektronisk hardware, kontorlandskaber og lignende.

49 DESIGN / UDKAST 12 FRAVALGT: Billederne tager desuden alt for meget plads i forhold til vigtigheden af indholdet i forhold til billedet.

50 DESIGN / UDKAST 12 FRAVALGT: Citatboksen går dog igen i adressebunden (orange ikon) og som visning af aktiv menu (trekant fra citatboks under KUNDER).

51 DESIGN / UDKAST 12 FRAVALGT: Brug af citatboksens form til billedkasser bliver for meget og begrænser beskrivelsen under billedet.

52 FÆRDIGT DESIGN Forsiden GODKENDT: Fire nye farver er valgt som sekundære farver (se dem under valg af farver) til den grå og orange.

53 FÆRDIGT DESIGN Generel underside GODKENDT: Stor overskrift og tydelig indledning. Brug af citatboks som blikfang til højre kolonne til info til brugeren.

54 FÆRDIGT DESIGN Formular til mødebooking GODKENDT: Kontaktformular, hvor knappen skifter mellem de fire sekundære farver.

55 FÆRDIGT DESIGN Referenceliste og detalje i lightbox GODKENDT: Enkelt og overskuelig referencevisning med diasshow af produkt, hvor øverste venstre hjørne skifter i farve.

56 FÆRDIGT DESIGN Procesbeskrivelse GODKENDT: Procesvisning i forskellige farve, der giver godt blikfang og tydeligt gennemgår processens akter.

57 FÆRDIGT DESIGN Referencer m. logo er i sort/hvid GODKENDT: Referencevisning unden for meget tekst, men med fokus på kunderne.

58 FÆRDIGT DESIGN Moduloversigt (tilfældigt farvevalg) FRAVALGT: Modulvisning med de forskellige farver, dog for meget spildplads med de tomme felter.

59 FÆRDIGT DESIGN Moduloversigt (tilfældigt farvevalg) GODKENDT: Fem af kasserne har hver deres farve. De farvede kasser udvælges tilfældigt når siden indlæses.

60 FÆRDIGT DESIGN Modulbeskrivelse og forespørgsel VI BYGGER OM igen! Året hedder 2013 og efter halvandet år med det nuværende design, lægger vi atter hovederne i blød. Den nye stil bliver mere fokus på budskaber, mindre tekst, ny farveskala samt en mere enkel og forsimplet opsætning. Jeg starter forfra IGEN! GODKENDT: Fane til højre med mulighed for at sende en forespørgsel på materiale om hvert modul.