Lasswell s kommunikations model med feedback

Lasswell s kommunikations model med feedback

Faktark Webbureau - Visual Startup URL colourjuggler.it/visual/ Gruppemedlemmer Snezana Ilic colourjuggler.it/projects/sem2mod5.php cphsi57@cphbusiness.dk Klasse CLmul-b14e Årgang 2015 Kamila Melnyczok kamilamelnyczok.besaba.com/2ndsemester.html kamila.melnyczok@gmail.com Vejledere Kluge, Marc Rold, Morten Hinchely Hinchely, Jesper Tang, Frederik David Lützen, Merete Geldermann Frederiksen, Ivan Rosenvinge Skanderby, Ditlev Vestergaard Omfang Antal anslag: 2

Indhold Indhold Projekt beskrivelse 4 Valg af firma 4 Problemformulering 4 Idé udvikling og brainstorm 5 Moodboard 6 Prototyping 7 Designprincipper 8 Designprincipper 8 Elevator tale 10 Investor pitch 10 Budget 10 Forretning beskrivelse 11 Blue ocean strategy 12 Målgruppe 12 Budskab 12 Den gyldne cirkel 12 Markeds analyse 14 Interessent analyse 18 Risiko analyse 19 Use case diagram 20 Reklame udvikling 21 Læskærm 22 Reklame skitser 24 AIDA 25 Opgave beskrivelse 26 Logo 27 Logo skitse 28 Typografi 29 Farver 30 Pictogrammer 31 Gestalt love 32 Præsentationsdesign 33 Informations design 34 Interaktions design 35 Dokumentation for webudvikling 36 Grid layout 36 Simple Grid 36 Skitser 37 Wireframes 38 Mockups 39 Konklusion 40 Refleksion 40 Appendix 41 3

Introduktion Projekt beskrivelse Vi er 3 studerende der skal starte et firma efter eget valg. Vi må selv vægle type af forretning og hvilke type produkter vi udbyder. Der er krav om at firmaet skal være kommercielt, og skal illusteres vores faglige evner som multimedie designere. Vores målgruppe skal være rettet mod et niche marked. for flere at afprøve deres drøm om selvstændighed, uden en dyr opstart med potentiel stor gæld. Valg af firma Vi antager at vi er færdige med vores studie som multimedie designereog vi starter et webbureau sammen som udbyder hjemmesider til folk somhar en drøm om at sælge noget online eller har viden indenfor et område og promovere sig selv online for at sælge foredrag, ebøger eller kurser. Problemformulering Hvordan kan vi producere en visuel identitet til vores firma webside og reklame, så vi tilrækker kunder til vores forretning? Der er mange der har en drøm om at starte sin forretning. Vi henvender os specielt til folk der har en drøm om at starte op som enkeltmands firma gratis. HVordan kan vi lave et produkt der er anderledes end vores konkurrenter? Med vores produkt løsning kan vi gøre det attraktivt 4

Ideudvikling og Brainstorm Idé udvikling og brainstorm Vores projekt begyndte med en brainstorm, hvor alle vores gruppemedlemmer sat sammen og vi diskuterede alle vores ideer. Indtil vi kom frem til ideen med en webbureau, vi overvejede andre komercielle virksomheder som streaming service eller webshop. Ideen med en streaming service gik ud på, at vi laver en hjemmeside for mennesker der spiller komputerspil online og streamer det. Vi var nødt til at droppe denne ide på grund af uklart forretningsplan. Komputerspil streaming service passede heller ikke så godt til nichemarked, siden komputerspil er populær over i hele verden. Vores andre ideer var at lave enten en webshop eller en webbureau for enkeltmandsfirmaer. Efter en fælles diskussion vi blev ening om at en webbureau, som laver hjemmesider til værksættere er den bedste ide, fordi vi selv er ny opstarte. 5

Moodboard Moodboard Open sans OPEN SANS open sans Myriad Pro Myriad Pro Myriad Pro Tahoma TAHOMA tahoma 6

Metode Prototyping Vi har brugt prototyping so vores udviklings metode. Hovedformålet ved brug af prototyping metode er at involvere brugerne i et bruger test på design ideer og få deres feedback i den tidlige fase af udviklingen, således at reducere tid og omkostninger. Det er meget nemmere at ændre et produkt tidligt i udviklingsprocessen, end at foretage ændringer, efter at webstedet blev lavet. Det giver en effektiv måde at forbedre og optimere projektet gennem diskussion, udforskning og afprøvning. For at kunne udarbejde et prototyte vi var nødt til at ligge stor fokus på at designet af vores prototype passer til vores målgruppe. Vi har ført mange discussioner og en del analyser for at skabe et overblik over, hvad og med hvem arbjeder vi med. Vi startede med en SWOT analyse over vores firma, og Laswells kommunikations model. Denne model viser hvem kommunikerer med hvem, om hvad og hvordan. Vi har også brugt nogle elementer af scrum motode. Vi har ikke fulgte scrum metode så stramt, vi forholdte os kun til regelmæssige møder på skolen, hvor vi arbejdede sammen og diskuterede før fordelte opgaver, som vi lavede individuelt hjemme, og videre aftalte hvad vi skal lave, og tid på hvornår. I løbet af selvstændige arbejde hjemme, har vi valg at kommunikere via Facebook. Vi har lavet et fælles gruppe, hvor vi kunne dele det arbejde vi har udføret. På denne møde kunne vi se hvad de andre har lavet og give dem feedback. Til at planlægge hele projekts forløb, har vi brugt Gantt Chart. Vi havde problemer i gruppearbejde, siden en gruppemedlem var ikke aktiv og kom ikke til aftalte møder. Dette skyldes at arbejds processen blev langsommere, og projektet er ikke så grundig som det var planlagt. 7

