Page 1

MORTEN DAM ORLEMAN THRANE

aarhus

H1 2011-2012

GRA FISK WORK GRA FLOW FISK & WORK WEB FLOW & WEB


WEBSITE

WEBSITE Websitet er en fiktiv opgave for Aarhus Festuge baseret på det indhold websiden indeholder pr. medio dec. 2011. Et „redesign“ med den nye grafiske linie. Det er relativt utænkeligt, at Aarhus Festuge ville bestille en hjemmeside udarbejdet i HTML - men snarere et CMSsystem, da siden er forholdsvis indholdstung og sikkert ofte skal opdateres. Da HTML er det sprog, vi skal benytte på uddannelsen til mediegrafiker, har jeg valgt at opbygge et website med 3-4 undersider, der giver et indtryk af, hvordan et færdigt site kunne have været.

LINK TIL WEBSITE www.antics.dk/Aarhusfestuge.dk

PROGRAMMER

Analyse af eksisterende website • Indhold • Opbygning

Udvælgelse af repræsentative sider og skitse af flowchart • Forside • Tema • Historie • Kontakt

+ Autosvar

Skitsering på nyt layout • Overvejelser

ift. brugervenlighed

• Overvejelser

ift. brugerflow

• Layout

på elementer, tekst og billeder

• Adobe

PhotoShop • Adobe Illustrator • Adobe DreamWeaver

ARBEJDSPROCES

Skelet, storyboard og template • Body, Wrapper, Tags, Class’es, Links • Pixelmål, Padding, Margin • Slideshow

widget, jQuery

• Kontaktformular, php • Swap

image, rollovers

Slicening af grafik • Croptool • Save

for Web & Devices...

• Grafikoptimering

- png, jpg, gif

Konstruktion af website • Oprettelse

af CSS og DIV Tags

• Indsættelse

af DIV Tags

• Indsættelse

af grafik, tekst, kode

• Styling, links

Test af website • Upload • Test

til server

i browsere

02


ANALYSE & FLOWCHART

ANALYSE AF EKSISTERENDE WEBSITE

EKSISTERENDE FORSIDES INDHOLD

Forside Aa. F. banner

Reklamebanner

Menu

Bannere

Øvrigt

Logo Link til forside Dato for næste festuge Tema

Skift. fotos fra AaF 2011

Nyheder Media Presse Info Kontakt

Nyheder Galleri 2011 Foto fra Festugen 2011 Nyheder Historie Videopræs. af Festugen Næste års tema Festugen i 9 ord Link til nyhedsmail Link til Facebook Kontakt

Profession rep. 2011 DK / EN udgave Søgefelt Sponsor Kontakt

Aarhus Festuges nuværende side er bygget op i et CMSsystem (content management system). Det ligger til dels til grund for det kassede design. Websites opbygget i CMS-systemer er nemme at editere og udbygge. Additive systemer der er omkonfigurérbare, men som selvfølgelig også har layoutmæssige begrænsninger. Fra forsiden og på de forskellige undersider pirres man effektivt af de mange bannere der opfordrer til at dykke ned i forskellige arrangementer, læse om baggrund osv. Jeg synes, at dette er et effektivt princip, der medvirker til, at man som bruger kommer godt rundt på siden. I mit redesign valgte jeg at tilføre layoutet mere hierarki, som er en af de svagheder, det nuværende site har. Færre men prioriterede „quicklinks“, større billeder i toppen til at markere hver enkelt side og en mere samlet menu i venstre side.

EKSISTERENDE WEBSITE

NY FORSIDES INDHOLD Tema Aa. F. banner

Reklamebanner

Menu

Quicklinks

Øvrigt

Logo Link til forside Dato for næste festuge

Skift. event-reklamer

Nyheder Media Presse Info Galleri 2011 Historie Videopræsentation Tema 2012 Festugen i 9 ord Nyhedsbrev Facebook

Tema Program Kunstnere Historie Facebook

Kontakt Link til forside

www.aarhusfestuge.dk

FLOWCHART Forside

Tema 2012

Historie

Kontakt Autosvar

03


SKITSERING

Efter skitsering på forskellige layouts faldt valget på et forslag, hvor logoet med dato var placeret øverst i venstre side og primære links var udvalgt og fremhævet som „quicklinks“. Store billeder, liv og overskrifter med placering øverst og mere sekundært indhold i læseretiningen nedad mod højre hjørne. Med et layout på 900px i bredden og varierende højde skulle brugervenligheden være sikret ift. nutidens skærmstørrelser.

SKITSERING PÅ NYT LAYOUT I skitseringsprocessen gjorde jeg mig bl.a. overvejelser i forhold til overskuelighed i layoutet, brugervenlighed og hvilke designelementer og effekter der skulle udgøre den grafiske identitet.

Fra logoet videreførte jeg rektanglet og de trekantede former og udviklede en form hvor et et trekantet hjørne var fjernet. Det blev den primære form til fremhævede links på siden.

aarhus festuge

