Grafisk design
// Grafisk Design Hjemmesideløsning for syerske Sorami er et enmands-firma med mere end 25 års erfaring, som tilbyder omforandring af tøj og tøj syet efter eget design, samt håndlavede smykker. Hun ønskede en hjemmeside, som hun kan sælge ud fra og henvise til. Stilen skulle gerne være feminin og primærfarven rosa. Det skulle ikke være en kompliceret hjemmeside, men være nem og overskuelig, samt indeholde en kontaktformular. Basis fakta for websitet Benyttede programmer Adobe Dreamweaver CC Adobe Photoshop CC Adobe Illustrator CC Filezilla Ftp program Den primære målgruppe er kvinder 25+, som enten ikke har tid eller selv kan reparere/sy tøj, samt kvinder som ønsker en special-designet kjole til den store dag - konfirmation, bryllup, lancier osv. Hjemmesiden er kodet i HTML, men skal efterfølgende sættes op i Wordpress, som er et Content Management System, som sikrer en brugervenlig opbygning af backenden. Webløsning Features Webside med undersider kodet i HTML Kontaktformular Transition effekter Slideshow Ekstern link til deres Facebook-side Link til mail Dropdown Mouseover-effekter Involverede parter Mig Kundemøde med Helle fra Sorami Idé til hjemmesideløsning Layout og godkendelse af dette Kode hjemmesiden i HTML Kunden Helle fra Sorami Sørger for tekst og enkelte billeder Udvikler Sætter senere siden op i CMS - Wordpress og laver på samme tid sitet responsive, efter mit layout. Se hjemmesiden Klik her for at se hjemmesiden: sorami.dk Grafisk Design // 1
Brainstorm & moodboard I forbindelse med mit første møde med Sorami, tager jeg notater og laver herefter en brainstorm, hvor jeg får skrevet alt ned og sat i system, således jeg ved, at jeg får alle kundens ønsker med ind i idé-processen. Mit moodboard herunder viser den stemning, som kunden gerne vil have skal skinne igennem på hjemmesiden. Konfirmand Feminint Drømmekjolen Sort/hvide billeder Børnetøj Smykker Hjemmedesign Rosa Brudekjoler Omforandring Syerske Grafisk Design // 2
Farvevalg Da kunden gerne ville have at hjemmesiden skulle udstråle femininitet, blev vi enige om at tage udgangspunkt i den rosa farve fra logoet. Kombineret med hvid og grå, samt billeder holdt i sort/hvid, giver det sitet et femnint, let og elegant - men samtidig moderne udtryk. Primær farve Den rosa farve - som også er en del af Sorami s logo, er primærfarven på sitet - brugt til menupunkter, rubrikker, tekstbokse m.v. Rosa repræsenterer det feminine, omsorg, varme, kærlighed og sensualitet. CMYK: 0 56 0 0 RGB: 221 144 189 Web: #dd90bd Sekundær farve Hvid symboliserer renhed, åbenhed, vækst og kreativitet. og skaber en følelse af orden. CMYK: 0 0 0 0 RGB: 255 255 255 Web: #ffffff Sekundær farve Den grå farve repræsenterer balance og elegance, og skaber et flot grafisk billede, da den står i flot kontrast til den rosa farve. CMYK: 60 50 48 42 RGB: 87 87 87 Web: #575757 Grafisk Design // 3
skitser - forside skitser - undersider Jeg arbejder ikke særlig meget med skitser, men gør mere ud af brainstorm-, moodboard- og inspirations-processen, men inden layout af hjemmesiden, laver jeg dog nogle rå-skitser. Den skitse jeg valgte at gå videre med, og arbejde ud fra, til forsiden, (se den stiplede cirkel), valgte jeg, da denne opbygning ville være god til at vise de forskellige områder, som SORAMI bevæger sig indenfor. Det er en overskuelig og brugervenlig opbygning, med store billeder, samt slideshow i toppen. Den skitse jeg valgte at gå videre med, og arbejde ud fra, til undersiden, valgte jeg, da den ville understøtte indholdet på siderne godt. Den er opbygget med samme topmenu som forsiden, samt et topbanner-billede, i samme størrelse som slideshowet. Under billedet er plads til tekst og eventuelle produktbilleder. flowchart Flowchartet til sorami.dk er meget enkelt, da det er en side med en simpel struktur. Smykker Armbånd Halskæder Øreringe Diverse Tøj Forside Omforandring Facebook Kontakt Redirect Grafisk Design // 4
Forsideopbygning Topnavigation med dropdown Fra topnavigationen kan brugeren navigere rundt på siden. Ligeledes er her en dropdown, som benyttes på de menupunkter som har undermenupunkter. Slideshow Slideshowet på forsiden bruges som showcase for det som kunden gerne vil vise frem - sæsonaktuelle tilbud osv. Det er det primære på forsiden, som brugeren ser først, så her skal placeres nogle iøjefaldende billeder, med nogle korte sigende tekster i boksen på billedet. Hvert slide linker til en given underside. Forsidemoduler Modulerne under slideshowet er mere fastlåste showcases, som ligeledes linker til givne undersider. Indholdet til disse er af kunden valgt, ud fra hvad hun mener hendes kunder søger mest efter. F.eks. er konfirmationskjoler noget som mange leder efter lige nu, og derfor er det både at finde i slideshowet og i et forsidemodul. Grafisk Design // 5
Billeder Alle billeder på sitet er sort/hvide undtagen produktbilleder - dette for at skabe et overordnet roligt, samt let og elegant - men samtidig moderne udtryk. Dog er der nogle skjulte features på forsiden, beskrevet herunder. Billeder til slideshow Slideshowets billeder er skåret således der er fokuseret på det som slidet handler om, ligesom en rosa boks med lille beskrivende tekst er lagt på billedet. baggrundsbillede Hjemmesidens baggrund er sat med hvid og udfyldt med et billede af en bøjlerække med tøj, med meget lav opacitet, som gør det muligt at have en rosa boks ovenpå - også med lav opacitet - uden at det ser for rodet ud. Desuden passer farverne i det nedtonede billede godt til farveskemaet på hjemmesiden. Forsidemoduler med mouseover For at skabe lidt dynamik og spænding på forsiden, har jeg valgt at lade forsidemodulernes billeder overgå fra sort/hvid til originalfarven ved brug af mouseover. Ved nogle af modulerne skifter også teksten i den rosa boks. Grafisk Design // 6
STAndard underside - smykker > armbånd Alle undersider er opbygget ens, med topbanner-billede samt en boks nedenunder til indhold. Topbanner-billede Billedet i toppen har samme størrelse som slides ne på forsiden og indeholder et billede som er relevant ift. sidens indhold. Fancybox Ved klik på produktbilleder, åbnes disse i en Fancyboks, som viser billedet i stort, for at brugeren/kunden bedre kan se detaljerne på produktet. Produktbilleder Alle produktbilleder på hjemmesiden er i farve, da det ville være misvisende at lave disse sort/hvid. footer Fast på alle siderne er også denne enkle footer med kun sitets copyrightinformationer. Det understøtter letheden på sitet, at det ikke sluttes af med en tung, fast footer. Grafisk Design // 7
STAndard underside - tøj Transparent baggrund med css3 Min content-box er sat med background-color: rgba (221,144,189,0.2) - de første tre tal definerer farven på min box og det sidste tal er gennemsigtigheden som er sat ned fra 1 til 0.2. Dette giver denne fine transparente box, som giver hjemmesiden en lethed og mulighed for at se mere af baggrundsbilledet. Indholdsboks Alle undersider har en hvid indholdsboks under topbanneret, med rubrik (H1) og brødtekst (p). Mellemrubrikker og produktbeskivelser er sat med H2. Ved at sætte typografien fast fra start, skabes et ensartet typografisk billede gennem hele sitet, hvilket bl.a. gør, at sitet ser professionelt ud. Fonte anvendt på sitet Raleway menupunkter, rubrikker Let og feminin font, som understøtter det eksklusive aspekt i sitet, med sine fine linier. Anvendt på sitet ved brug af Google Web Fonts. Helvetica brødtekst, mellemrubrikker Letlæselig sans serif font - god til web - som er tilgængelig på alle computere, da den ligger som standard font. Grafisk Design // 8
standard underside - omforandring breadcrumb Med breadcrumbs sørger jeg for, at brugeren hele tiden er bevidst om, hvor på sitet de befinder sig. Her kan de f.eks. navigere tilbage til forsiden. Box-shadow og border-radius med css3 Ligeledes er tilføjet en box-shadow til kortet, for at give det lidt dybde, samt lagt en border på kortet, da jeg synes at det på den måde trådte mere frem. TRansitions Jeg har tilføjet en transition - en effekt - til rabatkuponen som gør, at når man fører curseren over den, skifter den fra en style til en anden - den tipper til højre - uden brug af Flash-animationer eller JavaScripts. Grafisk Design // 9
Kontaktside med formular Favicon Til favicon har jeg valgt O et fra logoet til favicon et, for at give brugeren noget genkendelighed, og noget at navigere efter, hvis de f.eks. har mange faner åbne. autofocus Med autofocus, hjælper man brugeren til hurtigt og nemt at komme i gang med at udfylde formularen. kontaktformular Kunden ønskede en nem måde hvorpå hendes fremtidige kunder kunne kontakte hende, så derfor blev vi enige om at lave en kontaktside med formular - men samtidig mulighed for at kontakte hende direkte på telefonen. Formularen virker og sender brugeren til en redirect-side, hvor der takkes for deres mail. Grafisk Design // 10
udvalgt kode CSS3 - Transitions & prefix Denne CSS3-kode bruges til VIP-kortet på omforandrings-siden. Den har fået en boxshadow og en transition på, som gør, at når man hover hen over kortet med curseren, tipper det 10 grader til højre. Med mine prefix, sikrer jeg mig at kortet og dets features, kan ses i de nyeste versioner af browserne. rwd Responsive web design Flere og flere tilgår nettet via smart devices tablets og smartphones og tallet er stigende, så derfor må teknologien på hjemmesiderne følge med. Med responsive web design (RWD), sikrer man, at hjemmesiden kan læses fra alle devices med skærm fra den lille smartphone, over tablets og op til en stor desktop skærm. SORAMI havde frabedt sig Responsive Web Design til at starte med, da dette ville gøre hjemmesiden lidt dyrere, grundet ekstra timer til udvikleren. Efterfølgende blev de dog enige med sig selv om, at de gerne ville have det alligevel. Jeg har derfor layoutet sitet som det skal se ud i responsive til mobile (tablet er det samme som screen) og udvikleren laver dette når sitet sættes op i Wordpress. form Dette stykke HTML-kode angiver hvilken server formmailen skal kommunikere med, for at formen virker optimalt, ligesom den viser recipient og redirect, som er nogle af de vigtigste punkter, som skal være udfyldt korrekt. jquery & flexslider Denne kode loader JavaScript-biblioteket jquery, samt JavaScript-filen for slideshowet på forsiden. Da slideshowet er opbygget med jquery er det det nødvendigt at have jquery loadet i dokumentet. fancybox FancyBox er et jquery-plugin, der gør det muligt at få billederne til at åbne op på en flot måde i browseren - ved brug af en form for pop-up vindue. På koden til højre kan man se at jquery er loadet, samt selve jquery-filen for FancyBox og CSS-stylesheetet. Alt dette tilsammen får fancybox til at fungere på hjemmesiden. Fancybox sættes på billederne som et link, der har en class, som linker det sammen med fancybox. I dette tilfælde har jeg brugt class en fancybox. favicon Indsættelse af favicon - linker til filer placeret på serveren. Grafisk Design // 11
KvALITETSvurdering Både kunden og jeg er meget tilfreds med slutresultatet af hjemmesiden. Farveog billede-valg rammer plet ift. målgruppen og den er nem og overskuelig - med enkelte skjulte spændende features, såsom f.eks. anvendelsen af transitions, Fancyboks og Flexslideren. Jeg har kontaktet en udvikler, som sætter hjemmesiden op i Wordpress, så hjemmesiden bliver mere brugervenlig for kunden at redigere i. Grafisk Design // 12