Designprincipper Designprincipper Enkelhed Less is more. Design på vores hjemmeside er så simpelt så muligt, vi har kun det nødvendige med. Designet på hjemmeside er simpelt. Navigations menu har blot et par knapper og vores logo. Tekst og grafiske elementer på siden er begrænset til minimum. Selvom der er kun få grafiske elementer, de er nødvendige, fordi det er dem der giver livet til hjemmesiden, og indikerer hvad afsnittene handler om. Ensartethed Ensartede elementer har større relation end ikke-ensartede elementer. Vi har lavet nogle symboler/ikoner, som blev placeret i forskelige afsnitter på siden. For at skabe sammenhæng, blev de lavet som runde cirkler i den samme størrelse, og farver der gentagelser sig. Runde ikoner står i stærk kontrast med firekante knapper i navigations menu, og dette gør, at man få en klar sammenhæng i navigations menu, og man få en klar sammenhæng i indholdet. Genkendelighed Brugbarhed optimeres, når ensartede elementer opleves på en genkendelig måde. Vores hjemmeside er designet på en måde, der minder om mange komercielle hjemmesider. Logo er placeret i navigations menu, i venste højre hjørne, og footeren med kontakt oplysninger(- facebook, tweeter). Dette gør at siden er nemt at navigere rundt på, og på det møde bliver mere brugervenlig. Vores farvevalg på hjemmesitet giver genkendelighed, siden de samme farver bliver brugt til vores logo, ikoner og reklame. Grid På hjemmesidet har vi benyttet grids system. Den er et stort hjælp til at sætte elementer lige i forhold til hinanden. Brug af grids system giver et indtryk at sidet er velstruktureret. Luft Vi har anvendt luft på vores hjemmeside. Luft omkring elementer skaber opmærksomhed omkring dem. Jo mere luft er der omkring elementer, jo mere fokus bliver der omkring den. Grid Enkelhed Ensartethed og Genkendelighed 8

Elevator tale & Investor pitch & Budget Elevator tale Vi, i onlinekickstart.dk laver websites med visuel identitet, for iværksættere og nyopstartede enkeltmands virksomheder der har brug for at få kommunikeret deres hobby eller virksomheds idé ud på nettet, med en visuel identitet der er unik - der vil kickstarte deres virksomhed - realisere deres idétil forskel for sociale medier som facebook page, som er ens for alle, eller en template løsning vil (gøre hvad?) vi give vores kunder god og billig start i modsætning til andre web bureauer som surftown. com, blikfanger.dk, www.prowd.dk, kreate.bizder der er dyrere og på den måde ikke tager højde for iværksætteres start økonomi. Investor pitch Vi, visual startup.dk beder om 785.874 kr for opstart af firma til at producere hjemmesider til iværksættere til gældgæld af 20% om året 5 år, efter 5 år bliver det til 3,5m. Budget Vi har lavet regnskab for 1. og 2. år inkl. opstart beløb for 1. år. Vi har estimeret ud fra vores lønninger og lavet en gennemsnits beregning for hvad kunders minimuns indtjening for at dække vores omkostninger. Vi har estimeret en kapacitets beregning og har fundet frem til at at vi er om 5 år knap 17.6m værd. Vi har brug for et opstart beløb på knap 786000 ddk, som en vil få en IRR på 445%. 10

Forretningsplan Forretning beskrivelse Vores nyopstartede firma er et webburea der laver hjemmesider til iværksættere. Vores mål er at hjælpe personer med unikke evner og ideer, som gerne vil opstarte et firma, men ikke har ressourcer til det. Vi har udarbejdet e unik forretningsplan, hvor vi laver gratis hjemmesider med webshop, men vi tager 5% af kundernes webshop indkomst i 5 år. Vi har udarbejdet nogle regler i forhold til betaling for vores produkt service, som bliver beskrevet i en konrakt, som en kunde skal underskrive. Reglene går ud fra at i det første år kundernes indkomst fra webshoppen skal være 200.000kr i minimum om året. Hvis de ikke kan opfylde opstillende krav, bliver vi nødt til at opsige samarbejde med dem, fordi hvis de tjener mindre end 200.000kr om året, få vi ikke nok i løn for vores service og produkt. Vi har også tænkt os at som en del af service, laver vi support til vores kunder. Kunderne kan bruge supporten til at stille os spørgsmål hvis de har problemer med deres hjemmeside eller webshop. I det første år, efter vores fimates opstart, er der kun os tre medarbejder, derfor det bliver os der udarbejder hjemmesider og tilbuder support. I løbet af anden år, vi regner med at vi bliver i stand til at ansætte en webmaster, så firmaet kan tjene flere kunder. I løbet af det næste par år vi regner med at vores firma bliver mere populær og vi få endnu flere kunder, og på den møde udvikler sig. Kunde has a Kontrakt Kunde_id PK Afslut konkrakt NEJ kontrakt_id PK has a Forretningsplan Produkt produkt_id PK 1. år klausul opfyldt JA Kontrakt fortsætter 11

