Grafisk produktion og workflow

GRAFISK PRODUKTION OG WORKFLOW

MAJA BUNDGAARD HJORTH . SØNDRE RINGGADE 34, 5. SAL8000 AARHUS C . [email protected] . www.majabundgaardhjorth.dk

1



2

Format:

width: 1000pxheight: autobaggrundsfoto: 100%

anvendte programmer:

Illustrator CS5 – rentegning af logo samt grafikker til hjemmesiden

PhotoShop CS5 – billedredigering

DreamWeaver 8 – HTML, CSS og JavaScript

www.eleven27.dkwww.eleven27.dk/mobile



3

opgaven:

Logo- og hjemmesidedesign for bygningsdesigner Ulrik Foss ved eleven27.

eleven27 er et forholdsvis nyopstartet en-mands firma som designer og bygger lejligheder, messestande og interiørprodukter. Altsammen med special designede elementer og eksklusive detaljer i højsædet.

Han havde brug for et logo samt en hjemmeside for at synliggøre sin identitet.

Nøgleordet i dette projekt er derfor design og eksklusivitet, ud fra filosofien “less-is-more”. Besøg-ende kunder på hjemmesiden skal få en fornemmelse af stilren overskuelighed, grundighed og en kræsen for detaljerne, ligesom dette også afspejler firmaets værdier.

Vi har færdiggjort hjemmesiden til desktop, og er nu i gang med design og udvikling til en smartphone venlig hjemmeside, hvilket jeg vil komme ind på til sidst i redegørelsen.

mÅLgrUppe:

Målgruppen er unge – voksne mennesker der interesserer sig for design og det visuelle udtryk. Det kan være til både private og erhverv, men mest til folk som gerne vil betale en lille smule ekstra for et lækkert produkt som skiller sig ud.

Krav Fra KUnden:

Kunden havde ikke de store krav til det visuelle udtryk. Det eneste han ønskede var en gennemgå-ende orange og grå farve, samt et udtryk som kunne afspejle hans værdier. Dog var det meget vigtigt for ham at alle billederne af hans produkter blev fremvist i en så stor størrelse som muligt, og han ville ikke have dem beskåret, overhovedet. Ellers havde jeg frie tøjler til at gøre hvad jeg ville, både til logo og hjemmeside. Jeg havde hurtigt en klar idé om hvad kunden ønskede og hvad han gerne vil udstråle. Både fordi han var meget klar i sin udmelding omkring stil og farveønske men også fordi han allerede ved opgavens start havde færdige produkter han kunne vise mig.

Kvalitetsvurderingen kan læses på side 31



4

Brainstorm tiL Logodesign:

nøgLeord:

• Klart budskab• Ikke mange detaljer• Design• Stilrent• Nytænkende• Små fi nurligheder• Eksklusivitet• Lidt dyrere• Kreativitet

• Less-is-more• Gråt og orange• Stærke farver• Business• Seriøsitet• Kvalitet• Sikkerhed• Grundighed• Funktionalitet

Originale skitser er vedlagt fysisk portfolioOriginale skitser er vedlagt fysisk portfolio



5

Originale skitser er vedlagt fysisk portfolioOriginale skitser er vedlagt fysisk portfolio

sKitser og idÉer tiL Logodesign:

Mens jeg var ved at udvikle logoet til kunden, meddelte han mig at det var vigtigt at logoet blev skrevet som følgende: eleven27. Dette var en information jeg godt kunne have brugt inden jeg begyndte min rentegning, da jeg allerede på det tidspunkt havde et forslag som var skrevet anderledes. Jeg valgte dog at vise ham det, så han kunne se hvordan et logo kunne se ud hvis han valgte at skrive det anderledes. Dog holdt han fast i sin udmelding, og valgte det logo som kan ses på næste opslag.

Der er hentet lidt inspiration fra arkitektfi rmaer og designere der leverer det samme budskab som eleven27 ønsker. Fællesnævner for dem er enkelthed og seriøsitet, men samtidig med en lille detalje, som gør logoet lidt mere spændende, end hvis det “bare” stod med en almindelig font.



6

Fremviste LogoForsLag:

ELEVENTWENTYSEVEN

ELEVENTWENTYSEVEN

27 27



7

det vaLgte Logo:

det vaLgte Logo med payoFF, som det Fremvises pÅ hjemmesiden:

FontvaLg:

Aller Light.En rigtig fin og enkel font, som giver det eksklusive udtryk som kunden ønskede. Jeg har været inde og outline teksten så jeg kunne lave nogle små, sjove detaljer, som jeg fandt meget vigtigt i dette logo, for at symbolisere det nytænkende og kreative aspekt som eleven27 kan tilbyde sine kunder.

