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

Størrelse: px
Starte visningen fra side:

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

Transkript

1 Redegørelse Grafisk workflow Opgaven Medicinalfirmaet Boehringer Ingelheim, havde et ønske om at digitalisere en lægefaglig håndbog. Det er en såkaldt Quick guide, som er et lille overskueligt opslagsværk om diagnosticering og behandling af KOL. Den digitale version skulle være optimeret til en ipad, men også kunne fungere på en almindelig computer. Opgaven for mig var altså, at få overført overskueligheden fra en fysiske papirudgave til den digitale, og samtidig gøre den brugervenlig på en touchskærm. Efter den oprindelige opgave blev afleveret for 1 år siden, har jeg valgt at se på opgaven med nye øjne og optimeret brugervenligheden yderligere. Derfor er de 3 udvalgte sider til denne opgave, designet og programmeret på ny. Design Alle designmæssige valg er truffet på baggrund af, om det højner brugervenligheden. Alt der ikke har en funktion er skåret væk, for at gøre guiden mest overskuelig. Jeg har derfor fokuseret på: Store skriftstørrelser Ikoner/piktogrammer som nemt kan afkodes Afdæmpet farvetema og stærke farver til fremhævning af vigtige ting Et meget stringent og seriøst udtryk Layout Da guiden primært skal betjenes med fingrene, har jeg programmeret den som en touchbaseret webapplikation (WebApp). Applikationen bygger på: jquery Mobile til opbygning Flat UI til at give et mere enkelt udtryk Ingrid CSS til opbygning af responsivt skelet Swipe-effect til at bladre mellem siderne Hover-effect på alle knapper og links Læsevenlig skrift i store størrelser Interaktive beregnere med nem betjening Interaktivitet Undervejs i processen blev det klart for mig, at visse elementer i den trykte guide kunne gøres interaktive i den digitale version. Den trykte guide indeholder flere steder enten regnestykker, som lægen selv skal udfylde og udregne, eller store uoverskuelige tabeller. I alle disse tilfælde hvor tal skal beregnes eller aflæses, kunne vi ligeså godt gøre brug af javascript, til at foretage beregningerne. Derfor har jeg flere steder i guiden udviklet beregnere der ligesom en lommeregner giver lægen mulighed for at indtaste patientens værdier, og derefter få udregnet resultatet. Disse beregnere viste sig at blive en stor succes, og blev derfor centrale elementer i guiden. De blev også senere udskilt fra guiden, til selvstændigt brug i andre sammenhænge. Procesbeskrivelse Indledende møde med kunden og definition af opgaven Inspirationssøgning på nettet Vurdering af mulige løsninger og valg af arbejdsmetode Programmering af en prøveversion af løsningen, til præsentation for kunden Godkendelse af prøveversionen Programmering af guiden side for side Sideløbende indlæsning af tekst og data fra en PDF af den trykte guide Programmering af beregnere ud fra formler og tal i en trykte guide Skærmprint af applikationen til korrektur Efterfølgende rettelser både af tekst og programmering I alt 6 korrekturgange med skærmprint og efterfølgende rettelser Afsendelse af kildekoder bag javascript beregnere, til DTU for validering. Godkendelse af beregnere hos DTU Godkendelse af kunden Afsendelse af kildekoden til kunden Udskillelse af kildekoden bag beregnerne til brug andre steder for sig Browserkompatibilitet For kunden var det absolut vigtigst at guiden var kompatibel med Safari på ipad, men den skulle også fungere på nyere browsere. Da guiden kun henvender sig til sundhedsfagligt personale, var det ikke et krav at guiden skulle være kompatibel med ældre browsere, fordi det var forholdsvis overskueligt for kunden, at få lægerne til at anvende en nyere browser. Kvalitetsvurdering Lige da jeg var færdig med den oprindelige opgave, var jeg utrolig tilfreds med den, og virkelig overrasket over at jeg kunne magte den. Men set i bagspejlet, var der mange ting som sagtens kunne have været bedre. Eksempelvis så skulle jeg ikke have taget så meget udgangspunkt i strukturen fra den trykte udgave. Der er rigtig mange sider, hvor der ikke er ret meget indhold på, og man kunne med fordel skrive meget af informationerne sammen. Stor set alt information skulle være mere som et opslagsværk, og så skulle beregnerne være mere tilgængelige. Men på trods af det, så er det stadig en funktionel og overskuelig WebApp. Beregnerne kunne jeg ikke være mere tilfreds med, i forhold til brugen af javascript. Jeg har lært rigtig meget af denne opgave, og er stadig meget stolt over, at mit arbejde er blevet valideret af DTU. Det er vildt fedt. 23