Forretningsplan Blue ocean strategy Blue ocean strategy går ud på at skabe et nyt marked eller at skabe et marked hvor der er få aktører. Hvis man vil ind på et marked hvor der er hård konkurrence og dermed også tage kunder fra andre virksomheder, befinder man sig på et red ocean. Webbureau er er et stort red ocean med utallige aktører og hård konkurrence, men vores anderledes forretnings model, gør at vi har skabt et Blue ocean. Målgruppe Iværksættere der vil starte enkelt mands firma. Målgruppe segmentering Geografisk segment Vores produkt henvender sig til det danske marked i første omgang. Demografiks segment 25-55, folk der har en idé eller viden de vil kommunikere/realisere på nettet og har brug for nogen der kan skabe den visulle identitet og lave website for at markedsførre sig dem. Adfærds segment Produktet henvender sig til folk der har noget viden de gerne vil dele og starte sin egen forretning op. Folk brænder for deres idé og derfor er villig til at investere i en ny hjemmeside og har brug for nogen der kan formidle deres idé online Budskab Gøre det let for iværksættere at blive selvstændig med en online shop. Den gyldne cirkel People don t buy what you do, but why you do it Simon Sinek WHY - Alle fortjener at en chance for at starte sin egen online forretning. HOW - Vi laver smukke hjemmesider og skaber en visuel online identitet, WHAT -ved at lave hjemmeside og webshop til enkeltmands firmaer WHAT https://www.youtube.com/watch?v=ipyecltxpxw 12

Markeds analyse Porter s five forces Michael Porter har udarbejdet en model, der fotæller at virksomheder er povirket af fem kræfter: truslen fra nye konkurrenter, kundernes forhandlingskraft, truslen fra substituterende produkter, konkurrencen i branchen, leverandørernes forhandlingskraft. Vi har benyttet denne model for at vise hvilke trusler er der for vores firma, og i hvilken grad hvilke trusler er til fare for os. Truslen fra nye konkurrenter manglende erfering det er ikke dyrt at komme på marked Ud fra modellen har vi vurderet at det er et marked med hård konkurrence fordi der er mange konkurrenter der laver hjemmesider. Det er et let marked at komme ind på, det kræver ikke så meget end at have lidt viden og en computer med det rigtige sofware til udvikling. Leverandørernes forhandlingskraft Konkurrencen i branchen Kundernes forhandlingskraft Vores kunders forhandlingskræft eksistere ikke, da hele aftalen står i kontrakten mellem udbyder og kunde. webredaktør/teskstforfætter programmør DIBS/NETS gateway betaling licences Adobe adnre web bureau garage projekter lav pga. konkrakt ingen bailout inden for det første 5 år Da der er mange andre der udbyder at lave hjemmesider, kan den service let udskiftes med et andet firma end vores. Selvom vi har en unik produkt løsning, vurdere vi at markeds styrken er høj for at blive erstratte med et andet firma eller service som løser samme overordnet problem som os - at lave hjemmesider. Truslen fra substituerende produkter gør det selv web aviser ebay salge varer selv facebook page http://www.quickmba.com/strategy/porter.shtml 13

Markeds analyse Markeds analyse Vi har undersøgt konkurrenters priser på produkt/service, og har fubdet 4 eks. som vi vil bruge til vores markeds analyse. 1) 3) 1) https://www.surftown.com/da/ Tilbyder ikke samme service som vi gør 2) http://blikfanger.dk/ har 3 produkter m. 1 pris 3) http://www.prowd.dk/produkter/website/ hjemmeside-priser 2 pakker med fast engangs pris 4) http://www.kreate.biz/webdesign/ny-hjemmeside/ 2 løsninger med mdl. afbetaling på hjemmens pris 2) 4) http://www.dgmedia.dk/multimedia/iv_rks_tteren-2015-001.pdf 14

SWOT analyse Styrker Svagheder Positivt Negativt Styrker Svagheder Muligheder Trusler h gige a i vestor ovgiv i g i a s krise o kurre ter ed lig rodukt arage ro ekter der laver det sa e so os Server ed rud Muligheder Trusler 15

