Arbejdsproces. Kvalitetsvurdering

Størrelse: px
Starte visningen fra side:

Download "Arbejdsproces. Kvalitetsvurdering"

Transkript

1 REDEGØRELSE Om opgaven FIKTIV OPGAVE: Til denne opgave skal der laves et design til en hjemmeside (one-page) samt designes grafik og knapper. Designet opsættes som HTML / CSS og valideres. Programvalg Webdesign og grafik: Photoshop. Opsætning i HTML: DreamWeaver. opgaven indeholder DESIGNUDVIKLING: Brainstorm og mindmap. Skitser til webdesign og designproces. Valg af farver og skrifttyper. Grafik og billeder fra Photoshop. Flowchart, storyboard og skelet. OPSÆTNING I HTML: Udsnit af HTML-koder. Udsnit af CSS-styles. Forklaring af særlige HTML-koder. Validering af formular og hjemmeside. Oversigt over styles på skrifttyper. FP FP = Vedlagt i fysisk portfolie. KRAV TIL OPGAVEN Enkel stil, begrænset tekst, fokus på billeder / produkter. Fokus på overskuelig navigering og brugervenlighed. Kontaktformular og produktvisning. PRODUKTIONSMETODER Alle filer opdeles i særskilte lag med navn. Alle lag inddeles i gruppe for bedre overblik. HTML-side (index), tekst- og billedfiler og CSS-styles inddeles i seperate mapper for bedre overblik. Arbejdsproces DESIGNUDVIKLING: Idéudvikling (inspiration hentet fra nettet). Håndtegnede skitser - design udvalgt. Designet opsættes i Photoshop og dokumentet tilpasses faste mål (max. 980 px. i bredden på indhold). Billeder redigeres og konverteres til Grayscale. Grafik og billeder laves i Photoshop. Alle filer til hjemmesiden optimeres til web. Flowchart, storyboard og skelet laves. OPSÆTNING I HTML, CSS OG VALIDERING: Webfont genereres med nødvendige filer. Sidens body og wrapper oprettes. Faste elementer (logo, menu, topbillede) placeres. De forskellige indholdsområder oprettes samt oprettelse af CSS-styles til skrifttyper, links, menu mv. Funktion til produkter, medarbejdere og kortet opbygges - jquery / Javascript implementeres. Formularen bygges op og testes. Løbende tests / previews af opsætningen gennem browservisning, herunder løbende rettelser / justeringer. Validering af hjemmesiden. Kvalitetsvurdering DESIGNUDVIKLING: Det er mit første one-page design, og jeg er meget glad for det færdige resultat. Det er har været en udfordring at lave et design, der imødekommer de krav, som et one-page design stiller - bl.a. krav om overskuelighed i indholdet, nem navigering, overblik osv. Men jeg synes, at helheden fungerer optimalt og alle funktionerne virker efter hensigten. Og havde jeg haft muligheden, ville jeg have arbejdet mere med brugen af forskellige funktioner, der skal lette udtrykket (fx. brug af + / - funktionen ved produkter og medarbejderinfo). OPSÆTNING I HTML: Det har uden tvivl været en udfordring af få alle funktioner til at virke i praksis. Det har krævet søgninger på nettet efter løsninger, der kunne implementeres og samtidig virke i alle browsere. Og jeg har desuden fået prøvet nogle mere anvancerede teknikker af, herunder jquery / JS. Jeg stødte dog på et problem med menuen. Min menu er fixed (fast position), hvilket betyder, at menuen forsvinder (man kan kun scrolle i indholdet), hvis browserens bredde er mindre end 1580 px. Ved hjælp af forskellige divs, fik jeg menuen til at følge med ned til 980 px., hvilket sikrer en valid menu ned til 1024 x 768 px. i skærmbredde. Alternativt kunne jeg have lavet opsætningen responsive, der ved hjælp af procentmæssige mål, skalerer indholdet til skærmbredden, hvilket også gør opsætningen ideel til mobile platforme (notebook, ipad, iphone osv.) Men resultatet er blevet langt bedre end jeg havde forventet, dog ville jeg gerne have brugt mere tid på at finde nogle nemmere, hurtigere eller bedre løsninger til de forskellige funktioner, for det kan sikkert gøres smartere.

2 PRODUKT

3 PRODUKT

4 PRODUKT

5 HTML-KODER

6 BRAINSTORM Animationer Baggrundsmusik Store billeder Stor typografik Sort / hvid tema Formular Collage Farverig Mange elementer Få elementer Kolonne-layout Virksomhed Mørk vs. lys Interaktiv Flash-elementer Femini Maskulin Gråtoner + stafage Håndtegnet Billeder i fuld bredde Illustrativ Fast menu Bannerfunktion Minimal Webfonte Mønster Retro / vintage Videobaggrund Sød vs. rå Neutral Organisk Elegant Horisontalt layout One-page Brug af ikoner Indscannet grafik Billedgalleri Nyhedsvisning RØD = VALGTE ELEMENTER

7 MINDMAP

8 INSPIRATION

9 INSPIRATION

10 SKITSER / PRODUKTER

11 SKITSER / PRODUKTER

12 SKITSER / PRODUKTER

13 SKITSER / PROFIL

14 SKITSER / PROFIL

15 SKITSER / KONTAKT

16 VALG AF FARVER UDVALGTE HEX # 15af90 HEX # HEX # a0a0a0

