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

Grafisk produktion & workflow

Grafisk produktion & workflow Grafisk produktion & workflow WORKFLOW & PRODUKTION WEBSITE NATURSPEJDERNE Dokumentation I 2 OPGAVEN Opgaven Jeg har lavet dette fiktive website der kunne være en mulighed for en nyopstartet spejderforening.

Læs mere

Grafisk workflow. Se siden her: www.cormas.dk

Grafisk workflow. Se siden her: www.cormas.dk Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html

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

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

WORKFLOW & PRODUKTION

WORKFLOW & PRODUKTION OPGAVE Jeg har lavet et fiktiv website for en hundekennel. Det er mit bud på hvordan sådan en eventuelt kan se ud. PROGRAMMER Photoshop Dreamweaver Illustrator WORKFLOW & PRODUKTION KENNEL BISCO Dokumentation

Læs mere

KT OR LOW PRODUKTION // WORKFLOW

KT OR LOW PRODUKTION // WORKFLOW PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside

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

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 OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv

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

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden

Læs mere

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne

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

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

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

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

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

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

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

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger GRAFISK PRODUKTION OG WORKFLOW Hjemmeside til Team Brügger DITTE MADSEN - SVENDEPRØVE - 2015 KUNDEPROFIL Team Brügger er en frisørsalon i Aars. Indehaveren Gitte Brügger startede salonen op sammen med

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 DESIGN. Min personlige e-portfolio

GRAFISK DESIGN. Min personlige e-portfolio GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse

Læs mere

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW DOKUMENTATION OPGAVEN Denne opgave er lavet som en fiktiv opgave. Opgaven er lavet for et fiktivt firma, som tilbyder personlig fitness træning.

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

Grafisk produktion og workflow

Grafisk produktion og workflow Grafisk produktion og workflow Helle Nicolaysen, mediegrafiker, 3. hovedforløb Introduktion Bylderup-Bov Rideklub har en hjemmeside, bestående af en template, hvor designet er fastlagt. Jeg er i kontakt

Læs mere

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som

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

Portfolio - Grafisk Workflow

Portfolio - Grafisk Workflow Portfolio - Grafisk Workflow Opgaven gik ud på at designe et website for en tatovør. Der skulle indgå forskellige elementer på hver enkel side, samt overholdes nogle fastsatte krav. Vi skulle arbejde ud

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

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

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Design af website til Tipsbladet Fokus, som er noget, jeg selv har fundet på. Det er tænkt som et alternativ til Tipsbladet.dk, hvor der på Tipsbladet

Læs mere

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 1 Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Indhold Projekt Beskrivelse... 3 Temaer... 3 Afsender... 4 Budskab & Kommunikations formål...

Læs mere

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow Grafisk workflow Maria Clausen Svendeportfolio Grafisk workflow OPGAVEN Kunden har stiftet et nyt firma som hedder Wood id, som sælger lamper, møbler og tilbehør lavet i kvalitets træ. Kunden ville gerne

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. Side 1

Grafisk. Workflow. Side 1 Grafisk Workflow Side 1 http://mediegrafiker-ats.dk/15gt33med/freja/hotelinger/ Side 2 Kunde: Inger Marie, Hotel Inger Målgruppe: Aldersgruppe mellem 30-50 år. Hvad har jeg bidraget med? Mit bidrag til

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

Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet: STILHISTORIE Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet: http://www.mediegrafiker-ats.dk/12gf32med8b/stil/maria/ Opgaven I forbindelse med et tema omhandlende

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

1. Hovedforløb. Mediegrafiker - 2015

1. Hovedforløb. Mediegrafiker - 2015 Af Ditte Vium Overgaard Grafik og billedbehandling 1. Hovedforløb Mediegrafiker - 2015 OPGAVEBESKRIVELSE Der er til alle de fire kernefagligheder taget udgangspunkt, i mit eget lille projekt, med design

Læs mere

Portfolio - sunestenild.dk

Portfolio - sunestenild.dk Portfolio - sunestenild.dk Grafisk produktion og workflow Anvendte programmer: Opgavebeskrivelse: Jeg vil gerne lave en hjemmeside som promoverer mig selv i forhold til kommende arbejdsgivere og eventuelle