TOWS Styrker Svagheder Hvordan bruger vi vores styrke til at udnytte vores muligheder? Hvordan bruger vi vores styrke til at mindske trusler? Interne faktorer (Firma) 1. Unik forretnings model 2. Ingen konkurrenter 3. Nye pœ markedet 4. Pris 1. Dyre i opstart 2. Manglende viden om at f re forretning 3. Manglende faglig viden 4. Nye pœ markedet 5.Tilbyder kun Žn produkt pakke. Hvordan påvirker vores svagheder vores muligheder. Eksterne faktorer (Marked) Hvordan sikrer vi at vores svagheder ikke forhindrer os i at få udbytteaf vores muligheder. Hvornår kan vi få udbytte af vores svagheder på markedet? Vores strategi er Maxi-Mini som tager udgangspunkt i styrker og trusler, man udnytter sine styrker til at minimere truslerne. Muligheder 1. Afh¾nging af investor 2. Garage web projekter 3. Server nedbrud Trusler 16

Lasswell s Indhold kommunikations model med feedback Afsender visuelstartup.dk Budskab Få din egen webshop og start egen virksomhed op Medie Både online og offline medier, rettet mod målgruppe - iværksætter blade og net sider. Evt. via interview af journalist. Støj på linjen Reklame bliver ikke set af tilstrækkeligt mange. Fanger ikke interesse hos målruppe. Bliver ikke eksponeret i korrekt medie der henvender sig til målgruppe. Feedback Målgruppen henvender sig til os. Reaktion/Effekt Reklamen skal gøre os synlige og lede potentielle kunder over på vores hjemmeside. Primær målgruppe Iværksættere Primær målgruppe 25-55 år 17

Interessent analyse Interessent analyse Hvad er interessenter En interessent omfatter alle der har interesse i eller vil blive påvirket af projektet. Analysen En interessent analyse viser hvilken magt og inflydelse interessenter har, som kan påvirke projektet og hvor meget interesse de har i projektet. Potentielle konflikter og risici. Om der er nogen negativ inflydelse, som er til fare for projektet. 1) Vores idé om at starte en webbureasu op, Webstart.nu, har til formål at hjælpe andre med at gøre netop dette, derfor er har vi enorm stor interesse i at vise at det vi tildyder andre, er noget vi selv har succes med. Vores indlydelse på projektet er stor, vi betemmer forretningsmodellen og produkt udvikler. 2) Vores kunders har interesse i at starte en egen virksomhed, og hos os tilbyder vi en unik produkt løsning som gør det gratis for dem at starte virksomhed online. 3) Vores forretning afhænger af investorer, der skyder penge i vores projekt og til gengæld forventer udbytte i fremtiden hvis det går godt. 4) Konkurenters interesse i hvordan det går vores firma, også større web virksomhedder som potentielt vil opkøbe vores webbureau. 5) Medier vi bruger til at markedsføre os i med reklame, berlingske business sektion og på hjemmesiden. 6) Kontorhotel som vi lejer os ind hos. 7) Leverandør af serverplads for vores firma og kunder. Vi laver reklame firmaet med vores samarbejde. Høj Indflydelse og magt Interessenter 1) Webstart.nu 2) Målgruppe 3) Investorer 4) Konkurrenter 5) Medier 6) OfficeHotel Valby 7) DigitalOcean Interessent matrix 6 7 4 5 3 1 2 Lav Interesse Høj 18

Risiko analyse Risiko analyse Modellen viser hvilke problemer vores firma kan møde undervejs. Der er tre niveau af risiko: lav grøn, moderat blå og høj rød. Vi har lavet et vudering om mulige problemer i firmaet, og hvor stor er sandsynlighed at de opstå. Man laver en risikoanalyse for at være forberedt til at imødegå de mulige risikoer. Risiko analyse 5 4 G H Grøn - lav A - problemer med server B - ingen internet forbindelse C - kommunikationsproblemer mellem kolleger 3 D Blå - moderat 2 1 B C E F A 1 2 3 4 5 D - udstyr der går i stykker E - manglende erfaring F - personelet er ikke kvalificeret nok (manglende kompetancer) Pink - høj G - manglende investor H - ingen fonde e 19

Use case diagram Use case diagram Diagrammet viser de funktionaliteter vi har på hjemmesiden fra kundens perspektiv og hvilke muligheder der på hjemmesiden. På højre side er firmaets muligheder og funktionaliteter vist og kassen repræsentere scenen for vores hjemmeside. Kunden skal kunne læse om produkt på siden, finde information om os og kontakt information og sende mail til os ved at udfylde kontakt form. læse om produktpakke oprette konto Når brugeren er logget ind de have mulighed for at overvåge trafik på sdien og web shop og få support fra webmaster. Vi skal have mullighed for at trække penge fra kunders shop konti, iflg. kontrakten. Medarbejdere skal kunne registrere kunder i systemet. Kunde LOGIN Trække % fra kunde shops Medarbej- Support Webmaster Udfylde kontakt 20