Aller LightAller BoldabcdefghijklmnopqrstuvwxyzæøåAbcdefghijkLmnopqrstuvwxyzæøå1234567890

FarvevaLg:

C: 0 M: 0 Y: 0 K: 50 #888888

C: 0 M: 0 Y: 0 K: 50 #ff6600



8

Brainstorm og sKitser tiL hjemmesidedesign:Originale skitser er vedlagt fysisk portfolio

Brainstorm og sKitser tiL hjemmesidedesign:

nøgLeord:

• Brugervenlighed• Overskuelighed• Informativ• Fortæller hvem du er• Giver den rette stemning• Ofte kundens første indtryk

✓



9

Originale skitser er vedlagt fysisk portfolio

FLoWChart:

INDEX

ARKITEKTUR FRIENDSHOME INTERIØR LINK TIL FACEBOOK

DISPLAYS OG MESSESTANDE

TRETORN PENTHOUSE 124 M2

VELUX A/S

BIBI CHEMNITZ FORMULARPENTHOUSE 104M2 FRIENDS EKSTERN

FACEBOOK

URBAN CLASSICS

URBAN OASIS 136 M2

INHOUSE FOTOGRAFI



10

storyBoard pÅ index siden:

Da jeg har mange sider i min hjemmeside, har jeg valgt kun at vise storyboard for min index side.

1

2

3

4

5

8

9 10

7

6



11

div tags:

1) #wrapper {width: 1000px; height: auto; margin: 0 auto;}2) #head {witdh: 940px; height: 40px;}3) #navbar {width: 95%; height: 30px;}4) #slides_container {width: 870px; height: 300px;}5) #centertekst {width: 940px; height: auto;}6) #tekstleft {width: 913px; height: auto; float: left} 7) #tekstright {width: 913px; height: auto; float: left}8) #billederbund {width: 857px; height: 150px;}9) #footer {width: 640px; height: 130px;} 10) #footerright {width: 300px; height: 160px;}

LinKs:

index.html html/bibichemnitz.html html/tretorn.html html/urbanclassics.htmlhtml/velux.html (dette link er endnu ikke aktivt, da siden stadig er uden indhold) html/inhouse.html html/penthouse104.html html/penthouse124.html html/urbanoasis.html html/interior.html (dette link er endnu ikke aktivt, da siden stadig er uden indhold) html/friends.html http://www.facebook.com/#!/pages/Eleven27dk/296075160431870

BiLLeder:

<body> ../img/baggrund.jpg<wrapper> ../img/top.jpg<head> ../img/logo.jpg<slides_container> slides/img/Penthouse124/slide-3.jpg; slides/img/Urban Oasis/slide-3.jpg; slides/img/slide-3.jpg;

slides/img/Urban Oasis/slide-1.jpg; slides/img/Tretorn/slide-4.jpg; slides/img/Urban Oasis/slide-4.jpg; slides/img/Urban Oasis/slide-12.jpg

<billederbund> ../img/billederbund.jpg<footer> ../img/footerleft.jpg<footerright> ../img/footer_right.jpg



12

BaggrUndsBiLLede:

For at fremhæve det håndværksmæssige aspekt i kundens firma, valgte jeg at lægge et baggrundsbillede ind af en mur. Jeg havde flere forskellige motiver i tankerne, men flere af billederne gav det et mere råt udtryk end jeg ønskede. Jeg valgte billede nr. 3, da det for det første passer godt ind i mit farveunivers med de grå og orange farver, og også fordi at det ikke gør hjemme-siden for tung at se på.

1

3

2

4



13

BiLLedBehandLingen:

Alle billeder har været en tur gennem PhotoShop, og er gemt ned i 72 ppi, samt tilpasset i størrelserne til de gældende bokse / jQuery plug-ins. Alle er gemt som SRGB og til slut har jeg anvendt “save for web and devices”. Som tidligere nævnt er ingen af billederne beskåret da kunden ikke ville have det – kun dem på forsiden, der fungerer som appetitvækker.

Den viste procedure er gentaget ved alle billederne – dog har de forskellige størrelser i min fancybox, alt afhængig af om de er tvær- eller højformat, og hvilken størrelse de kom i fra kunden. Heldigvis svinger det ikke så meget – det gør det meget mere roligt at bladre imellem.



14

BiLLedFremvisning:

Kunden ville som tidligere nævnt, gerne have at hans fotos blev fremvist så store som muligt, og uden nogen form for beskæring. Dette løste vi ved hjælp af implementering af en jQuery Fancybox. Et rigtig fint værktøj til netop dette formål.