31.08 - 09.09

2012

Forsidebannere øverst som slideshow var tænkt som eksterne reklamer fra eventholdere ifm. Aarhus Festuge. For at integrere de forskellige grafiske udtryk i websitets layout blev bannerne placeret på lag med blendmoden „Multiply“ i PhotoShop.

04


SKELET

900 742 208 138

534

94

114

60 103 43

SKELET 422

Mens designet blev udviklet i PhotoShop tænkte jeg sideløbende i de tekniske løsninger. Jeg stilede efter at skabe et interessant website med hierarki og variation. Samtidig var det vigtigt, at siden ikke blev kaotisk. Inden websitet kunne slices op i PhotoShop måtte jeg definere præcise pixelmål til at croppe efter. Jeg gemte siderne ned som jpgs og placede dem i Illustrator, hvor jeg kunne angive mål til opbygningen i DreamWeaver og samtidig påføre de forskellige elementers funktioner.

Baggrundsbillede 319 Margin (+ baggrundsbillede)

Billede 30

10 64

1050

Swap-image / hover

330

320

338

137

Slideshow

Spacer 86

15

16 181

166 182

15

22 203

18

176

33 8

10

220

17

54

720

212

140

5

18

78

45 15

16 56

303 824

05


STORYBOARD & TEMPLATE

LILLE UDSNIT AF CSS p{

• Body • Wrapper • LeftWrap

font-weight: normal;

color: #000;

float: left;

font-size: 14px;

font-weight: bold;

color: #801C7C;

text-transform: uppercase;

line-height: 10px;

}

• Logo

• Menu

• Bottomleft

line-height: 14px;

h1 {

Siden blev bygget op på baggrund af en template med alle sidernes faste elementer:

font-size: 11px;

}

STORYBOARD & TEMPLATE

(editérbar region)

• Rightwrap

• Header

• Link

• Link

til forside til kontakt • Content (editérbar region) • Bottom_wrap • Footer

JQUERY KODE TIL SLIDESHOW Fra adobe.com downloadede jeg en jQuery widget til slideshow på forsiden. Det var bl.a. muligt at konfigurere tempo, retning og effekter inden download og implementering på websitet.

I „body“ definerede jeg generelt gældende styling af websitet og i „wrapper“ fastlagde jeg websitets bredde, centrerede placering og skalérbare højde. For at opnå skyggeeffekt på et website med varierende højde måtte jeg underdele i flere underordnede wrappere med baggrundsbilleder der kunne repeteres uendeligt.

MOUSEOVER MED CSS

PHP

Menuen i venstre side blev opbygget som en „rollover list“, hvor det med CSS er muligt at skabe en mouseover effekt.

„Kontakt“-siden blev i første omgang skabt som en html-fil ud fra templaten. Herefter blev koden pastet ind i et phpscript: „FormToEmail.php“, som på en enkel og sikker måde kan videresende indtastninger fra websitet.

MOUSEOVER SOM IMAGE SWAP

HTML

PHP

Mange links på siden blev lavet som image swaps, hvor et billede udskiftes med et andet ifm. mouseover. En stilfærdig outer glow kom til at udgøre effekten.

06


KONSTRUKTION AF WEBSITE

SAVE FOR WEB & DEVICES... -> 2Up -> valg af filformat/transperance/matte -> navngive uden brug af æ,ø,å -> gemme ned i img-mappe

SLICENING AF GRAFIK I PhotoShop tilpassede jeg nøjagtige grafikstykker til websitet. Disse blev gemt ned i forskellige formater via „Save for Web & Devices...“ som weboptimeret grafik i 72ppi: • Fotos med mange farver og detaljer som jpg • Grafikstykker som png eller gif • Spacers som gif

NY CSS

KONSTRUKTION AF WEBSITE

-> højde, bredde, float left (+ andet) -> placere cursor det rette sted -> indsætte DIV Tag -> indsætte tekst, billeder, grafik

Med udgangspunkt i templaten blev de 4 html-sider skabt. • DIV Tags blev føjet til stylesheet’et - styles.css • Forskelligt indhold blev puttet i de editérbare regioner • Med padding og margin blev tekst og grafik justeret • Med p, h1, h2, h3 osv. og class’es blev teksten stylet • Med p, h1, h2, h3 osv. blev websiden søgeoptimeret • De 4 sider blev linket sammen

TEST AF WEBSITE For at teste websiden måtte jeg forbinde og uploade til en server. Jeg har testet sitet i nogle af de mest anvendte browsere med positivt resultat: • Internet Explorer • Mozilla Firefox • Google Chrome • Safari

BESKYTTELSE MOD SPAM For at minimere spam fra websitet erstattede jeg teksten mail@aarhusfestuge.dk med krypteret kode og billeder.

MAIL@AARHUSFESTUGE.DK = mail@aa&#114 ;husfestu ge.dk

07

H103 // Portfolio  

Grafisk Workflow & Web

Read more
Read more
Similar to
Popular now
Just for you