Forståelse for grafisk produktion og workflow

Størrelse: px
Starte visningen fra side:

Download "Forståelse for grafisk produktion og workflow"

Transkript

1 Forståelse for grafisk produktion og workflow Fallulah hjemmeside Opgaven: Blev stillet i forbindelse med forløbet avanceret webdesign, jeg har hverken fået karakter eller bedømmelse på den. Opgaven bestod i at jeg skulle lave en valgfri hjemmeside men, at den skulle indeholde html 5, mediaqueries og css3. Idé: Min idé var at lave en musik hjemmeside da man kan være meget utradiotinel og kreativ. Specielt for sangerinden Fallulah med hendes innovative, specielle stil. Der indeholder kraftige farver og spræl. Fremgangsmetode: Min første idé til siden var, at der skulle være et perleforhæng i baggrunden af hjemmesiden. Jeg lavede disse perlekæder i Adobe illustrator. Min næste tanke var, at lave en animeret menu med billedrammer. Men da Explorer ikke understøtter animation med css3 og html5 tænkte jeg, at det var bedre med en traditionel menu, så siden ville have en bedre usability. Jeg prøvede mig frem i photoshop for at se, hvordan det ville fungere rent visuelt. Jeg lavede udelukkende index siden i photoshop. Jeg lavede et moodboard med disse forskellige tanker jeg havde gjort mig omkring emnet [01]. Og derefter skitsede jeg hvordan jeg havde forestillet mig hvordan det skulle se ud [02]. Til sidst, men ikke midst lavede jeg wireframes, så jeg havde en idé om, hvordan hjemmesiden skulle forgrene sig. Jeg har igennem hele min kodning taget hensyn til forskellige browsere: Explorer, opera, Safari, mozilla firefox og Google Chrome. Resultat: [03] På index siden har jeg placeret et stort billede af Fallulah mellem en masse forskellige instrumenter, for at give et billede af hvem hun er. I baggrunden, bag menuen står der fallulah med hendes logotype. Jeg har implementeret et banner på siden der omhandler en udgivelse af hendes nye album, for at give et realistisk billede af en hjemmeside. Derudover står der copyright på alle siderne i footeren. Menu en fungerer således at der er en lille hover animation når curseren kommer over feltet [04]. [05] På Musik siden har jeg valge at placere en musikvideo fra youtube, det blev desværre en live version da man ikke kunne bruge nogle af de andre til formålet at lægge den ind på sin egen hjemmeside. Derudover har jeg lagt nogle af hendes numre ind som man kan lytte til. [06] På koncertsiden har jeg skrevet datoer og spillesteder i felter der skal matche resten af hjemmesiden. I hvert felt står der Læs mere, som på nuværende tidspunkt er et dødt link, men skal føre en hen på for eksempel billetnet. dk hvor man kan købe biletten og læse mere. [07] På biografi siden har jeg brugt column-count så den tilpasser sig efter skærm størrelsen. Det gjorde det lidt besværligt at ombryde teksten når det skulle være skalerbart, til gengæld er det meget praktisk i forhold til usabilityen. [08] Er der kontaktoplysninger. Jeg har skrevet kontaktoplysningerne på et billede, som jeg har lavet en html5 animation på [09] så når man har curseren hen over billedet, vender det og viser kontakt oplysningerne. Jeg synes at det var en skæg idé. Men jeg ville nok aldrig gøre det på en virkelig hjemmeside, da man ikke kan kopiere oplysningerne og det ikke kan vises korrekt i Internet explorer. Teknik: Css3 selektorer ud fra DOM-træet Media query Procenter Hover Animation Googlefont Javascript Column-count Importering af swf fil Implementering af musik Implementering af youtube video Programmer: Adobe Dreamweaver Adobe Illustrator Adobe Photoshop Produktspecifikationer: Format: Siden er skalerbar, så den tilpasser sig browservinduet og derudover er den lavet med media queries så den tilpasser sig mobil [10] og tablet [11]. Farve: RGB Filformater: Jpeg, png 24

2 01 02

3

4 07 08