2 Workflow Workflow Inspirationssøgning Godkendt - sæt igang! Programmering side for side 6 korrekture i alt Udskillelse af beregnere til brug for sig Møde med kunden Vurdering af mulige løsninger Præsentation af løsning Indlæsning af tekst og data fra PDF Skærmprint i korrektur hos kunden Godkendelse af kunden Opgaven er færdig og leveret jquery Mobile WebApp Valg af arbejdsmetode Udvikling af prøveversion Programmering af swipefunktion Programmering af beregnere Validering af beregnere på DTU Beregnere godkendt af DTU 24

3 Inspirationssøgning Inspirationssøgning God struktur og nem betjening Behageligt farvetema Overskuelig beregner 25

4 Skitser & brugerflade Skitser Brugerflade For at få et overblik over hvordan de forskellige elementer kan være placeres i forhold til hinanden, har jeg lavet nogle hurtige skitser. I den første version af guiden var specielt beregnerne ret uoverskuelige, så dem har jeg også skitseret for at se hvordan de kunne udformes mere enkle. Det har været mit udgangspunkt, at en beregner helst skulle ligne en alm. lommeregner så meget som muligt, fordi det er det, brugeren kan relatere til. Farvetema I den første udgave af guiden valgte jeg at tage udgangspunkt i de farver, som blev brugt i den trykte version. Det gav en god synergi mellem de to produkter, men de mange farver var også meget forstyrrende på skærmen. Derfor har jeg valgt at bruge et mere afdæmpet farvetema til denne udgave, for at skabe ro og sætte indholdet i fokus. Farvene og deres anvendelse kan se her under. Flat UI Jeg har valgt at arbejde med en meget flad brugerflade. Det vil sige, at alle skygger og farveforløb er fjernet, så elementerne fremstår som rene og enkle. #2C3E50 # #3498DB #F1C40F Overordnet ramme omkring indholdet Tekst og svag afgrænsning af indhold i bokse per og elementer i fokus Fejlmeddelelser og dialogbokse 26

5 Skelet Skelet - side 1 & 2 Ikon 22px x 22px Ikon 22px x 22px Ikon 26px x 40px Headerbar 100% x 45px Headerbar 100% x 45px Tekst boks 100% x variabel højde Ikon 32px x 32px 3.5 em Tekst boks % x variabel højde Reminder boks % x variabel højde 3.5 em Info boks % x variabel højde Calc boks % x variabel højde Input felt 100% x 65px Content boks 100% x variable højde Input felt 40px x 20px Slider 69% x 15px 100% x 45px Content boks 100% x variable højde Footnote boks 100% x variabel højde Footerbar 100% x 63px Footerbar 100% x 63px 30px x 35px 45px x 35px 30px x 35px Side 1 Side 2 45px x 35px 27

6 Skelet Skelet - side 3 Ikon 22px x 22px Headerbar 100% x 45px Tekst boks 100% x variabel højde Input felt 100% x 98px Input felt 100% x 98px Calc boks % x variabel højde variabel bredde x 36px Input felt 40px x 20px Slider 69% x 15px variabel bredde x 36px Tabel 170px x 66px 50% x 66px Footnote boks 100% x variabel højde Footerbar 100% x 63px 30px x 35px Side 3 45px x 35px 28

7 Storyboard Storyboard - side 1 Elementer 1 2 kol_definition.doc gold_skema.xls 3 Actions 3 Link til #menu, der åbner menuen til venstre Navigation og markering af aktiv side: 1 Link til #side1 (aktiv) 2 Link til #side2 3 Link til #side3 Navigation til forrige og næste side: < Link er inaktivt > Link til #side

8 Storyboard Storyboard - side 2 Elementer 1 diagnostik.doc 5 diagnostik_fodnote.doc 2 husk.doc 6 reminder.svg (reminder.png) 8 3 info.doc 7 info.svg (info.png) 7 4 pakkeår_fodnote.doc 3 Actions 8 Link til #menu, der åbner menuen til venstre 11 Input felt der viser resultatet af scriptet pack(); Navigation og markering af aktiv side: 1 Link til #side1 2 Link til #side2 (aktiv) 3 Link til #side3 Navigation til forrige og næste side: < Link til #side1 > Link til #side Slider til indstilling af Cigaretter pr. dag Slider til indstilling af Antal års rygning der kører scriptet pack(); med udgangspunkt i de valgte værdier

