GRAFISKDESIGN
PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia Trykket hos: PR Offset Papir: 170g multiart silk, omslag 130g multiart silk, indhold
Grafisk design Dansk Kedel Kemi, hjemmeside
KUNDE Dansk Kedel Kemi Opgave: Design af ny hjemmeside Opsætning i Joomla! (CMS) Opgaven indeholder: Nyt design af hjemmeside HTML5 CSS3 Joomla! 3.3.3 Reponsive design / Twitter Bootstrap Dansk Kedel Kemi skulle bruge en ny hjemmeside, da deres gamle side trængte til en ordenlig overhaling. Udformning af hjemmesiden er opbygget efter tidligere tryksager vi har lavet for dem.
DESIGN Dansk Kedel Kemi kunne godt tænke sig at få deres hjemmeside til at virke mere imødekomne, lys og stilrent. De havde et par få elementer de gerne ville have der skulle bruges på siden: Dansk Kedel Kemi ville have disse dråber vand skulle bruges til et eller andet på siden. Selvfølgelig bruge deres logo, men også deres røde farve. De ville ikke have de blå farver mere. Skydsbjergvej 26 5463 Harndrup Telf: 6441 9922 www.dansk-kedel-kemi.dk ORGANISKE TANNINER BLD. 4/25 Forebyggelse af korrosion og belægninger i damp og varmesystemer. Indeholder: Natriumhydroxid og organiske tanniner Faresætninger: Forårsager svære forbrændinger af huden og øjenskader. Sikkerhedssætninger: Indånd ikke tåger. Vask huden grundigt efter brug. I TILFÆLDE AF INDTAGELSE: Skyl munden. Fremkald IKKE opkastning VED KONTAKT MED HUDEN (eller håret): Tilsmudset tøj tages straks af/fjernes. Skyl/brus huden med vand. Tilsmudset tøj skal vaskes, før det kan anvendes igen. VED INDÅNDING: Flyt personen til et sted med frisk luft og sørg for, at vedkommende hviler i en stilling, som letter vejrtrækningen. Ring omgående til en GIFTINFORMATION eller en læge. VED KONTAKT MED ØJNENE: Skyl forsigtigt med vand i flere minutter. Fjern eventuelle kontaktlinser, hvis dette kan gøres let. Fortsæt skylning. Opbevaring Tillukket i original emballage køligt og frostfrit. Pr. nr. 2328799 Netto vægt 25 kg UN 1824 Natriumhydroxidopløsning Michael Hvid Konsulent Skydsbjergvej 26 5463 Harndrup Tlf: 6441 9922 Fax: 6441 9921 Mobil: 4045 0893 www.dansk-kedel-kemi.dk mail@dansk-kedel-kemi.dk Damp, varme, køle og spildevandssystemer Dansk Kedel Kemi har en række produkter. De ville gerne have vi udarbejdede nogle ikoner der passede til produktet. Det var de eneste krav de havde til deres hjemmeside ellers havde vi frie hænder. For at finde frem til det nye design researchede jeg på nogle af de nyeste ting som vi har lavet for dem. Deres nye produkter vi har lavet for dem skulle også spille godt sammen med hjemmesiden. Skitser og sitemap Inden jeg begyndte at udforme mit design i Photoshop, lavede jeg skitser og et hurtig sitemap, så jeg vidste hvor mange undersider og indhold der skulle være på siden. Skitse: Deres nye design som de har fået lavet til deres visikort og klæb til tønder/flasker og beholdere kørte også med de lyse og røde farver.
Sitemap: Sitemap er altid godt at lave når du laver en hjemmeside fra bunden, det skaber mere overblik over hvad der skal være på siden og hvilke funktioner den skal have. Her er sitemappen jeg brugte til Dansk Kedel Kemi s hjemmeside: Forside Ikoner til de forskellige systemer Hvad kan vi? / Hvem er vi? Dampsystemer Varmesystemer Kølesystemer Spildevandssystemer Solfangersystemer Medarbejdere Referencer (Denne side er ikke lavet endnu) Kontakt Design i Photoshop For at skabe et godt overblik startede jeg ud med at lave en gruppe for de forskellige områder (div tags). der skal laves, grunden til dette var jeg bedre kunne finde rundt i de forskellige layers der bliver lavet og så jeg lettere kan navigere rundt på diverse indhold uden at jeg skal kigge igennem 100 layers. På alle sider skal telefon nummer fremgå tydelig, samtidig skal der være hurtig afgang til systemer på alle sider, ved form af en undermenu. Med det info er det lettere at finde et design der passer til deres behov og samtidig ved man også hvad man skal have med på hjemmesiden. Med skitse og sitemap i hovedet kunne jeg begynde at udforme et design i photoshop.
Effekter: Jeg har brugt vanddråberne som baggrund på hele hjemmesiden. På selveste indholdets baggrund har skruet ned for opaciten på 90%. Det giver en fed effekt på siden at man kan se dråberne igennem uden at det gør siden mindre læse venlig. Derudover der brugt inner shadow på nogle af indholdets bokse. Sådan ser indholdets baggrund ud når opaciten er sat ned på 90% Farver: Dansk Kedel Kemi ønskede at vi skulle bruge deres røde farve. Derudover har jeg valgt en række farver som jeg synes spillede godt sammen med den røde farve. Farverne er brugt som hexidecimal og så er det websafe color. #b60214 Denne farve er brugt til at fremhæve overskrifter og diverse tekst #2d2d2d Denne farve er brugt til alt brødtekst og til footeren baggrundsfarve #ffffff Indholdets baggrundsfarve og tekst i footeren Dette er baggrunden af bunden af hjemmesiden. Her er bliver der vist kontakt oplysninger m.m. #e9e9e9 Inner shadow farve til bokse #f8f8f8 Body taggets baggrundsfarve Detter er innershadow effekten der kommer på info bokse på siden. Udkast af design: Font: Jeg har brugt fonten Source Sans Pro, da det er en meget stilrent font. Derudover har google også en gratis version af denne man kan implenmentere på hjemmesiden. Fonten er letlæselig til web fordi at den ikke består af helt tynde streger og så har den også en høj x-højde. Jeg har brugt den i forskellige vægte på siden.
WEBDESIGN Billeder og andet Da jeg har lavet siden i HTML5 og CSS3 har jeg ikke brugt slices. Alt indhold har ikke nogen fast højde. Gennemsigtigheden, innershadow og runde hjørner er lavet med CSS3. Derfor har jeg lavet en fast fil jeg lavede slides i og ikoner og andet billede materiale. WEB: Som standard ude ved PR Offset laver vi hjemmesider i Joomla!. Det gør vi fordi så har kunden selv mulighed for at lave indhold til siden og tilføje flere elementer senere uden at vi skal have noget at gøre med det. Jeg valgte at udfordre mig selv og prøvede et nyt workflow som automatisk er indbygget i den nyeste version af Joomla!. Dette workflow hedder twitter bootstrap. Joomla! Twitter Bootstrap: Twitter Bootstrap er et predefineret responsive workflow der har sat nogle standard classes du kan bruge på diverse tags. Hvis man bruger disse classes vil hjemmesiden automatisk blive responsiv. Den eneste downside til dette workflow er at den køre med et fixed bredde af din hjemmeside på en desktop udgave. Det havde jeg taget højde for i mit design udkast, så det skabte ikke problemer. Fordelen ved Twitter Bootstrap er at du spare tonsvis af CSS kodning og en masse tid hvis man kan finde ud af at bruge det. Joomla! og template: Når man laver en hjemmeside via Joomla! er det eneste man behøver en index.php og en fil der hedder TemplateDetails.xml og til sidst sit style.css. Disse to filer kommer til kommunikere med hinanden i Joomla! og vil automatisk skabe flere undersider til din hjemmeside. TemplateDetails.xml bruger man til at fortælle Joomla! opbygningen af din hjemmeside og hvilke forskellige positioner du har dine j:docs i. Hvad er j:doc? J:doc er et custom tag som kan kommunikere med Joomla!. Det er her du kan tilknytte forskellige elementer til din hjemmeside. Der er kun en j:doc der er vigtig at få ind på sin index fil og det er "component".
"component" er selveste hoved indholdet på hjemmesiden som i Joomla! hedder artikler. Her kan du se opbygningen af min index fil: De j:doc der har typen "modules" er selveste punkter på hjemmesiden hvor jeg kan tilknytte moduler fra Joomla!. Moduler: Moduler i Joomla! er en række predefinede div bokse med standard indhold f.eks. Du kan lave et module der hedder menu, her indeholder den en menu som du har lavet i Joomla! derefter kan du tilknytte den en af dine j:docs på siden. CSS og effekter CSS3 og hvorfor? Grunden til at jeg har opbygget siden med CSS3 er fordi at jeg for det første spare en masse plads på hjemmesiden da mange af de effekter jeg har på siden kunne løses med CSS3 i stedet for at tage brug af billeder. Effekter med CSS3: Jeg har brugt en række forskellige effekter med CSS3 her er en liste over nogle: Opacity: 0.9; denne gør objektet transperant. Box-shadow: inset for at gøre det til en inner shadow effekt Transition: all 0.6s; denne laver en fade effekt på et objekt Transform: scale(1.1,1.1); denne skalere et objekt op eller ned i størrelse.
Ved hjælp af de disse funktioner spare jeg plads og spare på brugen af javascript. Derudover med Twitter Bootstrap sparer jeg mange linjer kode da den allerede har defineret størrelsen af hjemmesiden. Så det eneste jeg har stylet til er udseendet og den responsive del. Responsive webdesign Med Twitter Bootstrap gør den responsive design en smule lettere, da den har indstillet de forskellige "breaking points" på hjemmesiden. Derfor skal man stadig gør filen klar til responsive og style det hele til i de forskellige skærm størrelser man har brugt som breaking point. Breaking points er de forskellige skærm størrelser man vælger at tilpasse sig efter. Her er det næsten altid ipad, iphone og desktop udgave. Dog kan man sagtens specifikt style et design til f.eks. Samsung Galaxy eller Nokia Lumia osv. Alle hjemmesider nu til dags skal være responsive fordi at alle bruger smartphones og ipads. Største delen af surfing rundt på nettet bliver fortaget på mobile enheder her og nu. Derfor ønskede kunden også at hjemmesiden skulle virke på mobile enheder.
Layout: Layoutet vil altid komme til at ændre sig en smule når man kommer ned på de andre enheder. Og det er lige præcis her hvor man finder ud af hvor vigtig % er i stedet for pixels. Hvis man arbejder med responsive design skal man altid arbejde i % i stedet for pixels. Hvis man ville lave det i pixels skal man lave omkring de 1500 forskellige layouts i stedet hvis man arbejder med % kan nøjes med 3 forskellige enheder. Hidden styles: Det smarte ved Twitter Bootstrap er den har lavet nogle speciale classes for en der kan skjule indhold på forskellige formater. På den måde kan man lave en masse div-bokse i index filen uden at designet kapulere på de forskellige enheder. Man kan også godt kombinere dem, da der godt kan være indhold der skal vises på to eller flere enheder. I mit tilfælde er de brugt på menuen og boksen ude til venstre af desktop udgaven. Endelig udgave: Kunden blev ekstremt glad for denne side. Den gamle side var ikke indbydene og den var alt for mørk. Synes selv at jeg lavet et design der passer godt til kunden og virker indbydene for de mange gæster der kommer forbi siden. Hidden-desktop denne class fjerner/skjuler indhold på siden som ikke skal blive vist på desktop udgaven Hidden-tablet denne class fjerner/skjuler indhold på siden som ikke skal blive vist på tablet. Hidden-phone denne class fjerner/skjuler indhold på siden som ikke skal blive vist på Iphone.