5 html 5 index <!doctype html> <html><head> <meta charset= utf-8 > <title>fallulah</title> <link href= css/stylesheet.css rel= stylesheet type= text/css > <link href= rel= stylesheet type= text/css > <script src= js/jquery min.js type= text/javascript ></ script> <script src= js/jquery.fullscreenr.js type= text/javascript ></ script> <script src= Scripts/swfobject_modified.js type= text/javascript ></script> <script type= text/javascript > var FullscreenrOptions = { width: 1024, height: 683, bgid: #bgimg ;jquery.fn. fullscreenr(fullscreenroptions);</script> swfobject.embedswf ( swf/fallulah_banner2.swf, fallulahflash, 94.5%, 14%, 9.0.0, swf/expressinstall.swf, flashvars, params, attributes); </script> </div> </section> <footer> <address>sony Music Records 2012, All rights reserved</address> </footer> </div> </body> </html> <script type= text/javascript src= js/swfobject.js ></script> </head> <img id= bgimg src= images/perler.png /> <div id= realbody > <body> <div id= fallulah ></div> <div> <header> <img src= images/font_fallulah.png alt= fallulah logotype > <nav> </nav> </header> <ul> </ul> <li><a href= index.html >Forside</a></li> <li><a href= html/musik.html >Musik</a></li> <li><a href= html/koncerter.html >Koncerter</a></li> <li><a href= html/biografi.html >Biografi</a></li> <li><a href= html/kontakt.html >Kontakt</a></li> <section><img src= images/bg_img.jpg alt= fallulah_bg > <div id= fallulahflash > <p>flashplayer skal være installeret for at kunne afspille flashfilen her</p> <p><a href= ><img src= alt= Get Adobe Flash player /></a> </p> </div> <script type= text/javascript > var flashvars = {, params = {wmode: transparent, params ={scale: exactfit ; attributes = {;

6 only screen and (min-width:769px){ body { overflow:hidden; padding:0;margin:0; height:100%; #bgimg { z-index: -1; #realbody{ z-index: 5; overflow:auto; height:100%; /*background: url(../images/raster.png );*/ /* CSS Document */ *{ margin:0; padding:0; body{ div { header{ background:#000; width:60%; header img{ max- margin-left:-4.2%; top:0; margin-top:5.4%; z-index:1; section img{ section{ /*MENU*/ nav{ nav ul{ nav li{ margin-top:15%; height:10%; z-index:2; font-size:1em; border-top-right-radius:5px; border-bottom-left-radius:5px; padding:0 5px 0 0; nav li a{ background:#3566a0; padding:0 23px 0; padding-top:12px; height:18px; line-height:5px; -webkit-transition:200ms ease-in; -o-transition:200ms ease-in; 04 -moz-transition:200ms ease-in; transition:200ms ease-in; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; nav li a:hover{ background:#6cc; color:#000; footer{ bottom:0; text-align:right; margin:30px 0 30px 0; /*KONCERTER*/ section > h1{ color:#666; font-size:2.5em; section > ul{ margin:0 5px 10px;

7 section > ul > li{ padding:8px 20px; border-bottom:rgba(255,255,255,.3) solid 1px; background:#3d699b; background:-webkit-linear-gradient(#833d84, black); background:-moz-linear-gradient(#833d84, black); background:linear-gradient(#833d84, black); section > ul > li > a{ section > ul > li > a:hover{ section > ul > li:first-child{ padding-top:40px; border-top-left-radius:50px; section > ul > li:last-child{ padding-bottom:40px; border-bottom-right-radius:30px; border-bottom:#000; /*KONTAKT */ section > #box{ width:540px; height:720px; background:url(../images/fallulah_dyr.jpg) no-repeat; -moz-webkit-transition:2s; -webkit-transition:2s; #box:hover{ background:url(../images/dyr_kontakt.jpg) no-repeat; -webkit-transform:translatez(30px) rotatey(180deg); -moz-transform::translatez(30px) rotatey(180deg); -webkit-box-shadow:-5px 5px 5px #171717; -moz-box-shadow:-5px 5px 5px #171717; /*BIOGRAFI*/ article{ article#cols{ opacity:.9; -moz-column-count:4; /*Firefox*/ -moz-column-width: 13%; -moz-column-gap: 1%; -moz-column-rule:1px outset #000; -webkit-column-count:4; /*safari and chrome*/ -webkit-column-gap:1%; -webkit-column-width:13%; -webkit-column-rule:1px outset #000; -o-column-count:4; /*Opera*/ -o-column-gap:1%; -o-column-width:13%; -o-column-rule:1px outset #000; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; background:#fff; padding:10px; 09 article#cols > h2{ font-size:1.5em; article#cols > h3{ font-size:1.3em; article#cols > h4{ font-size:0.9em; font-weight:500; margin-top:5px; margin-bottom:5px; article#cols > p{ font-size:.8em; article#cols ul{ font-size:.8em; article#cols img{ margin-top:15px; /*MUSIK*/ aside a{ font-size:.8em; color:#fff; aside a:hover{ /*MOBIL*/ only screen and (min-width:320px) and (max-width:640px){ body { overflow:hidden; /* needed to eliminate scrollbars caused by the background image */ padding:0;margin:0; /* necesarry for the raster to fill the screen */ height:100%; #bgimg { z-index: -1; #realbody{ z-index: 5; /* Place the

8 new body above the background image */ overflow:auto; /* restore scrollbars for the content */ height:100%; /* Make the new body fill the screen */ /*background: url(../images/raster.png );*/ *{ body{ div { header{ margin:0; padding:0; background:#000; width:60%; header img{ max-width:60%; margin-left:-10%; top:0; z-index:1; section img{ margin-top:5%; section{ /*MENU*/ nav{ nav ul{ nav li{ margin-top:25%; height:10%; z-index:2; font-size:.5em; border-top-right-radius:5px; border-bottom-left-radius:5px; padding:0 0px 0 0; nav li a{ background:#3566a0; padding:0 9px 0; padding-top:12px; height:5px; line-height:0px; -webkit-transition:200ms ease-in; -o-transition:200ms ease-in; -moz-transition:200ms ease-in; transition:200ms ease-in; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; nav li a:hover{ background:#6cc; color:#000; height:15px; footer{ bottom:0; text-align:right; margin:30px 0 30px 0; /*KONCERTER*/ section > h1{ color:#666; font-size:1.5em; section > ul{ margin:0 5px 10px; font-size:.7em; section > ul > li{ padding:8px 20px; border-bottom:rgba(255,255,255,.3) solid 1px; background:#3d699b; background:-webkit-linear-gradient(#833d84, black); background:-moz-linear-gradient(#833d84, black); background:linear-gradient(#833d84, black); section > ul > li > a{ section > ul > li > a:hover{ section > ul > li:first-child{ padding-top:40px; border-top-left-radius:50px; section > ul > li:last-child{ padding-bottom:40px; border-bottom-right-radius:30px;

9 /*KONTAKT */ section > #box{ width:200px; height:267px; background:url(../images/fallulah_dyr_lille.jpg) no-repeat; -moz-webkit-transition:2s; -webkit-transition:2s; #box:hover{ background:url(../images/dyr_kontakt_lille.jpg) no-repeat; -webkit-transform:translatez(30px) rotatey(180deg); -moz-transform::translatez(30px) rotatey(180deg); -webkit-box-shadow:-5px 5px 5px #171717; -moz-box-shadow:-5px 5px 5px #171717; /*BIOGRAFI*/ article{ margin-top:5%; article#cols{ opacity:.9; -moz-column-count:1; /*Firefox*/ -moz-column-width: 13%; -moz-column-gap: 1%; -moz-column-rule:1px outset #000; -webkit-column-count:1; /*safari and chrome*/ -webkit-column-gap:1%; -webkit-column-width:13%; -webkit-column-rule:1px outset #000; -o-column-count:4; /*Opera*/ -o-column-gap:1%; -o-column-width:13%; -o-column-rule:1px outset #000; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; background:#fff; padding:10px; article#cols > h2{ font-size:1em; article#cols > h3{ font-size:.8em; article#cols > h4{ font-size:.7em; font-weight:500; margin-top:5px; margin-bottom:5px; article#cols > p{ font-size:.5em; article#cols ul{ article#cols img{ margin-top:15px; /*MUSIK*/ aside a{ font-size:.5em; color:#fff; aside a:hover{ /*TABLET*/ only screen and (min-width:641px) and (max-width:768px){ body { overflow:hidden; /* needed to eliminate scrollbars caused by the background image */ padding:0;margin:0; /* necesarry for the raster to fill the screen */ height:100%; #bgimg { z-index: -1; #realbody{ z-index: 5; /* Place the new body above the background image */ overflow:auto; /* restore scrollbars for the content */ height:100%; /* Make the new body fill the screen */ /*background: url(../images/raster.png );*/ /* CSS Document */ *{ margin:0; padding:0; body{ div { header{ background:#000; width:60%;

10 header img{ max-width:70%; margin-left:-8%; top:0; margin-top:1%; z-index:1; section img{ section{ /*MENU*/ nav{ nav ul{ nav li{ margin-top:15%; height:10%; z-index:2; font-size:.5em; border-top-right-radius:5px; border-bottom-left-radius:5px; padding:0 1px 0 0; nav li a{ background:#3566a0; padding:0 23px 0; padding-top:12px; height:10px; line-height:5px; -webkit-transition:200ms ease-in; -o-transition:200ms ease-in; -moz-transition:200ms ease-in; transition:200ms ease-in; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; nav li a:hover{ background:#6cc; color:#000; height:20px; footer{ bottom:0; text-align:right; margin:30px 0 30px 0; /*KONCERTER*/ section > h1{ color:#666; font-size:2em; section > ul{ margin:0 5px 10px; section > ul > li{ padding:8px 20px; border-bottom:rgba(255,255,255,.3) solid 1px; background:#3d699b; background:-webkit-linear-gradient(#833d84, black); background:-moz-linear-gradient(#833d84, black); background:linear-gradient(#833d84, black); section > ul > li > a{ section > ul > li > a:hover{ section > ul > li:first-child{ padding-top:40px; border-top-left-radius:50px; section > ul > li:last-child{ padding-bottom:40px; border-bottom-right-radius:30px; border-bottom:#000; /*KONTAKT */ section > #box{ width:540px; height:720px; background:url(../images/fallulah_dyr.jpg) no-repeat; -moz-webkit-transition:2s; -webkit-transition:2s; #box:hover{ background:url(../images/dyr_kontakt.jpg) no-repeat; -webkit-transform:translatez(30px) rotatey(180deg); -moz-transform::translatez(30px) rotatey(180deg); -webkit-box-shadow:-5px 5px 5px #171717; -moz-box-shadow:-5px 5px 5px #171717; /*BIOGRAFI*/ article{ margin-top:5%; article#cols{ opacity:.9; -moz-column-count:2; /*Firefox*/ -moz-column-width: 13%; -moz-column-gap: 1%;

11 -moz-column-rule:1px outset #000; -webkit-column-count:2; /*safari and chrome*/ -webkit-column-gap:1%; -webkit-column-width:13%; -webkit-column-rule:1px outset #000; -o-column-count:2; /*Opera*/ -o-column-gap:1%; -o-column-width:13%; -o-column-rule:1px outset #000; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; background:#fff; padding:10px; article#cols > h2{ font-size:1em; article#cols > h3{ font-size:.9em; article#cols > h4{ font-size:.7em; font-weight:500; margin-top:5px; margin-bottom:5px; article#cols > p{ article#cols ul{ article#cols img{ margin-top:15px; /*MUSIK*/ aside a{ font-size:.8em; color:#fff; aside a:hover{

Grafik & Billede weloveorganic.com webshop

Grafik & Billede weloveorganic.com webshop Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt

Læs mere

OPGAVE: WELOVEORGANIC.COM WEBSHOP

OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker

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

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

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

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 produktion og workflow

Grafisk produktion og workflow Grafisk produktion og workflow Helle Nicolaysen svendeprøve juni 2016 Kunde (fiktiv) Bomholt er en virksomhed der laver og sælger plankeborde og som nu ønsker en helhedsorienteret grafisk designlinje,

Læs mere

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop Om opgaven: For et halvt år siden overtog nogle bekendte værtshuset Midtskiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres

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

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

CentOS 7. Lavet af Ali Sarac og Andreas Jensen

CentOS 7. Lavet af Ali Sarac og Andreas Jensen CentOS 7 Lavet af Ali Sarac og Andreas Jensen 3.8.2017 Indholdsfortegnelse Konklusion... 3 Installer CentOS 7 i VMware... 3 Installation af Apache, PHP5 og vores HTML side... 7 2.4 spørgsmål... 12 Kildekoder...

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

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

Form og dens underlige box model

Form og dens underlige box model Denne guide er oprindeligt udgivet på Eksperten.dk Form og dens underlige box model Denne artikel handler om hvilke problemer man som webudvikler kan komme ud for, og hvordan man løser dem. Jeg kommer

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

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

Grafisk. workflow. Produktion. Website

Grafisk. workflow. Produktion. Website Grafisk & Produktion workflow Website www.patellaloeb.dk OPGAVEN: Løbetræneren Mads Frederiksen skulle have designet og programmeret et nyt site, hvor kunderne kan gå ind og læse om de løbepakker, han

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

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

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

Beginning CSS and Web Development kap. 1 11

Beginning CSS and Web Development kap. 1 11 Beginning CSS and Web Development kap. 1 11 Plan Xhtml opbygning CSS Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand up programmering Xhtml vs. html i XHTML skal alle elementer

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

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

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

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

THOMAS KNUDSHOLT MEDIEGRAFIKER. Grafik - Billedbehandling - Typografi og Ombrydning Grafisk Design - Grafisk Produktionsforståelse

THOMAS KNUDSHOLT MEDIEGRAFIKER. Grafik - Billedbehandling - Typografi og Ombrydning Grafisk Design - Grafisk Produktionsforståelse THOMAS KNUDSHOLT MEDIEGRAFIKER Grafik - Billedbehandling - Typografi og Ombrydning Grafisk Design - Grafisk Produktionsforståelse MEDIEGRAFIKER HOVEDFORLØB 2 GRAFISK DESIGN DOKUMENTION Kunden: Retsforbundet

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

Grafisk Workflow. Mediegrafiker - Svendeprøve. Mediegrafikeruddannelsen af Ramin Azizi

Grafisk Workflow. Mediegrafiker - Svendeprøve. Mediegrafikeruddannelsen af Ramin Azizi Grafisk Workflow Mediegrafiker - Svendeprøve Mediegrafikeruddannelsen 2012-2016 - af Ramin Azizi www.azizidesign.dk Dokumentation Opgavebeskrivelse: Jeg har i denne opgave valgt at redesigne s hjemmeside,

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 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 WORKFLOW WEBSITE: MEEFRED DESIGN

GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN GRAFISK WORKFLOW GRAFISK WORKFLOW WEBSITE: MEEFRED DESIGN OPGAVEN: Meefred Design er en enkeltmandsvirksomhed, som tilbyder grafisk design til både erhverv og private. Meefred Design har endnu ikke fået

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

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

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

GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016

GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016 GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016 grafisk WORKFLOW // DOKUMENTATION opgaven // Jeg har i min opgave lavet et responsive onepage website for et årlig event kaldet Dirt

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

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

Programvalg Dreamweaver CC, html Photoshop CC 2015

Programvalg Dreamweaver CC, html Photoshop CC 2015 Grafisk design Opgaven Opgaven er fiktiv. Denne hjemmeside skal ses som en lille appetitvækker. Hvad er Troldhede og hvad kan man finde i naturen, der er rundt om byen? Jeg har selv stået for design af

Læs mere

Grafisk Workflow. hovedforløb 2

Grafisk Workflow. hovedforløb 2 Grafisk Workflow hovedforløb 2 WORLD OF FURNITURE Forside.wrapper width: 95%; margin: 0 auto; box-shadow: 0px 0px 25px #888888; Image slider carousel 5 sekunder .button span.button span:after.button:hover

Læs mere

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

GRAFISK WORKFLOW - RESPONSIV WEBSIDE GRAFISK WORKFLOW - RESPONSIV WEBSIDE REDEGØRELSE Opgavebeskrivelse Redesign hjemmeside for Murerfirmaet Døssing i responsivt design, som udstråler professionalisme. Der skulle være en referenceside med

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

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

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

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar

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

STEPS GIANT. GIANT STEPS jazz orchestra. Klasse: tr09mul02. Maria Ekelund, Stephanie Rosborg, Rasmus Seye og Thomas Riis

STEPS GIANT. GIANT STEPS jazz orchestra. Klasse: tr09mul02. Maria Ekelund, Stephanie Rosborg, Rasmus Seye og Thomas Riis Klasse: tr09mul02 STEPS GIANT j a z z o r c h e s t r a Indholdsfortegnelse 1.0 Problemformulering 1.1 Tidsplan 1.2 Wireframe 1.3 Flowchart 2.0 Research 2.1 Begrundelse for design 2.2 Logo 3.0 Generelt

Læs mere

Ordbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06.

Ordbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06. Ordbøgerne.dk Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06 Side 1 af 35 Indholdsfortegnelse Indledning:...3 Design...4 Visuelt design:...4

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

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

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 OPGAVE: EMBRACE-IT WEBSITE

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE grafisk workflow OPGAVE: EMBRACE-IT WEBSITE BESKRIVELSE GRAFISK WORKFLOW BESKRIVELSE Den tidligere nævnte virksomhed Embrace-IT, forsøger i takt med at virksomhen vokser, at opdatere og optimere deres

Læs mere

Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren.

Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren. Opbygning Som eksempel er brugt siden om korets målsætning som den vises i editoren. I editoren vises tabellinierne, selvom de på den færdige side i vores tilfælde er usynlige, bortset fra den sorte ramme

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

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

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

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

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen. Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.

Læs mere

GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE

GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE WEBSHOP TIL KLITMØLLER COLLECTIVE Klitmøller Collective er et nyt lifestyle brand, som udspringer fra fiskerlejet Klitmøller i det nordvestlige Jylland.

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

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

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

Dreamweaver CS5. Trin 2. af Hasse Sørensen for MicroWorld-NetCom Kursus

Dreamweaver CS5. Trin 2. af Hasse Sørensen for MicroWorld-NetCom Kursus Dreamweaver CS5 Trin 2 af Hasse Sørensen for MicroWorld-NetCom Kursus Dreamweaver CS5 Dreamweaver CS5 trin 2 Tekst og design: Hasse Sørensen, Nordisk Grafik Udgiver og ophavsretsholder: MicroWorld-NetCom

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

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

Lav en hjemme side der kan sælge fly billetter til en stor i Europa. EKSAMENS OPGAVE Lav en hjemme side der kan sælge fly billetter til en stor i Europa. Det første jeg startede ud med var at brainstorme hvad det var jeg skulle bruge i min side da jeg nu ved hvad den skal

Læs mere

PORTFOLIO TYPOGRAFI & OMBRYDNING

PORTFOLIO TYPOGRAFI & OMBRYDNING PORTFOLIO TYPOGRAFI & OMBRYDNING Typografi & Ombrydning DOKUMENTATION Opgave beskrivelse Kunden ønsker at få en simpel bruchurer, som han kan dele ud i klubben. Han kunne godt tænke sig i denne brochure,

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

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

Afsluttende opgave i Kom/IT

Afsluttende opgave i Kom/IT Afsluttende opgave i Kom/IT Hjemmeside om varmluftballoner Fag:Kommunikation/IT Lærer: Karl G Bjarnason Problemformulering Den afsluttende opgave er den du skal til prøve i, hvis du skal til eksamen i

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

1. Bilag: Brugertest for gammel site

1. Bilag: Brugertest for gammel site Bilag 1 1. Bilag: Brugertest for gammel site Brugertest af Isabellais.dk Scenarie 1 Gå ind på www.vinoble.dk Du har på forsiden nogle vine som er fremhævet, de er placeret i nogle bokse, som du har mulighed

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 produktionsforståelse

Grafisk produktionsforståelse 04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere

Læs mere

Grundformen for et website: aside, tabeller, formularer og tekstformatering

Grundformen for et website: aside, tabeller, formularer og tekstformatering Design til digitale kommunikationsplatforme Formiddag (Hold 1), IT Universitetet, Efterår 2013 Øvelse 2, individuel øvelse Grundformen for et website: aside, tabeller, formularer og tekstformatering 1.

Læs mere

Design Diaries.

Design Diaries. Design Diaries http://blog.lykkeeilert.dk/ Patricia Gambula Larsen Patrick Lykke Eilert Ninette Andersen cph-pl130@cphbusiness.dk cph-pe58@cphbusiness.dk cph-na96@cphbusiness.dk INDHOLD Use case model

Læs mere

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat Projekt-studieweb Om kommunikationsteorierne Morten, Jacob, Kristian og Cihat Gestaltlovene Loven om nærhed Loven om lukkethed Loven om lighed Loven om forbundethed Loven om fortsættelse Loven om figur

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

! }! FORSIDE! <html>! <head>!

! }! FORSIDE! <html>! <head>! FORSIDE opgaver body { background-color:#33adff; } header { background:#33adff; color:white; text-align:center; padding:5px;

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

Introduktion... 2. Problemformulering... 2. Metode... 2. Research... 3. Kommunikation... 4. Delkonklusion... 4. Analyse... 5. Design...

Introduktion... 2. Problemformulering... 2. Metode... 2. Research... 3. Kommunikation... 4. Delkonklusion... 4. Analyse... 5. Design... Indhold Introduktion... 2 Problemformulering... 2 Metode... 2 Research... 3 Kommunikation... 4 Delkonklusion... 4 Analyse... 5 Design... 6 Delkonklusion... 9 Implementering og dokumentation... 10 Konklusion...

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

FORSTÅELSE FOR GRAFISK PRODUKTION

FORSTÅELSE FOR GRAFISK PRODUKTION FORSTÅELSE FOR GRAFISK PRODUKTION OPGAVEBESKRIVELSE Til DI s Digitaliseringsindsats, har jeg udarbejdet en håndbog, med gode råd og cases fra andre virksomheder, om hvordan de har implementeret digitalisering

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

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Grafisk produktion og workflow Grafisk produktion og workflow l 12 Pedersholmparken 6 DK 3600 Frederikssund Tlf.: +45 27 57 7164

Læs mere

Præsentationsportfolio for Hovedforløb 1. Kongens Folk hjemmeside

Præsentationsportfolio for Hovedforløb 1. Kongens Folk hjemmeside Præsentationsportfolio for Hovedforløb 1 Kongens Folk hjemmeside Opgaven Jeg skal lave en ny hjemmeside til foreningen Kongens Folk. De har en gammel hjemmeside der skal fornyes. De ønsker en side, der

Læs mere

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

#Anna Skak #Mediegrafiker

#Anna Skak #Mediegrafiker Grafisk Workflow OPGAVEN Fodboldklubben Egmont Rollators FC ville have en website, for at gøre klubben mere synlig for eventuelle nye medlemmer. Websitet skulle indeholde alle de praktiske oplysninger

Læs mere

Grafisk Workflow Personligt website

Grafisk Workflow Personligt website Grafisk Workflow Personligt website Andreas Ernst Tørnqvist Grafisk Workflow Redegørelse Opgaven Opgaven er en personlig hjemmeside lavet i min fritid. Siden skal bruges som en reklamesøjle for potientelle

Læs mere

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN 2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan

Læs mere

Opgavebeskrivelse. Opgaveløsningen

Opgavebeskrivelse. Opgaveløsningen Opgavebeskrivelse Opgaven er et redesign af en hjemmeside til Tistrup Festuge. Opgaven er en fritidsopgave, udarbejdet for udvalget bag Tistrup Festuge. Da man i de seneste år, har ændret en del på konceptet

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

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

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

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