9 Storyboard Storyboard - side 3 Elementer 1 2 sværhedsgrad_tekst.doc sværhedsgrad_fodnote.doc 3 Actions 3 Link til #menu, der åbner menuen til venstre 10 som viser en popup med hjælp til betjening af beregneren Navigation og markering af aktiv side: 1 Link til #side1 2 Link til #side2 3 Link til #side3 (aktiv) Navigation til forrige og næste side: < Link til #side2 > Link er inaktivt Input felt der viser resultatet ratio_result fra scriptet calculate(); Input felt der viser resultatet level_result fra scriptet calculate(); som nulstiller formen og indstiller den til at udregne efter mænds værdier som nulstiller formen og indstiller den til at udregne efter kvinders værdier Slider til indstilling af Alder Slider til indstilling af Højde Slider til indstilling af Målt FEV 1 Slider til indstilling af Målt FVC Tabel der viser resultaterne fev_result og fvc_result fra scriptet calculate(); der kører scriptet calculate(); med udgangspunkt i de valgte værdier. Har brugeren ikke angivet køn, vises en popup med fejlen. Er resultatet ikke realistisk vises der også en fejl

10 Responsive grid Responsive grid (Ingrid CSS) Elementer i Ingrid CSS Container (m-grid) Omkranser alle elementer og bestemmer strukturen. Klassen l-grid-divide-4 definerer at containeren skal være inddelt i fire spalter, når bredden er over 768px. Klassen m-grid-divide-2 definerer, at containeren skal være inddelt i to spalter, når bredden er mellem 520px og 768px. Når bredden er under 520px, er elementerne i containeren, i en lang spalte. Unit (grid_unit) En unit tilpasser sig efter containeren, og er i dette tilfælde 25% i bredden. Unit span 2 (l-grid_unit--span-2) Ved at tilføje klassen l-grid_unit--span-2, udfylder en unit to spalter i stedet for en (50%). I og med at det er l-grid, så fylder den kun to spalter når den totale bredde er over 760px. Fieldunit (grid_field-unit) Denne unit fylder altid 100% af bredden Afstande mellem elementer For at opnå afstand imellem elementerne uden at ændre på deres procentvise bredde, er Ingrid opbygget på følgende måde: Margin - Container Padding Unit width: 25%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; Unit_inner background-color: #bbb -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em; border-radius: 0.4em; Margin og padding ophæver altså hinanden og får boksen unit_inner inde i en unit til at hænge frit uden at ændre dens vidde. Container Unit Unit Unit span 2 25% 25% 50% Fieldunit 100% 768 px < 1024 px 520 px < 768 px < 520 px HTML struktur <div class= m-grid m-grid--divide-2 l-grid--divide-4 > <div class= grid_unit > <div class= unit_inner > Dette indhold er 25% i bredden <div class= grid_unit > <div class= unit_inner > Dette indhold er 25% i bredden <div class= grid_unit l-grid_unit--span-2 > <div class= unit_inner > Dette indhold er 50% i bredden <div class= grid_field-unit > <div class= unit_inner > CSS struktur.grid { margin: 0-1em; Dette indhold vil altid være 100% i bredden.grid >.grid_unit,.grid >.grid_field-unit { padding: 0 1em;.grid--divide-2 >.grid_unit { width: 50%;.grid--divide-3 >.grid_unit { width: %;.grid--divide-4 >.grid_unit { width: 25%;.grid--divide-5 >.grid_unit { width: 20%;.grid--divide-6 >.grid_unit { width: %;.grid--divide-7 >.grid_unit { width: %;.grid--divide-8 >.grid_unit { width: 12.5%; 32