Reklame Reklame udvikling Reklamen skal kommunikere vores budskab ud til potentielle kunder og lede dem over på vores hjemmeside, hvor der er information om os som firma og vores produkt tilbud. Vi udarbejdet en annonce som har som opgave at reklamere vores ny virksomhed. Reklamen bliver placeret online på et ivæksætter online avis. Grunden til vi har valgt at placere annoncen på iværksætteren er fordi iværksætter er en avis der skriver til folk der har stor interesser i start af eget virksomhed. Det giver meget godt mening siden vores målgruppe er mennesker med ønske for at åbne eget virksomhed. Vores online annonce bliver placeret på iværksætterens hjemmeside i højre sidebar i størrelse 300x250 px. Reklamens udvikling Vi havde flere ideer til hvrodan reklamen skal se ud, men alle sammen passer til material design stil. Vores reklame blev lavet i Illustrator og forestiller 2 cirkler med vores tilbud produkt. De to cirkler kommer i to forskellige størrelser og farver. En af dem, som er placeret mest i centrum er i koral(rød) farve, den har også en skygge, hvilket giver effekt ligesom den ligger overpå den anden cirkle. I den røde cirkel er et tekst som beskriver vores tilbud i få order, især ordet gratis blev skev med kæmpe stor skrift. Grunden til akkurat cirklen med tilbud beskrivelsen er så stort, rødde og placeret i centrum og overpå er, at det er den der skal skabe interesse og gøre folk at besøge vores hjemmeside. Den anden cirkle er mindre og er blå. Vi har lavet den blå fordi vores hjemmeside er i primært blå nuancer. Firma start? VS VS GRATIS hjemmeside & Før vi kom frem til resultatet med en reklame lavet af to cirkler og meget få tekst, vores reklame så anderledes ud. Først har vi lavet et par cirkler i mange farver med mere tekst og grafiske elementer i dem. Vi blev nødt til at reducere tallet af elementer fordi vores reklame kommer i et lille størrelse, og alle elementer kunne ikke være synlig. Efter ændringer havde vi tre cirkler og en grafisk element. Her har vi lavet et lille forsøg hvor vi spørgte andre elever om kan de forstå vist i reklamen budskab. Der var mange der misforstået. Derfof vi har besluttet os at gøre reklamen så minimalistisk så muligt, men med et klart budskab. Nu står der Firma Start blå farve henviser til vores hjemmeside, og Gratis hjemmesider og webshop røde farve skaber opmærksomhed, mennesker modtager vores budskab, bliver nyskerrige, og som resultat besøger vores hjemmeside. webshop visualstartup.dk 21

Offline Reklame til busstopsted & blad Læskærm Reklame til bustop sted med QR kode for at kunne tracke trafik til vores hjememside via reklamen. Vi regner med at læskærm reklamen først kommer med på budgettet efter 1. eller 2.år. Ligeledes kan offline reklame til bladet iværksætteren indeholde en qr kode ti tracking af trafik til vores hjemmeside via bladet. Firma start? Firma start? VS VS GRATIS hjemmeside & GRATIS hjemmeside & webshop webshop visualstartup.dk http://billyelusiv.com/how-to-get-a-qr-code-and-track-it-with-google-analytics/ https://support.google.com/analytics/answer/1033867?hl=en 22

Online reklame preview Eksempel på vores reklame på http://www.ivaerksaetteren.dk/ 23

Reklame skitser Reklame skitser 24

AIDA model til reklame AIDA Modellen anvendes inden for marketing for at afgøre kundernes reaktion på produktet. Bogstaverne, der udgør denne akronym betyder: Attention (opmærksomhed) Interest (interesse) Desire (ønske/begær) Action (handling) A - vi fanger kundernes opmærksomhed ved at bruge få elementer, stærke farver og store bogstaver. I - vi skaber interesse med ordene Start firma? og Gratis. D - vi vil gerne kommunikere til dem der gerne vil starte firma. A I Attention/vække opmærksomhed Pink cirkel og tekst - især ordet Gratis Interest/skabe interasse Store bogstaver - Start firma A - reklamen skal få folk til at klikke på reklamen, som linker til vores hjemmeside, hvor man kan læse mere om vores tilbud. På print versionen er der en qr kode som kan scannes og ligeledes linker ind til vore hjemmeside. D Desire/ønske At starte et firma A Action/udløse handling Klikker eller scanner 25

Design brief Opgave beskrivelse Vi er 3 multimedie designere der har til opgave at start et firma efter eget valg. Vi har valgt at starte et webbureau, der også specialisere sig i ny opstartede firmaer. Målgruppe Målgruppe skal passe til et niche marked. Vi har vlagt at fokusere på en gruppe som gerne vil starte enkeltmands firma og på den måde føre deres drøm ud i livet. Firmaet Vi ønsker at designe en hjemmeside for vores firma som samtidigt skal fungere som showcase kunder. Hjemmesiden skal vise vores visuelle identitet, som osgå er det produkt vi tilbyder potentielle kunder og skal indeholde følgende - -One-pager -Logo -reklame (kun til vores firm a) Visuelt udtryk Farver Farver til produkterne, skal være kølige nuancer til hjemmeside, logo og reklame. Til interaktions beskeder på hjemmesiden, skal der være en grøn farve til bekræftelses beskeder og en rødlig farve til fejl beskeder. Baggrunds farve er gennemgående hvid. Billeder Da vores stil lægger mest vægt på det grafiske, vil vi ikke fokusere så meget på fotosi vores projekt. Logo Logoet skal identificere os som firma og afspejle den stil vi har valgt for vores firma, som er material design, og derfor skal være et grafisk element med logotype seperat, sådan at logo kan bruges på vores produkter. Logoet skal være ultra simpelt, med højst 3 farver eksklusiv hvid. Typografi Vi har bestemt at skrifttypen på vores produkter skal være meget simpelt og elegant. En sans serif som er let læselig både på print og web. Grafiske Elementer De grafiske elementer på hjememsiden skal bruges til at guide brugeren effektivt igennem og skal have et proffesionelt udtryk. Elementer som genbruges gennem hele designet som skaber klar sammenhæng på alle produkter. Tekster Tekst skal være letlæselig og skrevet det er let at forstå for alle. Usability Websiden skal være søgemaskine optimeret både i tekst og kode. 26

