9
Produktion & workflow

Produktion og workflow

Embed Size (px)

DESCRIPTION

CafeChino workflow beskrivelse. Ny hjemmeside

Citation preview

Pernille Larsen

FYSISKE PORTFOLIO

DIGITAL DESIGNER

Billedbehandling

Grafisk design

Typografi & ombrydning

Produktion & workflow

caféchino.dk

2 Pernille Larsen

Komposition & opbygning

Sitet er bygget med en forside samt 6 undersider. Jeg har valgt at opbygge sitet efter 960-grid. Dvs. at indhol-det 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 stil-rent 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

på plads. Derefter startede jeg opsætningen af layoutet. Da det var godkendt, startede jeg opbygningen af de for-skellige elementer i Microsoft Visual Studio. Her lavede jeg selve sidestrukturen som HTML og stylingen af side-elementerne som CSS.

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 rettel-ser, 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

Udforming af website og nyt logo til Café Chino 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. 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.

Produktion & workfl ow

restaurant & barCHINO

CaféLogo

Id

Dw

Ps

AiMicrosoft

Visual Studio

Id

Dw

Ps

AiMicrosoft

Visual StudioId

Dw

Ps

AiMicrosoft

Visual Studio

Id

Dw

Ps

AiMicrosoft

Visual Studio

caféchino.dk

Mediegrafiker Svendeprøve december 2012

caféchino.dk

3

ikonet består af en vector grafik på 16 x 16 px, som så bliver efterfølgende er komprimeret til en ico fil.

Body er content delen, hvor alt indhold på siden ligger.

Footer er bunden af sitet.Min footer er sat sammen af grafik. På body tagget er der så tilføjet en baggrundsgra-fik 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. 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. Grund-læggende er siden bygget op af div’er, hvor selve con-

tentdelen mellem headeren og footeren er dynamisk, så den kan udvide sig vertikalt efter indhold.

Browserkompatibilitet

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 gra-dienten, 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, hvil-ket er med til at optimere sitet bedre på google.

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å.

SitemapForside Café & Café og Takeaway

Om caféen Selskaber Galleri

Café Chino

Nyheder Kontakt

Menu pdf

caféchino.dk

4 Pernille Larsen

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.

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.

Billeder

Stort set alle grafikker er png24, hvilket gør, at de er transparente. Der er pålagt en lille skygge under de fle-ste 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.

Logo

Opgaven bundede fra start i et nyt logo. Men da dette var færdigt, ønskede de også en hjemmeside. Jeg fik

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 for-slag afsted. Efter kort tid kom logoet hurtigt på plads.

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.

Kvalitetsvurdering

Jeg har gjort brug af kontaktformular og krakkort, hvil-ket virker ganske fint. Og det er testet i de mest popu-lære browsere, som tidligere nævnt.

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 til-freds og ser meget frem til, at det nye site kommer på.

Knap stylet med gradient, text shadow og border radius.

caféchino.dk

Mediegrafiker Svendeprøve december 2012

caféchino.dk

5

Gradient generator, hvor koden bliver sat ind i CSS.

Her er min HTML og CSS, samt et multiscreenpreview af tablet CSS

caféchino.dk

6 Pernille Larsen

Skitser af website

Skitser af logo

caféchino.dk

Mediegrafiker Svendeprøve december 2012

caféchino.dk

7

CAFÉ CHINO

CAFÉ | CHINO

CAFÉ CHINO

CAFÉ | CHINO

´

´

CAFÉ | CHINO

restaurant & bar

restaurant & bar

CAFÉ CHINO

CAFÉ CHINO CHINOCHINO

restaurant & bar

AFÉ CHINOrestaurant & barC

AFÉ CHINOCAFÉ CHINOC

CAFÉ CHINO

AFÉ CHINOC

AFÉ CHINOC

CHINO

restaurant & bar

restaurant & bar

restaurant & bar

restaurant & bar

restaurant & bar

CHINO

restaurant & bar

restaurant & barCHINO

restaurant & barCHINO

Café

restaurant & barCHINO

Café

restaurant & barCHINO

Café

Logo forslag rough

caféchino.dk

8 Pernille Larsen

Før - hjemmeside og logo som siden ser ud nu

caféchino.dk

Mediegrafiker Svendeprøve december 2012

caféchino.dk

9

Efter - hjemmeside og nyt logo efter et redesign

restaurant & barCHINO

Café