Opgaven - Digital Kommunikation

Størrelse: px

Starte visningen fra side:

Download "Opgaven - Digital Kommunikation"

Claus Poulsen
8 år siden
Visninger:

1 Opgaven - Digital Kommunikation Jeg har valgt at lave en fiktiv webshop, Lampeshoppen.dk, der sælger lamper. Lampeshoppen er målrettet den funky, kræsne boligejer. Målgruppen er voksne mennesker, typisk mellem 35 og 50 år, som økonomisk er i den øvre middelklasse. De har 1-2 børn og vil gerne indrette sig smart og moderne med et humoristisk og funky twist, på børneværelset, såvel som i resten af boligen. Lampeshoppen fører kun designerlamper i god kvalitet og prisklassen vil være derefter. Udvalget af lamper på siden er ikke overvældende, da der er lagt vægt på få gode kvalitetsprodukter, som er designet til målgruppen.

2 Sideopsætning og design Selve siden er sat lidt firkantet op i visitkortformat, dog med lidt ud over kanterne i form af baggrundsgrafikken og lamperne i siderne. Det er gjort i et forsøg på ikke at forstyrre brugeren i sin webshopping, men stadig give lidt spil på siden. Baggrundsgrafikken er lavet med en brush i Photoshop, for at give siden lidt dybde. I samspil med lamperne, som ligger øverst synes jeg det fungerer meget godt. Lamperne er fritlagt og redigeret i Photoshop. Der er lagt en lyseffekt på til mouseoverfunktionen. Den røde farve på bl.a. overskrifterne til venstre er en standard #F00000 (forkortet #F00). Den giver en god kontrast til det sorte/hvide look og bruges bl.a. til at fremhæve vigtige ting på siden. Som man kan se på næste side, er grundlayoutet ikke helt magen til slutproduktet. Det er bl.a. sket fordi jeg har videreudviklet en lille smule på siden mens jeg kodede, men også fordi jeg undervejs i forløbet erfarede at det var smartere at kode skygger og baggrundsfarve end at slice i Photoshop. Det vil påvirke brugervenligheden positivt, da siden loader hurtigere jo mindre tung grafik der er. Det kan jeg jo selvfølgelig kun tillade mig fordi det i dette tilfælde er mig der både designer/layouter og koder. Selve købsfunktionen er ikke kodet, da det vil kræve tilgang til database ved hjælp af PHP.

4 Videreudvikling af Lampeshoppen.dk Købsfunktionen virker som sagt ikke, så den skal kodes før siden kan offentliggøres. Det skal gøres via en database som tilgåes med PHP, ASP eller lignende. Det vil jeg dog ikke komme nærmere ind på her, da det vil være op til en programmør at løse den opgave. I database Via PHP/ASP Vises i kurven

5 MouseOver: Der er lagt en mouseover-funktion på den gule standerlampe og fuglelampen, så de lyser når man bevæger musen henover dem. Det er gjort for at skabe lidt interaktivitet på siden. Form: Jeg har lavet en form i bunden af siden så brugere kan tilmelde sig Lampeshoppens nyhedsbrev.

6 Sitemap: Der er lavet en side med sitemap. Det er bl.a. for søgemaskineoptimering, men også for brugervenligheden. Hvis man f.eks. er i tvivl om man har set alt hvad der er at se på siden kan man klikke sig herind og få det fulde overblik. Da dette ikke er en særlig stor side kan man dog diskutere nødvendigheden i denne sammenhæng.

7 Meta-tags: Meta-description og meta-keywords ligger i <head>. Det er til søgemaskineoptimering og metarobots (index, follow) er for at fortælle søgerobotterne at det er hele siden der skal/må indekseres på diverse søgesider.

8 Printstyle.css: Jeg har lavet en printstyle.css til siden, da der er forholdsvis mange billeder, som brugeren højest sandsynligt ikke har lyt til at bruge toner/blæk på ved udskrift af data fra siden. Her er stort set alle billeder fjernet ved hjælp af display:none.

9 Kommentarer: Der er lavet kommentarer i css en. Hvis/når projektet skal overdrages til f.eks. en programmør kan denne lettere finde rundt i koderne hvis der er kommentarer.

10 CSS3: Jeg har valgt at lave skyggerne i CSS3 i stedet for at slice dem i Photoshop. Der ligger tre linjer til skyggen. Det er gjort for at være sikker på at det virker hos brugere med ældre browserversioner.

11 Favicon: Det lille ikon i adresselinjen foran hjemmesidens adresse er et favicon. Det har jeg lavet i 16x16px og genereret på favicon.cc. Hvis brugeren vil gemme siden som bogmærke vil det lille ikon ses i bogmærkemenuen og det øger genkendeligheden så man lettere kan finde siden på listen igen.

Relaterede dokumenter

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.