Designmanual Logo Vores første ide til logo var et symbol eller maskot som forestiller et dyr, og et logotype. Vores første bud var en slidpadde eller en myr. Grunden af valg af en skildpadde var fordi skildpadder symboliserer noget gammelt, noget som kan overleve gennem tiderne. Og fordi vi er et nyt firma, som prøver at virke troværdigt og stærkt ud, tænkte vi at skildpadden kunne være et måde at vise, at selvom vi er ny på marked og har ingen erfering, vi er i stand til udvikle vores firma og opfylde opstilede af kunder krav til os. Desværrer, efter vi har lavet et lille forsøg hvor vi spørgte mennesker hvad er deres første tanke når de ser en skildpadde, svarede de noget der er langsomt. Det vidste sig at skildpadden passer ikke til budskabet til vores målgruppe. Gennem vores visuel identitet, vi vil gerne vise at vi er hårdarbejdende og effektiv, ikke tværdigmode. også versus som man identificerer med konflikt og konkurrence, og vi mener at vores firma er venlig og fredelig. For at undgå de ubehagelige assiociationer, har vi valgt at tilføje logotype, som er vores firmaets fulde navn, til den grafiske element med VS ind i. Med den grafiske element på venstre side og logotype til højre, lige ved siden af, som resultat fik vi et logo fri af ugunstige konnotationer. Et andet bud for symbolet var en myr. I modsætning til skildpadde, myrer symboliserer hård arbejde, samarbejde og flid. Her vores tidligere forsøg med skildpadden beståede prøven; når man så en myr, man kom i tanker om noget flittig og effektiv. Men, selvom myrer er forbunded med flittighed, flste mener at de er ogå uhyre. Vi blev egnig om at det er den logo vi forsætter med, men selvom om det vi stadig have forskellige ideer i forhold til farver, grafiske elementer og opsætning af helhed. Baggrunden til logo er i blå farve, derfor vores første bud var et hvidt cirkel med inicialer og logotype i blå nuancer, som er brugt på hjemmesiden. For at logoet passer til vores valgte design stil, hvilket er matierial design, vi forsøgte at lave en stygge, ind i den grafiske element, såden at initialer kaster en skygge. Vi benyttede ideen med skyggen i alle forslag til logo. Sener skiftede vi farver. Hvidt cirkel er ikke længere hvid, men blå og teksten i den, samt med logotype blev hvidt. Til tredje forslag, vi lavede cirklen om til en hvid rektangel med blå initialer som kaster blå skygge, og logotype i den same blå nuance. Vi brugte den samme typografi til alle logo ideer. Det er et blanding af Open Sans Condensed bold og Open Sans Condensed light. Det lykkedes ikke med dyr som symboler, så ændrede vi vores tilgang til problemet. Vi byttede ideen med et symbol på på initialerne af vores firma. Vores første bud var et hvidt cirkel med firmaets initialer ind i. Det vidste sig at det var ikke helt en god idee siden vores firma hedder Visual Startup, og det vil sige at initialer hedder VS, som er assiocieret med den danske kommunistiske partii. VS betyder Vores finale valg af logo er den med et hvidt cirkel med teskt og logotype i blå. Grunden til denne valg er, fordi vi bruger lignede grafiske element i vores reklame. Når de grafiske elementer gentagelser sig på en reklame og på hjemmesiden, hvor logoet blev placeret, vores firma bliver tilknyttet til denne grafiske element, og hver gang man ser cirkler, vil man tænke om vores firma. VS VS VisualStartup #2a65b0 #ffffff open sans condensed light open sans condensed light VS open sans condensed bold #ffffff #468fcc #468fcc open sans condensed bold #2a65b0 open sans condensed bold Visual Startup Visual Visual #ffffff open sans condensed light #ffffff VS 27

Logo skitse Logo skitse 28