Jeg downloadede et jQuery Fancybox plug-in på Google jQuery, og fik derigennem min JavaScript kode samt et eksternt CSS hvori jeg selv kunne redigere for at tilpasse mit eget layout. JavaScript koden implementerede jeg i min <head> sektion på de pågældende HTML-sider, og sørgede for at linke korrekt ud til både nettet, samt til min nye CSS også.

På min index-side er der ligeledes implementeret et jQuery plug-in, dette er blot en anden fremvisning, som hedder en Billedslider. Princippet i implementeringen er fuldstændig den samme som ved min Fancybox, dette er blot til en anden billedfremvisning, hvor billederne skifter af sig selv.



15



16

Wrapper:

Da jeg begyndte at sætte min hjemmeside op i DreamWeaver, kunne jeg hurtigt se at min hvide wrapper blev meget hård og fremtrædende at se på ovenpå den grå mur. Derfor valgte jeg at lægge en kode ind i mit CSS så jeg fi k en transparent effekt, og dermed kunne bløde looket lidt op, i og med at man nu kan ane den grå mur igennem min wrapper. Der er ikke lagt mere end 15% på, da jeg ikke vil forstyrre teksten og billederne; men bare lige nok til at det kan ses.



17

asCii Koder:

I min ene dropdown menu (under Arkitektur) skal jeg skrive m2. For at kunne lave et ophævet 2-tal, skal jeg anvende ASCII koder i min HTML, og jeg skal i dette tilfælde skrive koden &#178.



18

FaviCon:

Jeg har i min <head> sektion indsat en kode, så der i browservinduet vises et lille favicon. Dette ses ved siden af URL’en, samt ved menuen der viser hvilke vinduer man har åben.



19

FormULar:

I min interior.html har jeg indsat en formular, så kunderne kan sende en e-mail direkte til eleven27 ved at udfylde den. Dog er der i footeren et link hvortil man kan sende en mail, men dette kan for nogle godt være lidt besværligt, da det ikke nødvendigvis er brugerens egen e-mail der bliver redirected til (gmail, hotmail etc.) Det kan være her man “mister” sin kunde fordi det bliver for besværligt, så derfor har vi valgt at indsætte en formular i stedet, for at optimere brugervenligheden.

Derudover har jeg indlagt en takkeside, så brugeren ikke er i tvivl om at mailen er gået igennem.



20

søgeoptimering – seo:

På alle mine sider har jeg gjort det optimale for at søgeoptimere min hjemmeside ved at indsætte følgende i min HTML:

• Sørget for at have en relevant tekst i min <title>• Indsat META Keywords• Indsat META Description• Anvendt H1..... og p• Lagt “alt” tekst på mine billeder• Lagt “title” på mine href

Jeg har søgt på lidt forskelligt på google, og det ser ud til at fungere optimalt. Bl.a. som vist underneden, hvor jeg har søgt på Displays og Messestande.



21

vaLidation:

Til slut er hjemmesiden uploadet og tjekket for fejl på www.validator.w3.org, og er efterfølgende rettet til ud fra de fejl der kom op.

Der er stadig 3 fejl den kommer op med, men det er ikke noget af nogen betydning. Det skyldes at min hjemmeside er kodet i DreamWeaver 8 og der er derfor anvendt XHTML og ikke HTML5 som validatoren går ud fra.



22

googLe WeB Fonts:

Jeg har haft store problemer med at få vist den rigtige font (Aller Light/Bold) i de forskellige browsere (udover på min egen computer), da dette ikke er en web baseret font, og heller ikke en standard font. Derfor har jeg på Google Webfonts søgt efter en ny, og har fundet en som minder meget om Aller. Den nye font hedder Allerta.

Jeg kunne have valgt at ligge min tekst ind som et billeder, og derved have bibeholdt mit oprindelige fontvalg (der jo er den samme som er anvendt ved logoet). Men det ville have forringet min søgeoptimering, da jeg ville miste alle mine H-tags samt mit p-tag. Desuden ville det gøre det mere besværligt at opdatere siden, da der så pludselig skulle ændres i et foto, og ikke bare direkte i koden, hvilket jeg synes er meget uholdbart. Derfor har jeg valgt at anvende en lidt anderledes font, og har derved opnået optimal browserkompatibilitet.

Hjemmesiden er tjekket i:• Safari• Firefox• Google Chrome• Internet Explorer



23

moBiLapp:

Efterfølgende er vi begyndt på at lave design til et smartphone venligt site. Det er endnu ikke helt oppe at køre, men det er begyndt at tage form, og kan ses på www.eleven27.dk/mobile.

Indholdet i det smartphone venlige site bliver fuldstændig det samme som på desktop hjemmesiden, men vi har af gode grunde måttet lave et andet design. Jeg har til dette brugt jQuery Mobile. jQuery Mobile har nogle rigtig fine skabeloner til smartphone venlige sites. Der er mange varianter at vælge imellem, uanset om du skal lave billedfremvisning, listemenuer e.lign. Og for at du kan sætte et mere personligt touch på kan du i jQuerys Theme Roller selv lægge farver på så dit design bliver præcist som du vil have det.

Størrelsen på det smartphone venlige site er:width: 480px;height: auto;

Siden er endnu ikke gjort automatisk i min <head> sektion, så man kan kun komme ind på den via www.eleven27.dk/mobile, da den stadig er under opbygning. Hvis den skulle gøres automatisk, dvs. at browseren selv læser om den skal åbne siden til desktop, tablet eller smartphone, ville jeg i min <head> sektion indsætte følgende kode:

<script> if(screen.width <= 480) { document.location = ”http://www.eleven27.dk/mobile”; } </script>



24

Brainstorm og sKitser tiL smartphonedesign:Originale skitser er vedlagt fysisk portfolio

Brainstorm og sKitser tiL smartphonedesign:Brainstorm og sKitser tiL smartphonedesign:

nøgLeord:

• Brugervenlighed• Overskuelighed• Informativ• Fortæller hvem du er• Giver den rette stemning• Ofte kundens første indtryk



25

Originale skitser er vedlagt fysisk portfolio

FLoWChart:

INDEX

OM OS KONTAKTMENUHOME

FRIENDS

INTERIØR

ARKITEKTURPENTHOUSE

104M2

BIBI CHEMNITZ

PENTHOUSE 124M2

TRETORN VELUX A/S

URBAN OASIS 136 M2

URBANCLASSICS

INHOUSEFOTOGRAFI

KONTAKT FORMULAR

DISPLAYS OG MESSESTANDE



26

Footer i BUnd:

Når skærmen er så lille som den er på en smartphone, synes jeg det er langt det pæneste og mest overskuelige hvis footeren med menuknapperne ligger låst fast i bunden af skærmen. For at “låse den fast” til bunden har jeg brugt følgende kode:

Det er data-position=”fixed” som låser min footer fast til bunden. Hvis ikke det stod der, ville den lægge sig i forbindelse med teksten, og brugeren ville være nødt til at scrolle sig frem til menu-baren for at kunne klikke sig videre, hvilket ikke er optimalt.



27

BiLLedBehandLingen:

Alle billeder har været en tur gennem PhotoShop, og er gemt ned i 72 ppi, samt tilpasset i størrelserne til de gældende bokse / jQuery mobile PhotoSwipe. Alle er gemt som SRGB og til slut har jeg anvendt “save for web and devices”.

Til min PhotoSwipe har jeg dog måttet beskære mine fotos en lille smule for at kunne anvende denne, hvilket min kunde er helt indforstået med.

PhotoSwipeSmå billeder (thumb)

PhotoSwipeStore billeder (full)



28

iKon tiL hjemmesKÆrm:

Jeg har designet et lille app ikon, så alle brugere kan lægge mobil app’en ud på sin hjemmeskærm. Derved behøver man ikke gang på gang at taste URL’en i browseren hvis man er hyppig bruger af en side, men blot trykke på app ikonet, og hjemmesiden bliver åbnet.



29

UdvaLgte sider desKtop:



30

UdvaLgte sider smartphone:



31

KvaLitetsvUrdering:

Da jeg ikke laver web på min elevplads, har dette været et projekt jeg har lavet en min fritid. Kunden er en bekendt af min familie, så der er en anden relation til ham end rent professionelt, men det er ikke noget jeg har mærket i hele forløbet. Det er har været klart fra starten, at det var i professionelt anliggende han ønskede min hjælp til at få udviklet en visuel identitet. Så derfor har han også ønsket at se en ligeså professionel tilgang til projektet fra min side, som han selv har haft. Dette har givet mig en rigtig god fornemmelse af hvordan et sådant forløb vil foregå på en “rigtig” arbejdsplads. Jeg har lært utrolig meget, også fordi jeg har stået på egne ben, og har måttet løse mine problemer på egen hånd. Jeg er meget positiv omkring forløbet, og jeg er selv meget tilfreds med det endelige produkt, ligesom min kunde er.

Documents

Grafisk produktion og workflow