Grafisk produktionsforståelse

Save this PDF as:
 WORD  PNG  TXT  JPG

Størrelse: px
Starte visningen fra side:

Download "Grafisk produktionsforståelse"

Transkript

1 04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio

2 Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere på workflowet, produktionsdelen og kodningen af Steentrae.dk. Det er relevant i forhold til, at jeg selv har stået for hele produktet fra koncept til færdigt og fungerende produkt. Helt fra starten var det et krav, at siden skulle være responsiv, da de fleste i Mathias omgangskreds og netværk nærmere bruger deres smartphone end en computer. Ligeledes vil han promovere siden en del gennem Facebook, hvorfra den tage sig godt ud - uanset, om man kommer fra sin Macbook eller gamle mobiltelefon med lille skærm. Målet og læringsdelen i siden for mig var, at jeg ville gøre det muligt for Mathias selv at opdatere siden, smide nye projekter op og rette til i sit CV. Da Mathias ikke forstår sig på HTML og CSS, måtte jeg smide et CMS henover her i form af Concrete5. LAVET FOR Steentræ / Mathias Steen Rasmussen PRODUKT Responsivt website med CMS PRODUCERET Oktober 2015 nu Svendeprøveportfolio 25

3 Design Photoshop Kodning HTML & CSS Responsiveness media queries CMS Concrete5 Designet er udført på baggrund af hurtige håndskitser, et moodboard og wireframe udført i Photoshop (se Grafisk design-delen). Sitet er først og fremmest kodet i Brackets som helt basal HTML og stylet med CSS. Jeg har brugt HTML5 og CSS3, da det er de seneste webstandarder. HTML5 giver bl.a mere ekspressiv frihed, standardiserer elementer og hjælper ift. søgemaskineoptimering. CSS3 har jeg brugt, da det tilfører muligheden for media queries (som er nødvendigt for at have særskilte, responsive layouts), flerspaltelayout, nye selektorer og meget andet. For at kunne se lækker ud på alle tænkelige platforme, og fordi Mathias gerne vil kunne vise siden frem på sin ipad for evt. fremtidige arbejdsgivere, gjorde jeg siden responsiv vha. media queries. Media queries ligger som forskellige break points, der definerer, hvornår layoutet på siden ændres. Som eksempel kan nævnes, at layoutet går fra 4 spalter til 1 spalte, når siden vises på en telefon, og at headeren ombrydes, så menuen kommer under logoet i stedet for i højre side. Endemålet var, at Mathias selv skulle være i stand til at opdatere siden, sit CV, lægge nye projekter op og rette i den, som han lyster, uden nogen kendskab til HTML og CSS. Jeg valgte systemet Concrete5, da det er et fuldblods-cms (ulig eks. Wordpress), det er relativt let, velintegreret og meget fleksibelt. Den mest brugbare funktion i forhold til redigering er dog nok, at man kan udføre in context editing; altså, at Mathias kan rette på sidens indhold mens han ser det live - uden kendskab til et kompliceret system. 26 Svendeprøveportfolio

4 Concrete5-siden er bygget op af tre forskellige PHP-filer, som er kædet sammen. De er kodet i hånden, og her følger en beskrivelse af de forskellige elementer. Header.php Dette er sidens header. Den inkluderer ting som metadata (eks. sidens navn og karatersæt), indlæsning af scripts, Concrete5-menu og sidens header (inkluderer logo og navigation). header.php Uddrag fra header.php (tal refererer til linjetal i koden) 8 Specificerer sidens viewport, og at brugeren ikke skal have mulighed for at skalere siden 9 Link til CSS-fil PHP-delen gør den i stand til at finde filen på serveren Loader Concrete5 s redigeringsmenu ind, hvis der er logget en bruger på systemet 25 Body-tag, som markerer sidens start 28 HTML5-tag et <header>, som markerer start på headeren 31 Logoet hentes ind som SVG, skalerbar vektorgrafik 34 Navigationen hentes ind fra Concrete5 s database Default.php Dette er blot én af tre sidetyper. Denne definerer, at siden har hovedindhold i 3 spalter og en sidebar i højre side. De andre er full.php (hovedindhold i 4 spalter) og left_sidebar.php (sideindhold i venstre side og 3 spalters hovedindhold). Uddrag fra default.php (tal refererer til linjetal i koden) 2 Filen header.php loades ind 4-21 HTML5 tags definerer sidens semantiske opbygning. <main> er der, hvor al hovedindhold ligger. <article> er et tag, som kan indeholde alt indhold <section> er en bid indhold, som er relateret 7 <section> med classen span_3_of_4 definerer en sektion, der går over 3 spalter 23 Filen footer.php loades ind Footer.php Footer.php indeholder sidens bund og slutning på HTML en. Uddrag fra footer.php (tal refererer til linjetal i koden) 1 HTML5-tag et <footer> er starten på footeren 3-15 footer_left og footer_right er venstre og højre del 20 Påkrævet Concrete5-element hentes ind default.php footer.php Svendeprøveportfolio 27