11 Beregner Beregner på side 3 Udgangspunktet Den trykte version af guiden indeholdte fire meget store og uoverskuelige tabeller. I praksis bruger lægerne disse tabeller til at bestemme de to værdier FEV 1 og FVC, ud fra enten en mand eller kvindes højde og alder. Forventet FEV1 for køn, alder og højde At arbejde med en sådan tabel i HTML vil på ingen måder være rationelt. Først vil det tage rigtig lang tid at skrive/kopiere ind, og derefter ligger der et meget stort korrekturarbejde. Denne FEV1 tabel for mænd og den efterfølgende FEV1 tabel for kvinder er baseret på en undersøgelse af 570 lungeraske aldrig-rygere (318 k m) fra København og Odense. Alle lungevolumina er ved BTPS. Følgende formel for mænd er anvendt: FEV1 = antilog (-0, ,00478 x højde 0,00452 x alder). Ref.: SPIROMETRI en rekommandation fra Dansk Lungemedicinsk Selskab Javascript Heldigvis tager hver tabel udgangspunkt i en matematisk formel. Dette gør det muligt at foretage beregningen af værdierne med javascript. Udover at beregne FEV 1 og FVC, kunne vi også beregne Ratio og Sværhedsgrad, ved at indtaste værdierne Målt FEV 1 og Målt FVC : Ratio = Målt FEV 1 / Målt FVC 100 Sværhedsgrad = Målt FEV 1 / FEV Javascriptet som jeg gennemgår til højre beregner altså værdierne FEV 1,FVC, Ratio og Sværhedsgrad ud fra de værdier lægen indtaster. Jeg har kodet det hele selv. Konklusion og validering Denne beregner var, ligesom de andre, en hård nød at knække. Jeg har virkelig lært rigtig meget om javscript, og tilmed fået genopfrisket mit matematik. Men da beregnerne er værktøjer, som lægerne skal kunne regne med, valgte kunden at få dem valideret af en professor på DTU (Danmarks Tekniske Universitet). Han godkendte dem efter et par justeringer - hvilket selvfølgelig er mega fedt! Denne FEV1 tabel for mænd og den efterfølgende FEV1 tabel for kvinder er baseret på en undersøgelse af 570 lungeraske aldrig-rygere (318 k m) fra København og Odense. Alle lungevolumina er ved BTPS. Følgende formel for mænd er anvendt: FEV1 = antilog (-0, ,00478 x højde 0,00452 x alder). Ref.: SPIROMETRI en rekommandation fra Dansk Lungemedicinsk Selskab $(document).ready(function () { Hvis brugeren vælger mand: $('#male').click(function() { Værdierne i beregneren nulstilles $('#ratio_result').val(''); $('#level_result').val(''); $('#fev_result').html(''); $('#fvc_result').html(''); Højde-slideren for mænd vises, og højde-slideren for kvinder skjules $('.man_slider').show(); $('.woman_slider').hide(); De fire slidere stilles tilbage til udgangspunktet $('#height_woman').val(150).slider('refresh'); $('#age').val(20).slider('refresh'); $('#fev_mes').val(0.5).slider('refresh'); $('#fvc_mes').val(2.5).slider('refresh'); ); Hvis brugeren vælger kvinde: $('#female').click(function() { Værdierne i beregneren nulstilles $('#ratio_result').val(''); $('#level_result').val(''); $('#fev_result').html(''); $('#fvc_result').html(''); Højde-slideren for kvinder vises, og højde-slideren for mænd skjules $('.man_slider').hide(); $('.woman_slider').show(); De fire slidere stilles tilbage til udgangspunktet $('#height_man').val(155).slider('refresh'); $('#age').val(20).slider('refresh'); $('#fev_mes').val(0.5).slider('refresh'); $('#fvc_mes').val(2.5).slider('refresh'); ); ); function calculate(text) { Alder, målt FEV og målt FVC hentes fra formen var age = parseint($('#age').val()); var fev_mes = parseint($('#fev_mes').val()); var fvc_mes = parseint($('#fvc_mes').val()); Hvis mand er valgt, hentes højden og de to formler defineres i hver deres variable, med udgangspunkt i alder og højde if ($('#male').is(':checked')) { var height = parseint($('#height_man').val()); var fev = ( * Math.pow(age, 2) * height); var fvc = ( * Math.pow(age, 2) * height); Hvis kvinde er valgt, hentes højden og de to formler defineres i hver deres variable, med udgangspunkt i alder og højde else if ($('#female').is(':checked')) { var height = parseint($('#height_woman').val()); var fev = ( * Math.pow(age, 2) * height); var fvc = ( * Math.pow(age, 2) * height); Hvis hverken mand eller kvinde er valgt, vises en popup med påmindelse om, at brugeren skal vælge køn, og derefter stopper funktionen. else { $('#sex').popup('open', {transition: 'pop'); return false; Ratio og sværhedsgrad beregnes var ratio = ($('#fev_mes').val() / $('#fvc_mes').val() * 100); var level = (($('#fev_mes').val() / fev) * 100); Hvis sværhedsgraden er over 120 vises en popup med at der muligvis er en fejl i indtastningen if (level >= 120) { $('#fail').popup('open', {transition: 'pop'); De fire resultater afrundes fev = fev.tofixed(2); fvc = fvc.tofixed(2); ratio = ratio.tofixed(1); level = level.tofixed(1)+'%'; Resultaterne vises i beregneren $('#fev_result').html(fev); $('#fvc_result').html(fvc); $('#ratio_result').val(ratio); $('#level_result').val(level); 33

12 Swipe funktion Swipe-funktion 1. Kan man ikke bladre? Undervejs i processen med udvikling af WebApp en, blev den testet af mange forskellige personer. Mange af dem savnede at man kunne bladre (swipe) mellem siderne. Det var de vant til at kunne på deres ipad, så hvorfor ikke i denne WebApp? Derfor besluttede jeg sammen med kunden at implementere det. Her til højre er første version af swipe-scriptet (eksempel 1), som kort sagt registrerer om folk swiper, og derefter sender dem enten frem eller til tilbage. 2. Slidere Swipe-funktionen virker godt, men den bliver også aktiveret af sliderne i beregneren, fordi brugeren finger bevæger jeg vandret i samme bevægelse. Derfor er scriptet tilrettet i eksempel 2, så det nu ikke swiper hvis sliderne er aktive. Små skærme Selvom at guiden er optimeret til at fungere på en smartphone, så fungerer swipe-scriptet ikke optimalt på små skærme. Det er så følsomt, at det i mange tilfælde registrerer det at brugeren scroller nedad, som at de swiper. Derfor er swipe-scriptet deaktiveret på små skærme. Den del af scriptet vil jeg ikke redegøre for i denne gennemgang Når brugeren swiper til venstre, sendes vedkomne til næste side $(document).delegate('.ui-page', "swipeleft", function() { Den næste side, som er den brugeren skal sendes til, skrives i en variable var $nextpage = $(this).next('[data-role="page"]'); Befinder brugeren sig på sidste side, skal det ikke være muligt at swipe til næste side. Derfor tæller jeg de næste sider, og kun hvis der er flere en 0 sider, kan brugeren swipe frem if ($nextpage.length > 0) { $.mobile.changepage($nextpage, { transition: 'slide' ); Når brugeren swiper til højre, sendes vedkomne til forrige side ).delegate('.ui-page', "swiperight", function() { Den forrige side, som er den brugeren skal sendes til, skrives i en variable var $prevpage = $(this).prev('[data-role="page"]'); Befinder brugeren sig på første side, skal det ikke være muligt at swipe til forrige side. Derfor tæller jeg de forrige sider, og kun hvis der er flere en 0 sider, kan brugeren swipe tilbage if ($prevpage.length > 0) { $.mobile.changepage($prevpage, { transition: 'slide', reverse: true ); ); Fra start er ingen af sliderne aktive, og derfor sættes variablen til false var slider_active = false; Sliderens aktivitet registreres $(document).ready(function () { Er den aktivm så sættes variablen til true $(".slider").change(function() { slider_active = true; ); ); Når brugeren swiper til venstre, sendes vedkomne til næste side $(document).delegate('.ui-page', "swipeleft", function() { Er den aktiv så stopper funktionen, og brugeren forbliver på den pågældende side. Variablen sættes igen til false, for at nulstille forholdene. if (slider_active) { slider_active = false; return; Den næste side, som er den brugeren skal sendes til, skrives i en variable var $nextpage = $(this).next('[data-role="page"]'); Befinder brugeren sig på sidste side, skal det ikke være muligt at swipe til næste side. Derfor tæller jeg de næste sider, og kun hvis der er flere en 0 sider, kan brugeren swipe frem if ($nextpage.length > 0) { $.mobile.changepage($nextpage, { transition: 'slide' ); Når brugeren swiper til højre, sendes vedkomne til forrige side ).delegate('.ui-page', "swiperight", function() { Er den aktiv så stopper funktionen, og brugeren forbliver på den pågældende side. Variablen sættes igen til false, for at nulstille forholdene. if (slider_active) { slider_active = false; return; Den forrige side, som er den brugeren skal sendes til, skrives i en variable var $prevpage = $(this).prev('[data-role="page"]'); Befinder brugeren sig på første side, skal det ikke være muligt at swipe til forrige side. Derfor tæller jeg de forrige sider, og kun hvis der er flere en 0 sider, kan brugeren swipe tilbage if ($prevpage.length > 0) { $.mobile.changepage($prevpage, { transition: 'slide', reverse: true ); ); 34

13 Detaljer Detajler SVG ikoner Ved at bruge ikoner i formatet.svg, som er et vectorformat, ser de skarpe ud uanset hvilken opløsning de bliver vist på. Internet Explorer understøtter dog ikke.svg. Derfor er man nødt til at arbejde med et fallback i tilfælde af, at guiden åbnes i IE..info { background: url(../img/bulb.png) #3498db...; background: url(../img/bulb.svg) #3498db, none...; De browsere der understøtter.svg er også dem der understøtter flere baggrundsbilleder. Derfor viser de.svg, men IE vil hoppe tilbage til den baggrund, der er defineret først, fordi none hindre den i at vælge.svg. <h4 > <input > <p > <br...> Responsive linebreaks For at tabellen står pænt, når guiden tilgås på en mobil, er der sat en klasse på <br>, som får teksten til at rykke ned på to linjer. HTML struktur <td>gold 4 <br class="break">meget svær</td> CSS struktur.break { display: only screen and (max-width: 540px) {.break { display: block; Multi inputfelt I et inputfelt er det hverken muligt at have flere linjer eller forskellige skrift farver. Derfor har jeg sammensat en boks i CSS der ligner et inputfelt, men som indeholder både en h4, et almindeligt inputfelt uden ramme og en p. Dette giver overblik, og gør det nemt for brugeren at afkode resultaterne..multi_input { width: 100%; line-height: 1.4em; background-color: #ffffff; border-radius: em;... box-sizing: border-box;... border: 2px solid #dddddd; outline: 0 none; display: block;.input_blank { width: 100%; font-size: 2em; font-weight: bold; color: #3498db; text-align: center; min-height: 1.3em; padding: 0; border: none;.multi_input h4 { text-align: center; margin: 0.4em 0 0 0;.multi_input p { font-size: 0.7em; color: #aaaaaa; text-align: center; margin: em 0; 35

14 thomaslundin.dk/quick 36

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

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

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 H1 MARIA SCHELDE

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

Læs mere

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

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

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

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

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

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

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

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

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

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

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

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

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt. HTML & CSS 1 Efterlyst! 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 your club. Introduktion

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

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

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

Nyhedsbrev april: spørgeskemaundersøgelse

Nyhedsbrev april: spørgeskemaundersøgelse #ChronoContact_Survey { margin-bottom: 10px; margin-left: 0px;.form_element { float: left; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 8px; margin-left: 0; margin-top: 8px;

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

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

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

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

Procesbeskrivelse - Webprogrammering

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

Læs mere

Grafisk workflow. bl.udbudsnet.dk

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

Læs mere

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

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

Klasse 1.4 Michael Jokil 03-05-2010

Klasse 1.4 Michael Jokil 03-05-2010 HTX I ROSKILDE Afsluttende opgave Kommunikation og IT Klasse 1.4 Michael Jokil 03-05-2010 Indholdsfortegnelse Indledning... 3 Formål... 3 Planlægning... 4 Kommunikationsplan... 4 Kanylemodellen... 4 Teknisk

Læs mere

GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE

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

Læs mere

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

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

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

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

Grafisk Design. Trine Dichmann Knudsen

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

Læs mere

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

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

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

IDENTIFON. Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg

IDENTIFON. Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg 1 Indholdsfortegnelse side nr. 1. Forside. 2. Indholdsfortegnelse og indledning. 3. Problemformulering og afgræsning. 4. Tidsplan projektplan

Læs mere

Carlas cupcakes. Projekt. http://bysileha.com/2.semester/cupcake/remake/index.html

Carlas cupcakes. Projekt. http://bysileha.com/2.semester/cupcake/remake/index.html Projekt 3 http://bysileha.com/2.semester/cupcake/remake/index.html Carlas cupcakes Amanda Hüttel Lindschouw Michelle Denise Andersen Simone Lenander Hansen Indholdsfortegnelse PROJEKTFORMULERING 1.0 3

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

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning. Portfolie Redesign dette er en gennemgang af opbyggelse af mit portfolie, med samtilige begrunderlser af design valg. Forord Min portfolie hjemmeside er fra start af ment som et startplatform og ikke et

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

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

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder: Design en praktisk guide. Et design udtrykker dit websites grafiske udseende, lige fra hvilke skrifttyper der anvendes op til hvor navigationen er placeret og hvilke interaktive elementer der skal benyttes.

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

Projekt i Programmering C Menu til hjemmeside.

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

Læs mere

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

Rapport. Udarbejdet af: Mayianne Nøks Pedersen. Skole login: knmape68. E-mail: mypedersen@gmail.com

Rapport. Udarbejdet af: Mayianne Nøks Pedersen. Skole login: knmape68. E-mail: mypedersen@gmail.com Rapport Udarbejdet af: Mayianne Nøks Pedersen Skole login: knmape68 E-mail: mypedersen@gmail.com URL til brugerundersøgelsen: http://web328.webkn.dk/hjemmeside/image/laering/sem2brugerundersogelse/brugerundersogelse/

Læs mere

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt Roskildes tekniske gymnasium Kulløse Mijlømesse Afsluttende kom/it projekt Casper Hansen og Christian Hansen 26-04-2009 Indhold Indledning... 3 Planlægning... 3 Overvejelser... 3 Hvordan man kommer til

Læs mere

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning Opgaven Opgaven var fiktiv, og gik ud på at lave en side med titlen Husk Hjelmen - hvilket skulle være en underside, til rådet for sikker trafik. I sidens layout skulle vi vise at der var plads til at

Læs mere

Kom godt i gang med I-bogen

Kom godt i gang med I-bogen Kom godt i gang med I-bogen At åbne bogen Det allerførste, du skal gøre, for at kunne arbejde med i-bogen, er at aktivere den. Det gøres ved at oprette en konto på systime.dk og derefter aktivere bogen

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

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

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

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

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

3. PROJEKT, 2 SEMESTER

3. PROJEKT, 2 SEMESTER 3. PROJEKT, 2 SEMESTER Bruger undersøgelse, af sociale medie. KENDSKAB TIL OG BRUG AF ONLINE SOCIALE MEDIER FORENINGEN AF DANSKE INTERAKTIVE MEDIER, FÅET TIL OPGAVE AT AFDÆKKE DANSKERNES BRUG AF SOCIALE

Læs mere

FSFIs lynguide til DFRs elektronisk bevissystem

FSFIs lynguide til DFRs elektronisk bevissystem FSFIs lynguide til DFRs elektronisk bevissystem Dette er en kort guide i anvendelsen af Dansk Førstehjælpsråd elektroniske bevissystem. Guiden viser og forklarer hvordan du som instruktør og medlem af

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

Produktbeskrivelse - Grafisk workflow

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

Læs mere

Grafisk pro duktion & workflow. Portfolio for Kasper Rasmussen

Grafisk pro duktion & workflow. Portfolio for Kasper Rasmussen Grafisk pro duktion & workflow Portfolio for Kasper Rasmussen 2012 2015 G r a f i s k produktion & workflow focus denmark app #3 opgavebeskrivelse Versionering af Focus Denmark print magasin til magasin-

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

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

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

Lav din egen forside i webtrees

Lav din egen forside i webtrees Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.

Læs mere

ActiveBuilder Brugermanual

ActiveBuilder Brugermanual ActiveBuilder Brugermanual Forfatter: TalkActive I/S Dato: Juni 2004 Version: R. 1.01 Sprog: Dansk Copyright 2004 - Talk Active - all rights reserved. Indhold: 1. INDLEDNING...2 2. QUICK-START...3 3. OPBYGNINGEN

Læs mere

Portfolio Andreas Stjerneklar Kristensen. Multimedia Designer Eksamen 1. Semester

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

Læs mere

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

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

Læs mere

Budskab Denne nyhedsmails budskab er, at der er kommet nye kataloger ud og man kan se meget mere på hjemmesiden.

Budskab Denne nyhedsmails budskab er, at der er kommet nye kataloger ud og man kan se meget mere på hjemmesiden. Forståelse for grafisk produktion & workflow Opgavebeskrivelse Det er en nyhedsmail. De er en nyopsætning med inspiration fra tidligere mail med samme emne. Ansvar for opgaveløsning En designer fortæller

Læs mere

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

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

Læs mere

grafisk 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

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