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

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

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

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 Hjemmesidedesign

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

Læs mere

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

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

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

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

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

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

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

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

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

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

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

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

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

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

portfolio GRAFISK WORKFLOW

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

Læs mere

GRAFISK 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

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

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

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

det færdige resultat

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

Læs mere

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

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

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

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

Læs mere

Grafisk 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

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

Projekt 3: Interaktionsudvikling 11/04.14

Projekt 3: Interaktionsudvikling 11/04.14 Projekt 3: Interaktionsudvikling 11/04.14 Gruppe 5 http://kostecki.dk/cph/cupcakes/v2/opskrifter.php Christina Juulmann www.chrissycreations.dk Jacob Kostecki www.kostecki.dk Jayne Alice www.jaynealice.com

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

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

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

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

NY IDENTITET TIL SCHWARZ

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

Læs mere

grafisk 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

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

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

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

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

Læs mere

Martin Møller Web1b Tirsdag den 19 juni 2012

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

Læs mere

GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST

GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 1 af 13 DOKUMENTATION OPGAVE Opgaven jeg stillede mig

Læs mere

Dokumentation. Inspiration S34 S35. Opgavens art Fiktiv opgave af opbygning af en hjemmeside.

Dokumentation. Inspiration S34 S35. Opgavens art Fiktiv opgave af opbygning af en hjemmeside. Grafisk Design Dokumentation Inspiration Opgavens art Fiktiv opgave af opbygning af en hjemmeside. Kort om opgaven Hjemmesiden, skulle være oplysende om produkter og virksomheden, den skulle være enkel

Læs mere

Designmanual for websider

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

Læs mere

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING

2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING 2. SEMESTER PROJEKT 3 INTERAKTIONSUDVIKLING Baggrund Udgangspunktet er projekt 2, dvs. en blog om cupcakes, hvor målgruppe, afsender og modtager allerede er defineret. Du bliver nu bedt om at udvikle et

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

Vejledning til PDA - Hjælp til sårsygeplejersker. Sundhed og Omsorg Michael Væggemose

Vejledning til PDA - Hjælp til sårsygeplejersker. Sundhed og Omsorg Michael Væggemose Vejledning til PDA - Hjælp til sårsygeplejersker Sundhed og Omsorg Michael Væggemose Indholdsfortegnelse 1 Introduktion... 3 2 Start PDA en... 4 3 Kamerafunktion... 5 4 Sårjournalen... 6 4.1 Send billede...

Læs mere

Quick Guide Ditmer edagsorden Oktober 2013

Quick Guide Ditmer edagsorden Oktober 2013 Quick Guide Ditmer edagsorden Oktober 2013 Quick Guide Indhold For dig der skal i gang med at bruge ditmer edagsorden på ipad eller web 1. Sådan får du adgang til ditmer edagsorden... 2 2. Find udvalg

Læs mere

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

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

Læs mere

Mark André Lyhne. Eksamen 2012. 12web1b

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

Læs mere

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

ZoomText 10.1 Hurtig Brugervejledning Tillæg

ZoomText 10.1 Hurtig Brugervejledning Tillæg ZoomText 10.1 Hurtig Brugervejledning Tillæg Dette tillæg til ZoomText 10 kortvejledning dækker de nye funktioner og andre ændringer er specifikke for ZoomText 10.1 til Windows 8.x. For primære instruktioner

Læs mere

www.rikkecarlsen.com/ cupcakes/index.html

www.rikkecarlsen.com/ cupcakes/index.html 2. semester - 3. projekt Interaktionsudvikling - en fortsættelse af projekt 2 - CUPCAKES Mul B - Cphbusiness - 2014 Link til website: www.rikkecarlsen.com/ cupcakes/index.html Gruppe 7 Camilla Mia Poulsen

Læs mere

Arbejdsproces. Kvalitetsvurdering

Arbejdsproces. Kvalitetsvurdering REDEGØRELSE Om opgaven FIKTIV OPGAVE: Til denne opgave skal der laves et design til en hjemmeside (one-page) samt designes grafik og knapper. Designet opsættes som HTML / CSS og valideres. Programvalg

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

Nedarvning. At style tags inden i andre tags. www.johnnihowardsen.dk - selektorer