Designmanual Typografi Vi valg at bruge Open Sans, Open Sans Condensed og Oswald igennem hele vores projekt, vi har anvend dem til hjemmeside, reklame og logo. Open Sans bruger vi til brødtekst, Open Sans Condensed til alle overskrifter og main menu. Til logoet har vi brugt et blending af Open Sans og Oswald bold. Grunden til at vi valgt Open Sans er fordi, den blev optimeret til web, mobil og tablet interface, og til print. Open Sans har et venligt udseense. Den blev designet med en opretstående stress og åbne former. Open Sans er letlæselig, hvilket skylder sine karakteristiske, enkelte og elegante tagn. I vores logo har vi valgt at brugt Open Sans Condensed light i tegnet V, og Open Sans til ordet Visual. Vi også brugte Open Sans Condensed bold i tegnet S, og Oswald bold til ordet Startup. Grunden til dette valg er, at vi gerne vil understrege ordet Sturtup, fordi der er det vores firma gør, strater enkeldsmand virksomheder. Grunden til at vi valgt at kombinere de forskellige typografier er for at skabe et visual indtryk, at vi prioritererer Startup ovenfor Visual. A B C D E F G H I J K L M N O P R Q S T U V W Y Z Æ Ø Å 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P R Q S T U V W Y Z Æ Ø Å 1 2 3 4 5 6 7 8 9 Open sans italic Open sans italic Open sans condensed Open sans condensed Open sans condensed bold Open sans condensed bold Oswald bold Oswald bold 29

Designmanual Farver Vi har valgt nuancer af blå og hvid som vores primær farver. Grunden til dette vægt er, at disse farver skaber ro og virker trovædig. Vi bruger dem på hjemmesiden og logo. Som sekundær faver har vi valgt grøn og koral(rød). Dem har vi brugt til grafiske elementer og validerings beskeder på hjemmesiden, og til reklamen. Vi har valgt farver ude fra material design farve palette. Farve i material design er inspireret af dristige toner dybe skygger og lyse højdepunkter. Farvepalet omfatter primære og farvenuancer, der kan bruges til illustrationer eller udvikling af vores visual identites farver. De har været designet til at fungere harmonisk med hinanden. Farvepaletten starter med primærfarver og udfylder i spektret at skabe en komplet og brugbart palet for Android, web og ios. Pink Pink er en stærkt farve, som skaber opmærksomhed. Derfor har vi brugt det til reklamen, præcist der hvor vores tilbud er beskrevet. Vi bruger rød farve også på vores hjemmeside. For at markere login knap i navigations menu, og til afviste beskeder. I det sidste tilfælde vækker pink farve opmærksomhed. #0d47a1 #1976d2 #0d47a1 #1565c0 #2196f3 #2196f3 Blå #64b5f6 #e3f2fd #e3f2fd Blå farve symboliserer tillid, ærlighed og loyalitet. Blå bliver brugt igennem hele vores hjemmeside, fordi fra psykologisk perspektiv, blå giver pålidelig og ansvarlig indtyk. Hvid #eceff1 #eeeeee #f5f5f5 Den farve er symbol på renhed og perfektion. Den virker reflekterende, vågner kreativiteten. Hvid kombineret med blå farve skaber indtryk at vores firma er professionel og der er plads til kreativitet. Grøn Grøn er et veling og positivt farve. Den bruger vi til grafiske elementer og til en en godkendt besked hjemmesiden. #fafafa #00e676 #ff4081 30

Designmanual Pictogrammer Vi bruger grafiske elementer som grafisk fremstilling af tekst. Ved at kunne se og læse informationer, kunder vil kunne huske teksten bedre (hvis de kan indentificere teksten med grafikker). Disse grafiske elementaer har vi brugt til vores kontakt oplysninger. Globen viser hvor vi befinder sig, og når man trykker på pillen, så åbner sig en googlemaps side med vores præcis adresse. Mobil ikone er placeret ved siden af vores telefon nummer. Kuvertet stå over for vores email adresse. Denne grafik bruger vi til beskrivelse af vores firma, altså hvem vi er. Vi brugte blå farve fordi dan giver indtryk at vi er professionelle. Det her forestiller et værktøj, som symboliserer arbejde. Denne grafik bruger vi til oplysninger om hvad vi læaver. Disse ikoner brugte vi til footer på hjemmesiden. Hvis man trykker på dem, så åbnes der vores facebook page, twitter og mail. Denne grafik bruger vi til at beskrive vores mål hvorfor laver vi det. 31

Gestalt love Gestalt love Gestaltpsykologi forsøger at forstå psykiske fænomener ved at se dem som organiserede og strukturerede helheder, dvs. at Genstalt lov hjælper at lave et velstruktureret hjemmeside, der giver vores brugere god oplevelse af brug af vores side. Nærhed Loven om nærhed Det kan klart ses på vores kontakt form. Mellemrum mellem de hvide felter forbinder elementerne i en gruppe. På det måde kan brugeren se at de elementer skal ses som en samlet gruppe. Vi har brugt grid system for at få elementer på de samme linjer og afstand. Lighed og enkelhed Loven om lighed Dette btyder at elemener som har den samme størrelse, farve og from skal ses som adskilte objekter, ikke som en gruppe. Det har vi anvendt på grafiske elementer i fx sektion om os. Grunden til det er at et grafisk element tilhører til en konkret tekst. Loven om enkelhed Vi benyttet denne lov fordi vi valgt at lave hjemmesidet så simpel så muligt, og på det møde afsendte budskabet til modtagere. 32