Læs mere

GRAFISK WORKFLOW. Proces. Kodning. Fonts:

GRAFISK WORKFLOW. Proces. Kodning. Fonts: P f t r o o i l o 1 H GRAFISK WORKFLOW»Vi skal bruge en hjemmeside, så vi kan få fat i patienterne til vores botilbud. Ellers risikerer vi at de vælger noget andet. Der skal laves logo, samt lærringsvideoer«proces

Læs mere

Grafisk workflow 3. Hovedforløb

Grafisk workflow 3. Hovedforløb Grafisk workflow 3. Hovedforløb 3. Hovedforløb Grafisk workflow Dreamweaver Opgavebeskrivelse Højbakkegaard har brug for en hjemmeside, som kan vise hvad gården har at byde på, deres unikke vine og faciliteter

Læs mere

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se. Solsystemet lavet af Jesper Kjær Webintegrator i Kastrup Tekniske Skole Grundforløbsprøve 2014 Opgave: Vores solsystem Onsdag 23 april til onsdag 7 maj Her ses et screenshot af websitet solsystemet i menuen

Læs mere

GRAFISK WORKFLOW GRAFISK WORKFLOW

GRAFISK WORKFLOW GRAFISK WORKFLOW Opgaven At lave en ny hjemmeside til tekniske skolers sportslege. Den gamle var rodet og uoveskuelig. Det vigtigste var at rydde op, samt holde en rød tråd til logo og indbydelsen. Afsender Lærerne på

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

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM OPGAVEN Redesign af Ole Møgelbys hjemmeside, der efter stor succes med sine værker, gerne vil have frisket udtrykket lidt op. Billedsiderne skal udvides

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

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

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

Laura Svendsen Kernekompetencer GRAFISK WORKFLOW

Laura Svendsen Kernekompetencer GRAFISK WORKFLOW Laura Svendsen Kernekompetencer GRAFISK WORKFLOW website til drømmemadpakken Hvad? Opgaven er anden del af en opgave i to dele, et trykt produkt og et digitalt produkt. Vi fik udleveret tekst og billeder

Læs mere

grafisk workflow Madmagasinet

grafisk workflow Madmagasinet grafisk workflow Madmagasinet Dokumentation Opgaven Madmagasinet skal have et website som er responsive, således deres brugere har en side som er optimeret til de forskellige platformer, hvorpå deres site

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

Sabine Puk Sørensen Svendeprøve portfolio

Sabine Puk Sørensen Svendeprøve portfolio Sabine Puk Sørensen Svendeprøve portfolio 2016 Grafisk workflow Svendeprøve Kvalitetsvurdering Hjemmesiden fungere som den skal, og kunden er meget glad for resultatet. Siden er simpel, men giver den ønskede

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

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, http://www.technofil.dk. Der refereres fra nu af blot til hjemmesiden. Mine indledende tanker bag hjemmesiden

Læs mere

OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse

OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse GRAFISK WORKFLOW ARBEJDSPROCES OPGAVE BESKRIVELSE OPGAVEN At lave et redesign af AGF Fanclubs hjemmeside med et mere nutidigt look og bedre oversskuelig brugerflade. Opgaven har jeg stillet mig selv, men

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

WORK- FLOW PLATFORM WEBSITE H2

WORK- FLOW PLATFORM WEBSITE H2 WORK- FLOW PLATFORM WEBSITE H2 Platform Min opgave var at lave logo og website til et nyt spillested i Vejle. Genren der spilles på stedet er alternativt og indie Rock + elektronisk musik. Kunden er en

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

Tidsplan...3 Afgrænsning 1.1...4 Research...5 Idégenerering...6. Logo 1.1...8 Logo 1.2...9. Logo 1.4... 12. Farver... 11

Tidsplan...3 Afgrænsning 1.1...4 Research...5 Idégenerering...6. Logo 1.1...8 Logo 1.2...9. Logo 1.4... 12. Farver... 11 Tidsplan.... Afgrænsning.....4 Research...5 Idégenerering....6 Navn / identitet...7 Logo.....8 Logo....9 Logo.... 0 Farver.... Logo.4... Merchandise..... Brochure.... 4 Brochure..... 5 Brochure..... 6

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

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

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

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

