lle Larsen N L DESIG
Typografi & ombrydning
ER
fisk design
Produktion & workflow
Billedbehandling
caféchino.dk
Produktion & workflow Id Ps
Dw AIdi Ps
Id Ps
Id D Psw Ai Dw Ai
Microsoft
Visual Studio
Dw Ai Udforming af website og nyt logo til Café Chino Microsoft
Visual Studio
Microsoft
Visual Studio
I samarbejde med min gode ven, skulle jeg hjælpe med at lave et nyt logo til Café Chino i Odense. Derefter skulle der laves et redesign af det eksisterende site www. cafechino.dk. Microsoft
Visual Studio
I nedenstående beskrivelse vil jeg fortælle om, hvordan jeg selv har hardcoded sitet i Microsoft Visual Studio ved hjælp af HTML, CSS, PHP, JavaScript og Jquery Lightbox.
Komposition & opbygning Sitet er bygget med en forside samt 6 undersider. Jeg har valgt at opbygge sitet efter 960-grid. Dvs. at indholdet ikke fylder mere end 960 px i bredden. Dette er den sikre vej at gå, hvis du ønsker, at brugeren skal have den bedste måde at se sitet, hvad enten man har en høj eller en lille skærmopløsning. Hvis man benytter grid i html’en, vil dette også gøre det nemmere, når man har med større projekter at gøre. Idet man er sikker på, at alt ligger på sin plads, hvad enten man har delt sit site ind i 1, 2, 3 eller 4 kolonner.
Arbejdsproces Jeg designede sitet ud fra en brainstorm med kunden. Her var stor set frit spil, og jeg kunne gøre, hvad jeg ville, det skulle bare være stilrent og ikke for sprælsk. Eftersom logoet var på plads, synes jeg generelt, det er en god idé at tage udgangspunkt i det. Da logoet er stilrent og moderne, har jeg valgt samme stil og farver i webdesignet. Jeg startede med at lave en skitse og fik hurtigt en dialog igang med kunden, og opsætningen var
2
på plads. Derefter startede jeg opsætningen af layoutet. Da det var godkendt, startede jeg opbygningen af de forskellige elementer i Microsoft Visual Studio. Her lavede jeg selve sidestrukturen som HTML og stylingen af sideelementerne som CSS.
Café
CHINO
Logo
restaurant & bar
Det er altid en god idé at have et design at holde sig til og have hele designet godkendt, inden man går i gang med opklipningen af HTML. Dette er på baggrund af rettelser, som vil tage længere tid at ændre i koden bagefter.
Opbygning af HTML Siden er bygget op via en header, body og footer. Header indeholder bla. link til CSS filer, metadata, navngivning af siden, scripts, favorit ikon mm. Favorit
Pernille Larsen
caféchino.dk
Café Chino Forside
Caféog& Café Takeaway
Nyheder
Om caféen
Selskaber
Galleri
Kontakt
Sitemap
Menu pdf
ikonet består af en vector grafik på 16 x 16 px, som så bliver efterfølgende er komprimeret til en ico fil.
tentdelen mellem headeren og footeren er dynamisk, så den kan udvide sig vertikalt efter indhold.
Body er content delen, hvor alt indhold på siden ligger.
Browserkompatibilitet
Footer er bunden af sitet.Min footer er sat sammen af grafik. På body tagget er der så tilføjet en baggrundsgrafik i CSS’en med en repeat-x, således at footeren altid går til bunden. Dvs. at footeren faktisk fylder det hele omme bagved indholdet, og at contentdelen så kan flyde udenpå. Dette er en god løsning, hvis din baggrund er sat sammen af meget grafik, som skal være dynamisk.
Sitet er testet i browsere som Firefox, Internet Explorer 7, 8 og 9, Google Chrome og Safari. Samt er det testet på både iPhone og iPad. Dette ser jeg som en vigtig del, da de mobile platforme fylder mere og mere i hverdagen. For at benytte mest mulig kode i stedet for grafik, har jeg lavet en “Send” knap i CSS. Både stylingen af gradienten, de runde hjørner og text-shadow er også lavet i CSS. Og det er så optimeret til alle browsere derefter. Dog kan ændringer forekomme da f.eks. IE7 og 8 ikke kan lave runde hjørner. På HTML sidens header er der indsat metadata med bla. description og keyword, hvilket er med til at optimere sitet bedre på google.
Til programmering af kontaktformular har jeg brugt PHP til afsendelse af indtastet data til mail, Java script til en jquery slider på forsiden samt til billedgalleriet, som vises i en Lightbox. Ligeledes er der brugt et script til at indsætte et krakkort på kontaktsiden. Når sitet kommer online, har jeg tilknyttet de fleste af overskrifter, billeder og brødtekst til et CMS-system, således at de selv kan gå ind og rette i tekst mm. Grundlæggende er siden bygget op af div’er, hvor selve con-
Mediegrafiker Svendeprøve december 2012
Fonte I dette tilfælde har jeg valgt at bruge en font, som ikke er websafe til mine h1, h2 og h3’er. Eurostile Regular. Dette giver ofte udfordringer, hvis man ikke passer på.
3
caféchino.dk
Knap stylet med gradient, text shadow og border radius.
I mit tilfælde har jeg været inde og tilføje et fontface fra www.fontsquirrel.com, hvor jeg komprimerer fonten og derefter får den lagt ind på min server, hvor den kalder på den hver gang, man skal bruge den.
af vide det skulle være stilrent og gerne kun med tekst uden illustration. Jeg lavede nogle skitser i hånden og derefter i Illustrator. Jeg sendte derefter en masse forslag afsted. Efter kort tid kom logoet hurtigt på plads.
Man kan også vælge at skrive en backup font, så den bliver erstattet af en anden, hvis fonten ikke kan vises for en sikkerheds skyld. Det kan nemlig godt ødelægge det ønskede udtryk, hvis fonten svigter.
Der er brugt 2 fonte i logoet. „Café“ er skrevet med FreestyleScript Regular. Til „CHINO“ og „restaurant og bar“ er der brugt en Futura Light.
Billeder
Kvalitetsvurdering
Stort set alle grafikker er png24, hvilket gør, at de er transparente. Der er pålagt en lille skygge under de fleste billeder hvilket gør, at de skal gemmes sådan for at få effekten med. Dette dur dog ikke i IE6, da transparensen bliver blålig, men man er begyndt at se bort fra denne browser, da den ikke længere er up-to-date.
Jeg har gjort brug af kontaktformular og krakkort, hvilket virker ganske fint. Og det er testet i de mest populære browsere, som tidligere nævnt.
Logo
Sitet ligger endnu ikke online, da siderne skal tilknyttes færdig til et CMS system. Men jeg regner med, at den kommer op i starten af 2013. Kunden er også rigtig tilfreds og ser meget frem til, at det nye site kommer på.
Opgaven bundede fra start i et nyt logo. Men da dette var færdigt, ønskede de også en hjemmeside. Jeg fik
4
Pernille Larsen
cafĂŠchino.dk
Gradient generator, hvor koden bliver sat ind i CSS.
Her er min HTML og CSS, samt et multiscreenpreview af tablet CSS
Mediegrafiker Svendeprøve december 2012
5
cafĂŠchino.dk
Skitser af logo
Skitser af website
6
Pernille Larsen
caféchino.dk
CAFÉ | CHINO CAFÉ CHINO CAFÉ | CHINO restaurant & bar
´
C AFÉ CHINO C AFÉ CHINO C AFÉ CHINO restaurant & bar
restaurant & bar
restaurant & bar
CAFÉ CHINO restaurant & bar
C
AFÉ CHINO
´
CAFÉ | CHINO
restaurant & bar
CHINO
restaurant & bar
restaurant & bar
CAFÉ CHINO restaurant & bar
restaurant & bar
CAFÉ
C
CHINO
CHINO
AFÉ CHINO restaurant & bar
CAFÉ CHINO
Café
CHINO
Café
CHINO restaurant & bar
CHINO restaurant & bar
Café
CHINO restaurant & bar
Logo forslag rough
Mediegrafiker Svendeprøve december 2012
7
cafĂŠchino.dk
Før - hjemmeside og logo som siden ser ud nu
8
Pernille Larsen
caféchino.dk
Café
CHINO restaurant & bar
Efter - hjemmeside og nyt logo efter et redesign
Mediegrafiker Svendeprøve december 2012
9