5 Uddrag fra min CSS3 Loader fonten Founders Grotesk ind på siden. Den ligger i formatet.woff, som er egnet til web og bliver importeret i 5 udgaver. Dette siger, at alle p-tags (tekstafsnit) har en skriftstørrelse på 1.4 em (sat i forhold til font-size på body-tag et, som er 16 px) og maks. må være 550 px bred, for at give et pænt skriftsnit uden for mange tegn pr. linje. h1-tags (som er indsat i både main, article, og sections) har samme punktstørrelse som brødteksten, men til gengæld et kraftigere snit (font-weight: 600). Navigationen (menuen) i headeren floater til højre, kører samme skriftstørrelse som resten af siden, semi-bold, og har lidt negativ margen i toppen for at flugte med logoet. Min footer har en tekstfarve, der er grå (color: #999999), en mindre skriftstørrelse (0.8 em) og en margen i toppen, som lægger afstand til indholdet i main. Denne lille bid fortæller, at på alle links skal teksten skifte til den blå farve, vi udvalgte tidligere, når cursoren holdes henover. Dette viser mit gridsystem, bestående af 4 spalter. De ligger som classes, der i mit tilfælde ligger på sections på siden. Bredden på spalterne defineres i procent, baseret på margenen sat i nedenstående. Spalterne (.col) floater til venstre og har defineret en procentuel margen i top og bund på hver 1 %, samt 2,5 % i venstre side. Derudover vises, at der på den første af sin slags på siden, ikke skal være nogen venstremargen. Dette er de forskellige breakpoints, jeg har på siden (indholdet er her redigeret ud). De viser, hvornår layoutet ændres, alt afhængig af vindues- eller skærmstørrelsen, og er defineret ved media queries. Min media query ved en lille skærm (max. 480 px), som viser, at alle spalter skal gå i fuld bredde (så 2, 3 og 4 spalter bliver til 1) og at menuen i toppen skal have en anelse luft. 28 Svendeprøveportfolio

6 Indholdsstyring i Concrete5 Noget af det smarte ved Concrete5 er, at man kan redigere i al indhold og tekst direkte på siden, rent grafisk, frem for at gå i kontrolpanelet og rette (som i eks. Wordpress). Screenshot et ovenfor viser, at man kan redigere i blokken, som så kan behandles i Concrete5 s egen editor. Ligeledes kan man indsætte nye elementer på siden. Oprettelse af nye sider/projekter Når man er logget ind på siden, er det let at tilføje nye undersider og projekter. Screenshot et her viser, hvordan man tilføjer et nyt projekt til portfolien. Mathias kan således, uden nogen kendskab til kode, indtaste projektets detaljer samt tilføje billeder. Projektet kommer så automatisk til at ligge på undersiden Projekter. Svendeprøveportfolio 29

Svendeprøve portfolio. Rasmus Hetoft Hansen Mediegrafiker Marts 2016

Svendeprøve portfolio. Rasmus Hetoft Hansen Mediegrafiker Marts 2016 Svendeprøve portfolio Rasmus Hetoft Hansen Mediegrafiker Marts 2016 Indholdo 01. Typografi 4 02. Grafik & billedbehandling 10 RASMUS HETOFT HANSEN Skotlandsgade 1, 1. th 2300 København S 28 72 85 97 rasmus@hetoft.com

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

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

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

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

GRAFISK DESIGN GRÅ ROSA VIOLET. BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf.

GRAFISK DESIGN GRÅ ROSA VIOLET. BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf. GRAFISK DESIGN BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf. KRAV TIL UDTRYKKET Moderne Enkelt Minimalistisk Responsivt Brugervenligt

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

03. Grafisk design. Grafisk design. Identitet for Steentræ. Svendeprøveportfolio

03. Grafisk design. Grafisk design. Identitet for Steentræ. Svendeprøveportfolio 03 Grafisk design Identitet for Steentræ 18 Svendeprøveportfolio Mathias Steen Rasmussen Født 12/10/1990 Nordbanegade 26, st. th. 2200 København N 29 43 03 96 mmathizzle@gmail.com Uopfordret ansøgning

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

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

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

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

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

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

GRAFISK PRODUKTION & WORKFLOW

GRAFISK PRODUKTION & WORKFLOW GRAFISK PRODUKTION & WORKFLOW CASPER GEIPEL JENSEN INDHOLDSFORTEGNELSE OPGAVEBESKRIVELSE...3 MÅLGRUPPE...3 KUNDEKRAV...3 SPECIFIKATIONER...3 BRUGTE TEKNIKKER...3 PROCESSEN...4 INSPIRATION...4 STYLETILE:

Læs mere

Grafisk design. sundfertilitet.dk

Grafisk design. sundfertilitet.dk Grafisk design sundfertilitet.dk Sundfertilitet.dk er en klinik, der behandler mænd og kvinder til bedre fertilitet. Min opgave var at redesigne deres hjemmeside samt lave et logo til sundfertilitet.dk.

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

Vejledning. Indhold. Side 1

Vejledning. Indhold. Side 1 Indhold HTML-faneblade... 2 Sådan tilføjer du et HTML-faneblad til din Facebook side.... 3 Sådan redigerer du et HTML-faneblad på din Facebook side.... 5 Sådan deler du fanebladet... 10 Side 1 HTML-faneblade

Læs mere

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl. Indledning Mit sidste projekt her på 1.semester gik ud på at jeg skulle lave et redesign af mit første portfolio, som jeg lavede i starten af semesteret. Formålet var at vise hvad jeg havde lært siden

Læs mere

Grafisk Workflow. Website til European Blues Challenge

Grafisk Workflow. Website til European Blues Challenge Grafisk Workflow Website til European Blues Challenge Opgaven: European Blues Challenge er en europæisk blues festival som skifter lokation hvert år. I 2017 kommer festivallen til Horsens, og vores kunde

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

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

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

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

Om styles / typografier / typografiark / stylesheets

Om styles / typografier / typografiark / stylesheets Om styles / typografier / typografiark / stylesheets (dvs. Cascading StyleSheet ~ CSS) CSS er et sprog til at definere layout på HTML-dokumenter. CSS indeholder flere muligheder for layout end HTML og

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

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

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

PORTFOLIO SVENDEPRØVE

PORTFOLIO SVENDEPRØVE EDDIE KÜSTER ABI-KHALIL PORTFOLIO SVENDEPRØVE GRAFISK WORKFLOW Red en med blodkræft - Website 2 Produktet 3 OPGAVEN Denne opgave er en mindre fiktiv opgave, som ikke har fået sit sidste godkendelse endnu.

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

Tillykke Med Fødselsdagen

Tillykke Med Fødselsdagen HTML & CSS 1 Tillykke Med Fødselsdagen All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register

Læs mere

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

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

Læs mere

UMS Velkomst Byder nye brugere velkommen til skolen

UMS Velkomst Byder nye brugere velkommen til skolen Forord UMS Velkomst modulet giver mulighed for at give de kommende studerende et godt førstehåndsindtryk ved skolestart - den indledende kontakt til de studerende er umådelig vigtig. Velkomst modulet består

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

Grafisk Workflow. Website til European Blues Challenge

Grafisk Workflow. Website til European Blues Challenge Grafisk Workflow Website til European Blues Challenge Opgaven: European Blues Challenge er en europæisk blues festival som skifter lokation hvert år. I 2017 kommer festivallen til Horsens, og vores kunde

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 REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

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

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

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

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

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

Grafisk Design. fra idé til visuelt udtryk Benett

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

Læs mere

Kom/It Rapport. Responsiv hjemmeside (Jakes Awesome Game Reviews)

Kom/It Rapport. Responsiv hjemmeside (Jakes Awesome Game Reviews) Kom/It Rapport Responsiv hjemmeside (Jakes Awesome Game Reviews) Indhold Resume... 2 Forord... 2 Jakes Awesome Game Reviews... 2 Den tidelige fase... 2 Efter jeg har lavet siden hvor mine reviews er:...

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

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

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

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

Læs mere

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

Forståelse for grafisk workflow

Forståelse for grafisk workflow 2 Forståelse for grafisk workflow I designet af den trykte bog har jeg haft et vågent øje til de overvejelser og design problematikker det medfører at bogen skulle klare at laves til en E-bog. Her vil

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

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

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

Læs mere

Grafisk 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

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

Dokumentation. Grafisk Design

Dokumentation. Grafisk Design Dokumentation Dokumentation OPGAVEN: Denne opgave er lavet for en ny opstartet cafe og restaurant i Vordingborg, de skulle derfor bruge et logo som det første og derefter en hel design linje. Deres ide

Læs mere

Dagens program. Domæner. change log- screen shots hver gang I har arbejdet med themet. Arkitekturen bag en wp blog. Hvad er widgets.

Dagens program. Domæner. change log- screen shots hver gang I har arbejdet med themet. Arkitekturen bag en wp blog. Hvad er widgets. Dagens program Har alle fået? Har nogen betalt for meget? Hav jeres koder klar Domæner change log- screen shots hver gang I har arbejdet med themet. Arkitekturen bag en wp blog Hvad er widgets Hvad er

Læs mere

4. DEC 5. DEC 8. DEC 2014

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

Læs mere

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

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

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

Sitecore - basisvejledning Version 2. September 2010

Sitecore - basisvejledning Version 2. September 2010 Sitecore - basisvejledning Version. September 00 Sådan opretter du en ny artikelside... Sådan omdøber du et artikelnavn så du får vist æ,ø og å... Sådan udgiver (publiserer) du nyt eller redigeret indhold...4

Læs mere

Produkt. Index side GRAFISK DESIGN

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

Læs mere

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

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

Læs mere

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

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

Målgruppe Mayday Ghana

Målgruppe Mayday Ghana Dokumentation Hjælpeorganisationen Mayday Ghana med sloganet bortskaf e-skrot vil belyse problemet med e-skrot i Ghana og få folk til at forstå alvoren og konsekvensen af dumpingen. Som sloganet siger

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

1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN

1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN 1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN 2 SVENDEPRØVE 2016 GRAFIK & BILLEDER 3 SVENDEPRØVE 2016 GRAFIK & BILLEDER 3 SVENDEPRØVE 2016 GRAFISK DESIGN 01. BRIEFING GRAFISK DESIGN 01. Briefing 02.

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

Projekt - Valgfrit Tema

Projekt - Valgfrit Tema Projekt - Valgfrit Tema Søren Witek & Christoffer Thor Paulsen 2012 Projektet Valgfrit Tema var et projekt hvor vi nærmest fik frie tøjler til at arbejde med hvad vi ville. Så vi satte os for at arbejde

Læs mere

Guide. Administration af FDF.dk/Nyborg. 1. Udgave 2008. Ide og layout Christoffer S. Rasmussen

Guide. Administration af FDF.dk/Nyborg. 1. Udgave 2008. Ide og layout Christoffer S. Rasmussen Guide Administration af FDF.dk/Nyborg 1. Udgave 2008 Ide og layout Christoffer S. Rasmussen FDF.Dk/NyboRG Den nye hjemmeside for FDF Nyborg er baseret på et bloksystem. Det vil sige at det er super nemt

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

Grundforløbsprøve Projektbeskrivelse

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

Læs mere

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

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

GRUPPE 5 Line - Nanna - Thea - Sarah

GRUPPE 5 Line - Nanna - Thea - Sarah GRUPPE 5 Line - Nanna - Thea - Sarah Gruppeopgave uge 40 Redesign af website - Feelgood Bakery 2. oktober 2015 Link til site http://nannalauth.com/fgb/website.html Kode Brugernavn : keammd Adgangskode

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

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

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

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 design. Produkt: Responsiv hjemmeside Klient: EUC Nordvestsjælland

Grafisk design. Produkt: Responsiv hjemmeside Klient: EUC Nordvestsjælland Grafisk design Produkt: Responsiv hjemmeside Klient: EUC Nordvestsjælland 06// Opgave EUC Nordvestsjælland ønskede at få en mere tidssvarende og simpel hjemmeside. Jeg fik til opgave at lave en prototype.

Læs mere

Analyse af website: cinnobershop.dk

Analyse af website: cinnobershop.dk Analyse af website: cinnobershop.dk Gruppe 12: Brit, Caroline, Line & Søren v1_7/3-16 Indholdsfortegnelse ANALYSE Kommunikation 3 Wireframes - Home 4 - about 5 - webshop 6 - webshop/betaling 7 Grafiske

Læs mere

Vejledning i opbygning af Tillidszonen

Vejledning i opbygning af Tillidszonen Vejledning i opbygning af Tillidszonen Vejledning til FOAs lokale afdelinger i opbygningen af deres del af Tillidszonen FOA Fag og Arbejde Januar 2006 1 Indholdsfortegnelse Forbunds- og afdelingsdel...3

Læs mere

Computerens anatomi-dokumentation CASE

Computerens anatomi-dokumentation CASE Computerens anatomi-dokumentation CASE Case: Kundevejledning på WEB (Popup på hjemmeside når man søger efter computer) Målgruppe? - 30 til 50+ årig, da de kan have svært ved at vælge en computer der passer

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

CSS introduktion: Tekstformatering med CSS

CSS introduktion: Tekstformatering med CSS Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 3, individuel øvelse CSS introduktion: Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse

Læs mere

Grafisk Design 70% Skitser

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

Læs mere

Portfolio Redesign Kamilla Klein 1. Semester eksamen

Portfolio Redesign Kamilla Klein 1. Semester eksamen 2014 Portfolio Redesign Kamilla Klein 1. Semester eksamen Lærene: Ditlev Skanderby Frederik Tang Ian Wisler- Poulsen Jesper Hinchely Merete Geidemann Lützen Morten Rold Thomas Hartmann Erhvervsakademiet

Læs mere