Nedarvning. At style tags inden i andre tags. www.johnnihowardsen.dk - selektorer Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana,

Læs mere

Grafisk design. Ide. Designprocess. Målgruppe

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

Læs mere

Dynamisk hjemmeside: NeuTravel

Dynamisk hjemmeside: NeuTravel Dynamisk hjemmeside: NeuTravel Problemformulering I dette projekt ønsker vi at lave en uafhængig hjemmeside til brug af turister, som gerne vil læse neutral information (dvs. information der ikke er farvet

Læs mere

Byg et website med Dreamweaver

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

Læs mere

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

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

KOM I GANG MED IPAD MINI

KOM I GANG MED IPAD MINI Tryk pilen mod højre 1 Tryk på den nedadgående pilespids 2 Scroll nedad med fingeren indtil du kommer til Dansk og tryk på Dansk 3 Tryk på Vis mere 4 Scroll nedad med fingeren indtil du kommer til Danmark

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

COOP brugermanual til Podio BRUGERMANUAL. til Podio. 23. februar 2015 Side 1 af 38

COOP brugermanual til Podio BRUGERMANUAL. til Podio. 23. februar 2015 Side 1 af 38 BRUGERMANUAL til Podio 23. februar 2015 Side 1 af 38 INDHOLDSFORTEGNELSE HVAD ER PODIO?... 3 HVAD KAN VI PÅ PODIO?... 4 Aktivitet... 4 Bestyrelsesmøder... 4 Arrangementer & aktiviteter... 5 Opslagstavle...

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

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie

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

Læs mere

Get Skeleton. Boilerplate for Responsive, Mobile-Friendly Development

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

Læs mere

Kommunikation/IT C - Afsluttende opgave 2011

Kommunikation/IT C - Afsluttende opgave 2011 Kommunikation/IT C - Afsluttende opgave 2011 Roskilde Tekniske Gymnasie Martin Fabricius & Simon Dein, 1.3 Side 1 af 11 Indholdsfortegnelse: Indledning... s3 Målgruppe (diskussion)... s4 indledende kravfangst...

Læs mere

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

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

Læs mere

Besøg: http://graciesphp.creativefolder.dk. Projekt 3 på 2. Semester - MulB

Besøg: http://graciesphp.creativefolder.dk. Projekt 3 på 2. Semester - MulB Besøg: http://graciesphp.creativefolder.dk Projekt 3 på 2. Semester - MulB Line K. Brinkmann Rasmus Bundgaard René Andersen Grace Tsatsaris www.linebrinkmann.dk www.rasmusbundgaard.dk www.creativefolder.dk

Læs mere

Den testansvarliges vejledning til kompetencetest

Den testansvarliges vejledning til kompetencetest Den testansvarliges vejledning til kompetencetest Testen er computerbaseret og kan gennemføres på både computer og tablet (herefter under et kaldet computere). Der er dog ved tidligere gennemførsler oplevet

Læs mere

DOKU- MEN- TATION TEK- NISK

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

Læs mere

Afsluttende opgave - Kommunikation/IT C Klasse 1.1

Afsluttende opgave - Kommunikation/IT C Klasse 1.1 11-05-2015 Affaldshåndtering Afsluttende opgave - Kommunikation/IT C Klasse 1.1 Hans Rasmussen & Kevin Kumar ROSKILDE TEKNISKE GYMNASIUM Indhold Affaldshåndtering i Grønsted kommune... 2 Krav... 2 Design...

Læs mere

Eksamen. Jonas Langhoff Nielsen Web01b

Eksamen. Jonas Langhoff Nielsen Web01b Eksamen Jonas Langhoff Nielsen Web01b 1 Indhold Tidsplan 3 Projektbeskrivelse og Målgruppe 4 De 6 Designparametre. 5 Skitser.. 6 Flowchart 7 Fremstilling af Logo 8 Farvevalg 9 Valg af fonte 10 Skelet.

Læs mere

Word-5: Tabeller og hængende indrykning

Word-5: Tabeller og hængende indrykning Word-5: Tabeller og hængende indrykning Tabel-funktionen i Word laver en slags skemaer. Word er jo et amerikansk program og på deres sprog hedder skema: table. Det er nok sådan udtrykket er opstået, da

Læs mere

Vejledning til Kilometer Registrering

Vejledning til Kilometer Registrering Vejledning til Kilometer Registrering iphone Appen som holder styr på dit firma og privat kørsel. Udviklet af Trisect Development 2011. www.trisect.dk For iphone version 4.2 og nyere. Med Kilometer Registrering

Læs mere

SDBF QUICKGUIDE SKOLERNES DIGITALE BLANKET FLOW 1. - SUPERBRUGERE OG MEDLEMMER AF RETTIGHEDSGRUPPER -

SDBF QUICKGUIDE SKOLERNES DIGITALE BLANKET FLOW 1. - SUPERBRUGERE OG MEDLEMMER AF RETTIGHEDSGRUPPER - SDBF QUICKGUIDE SKOLERNES DIGITALE BLANKET FLOW 1. - SUPERBRUGERE OG MEDLEMMER AF RETTIGHEDSGRUPPER - INTRODUKTION TIL SKOLERNES DIGITALE BLANKET FLOW Vi er glade for at kunne byde velkommen til opdateret

Læs mere

ZoomText 10.1 for Windows 8 Hurtig Brugervejledning Tillæg

ZoomText 10.1 for Windows 8 Hurtig Brugervejledning Tillæg ZoomText 10.1 for Windows 8 Hurtig Brugervejledning Tillæg Dette tillæg til ZoomText 10 kortvejledning dækker de nye funktioner og andre ændringer er specifikke for ZoomText 10.1 til Windows 8. For primære

Læs mere

Indhold SAMSUNG GALAXY SIII... 1

Indhold SAMSUNG GALAXY SIII... 1 SAMSUNG GALAXY SIII Her er en guide til softwareopdatering af SAMSUNG GALAXY SIII, opsætning og sletning af e-mail, skift af adgangskode og signatur, nulstilling ved bortkomst, samt opsætning af skærmlås.

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

ereolen.dk -Sådan downlåner du -Sådan anvender du på ebogslæser, tablet og smartphone

ereolen.dk -Sådan downlåner du -Sådan anvender du på ebogslæser, tablet og smartphone Side 1 af 18 ereolen.dk -Sådan downlåner du -Sådan anvender du på ebogslæser, tablet og smartphone Side 2 af 18 Indholdsfortegnelse ereolen.dk... 1 1. Første gang du vil anvende ereolen.dk... 3 1.1 Opret

Læs mere

BRUGERMANUAL FOR KLUBKOORDINATORER. Version 2.0

BRUGERMANUAL FOR KLUBKOORDINATORER. Version 2.0 BRUGERMANUAL FOR KLUBKOORDINATORER Version 2.0 Login Du skal vælge den klub som du tilhøre og dernæst indtaste din kode i feltet: Password. Regionsgolf-Danmark Administration Når du er logget ind i system

Læs mere

RETNINGSLINJER EKSTRA BLADET TABLET

RETNINGSLINJER EKSTRA BLADET TABLET RETNINGSLINJER EKSTRA BLADET TABLET GENERELLE RETNINGSLINJER Annoncøren er ansvarlig for bannermateriale, funktionalitet og design. Bannere, der forstyrrer det redaktionelle indhold eller forårsager tekniske

Læs mere

Sundhedsguiden. Børn og unges sundhed. Jozef Indruszewski & Marc Ringsing. Kommunikation/IT C Afsluttende opgave 2010

Sundhedsguiden. Børn og unges sundhed. Jozef Indruszewski & Marc Ringsing. Kommunikation/IT C Afsluttende opgave 2010 Sundhedsguiden Børn og unges sundhed Kommunikation/IT C Afsluttende opgave 2010 Jozef Indruszewski & Marc Ringsing Problemformulering Vi vil lave en hjemmeside, der oplyser børn og unge om sundhed. Vi

Læs mere

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK Denne rapport indeholder en primær analyse af webstedet www.bilforhandler.dk. Vi har kigget på: Det vigtige førstehåndsindtryk af webstedet Brugervenlighed Anvendte

Læs mere

portfolio GRAFISK WORKFLOW

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

Læs mere

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

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

Læs mere

Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word.

Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word. 75 Paint & Print Screen (Skærmbillede med beskæring) Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word. 1. Minimer straks begge

Læs mere