17 VALG AF TYPOGRAFI HOVEDOVERSKRIFT BRØDTEKST / INTRO UDVALGTE (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (UNIVERS) OVERSKRIFT (INTRO) OVERSKRIFT (INTRO) OVERSKRIFT (UNIVERS) Brødtekst (UNIVERS) Brødtekst (HELVETICA) Brødtekst (HELVETICA) Brødtekst (TAHOMA) Brødtekst (ARIAL) Brødtekst (VERDANA) Brødtekst MENU / MENU OVERSKRIFT MELLEMRUBRIK TITEL (negativ) LINKS FOOTER (negativ) Intro Intro = 18 px. Intro = 24 px. Intro = 18 px. Intro = 18 px. Intro = 12 px. Intro = 12 px. Times New Roman = 25 px. info (negativ) Times New Roman = 16 px. (WALKAWAY) OVERSKRIFT (WALKAWAY) OVERSKRIFT (WALKAWAY) OVERSKRIFT (WALKAWAY) OVERSKRIFT (WALKAWAY) OVERSKRIFT (TIMES) Intro (TIMES) Intro (TIMES NEW) Intro (TIMES NEW) Intro Brødtekst / Brødtekst Beskrivelse Oplysninger (negativ) Arial = 12 / 18 px. Arial = 12 / 18 px. Arial = 12 / 18 px.

18 DESIGN I PHOTOSHOP INDHOLD: = 980 px. Max. bredde = 1024 px.

19 DESIGN I PHOTOSHOP LOGO: størrelse = 300 x 55 px. MENU: skrifttype = Intro skriftstørrelse = 18 px. farve, inaktiv = # farve, aktiv = #15af90 stroke = #a0a0a0

20 DESIGN I PHOTOSHOP BILLEDOMRÅDE: 1580 (max.) x 340 px.

21 DESIGN I PHOTOSHOP PRODUKTFOTO: størrelse = 313 x 300 px. PRODUKT, AKTIV: farve, firkant = #15af90 farve, titel = #FFFFFF farve, info = #FFFFFF skrifttype, titel = Intro skrifttype, info = Times VIEW MORE: ikon = 20 x 20 px. skrifttype = Intro farve = #15af90 størrelse = 14 px.

22 DESIGN I PHOTOSHOP OVERSKRIFT: skrifttype = Intro skriftstørrelse = 24 px. farve = #15af90 stroke = # INTRO: skrifttype = Times styling = kursiv skriftstørrelse = 25 px. farve = # BRØDTEKST: skrifttype = Arial Regular skriftstørrelse = 12/18 px. justering = left justify farve = # farve, link = #15af90 styling, link = underline

23 DESIGN I PHOTOSHOP MELLEMRUBIK: skrifttype = Intro skriftstørrelse = 18 px. farve + stroke = # PERSONALE: skrifttype = Intro skriftstørrelse = 24 px. farve = #15af90 INFO: skrifttype = Arial Regular skriftstørrelse = 12/18 px. farve + stroke = #a0a0a0

24 DESIGN I PHOTOSHOP KONTAKTINFO: skrifttype = Arial Regular skriftstørrelse = 12/18 px. justering = left farve = # GRAFIK TIL KORT: farve, figur = #15af90 farve, ikon = #FFF cirkler = 30 x 30 px. location = px. IKONER - Inaktiv størrelse = 30 x 30 px. farve, cirkel = # farve, ikon = #FFF IKONER - Aktiv størrelse = 30 x 30 px. farve, cirkel = #FFF farve, stroke = # farve, ikon = #FFF

25 DESIGN I PHOTOSHOP FORMULAR: totalbredde = 580 px. farve = #a0a0a0 LINK: skrifttype = Intro skriftstørrelse = 14 px. farve = #15af90 IKON: farve, firkant = #15af90 farve, ikon = #FFF cirkler = 20 x 20 px. FOOTER: skrifttype = Intro skriftstørrelse = 12 px. farve = #FFF INFO: skrifttype = Arial Regular skriftstørrelse = 12/18 px. farve = #a0a0a0

26 GRAFIK I PHOTOSHOP IKONER - Aktiv størrelse = 30 x 30 px. farve, cirkel = # farve, ikon = #FFF IKONER - Inaktiv størrelse = 30 x 30 px. farve, cirkel = #FFF farve, stroke = # farve, ikon = #FFF

27 GRAFIK I PHOTOSHOP IKONER - Inaktiv / aktiv størrelse = 20 x 20 px. farve, firkant = #15af90 farve, ikon = #FFF SAVE FOR WEB AND DEVICES! - laveste filstørrelse. LOGO størrelse = 300 x 55 px. farve, grøn = #15af90 farve, grå = # skrifttype KISS! = Intro skrifttype, payoff = Times

28 FÆRDIGT DESIGN

29 FÆRDIGT DESIGN

30 FÆRDIGT DESIGN

31 BILLEDER OG GRAFIK

32 BILLEDER OG GRAFIK

33 BILLEDER OG GRAFIK

34 BILLEDER OG GRAFIK

35 BILLEDER OG GRAFIK

36 FLOWCHART https://twitter.com/kiss we keep it simple you want us how to catch view more projects meet the team our work view projects meet the team contact kiss facebook google + linked in twitter

37 STORYBOARD INDEX.html/work Navigation / knapper [ 12 ] button_more.png Faste elementer [ 1 ] logo.png [ 2 ] menu.doc Grafik [ 6 ] thumb01.jpg [ 7 ] thumb02.jpg [ 8 ] thumb03.jpg [ 9 ] thumb04.jpg [ 10 ] thumb05.jpg [ 11 ] thumb06.jpg Billeder [ 3 ] work.jpg Tekstindhold [ 4 ] work-header.doc [ 5 ] work-intro.doc [ 12 ] VIEW MORE Evt. andet [ + ] thumb07.jpg [ + ] thumb08.jpg [ + ] thumb09.jpg - øvrige fremkommer ved klik på grafik nr. 12.

38 STORYBOARD INDEX.html/about Navigation / knapper [ 18 ] button_info.png Faste elementer [ 1 ] logo.png [ 2 ] menu.doc Grafik Billeder [ 13 ] about.jpg Tekstindhold [ 14 ] about-header.doc [ 17 ] about-header.doc [ 15 ] about-intro.doc [ 16 ] about-vision.doc [ 18 ] about-team.doc [ 19 ] team-majken.doc Evt. andet [ + ] team-claus.doc [ + ] team-niels.doc [ + ] team-daniel.doc [ + ] team-rigo.doc [ + ] team-kent.doc - information til medarbejdere

39 STORYBOARD INDEX.html/contact Navigation / knapper [ 31 ] button_send.gif [ 22 ] button_mapplus.png [ 23 ] button_mapminus.png Faste elementer [ 1 ] logo.png [ 2 ] menu.doc Grafik [ 21 ] button_locate.png [ 25 ] logo_medium.png [ 28 ] button_facebook.png [ 28 ] button_google.png [ 28 ] button_twitter.png [ 28 ] button_linkedin.png Billeder [ 20 ] map01.jpg [ 20 ] map02.jpg [ 20 ] map03.jpg Tekstindhold [ 24 ] contact-header.doc [ 26 ] contact-info.doc [ 27 ] contact-follow.doc [ 29 ] contact-form.doc [ 30 ] form-info.doc Sidens bund [ 32 ] logo_small.png [ 33 ] footer-contact.doc [ 34 ] footer-links.doc [ 34 ] footer-follow.doc [ 36 ] copyright.doc

40 MÅLFAST SKELET INDEX.html/work 300 x 55 px. 580 x 30 px. 20 px. 30 px (max.) x 340 px. 980 (min.) x 340 px. 60 px. 60 px. 260 x 40 px. 580 x 20 px. 980 x 620 px. 313 x 300 px. 313 x 300 px. 313 x 300 px. 20 px. 313 x 300 px. 313 x 300 px. 313 x 300 px. 20 px. 110 x 20 px. 20 px. 120 px.

41 MÅLFAST SKELET INDEX.html/about 1580 (max.) x 340 px. 980 (min.) x 340 px. 60 px. 260 x 40 px. 580 x 20 px. 60 px. 220 px. 580 x 80 px. 140 x 30 px. 40 px. 260 x 60 px. 280 x 60 px. 80 px. 260 x 60 px. 280 x 60 px. 580 x 260 px. 40 px. 260 x 60 px. 280 x 60 px. 280 x 70 (min.) px. 10 px. 120 px.

42 MÅLFAST SKELET INDEX.html/contact 980 (min.) x 340 px (max.) x 340 px. 40 x 60 px. 30 x 65 px. 60 px. 260 x 40 px. 250 x 30 px. 80 px. 120 px. 20 px. 140 x 30 px. 160 x 30 px. 580 x 30 px. 60 px. 140 x 30 px. 20 px. 280 x 40 px. 280 x 40 px. 75 px. 15 px. 280 x 40 px. 280 x 40 px. 580 x 140 px. 580 x 240 px. 120 x 20 px. 140 x 20 px. 20 px. 120 px. auto x 240 px. 65 x 20 px. 220 x 30 px. 980 x 340 px. 220 x 45 px. 140 x 45 px. 100 x 15 px.

43 HTML / OPSTART Webfont: Font-face er lagt ind i CSS for at kunne benytte en webfont (Intro). Fonte: Fast styling af h1, h2 og h3, da disse er ens for hele siden. H1/2: Headers er inline-block, der tillader dem at ligge på samme linje selvom de har en fast bredde. Wrapper / page: Max-width = bliver ikke breddere end 1580 px, men kan nedskaleres (dynamisk). Min-width = indhold kan ikke blive mindre end 980 px (optimeret til 1024 x 768 px).

44 HTML / LOGO & MENU Header: Fast menu (fixed) i 100%. Max-width styres fra menu-pos og bredde på menu og logo styres af menu-width. Menu: Inline-block tillader menupunkterne at ligge efter hinanden samtidig med, at de har en fast bredde.

45 HTML / PRODUKTER Content: Luft lagt ind i top til ovenstående div. Link: Denne funktion understøttes af jquery / Java. Class / thumbs: Hvert prodbillede betår af to billeder, hvor selve produktet står til venstre og beskrivelseb står til højre. Hele billedet er derfor 626 x 300 px. Som udgangspunkt viser tabellen kun et udsnit på 313 x 300 px. af billedet. Class thumb-hover viser billedet med reference i øverste venstre hjørne. Når musen holdes over billedet, viser thumbhover:hover billedet med reference i øverste højre hjørne.

46 HTML / PROFIL Link: Denne funktion understøttes af jquery / Java. Tekst: Justeret sats med linkeffekt, der nulstiller brug af padding og knap.

47 HTML / KONTAKT Minus / plus: Knapperne, der bruges til navigering af kortet, har position:absolut, der gør det muligt at placere dem dynamisk henover / ovenpå kortet. Class / follow: Hvert prodbillede betår af to billeder, hvor selve produktet står til venstre og beskrivelseb står til højre. Hele billedet er derfor 60 x 30 px. Som udgangspunkt viser tabellen kun et udsnit på 30 x 30 px. af billedet. Class follow-hover viser billedet med reference i øverste venstre hjørne. Når musen holdes over billedet, viser followhover:hover billedet med reference i øverste højre hjørne.

48 HTML / FOOTER Footer: Max-width = bliver ikke breddere end 1580 px, men kan nedskaleres (dynamisk). Min-width = indhold kan ikke blive mindre end 980 px (optimeret til 1024 x 768 px). Bund: Opbygget i en tabel, hvor alle celler holder bund.

49 HTML / FORMULAR Input:focus Denne funktion minder om a:hover og angiver, hvad der skat ske når feltet er aktivt. Textarea: Denne type felt anvendes til større mængder af tekst, fx. beskeder fremfor et input-felt. Textarea indeholder også en mulighed for skalering af feltet. Placeholder: Giver mulighed for at skrive en tekst i hvert felt inden indtastning. Og der er angivet en style til hver type browser.

50 HTML / ANCHOR POINT Anchor id: Hvert menupunkt skal linke til et specifikt område på siden. Til et one-page design, findes der ikke andre unikke undersider, da alt indhold er samlet på samme side. Dette betyder, at der oprettes et referencepunkt, hvor menuen linker til gennem et id på et div. Når der klikkes på et menupunkt, scroller siden ned til den valgte reference.

51 JAVA SCRIPT / + - $( a[name= more ] ) = selector, her bestemmes, hvad der skal lyttes på. Koden lytter på alle a-tags, der har tildelt name = more. <td height= 25 align= left valign= top ><a name= more rel= mc >graphic designer. web</a></td>.click(function() { = Når der klikkes på et a-tag, afvikles en funktion, der finder attributten rel. <td height= 25 align= left valign= top ><a name= more rel= mc >graphic designer. web</a></td> Attributten angiver en værdi, her mc. Nu søger koden efter et object med tilsvarende id = mc.. Koden lytter nu på om dette object er synligt, som udgangspunkt er objektet skjult (display: none; = false). <td width= 260 ><div id= mc class= staff-info style= display:none; >Lorem ipsum dolor sit amet, consectetur adi piscing elit. In euismod blandit vehicula. Sed et accumsan ali.</div></td> if(isshow == false){ $(this).css({ backgroundposition: left bottom }); $( # + showid).show(); Når objekt er false (skjult), pålægges en css-regel, der viser et baggrundsbilledet med reference i nederste venstre hjørne og samtidig vises objektet med id et mc (minus). } else { $(this).css({ backgroundposition: left top }); $( # + showid).hide(); Når objekt er true, else (vist), pålægges en css-regel, der viser et baggrundsbilledet med reference i øverste venstre hjørne og samtidig skjules objektet med id et mc (plus). Samme funktion bruges til at vise tredje række af produkterne!

52 JAVA SCRIPT / KORT $( #minusknap ) = selector, her bestemmes, hvad der skal lyttes på. Koden lytter på et id, der er tildelt id = minusknap. <div id= minusknap ><img src= images/ikoner/button_mapminus. png width= 30 height= 30 alt= KISS /></div>.click(function() { = Når der klikkes på et a-tag, afvikles en funktion, der ændrer baggrundens position. $( #plusknap ).css({ opacity: 1 }); = Som udgangspunkt skal denne knap være synlig = opacitet 100% (1). if (curri - 1 <= 0) { $(this).css({ opacity: 0.5 }); curri = 1; Hvis referencepunktet er min. position (0), skal minusknappen have en opacitet på 50% (0.5). } else { $(this).css({ opacity: 1 }); Hvis referencepunktet er enten ved upgangspuntet (-340) eller max. position (-680), skal minusknappen have en opacitet på 100% (1). var poss = new Array(0, -340, -680); var maxi = poss.length - 1; var curri = 1; En samling af værdier, der skal bruges til at placere baggrundsbilledet. Herunder, hvor mange referencepunkter, der skal benyttes. Curri benytter midterste reference = -340 px. curri = curri + 1; $( #mapdiv ).css({ backgroundposition: poss[curri] + px 0px }); Når der klikkes på minusknappen, indsættes en værdi for referencepunktet afhængigt af udgangspunktet.

53 VALIDERING / FORM.

54 VALIDERING / SIDE Error Line 249, Column 74 & Line 265, Column 71: there is no attribute placeholder Error Line 249, Column 99 & Line 265, Column 191: there is no attribute required Fejlmeldinger accepteret: Disse to attributter skader ikke formularens funktion og derfor fjernes de ikke. Begge typer fungerer i alle browsere, men understøttes ikke, som udgangspunkt, af XHTML 1.0 (bruges i HTML5). Warning Line 365, Column 23: character < is the first character of a delimiter but occurred as data Advarsel accepteret: Denne advarsel fortæller, at tegnet < optræder som data og derfor bør skrives som en ascii-kode (<), men tegnet beskriver i virkeligheden funktionen større end og accepteres derfor.

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE GRAFISK PRODUKTION OG WORKFLOW PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE 04 INDHOLDSFORTEGNELSE Dokumentation 05

Læs mere

Arbejdsproces. Designparametre

Arbejdsproces. Designparametre REDEGØRELSE Om opgaven Til denne opgave skal der laves et design til easynets nye hjemmeside. Den skal være moderne, simpel i udtryk og overskuelig. Fokus på brugervenlighed. Der skal designes forside,

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

Læs mere

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med

Læs mere

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe

Læs mere

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik. GRAFISK WORKFLOW Opgaven Design og skabelse af website til maler og skrotkunstner Ole Møgelby. Websitet skal virke som en oversigt af Oles værker og som en informationsside. Programvalg Af programmer har

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow Grafisk Workflow REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums

Læs mere

GRAFISK WORKFLOW Hjemmesidedesign

GRAFISK WORKFLOW Hjemmesidedesign GRAFISK WORKFLOW www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline

Læs mere

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

Produkt. Index side GRAFISK DESIGN

Produkt. Index side GRAFISK DESIGN Grafisk design Produkt Index side Produkt Underside - kontakt Redegørelse OPGAVEN I forbindelse med valgfag, som jeg tog i København, havde vi lært forskellige nye funktioner, som vi skulle implementere

Læs mere

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2. GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity

Læs mere

det færdige resultat

det færdige resultat grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel

Læs mere

GRAFISK WORKFLOW H1 MARIA SCHELDE

GRAFISK WORKFLOW H1 MARIA SCHELDE GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være

Læs mere

Grafisk workflow. Hjemmeside til Bærkompagniet

Grafisk workflow. Hjemmeside til Bærkompagniet Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne

Læs mere

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er

Læs mere

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Redesign af website for bilforhandleren PerB. Opgave har jeg stillet mig selv med det formål at lave en simpel men indbydende udgave af PerB s website.

Læs mere

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.

Læs mere

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere

Stilen skulle gerne være feminin og primærfarven rosa.

Stilen skulle gerne være feminin og primærfarven rosa. Grafisk design // Grafisk Design Hjemmesideløsning for syerske Sorami er et enmands-firma med mere end 25 års erfaring, som tilbyder omforandring af tøj og tøj syet efter eget design, samt håndlavede smykker.

Læs mere

Grafisk workflow. website til duckhead music

Grafisk workflow. website til duckhead music Grafisk workflow website til duckhead music Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu.

Læs mere

Mark André Lyhne. Eksamen 2012. 12web1b

Mark André Lyhne. Eksamen 2012. 12web1b Mark André Lyhne Eksamen 2012 12web1b Indholdsfortegnelse Indholdsfortegnelse... 1 Projekt beskrivelse... 3 Målgruppe... 3 Afsender... 3 Budskab... 3 Kommunikationsmål... 3 Ideudvikling... 3 De 6 Designparametre...

Læs mere

Dokumentation. Karen-Louise Fejerskov

Dokumentation. Karen-Louise Fejerskov Dokumentation Grafisk Workflow Et af produkterne, jeg skulle lave, var et redesign af FreQuence s info hjemmeside. A B Punkt 1 Ansvar: Jeg har selv stået for opsætningen af hjemmeside og selv bestemt,

Læs mere

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT PROJEKTET Udarbejdelse og idéudvikling af en fiktiv grafisk identitet til Puls Fitness. I denne kernefaglighed fremhæver jeg designet til websitet samt lidt merchandise. Derudover ses et udkast til bl.a.

Læs mere

GRAFISK PRODUKTION & WORKFLOW. Endotest website

GRAFISK PRODUKTION & WORKFLOW. Endotest website GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere

Læs mere

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. WORKFLOW OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. Det er en fiktiv opgave. MIT BIDRAG Jeg stod for al design og

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Martin Møller Web1b Tirsdag den 19 juni 2012

Martin Møller Web1b Tirsdag den 19 juni 2012 Martin Møller Web1b Tirsdag den 19 juni 2012 Projektbeskrivelse 3 Tema valg 3 Budskab 3 Afsender 4 Målgruppe 4 Kommunikations mål 4 Skitser 6 Layout index 7 Layout Kulturliv 8 Layout Gratis glæder 9 Layout

Læs mere

PRODUKTION OG WORKFLOW

PRODUKTION OG WORKFLOW PRODUKTION OG WORKFLOW INTERN PROJEKTSTYRING PRODUKTION OG WORKFLOW Majken Cramer, Hovedforløb 2 Aarhus Tech, september 2012 HVAD GÅR OPGAVEN UD PÅ JULI 2012. Jeg har stået for projektstyringen på intranettet

Læs mere

Grafisk design OPGAVEBESKRIVELSE

Grafisk design OPGAVEBESKRIVELSE OPGAVEBESKRIVELSE Min opgave var at lave og designe en pakke til s marketing og kommunikationsafdeling MarKom. Pakken består af: et hoved element portfolio hjemmeside communication.madebydelta.com to supplerende

Læs mere

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder. GRAFISK DESIGN KUNDEN PA Vaskeriteknik er en enkeltmandsvirksomhed som startede i 2008. Manden bag er Preben, som gennem 14 års brancheerfaring startede sit eget firma op da han føler at han med sit partnerskab

Læs mere

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. 1 Grafisk workflow GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet

Læs mere

KODNING AF RESPONSIV DESIGN

KODNING AF RESPONSIV DESIGN Grafisk Workflow REDEGØRELSE GRAFISK WORKFLOW 39 OPGAVEN Frk. Nielsens rengøringsfirma kom til os for at få lavet ny hjemmeside. Hun var træt af den gamle, da hun ikke kunne rette i indholdet, og valgte

Læs mere

For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle Mikkalina Glas s produkter.

For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle Mikkalina Glas s produkter. Moodboard opgave design At designe og udforme en ny visuel identitet til Mikkalina Glas, bestående af logo og hjemmeside. For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle

Læs mere

GRAFISK DESIGN CAMILLA BEYER

GRAFISK DESIGN CAMILLA BEYER GRAFISK DESIGN CAMILLA BEYER Dokumentation Brainstorm Opgaven Arbejdsproces Opgaven gik ud på at designe et logo til en grafisk - Brainstorm elev der søger elevplads. Der skal også designes visitkort,

Læs mere

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk Kunde Bogforlaget Frydenlund A/S Produkt www.his2rie.dk Opgave Hjemmesiden før Redesign af hjemmesiden www.his2rie.dk, som ejes af forlaget. Min opgave lød på, at udforme et nyt design til hjemmesiden,

Læs mere

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves nyt hjemmesidedesign til Inhouse Graphic skolepraktik på Aarhus Tech. Hjemmesiden skal kort og godt fortælle om de elever, der arbejder i skolepraktikken og om deres

Læs mere

DOKU- MEN- TATION TEK- NISK

DOKU- MEN- TATION TEK- NISK TEK- NISK DOKU- MEN- TATION GRUPPE 21: AMALIE HOVGESEN- CLEA-MARIE FIND PALUDAN THERESE HASSE LARSEN - CECILIE POSS AMALIE LEONORA DAM - KASPER MUNK JENSEN : http://miex5619.keaweb.dk/seasight/ 1. MOCKUP

Læs mere

grafisk design Se webappen på din mobil

grafisk design Se webappen på din mobil ideudvikling Jeg har valgt at bruge kulturbegivenheden Aarhus Festuge, som udgangspunktet i min svendeprøve. Jeg vil redesigne deres marketingsmateriale såsom logo, magasin, plakater m.m. Derudover vil

Læs mere

PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia

PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia 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,

Læs mere

MARIA SKAU MADSEN SVENDEPRØVE 2015 WWW.BY-M.DK

MARIA SKAU MADSEN SVENDEPRØVE 2015 WWW.BY-M.DK DOKUMENTATION MARIA SKAU MADSEN WWW.BY-M.DK INDHOLDSFORTEGNELSE OPGAVE BESKRIVELSE.... 5 RESEARCH.... 5 DESIGN.... 5 SPECIFIKATIONER DET TRYKTE MEDIE.... 5 NUVÆRENDE IDENTITET... 6 PRIMÆR OG SEKUNDÆR MÅLGRUPPE....................6

Læs mere

NY IDENTITET TIL SCHWARZ

NY IDENTITET TIL SCHWARZ GRAFISK DESIGN NY IDENTITET TIL SCHWARZ Redskaber: Photoshop Illustrator Kundeprofil: Schwarz er en eksklusiv forhandler af senge og tilbehør i topklavlitet. Med deres store sortiment af kvalitetsmærker

Læs mere

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Grafisk w o rk f l ow jemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Deres vision er at skabe enkle og inspirerende

Læs mere

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E.

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E. Portfolie Redesign www.gaardbodesign.dk Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013 Jens Jákup E. Gaardbo indholdsfortegnelse design... gestaltlove... opbygning...

Læs mere

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2 Opgaven Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. Websitet skulle være responsivt, og indeholde de mest gængse informationer

Læs mere

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester PORTFOLIO SEBASTIAN NYHOLM Eksamensprojekt 1. Semester Indledning Dette projekt gik ud på at designe og udvikle sit eget portfolio, hvor indhold fra tidligere projekter, læring, brugerteste og begrundelse

Læs mere

Procesbeskrivelse - Webprogrammering

Procesbeskrivelse - Webprogrammering Procesbeskrivelse - Webprogrammering Indholdsfortegnelse Forudsætninger... 1 Konceptet... 2 Hjemmesiden... 2 Server-side... 3 Filstrukturen... 3 Databasehåndtering og serverforbindelse... 4 Client-side...

Læs mere

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet GRAFISK DESIGN Diner no. 34 Hjemmeside + Visuel identitet Diner no. 34 9 Opgavebeskrivelse Fiktive opgave. Redesign af visuel identitet og design af ny hjemmeside. Materialet skal skabe et genkendeligt

Læs mere

Byg et website med Dreamweaver

Byg et website med Dreamweaver Byg et website med Dreamweaver I denne øvelse skal vi opbygge et website for Hotel Holiday i Dreamweaver. Det færdige site kan ses her: http://www.itu.dk/people/khhp/hotel_holidays/velkommen.html Øvelsen

Læs mere

4. DEC 5. DEC 8. DEC 2014

4. DEC 5. DEC 8. DEC 2014 1. DEC I dag fik jeg opgavebeskrivelsen og fik et overblik over, hvad der skal laves, ved at gennemgå opgavebeskrivelsen, samt lave en brainstorm og PBS. Jeg er i gang med at finde et alternativ til programmet

Læs mere

Opret en formular i Dreamweaver

Opret en formular i Dreamweaver Opret en formular i Dreamweaver. Åben det html-dokument hvor du vil have din formular skal være på. 2. Klik i det felt (DIV eller tabel) hvor du vil have din formular skal være. Du kan se du er i feltet

Læs mere

Projekt i Programmering C Menu til hjemmeside.

Projekt i Programmering C Menu til hjemmeside. Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller

Læs mere

Grundforløbsprøve Projektbeskrivelse

Grundforløbsprøve Projektbeskrivelse Grundforløbsprøve Projektbeskrivelse Webintegrator Thomas á Rógvi 221191-2505 Indholdsfortegnelse Opgaven... 3 Tidsplan... 4 Målgruppe... 5 Layout... 6 Design... 7 Fonte... 7 Browser... 7 Bilag... 8 Det

Læs mere

Grafisk Design. fra idé til visuelt udtryk Benett

Grafisk Design. fra idé til visuelt udtryk Benett fra idé til visuelt udtryk Benett Indholdsfortegnelse Brief...5 Idé og skitsering....6 Værktøjer....6 Farvevalg....7 Flowchart eksisterende site...7 Design i Photoshop....9 Ikoner i Illustrator...11 Setup

Læs mere

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. Grafisk design Grafisk design Opgaven Jeg har fået til opgave at re-designe Sells.dk. Sitet skal benytte elementer fra en kampagne, der tidligere er

Læs mere

Grafisk workflow. Layout Da guiden primært skal betjenes med fingrene, har jeg programmeret den som en touchbaseret webapplikation (WebApp).

Grafisk workflow. Layout Da guiden primært skal betjenes med fingrene, har jeg programmeret den som en touchbaseret webapplikation (WebApp). Redegørelse Grafisk workflow Opgaven Medicinalfirmaet Boehringer Ingelheim, havde et ønske om at digitalisere en lægefaglig håndbog. Det er en såkaldt Quick guide, som er et lille overskueligt opslagsværk

Læs mere

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly WORKFLOW RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly DOKUMENTATION OPGAVE Opgaven jeg stillede mig selv, var at designe og kode et koncept til en webshop

Læs mere

# Redesign af copenhagenskatepark.dk

# Redesign af copenhagenskatepark.dk # 1 Grafisk Design # Redesign af copenhagenskatepark.dk Opgave Dette er en fiktiv opgave hvor jeg har valgt at redesigne copenhagenskatepark.dk's website. Jeg synes det kunne være en spændende udfordring

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside 1. Lidt om hvad du

Læs mere

GRAFISK DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

GRAFISK DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5 NAVN PÅ OPGAVEN KERNEOMRÅDE SVENDEPRØVE 2013 Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5 Beskrivelse af opgaven I min fritid modtog jeg en opgave, som bestod i, at redesigne og kode et

Læs mere

REDESIGN AF PORTFOLIO 16. jan. 2015

REDESIGN AF PORTFOLIO 16. jan. 2015 REDESIGN AF PORTFOLIO 16. jan. 2015 Christoffer Møller Jarolics CPH Business Lyngby Multimediedesign Udviklingsprocessen af tilblivelsen af dette projekt redesign af portfolio, vil på de følgende sider

Læs mere

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT GRAFISK WORKFLOW WEBSITE - CHOCOADDICT DOKUMENTATION OPGAVEBESKRIVELSE Opskriftsbogen Chocoaddict skulle have et website, hvor alle opskrifter samt skabelon til print selv opskriften er tilgængelig. Der

Læs mere

RESPONSIVE WEBSITE GRAFISK WORKFLOW DOKUMENTATION

RESPONSIVE WEBSITE GRAFISK WORKFLOW DOKUMENTATION RESPONSIVE WEBSITE DOKUMENTATION OPGAVEN Opgaven gik ud på at designe og kode et responsive website til sommerhuset Brink Møllegaard. Websitet skulle præsentere og informere besøgende om huset og området

Læs mere

1. Større opgaver i word

1. Større opgaver i word Indholdsfortegnelse 1. Større opgaver i word...1 1.1. Typografier... 1 1.1.1. Normal... 1 1.1.2. Overskrifter... 5 1.2. Dispositionsvisning... 6 1.3. Indholdsfortegnelse... 6 1.4. Krydshenvisninger...

Læs mere

Flash Logic Free CMS. Manual og brugervejledning

Flash Logic Free CMS. Manual og brugervejledning Flash Logic Free CMS Manual og brugervejledning Indhold: 1. Funktionalitet 2. Fil-oversigt 3. Baggrundsbillede 4. Banner-billede 5. Redigering af tekst 6. Brug af html-tags 7. Web site navn 8. Upload til

Læs mere

Projektdokumentation. Tidsplan. Dag 1. Dag 2. Dag 3. Dag 4. Dag 5. Dag 6. Dag 7. Dag 8. Dag 9. Dag 10. Dag 11. Dag 12

Projektdokumentation. Tidsplan. Dag 1. Dag 2. Dag 3. Dag 4. Dag 5. Dag 6. Dag 7. Dag 8. Dag 9. Dag 10. Dag 11. Dag 12 Projektdokumentation - af Dennis Iversen Tidsplan Dag 1 Research, mindmap, skitser til logo og start på logo. Dag 2 Færdiggørelse af logo, målgruppe og segment fastslået, skitser visitkort, start på visitkort.

Læs mere

GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE

GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE Opgavebeskrivelse Jeg har valgt at gennemgå min egen responsive hjemmeside, hvor jeg vil fokusere på responsivt design. Layout Min hjemmeside har jeg

Læs mere

Grafisk design 20 21

Grafisk design 20 21 Grafisk design 21 Grafisk design Opgavebeskrivelse At designe en hjemmeside for et reklamebureau og komme med firmanavn og logo. Hjemmesiden henvender sig til virksomheder og private, der har brug for

Læs mere

Get Skeleton. Boilerplate for Responsive, Mobile-Friendly Development

Get Skeleton. Boilerplate for Responsive, Mobile-Friendly Development Get Skeleton Boilerplate for Responsive, Mobile-Friendly Development Hvad er Get Skeleton?!? Get Skeleton er en lille samling af små CSS og JS filer, som giver dig adgang til ultra hurtig udvikling af

Læs mere

Grafisk Workflow. Opgaven. Test i forskellige browsere (Usability) Arbejdsgang. Kvalitetsvurdering. Procesbeskrivelse

Grafisk Workflow. Opgaven. Test i forskellige browsere (Usability) Arbejdsgang. Kvalitetsvurdering. Procesbeskrivelse Jesus Kr istus - Ev ig Konge e g n o K g i v E s u t s i r K Jesus Jesus Kristu s - Evi g Kon ge Opgaven Opgaven går ud på, at lave en hjemmeside, enten som en præsentation af noget, eller en kampagne

Læs mere

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie Eksamensopgave 2012 Aarhusportalen Melissa Emilie Indhold Indhold... 1 Aarhusportalen... 2 Projektbeskrivelse... 2 Hvem er kunden... 2 Målgruppe... 2 Hvad ønsker vi at opnå... 2 Temaer... 2 Tidsplan...

Læs mere

GRAFISK DESIGN. Kenneth Friis Petersen

GRAFISK DESIGN. Kenneth Friis Petersen GRAFISK DESIGN Kenneth Friis Petersen Kenneth Friis Petersen - Svendeprøve 2015 Opgavebeskrivelse Total redesign af hjemmeside til Trademark Textiles A/S, både layout og kodning af side. Trademark textiles

Læs mere

Kunsten på Silkeborg Højskole - en online kunstregistrant

Kunsten på Silkeborg Højskole - en online kunstregistrant GRAFISK DESIGN Design af responsiv hjemmeside til Silkeborg Højskoles nye kunstregistrant. Oprettelse af ny side på Silkeborg Højskoles primære hjemmeside. Kunsten på Silkeborg Højskole - en online kunstregistrant

Læs mere

Designmanual for webintegrator grundforløbs eksamen

Designmanual for webintegrator grundforløbs eksamen Kræn Byskov Videndjurs Webintegrator Designmanual for webintegrator grundforløbs eksamen Side 1-14 Indholdsfortegnelse Indledning 3 Målgruppe 4 Timeline 5 Logo 6 Font 7 Farver 8 Flowchart 9 Storyboard

Læs mere

GRAFISK WORKFLOW LENA SØRENSEN

GRAFISK WORKFLOW LENA SØRENSEN LENA SØRENSEN Redegørelse Opgaven Undvikling og design af logo og hjemmeside til Camillas cupcake. Mit bidrag til opgaven Jeg har arbejdet selvstændigt og alene med opgaven, og har haft frit råderum til

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Dokumenter Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 5 Opgave... Side 8 Få adgang til filerne fra din computer... Side 16 Vejledende løsning... Side 17 GoogleDocs Dokumenter 2

Læs mere

Produktbeskrivelse - Grafisk workflow

Produktbeskrivelse - Grafisk workflow Produktbeskrivelse - Grafisk workflow Opgavebeskrivelse Det er en nyhedsmail. De er en ny opsætning Ansvar for opgaveløsning Webadministratoren står for opgavefordeling. Tekst kommer fra salgs og butikslederen.

Læs mere

Byg web sider. Introduktion:

Byg web sider. Introduktion: Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se

Læs mere

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm WOODKID The Golden Age Banner Projekt - 1 Semester, CPH Business, MUL-A13E Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm Projektbeskrivelse Vi har designet og animeret tre forskellige bannere

Læs mere

Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side...

Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side... Banner Side 1 af 8 Indhold Indhold... 2 Installation af bannermodulet... 3 Opsætning af bannermodul... 5 Opsætning af bannere... 7 Indsætning af bannermodul på side... 8 Side 2 af 8 Installation af bannermodulet

Læs mere

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE Det var på tide med en ny hjemmeside til privat brug. Jeg valgte at starte helt fra bunden i stedet for at ændre på noget eksisterende.

Læs mere

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside 1 Alle har ret og råd til en professionel hjemmeside på få minutter GoMinisite

Læs mere

Grafisk workflow. bl.udbudsnet.dk

Grafisk workflow. bl.udbudsnet.dk Grafisk workflow. bl.udbudsnet.dk Hvad går opgaven ud på? Opgaven gik ud på at lavet et præsentations website for Udbudsnet. Hjemmesiden skulle bruges til at sælge Udbudsnet, på en messe som hedder BL.

Læs mere

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ******

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ****** Workflow Svendeprøve Emil Momsen BeskrivelseN WorkFlow BeskrivelseN Side - 2 / 8 Arktis Brief Fra kunde Opgave / Indhold Kunden var WWF og opgaven gik ud på at få folk til at blive klar over, hvor alvorligt

Læs mere

Grafisk Design. Trine Dichmann Knudsen

Grafisk Design. Trine Dichmann Knudsen Trine Dichmann Knudsen Opgaven Designe et layout til en hjemmeside for Højen & Magic Fyrværkeri ApS. Designkrav & ønsker Baggrundsbilleder Tiltalende Moderne Anderledes Mere liv Der udover havde jeg frie

Læs mere

Drejebog til tractorpulling.dk

Drejebog til tractorpulling.dk Drejebog til tractorpulling.dk Generelt På hjemmesiden benyttes følgende som standard: - Skrifttype: Verdana - Skriftstørrelse: 12px / 9pt. 4. oktober 2011 Moskjær Marketing Falkevej 4 DK-6920 Videbæk

Læs mere

FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7

FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7 FAKTA 3 INDLEDNING 4 KREATIV PROCES 4 INDLEDENDE FASE 4 DESIGNVALG 6 TYPOGRAFI 6 FARVER 6 LOGO 6 BRUGERGRÆNSEFLADE 6 BAGVEDLIGGENDE KODE 7 EKSPERTVURDERING 10 REDESIGN AF PROJEKTER 12 BANNERPROJEKT 12

Læs mere

Grafisk Design 70% Skitser

Grafisk Design 70% Skitser Grafisk design Grafisk 2 PRODUKT Som et led i den online markedsføring af BBQ Wing it, har jeg valgt at lave et website, med fokus på information. Det er et website, der er baseret ud fra lærte funktioner

Læs mere

opstartskvalitet Arbejdsproces

opstartskvalitet Arbejdsproces REDEGØRELSE Om opgaven FIKTIV OPGAVE: Til denne opgave skal der laves et coverbillede til forsiden af et magasin samt et logo til bagsideannoncen. Der er ingen eksisterende billeder, og derfor arrangeres

Læs mere

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 TYPO3 manual DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 Det første afsnit, Introduktion til systemet, giver et hurtigt overblik over mulighederne.

Læs mere

WORKFLOW & GRAFISK PRODUKTION

WORKFLOW & GRAFISK PRODUKTION Opgavebeskrivelse Kunde: Gorm Larsen & Zornig (GLZ) Websitet Social media cheat sheet er en oversigt over forskellige sociale mediers opsætning. Formålet er altså at gøre det nemt at finde de mål, der

Læs mere

Portfolio Andreas Stjerneklar Kristensen. Multimedia Designer Eksamen 1. Semester

Portfolio Andreas Stjerneklar Kristensen. Multimedia Designer Eksamen 1. Semester Portfolio Andreas Stjerneklar Kristensen Multimedia Designer Eksamen 1. Semester Indledning Design Skitser ASK logoet Teknologivalg No database Javascript Eksempel Udviklingsmuligheder Mere relation mellem

Læs mere