Se hjemmesiden på:

Se hjemmesiden på: Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed

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

G F W F G R A F I S K W O R K F L O W N I K O L A J V A N G K I L D E M E D I E G R A F I K E R S V E N D E P R Ø V E 2 0 1 6

G F W F G R A F I S K W O R K F L O W N I K O L A J V A N G K I L D E M E D I E G R A F I K E R S V E N D E P R Ø V E 2 0 1 6 G F W F G R A F I S K W O R K F L O W N I K O L A J V A N G K I L D E M E D I E G R A F I K E R S V E N D E P R Ø V E 2 0 1 6 O P G A V E B E S K R I V E L S E Et redesign af hummels website. Det gamle

Læs mere

GRAFISK PRODUKTIONSFORSTÅELSE

GRAFISK PRODUKTIONSFORSTÅELSE GRAFISK PRODUKTIONSFORSTÅELSE BRILLIANT BIKINIES WEBSITE MARÍ DYRMOSE OPGAVEN OPGAVEBESKRIVELSE Brilliant Bikini kompagniet skulle have designet og programmeret en website, hvor de kunne præsentere deres

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

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

Oversigt HTML5 nye tags til sideopbygning

Oversigt HTML5 nye tags til sideopbygning HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En

Læs mere

Grafik Workflow...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Brainstorm...6 Målgruppe Signalværdi Sitemap Nuværende sitemap...

Grafik Workflow...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Brainstorm...6 Målgruppe Signalværdi Sitemap Nuværende sitemap... Grafik Workflow....2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Brainstorm...6 Målgruppe Signalværdi Sitemap Nuværende sitemap...7 Kommende sitemap...7 Mockup...8 Opsætning... 10 Programmer

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

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

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

Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto.

Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto. 1 Scrollbar Åbn index.html Der skal være en side åben. Indsæt en div: scroll Opret en div til feltet hvorpå scrollbaren ønskes placeret. Definér div'en Giv div'en mål og position absolut. Vælg Overflow:

Læs mere

CSS fortsat: Boksmodel, floating & positionering

CSS fortsat: Boksmodel, floating & positionering Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse

Læs mere

H2 Portfolio. Patrick Lindholm-Andersen

H2 Portfolio. Patrick Lindholm-Andersen H2 Portfolio Patrick Lindholm-Andersen Grafisk design Opgave Opgaven gik ud på at designe et nyt logo til et gammelt fiktionelt bryggeri firma. Da kunden er engelsk har alt kommunikation foregået på engelsk

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

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

Grafisk Design. rafisk Design

Grafisk Design. rafisk Design rafisk Design Svendeprøve 2016 Opgaven I forbindelse med at ReklameTryk ville lancere en webshop skulle vores hjemmeside opdateres. Den skulle fremstå enkelt, lys og nem at navigere rundt på og samtidig

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

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

JAN MØLLER JD DESIGN CMK

JAN MØLLER JD DESIGN CMK JAN MØLLER JD DESIGN CMK INDHOLDSFORTEGNELSE Sitemap:... 3 Valg af farver:... 3 Skitser:... 4 Forside:... 4 Produkter:... 5 Kontakt/Bestil:... 6 Galleri:... 7 Info:... 8 Målgruppe:... 9 Persona:... 9 Produkter:...

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

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 workflow Frank winding

grafisk workflow Frank winding grafisk workflow Frank winding redegørelse Opgaven Byg & Bo stod foran årets byggeudstilling 2015, og min arbejdsgiver JUGEL&CO skulle stå for alt markedsføring, medieplanlægning og kommunikation. Mit

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

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

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

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site. 1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.

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

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner. GRAFISK DESIGN OPGAVEN Min kæreste er medstifter af en vinloge. Medlemmerne af logen kunne godt tænke sig et sted, hvor de bl.a. kunne få et overblik over, hvilke vine de har bedømt og hvornår næste loge

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 Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016

Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016 Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016 GRAFISK DESIGN PROCES Opgaven Jeg designer og laver mine egne plakater i min fritid både illustrationer, manuelt grafik og fotografier

Læs mere