Præsentationsdesign Præsentationsdesign Siden vores virksomhed er helt ny, skal vi gøre noget udstående og tiltrækkende på vores hjemmeside, så besøgende, og potentielle kunder kan se, at selvom vi er ny, er vi også profesionelle og troværdige. Komposition Fordi vi er et nyt firma og via vores hjemmeside vil gerne skabe indtryk på kunder at vi er i stand til opfylde deres ønsker, har vi valg at lave logo som forestiller firmates initialler i et grafik forom, og logotype. Selve logoet er ikke lavet i et stort størrelse, men den findes på main menu på toppen af siden, så er den altid synlig. Vi har valg at bruge nuancer af blå farve til main menu og selve hjemmeside, da er den et beroligende og skaber trygt. Siden komposition på vores hjemmeside er elegant og simpel, møder det kundernes behøv for nemt og funktionel hjemmeside Design Vi har besluttet at vores hjemmeside skal være så minimalistisk som muligt. Material design er en minimalistisk design tilgang med brugervenlige interaktion. Materialdesign karakteriserer sig med skarpe kanter, lyse farver og tre-dimensionelle / flade illustrationer. 33

Informationsdesign Informations design Det er vores stor interesse at give brugere/kunder et nemt adgang til alle oplysninger lagt på vores hjemmeside. På firmaets hjemmesiden kunder finder kun de oplysninger og de informationer de skal bruge til køb af vores produkt. Ved at lægge kun de relevante og kort beskrevet informationer på siden, bruger/kunder taber ikke interesse af vores produkt. Vi har valgt at lave en onepager, og det vil betyde at man bliver nødt til at scrolle langt ned på siden. For at gøre det lettere har vi valgt at main menu er fixet og er hele tiden synlig, så hvis bruger bliver tabt main menu kan hjælpe frem. I forhold til vores målgruppe, alle informationer på vores hjemmeside skal være præcise og relevant, men beskrevet kort og konkret, det kan ikke være for tungt, ellers mister man interesse. 34

Interaktionsdesign Interaktions design I designet af interaktion på vores hjemmeside har vi lagt stor vægt på brugervenlighed. Vi har forsøgt at kunder har mulighed for at kontakte os/support. For at gøre det, bliver kunder nødt til at udfylde felter selv og afslutte transaktionen ved at trykke på en send knap. Input bliver valideret og få man enten godkend eller afvist besked markeret med farver. For at lave et mere levende hjemmeside har vi anvendt slideren. Menuen er fast i toppen og hjælper brugerenn til få hurtig adgang til konkrete steder på siden, dvs at brugere undgå undøvendig scrolling. 35

Dokumentation for webudvikling Dokumentation for webudvikling Kontakt form Mail til kontakt form er registreret på http://mandrill.com for at undgå at mails ender i spam filter, skal mailen tilmeldes SMPT Vi har brugt phpmailer til at sende mail i kontakt formen. Serverside validering i input felter. Login Login form er lavet som en popup der aktiveres ved login link I menu baren. Popupen er stylet med et overlay some har opacity og fungere visuelt som en barrier imellem indhold på siden og login formen, og praktisk fungere den som lukke knap for hele formen, ligesom x knap I toppen. Formen er tilknyttet en data base som læser data fra databasen og sammeligner/validere data i input felter. Der er html5 validering på formens input felter, som i første omgang tjekker om den rette data er indtastet. Menu Til menuen har vi brugt Adtile s fixed-nav plugin, som har ease effekt i menuen. Progressive enhancement Alle lag i projektet skilt ad I eksterne filer og grupperet I logisk orden. Htm- private/public/includes/libs/ CSS- css og LESS filer Js alle javascript filer Images alle billeder og grafisk materiale (billede) LESS Preprocessing af CSS med LESS og SIMPLESS compiler. LESS er mere flexibel en CSS Cascading style sheets, man kan lave dynamisk css og bruge nested rules som kaldes mixin s. I vores projekt har vi brugt Less helt grundlæggende med compiler. Grid layout Simple Grid er et simplet grid system til at bygge hjemmesider. Det har ingen indbygget styles og er derfor ikke et framework. Det er også responsivt og stabler alle kasser ovepå hinanden på skærme i mobil størrelse. Det er bygget med 12 koloner, af hvilke man kan skabe det antal man har brug for i sit design. Class grid er wrapperen og indeni er er 4 koloner angivet ved <div class= col-1-4 >. Validereing Html og css er valideret i w3schools validator. SEO Vores hjemmeside er en onepager og derfor lidt sværere at lave søgemaskine optimering til. I seo bruges title tag, description meta tag, h1 i body og det vigtigste er indholdet på siden er brugbart og læseligt for brugeren, ifølge google selv. http://www.adtile.me/fixed-nav/ https://validator.w3.org/ https://jigsaw.w3.org/css-validator/ https://www.youtube.com/watch?v=mibrj2bofcu 36