DAGENS PROGRAM. Layout og komposition. [Pause] CSS. [Pause] Individuel obligatorisk øvelse

Størrelse: px
Starte visningen fra side:

Download "DAGENS PROGRAM. Layout og komposition. [Pause] CSS. [Pause] Individuel obligatorisk øvelse"

Transkript

1 DAGENS PROGRAM Layout og komposition [Pause] CSS [Pause] Individuel obligatorisk øvelse

2 LAYOUT OG KOMPOSITION

3 LAYOUT The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably Web Style Guide, 2009

4 LAYOUT Dvs. at udvikle et tydeligt visuelt hierarki, så det det er tydeligt hvad som er er vigtigt og hvad som er mindre væsentligt. definere funktionelle områder af en webside. gruppere sideelementer som er relateret, så der skabes struktur i indholdet

5 DET KLASSISKE WEB-LAYOUT

6 HEADER & FOOTER Headers are the most visible component of site identity. (WSG) Page footers are mostly about housekeeping and legal matters. (WSG) Footeren spiller i traditionel forstand en mindre indholdsmæssig rolle men kan fungere som et stærkt designmæssigt element i webdesignet.

7 WEB-KONVENTIONER En balancegang mellem brugerens forventning og designet Layoutmæssigt skal konventionerne ses som endnu et Layoutmæssigt skal konventionerne ses som endnu et aspekt, man bør medtage i sine designovervejelser, og ikke være noget man absolut skal efterleve til punkt og prikke.

8 KONVENTIONER I APPS, OS MV. Android + ios + Windows Phone m.fl. Mobiltelefoner, smartphones, tablets, tv, smart watches Små og store ligheder Men også væsensforskellige på helt centrale punkter Aflur konventionerne, tilpas designet og arbejd med mulighederne!

9 ENDOMONDO

10 HVORFOR KONVENTIONER? Ved at arbejde konventionelt sikrer man at brugerne (i klassisk Jacob Nielsen stil): Ved hvilke hovedtræk de skal forvente. Ved hvordan disse hovedtræk ser ud. Ved hvor de skal finde disse hovedtræk på websitet. Ved hvordan de skal bruge disse hovedtræk for at opnå deres mål. Ikke skal tænke over meningen med ukendte design elementer. Ikke mister vigtige emner fordi de overser ikke-standard elementer. Ikke får ubehagelige overraskelser når forventninger ikke efterleves. The Need for Web Design Standards, Jacob Nielsen,

11 ALIGNMENT Justeringen af elementer eller grupper af elementer i relation til hinanden. Manglende justering roder og virker uorganiseret. Det samme kan et mix af forskellige alignments. OK at bryde princippet: hvis det tjener et formål såsom at skabe spænding eller opmærksomhed på et specifikt element.

12 ALIGNMENT

13 ALIGNMENT

14 WEBSITE BIG.dk

15 KOMPOSITION

16 HORISONTAL SYMMETRI

17 HORISONTAL SYMMETRI

18 HORISONTAL SYMMETRI

19 VERTIKAL SYMMETRI

20 TILNÆRMET SYMMETRI

21 TILNÆRMET SYMMETRI

22 RADIAL SYMMETRI

23 RADIAL SYMMETRI

24 ASYMMETRI

25 ASYMMETRI

26 DET GYLDNE SNIT Forholdet mellem to elementer er 1,618 : 1

27

28 FOURSQUARE.COM

29 FASTCOMPANY.COM

30 WEBDESIGNERWALL.COM

31 BBC.CO.UK

32 WIREFRAMES Værktøjer til at sikre struktur, form og funktion

33 WIREFRAMES Simplificeret udgave af hvilket indhold, siden rummer. Krydser grænsen mellem struktur (hvordan informationstyper forholder sig til hinanden) og display (hvordan informationen skal vises). Benytter sig primært af simple streger (wires) og er normalt opsat uden brug af farve, typografisk stil, billeder osv. Wireframes kan have forskellig detaljegrad og udtryk. Fra kun at arbejde med informationsomfang og prioritering til også at medtage informations-layoutet og tilnærmelser til slutdesignet.

34 SIMPLE WIREFRAMES Undgår for meget design Er nemme at afkode Fokuserer på struktur (og evt. funktionalitet/interaktion) Arbejder med sidetyper og visningsvariationer Tester grundidéer af tidligt og formidler dem (lav mange)

35 PAPIR OG BLYANT (VS. DIGITAL) Simple værktøjer understøtter fordelene ved sketching (som risikerer at gå tabt, når udførelsen overføres til et digitalt værktøj). Skaber perfekte rum for kreativitet (også i formsproget). Kræver ingen tekniske færdigheder (alle kan være med). Nemt og hurtigt at lave og ligeså nemt at skille sig af med (iterationer). Tvinger i højere grad fokus på indhold og idé frem for design, teknik og udtryk. Ulemper: håndskitser er besværlige at ændre. interaktionen i test-øjemed ikke er helt optimal.

36 RESPONSIVE DESIGN Design til forskellige visningsforhold

37 GRACEFUL DEGRADATION GRACEFUL DEGRADATION Not-So-Graceful Degradation

38 PROGESSIVE ENHANCEMENT PROGESSIVE ENHANCEMENT Indholdet i fokus

39 When approaching a project from a progressive enhancement perspective, your core focus is the content and everything builds upon that. It s a layered approach that rises to meet a user s needs by paying attention to the context within which a page is accessed... Aaron Gustafson, 2011 Adaptive web design

40 CONTENT FIRST

41 ONE WEB

42 MOBIL TILGIVER IKKE SÅ NEMT...the feature set should be much smaller for a mobile site than for a desktop site. For sure, desktop sites should offer as few features as possible. Jacob Nielsen, 2011 nngroup.com/articles/mobile-sharpens-usability-guidelines

43 One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. W3C w3.org/tr/mobile-bp/#oneweb

44

45

46 RESPONSIVE DESIGN ikke mobilt design

47

48 RESPONSIVE WEB DESIGN At its core, RWD is defined by three key components: flexible grids, flexible images and media queries. Trent Walton, Responsive design strategy (2012)

49 RESPONSIVE WEB DESIGN Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards- based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. Ethan Marcotte, Responsive Web Design (2010) alistapart.com/article/responsive-web-design

50 A DAO OF WEB DESIGN The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.' John Allsopp, A Dao of Web Design (2000) alistapart.com/article/dao

51 TEST

52

53

54 NAVIGATION

55 NAVIGATION

56 KOLONNER

57 KOLONNER

58 PAPIR & BLYANT? Til øvelsen senere i dag Clayton Good Morning (Pinterest):

59 LAYOUT MED CSS

60 TÆNK I BOKSE realdania.dk

61 cbs.dk

62

63 OGSÅ DE USYNLIGE cphcleantech.com/home/about

64 OG BRYD DEM vsp.lf.dk

65 BOKSMODELLEN

66 BOKSMODELLEN Margin Margin Margin Margin-område område område område Padding Padding Padding Padding-område område område område Ydre Ydre Ydre Ydre kant kant kant kant Border Border Border Border Indre Indre Indre Indre kant kant kant kant Padding Padding Padding Padding-område område område område Indholdsområde Indholdsområde Indholdsområde Indholdsområde width width width width height height height height

67 BOKSMODELLEN I CSS3 box-sizing property Giver mulighed for at sætte dimensioner inkl. padding, margin og border Men pas på! Ikke alle browser-versioner er lige friske. Læs mere:

68

69 DIMENSIONER Width og height refererer til dimensionerne af indholdsområdet. Dvs. total størrelse er: Margins + borders + paddings + content area. Det er her en lommeregner kan vise sig anvendelig. selector { width: 200px; padding: 10px; border: 1px; margin: 10px; } Enheder: px, em, % (procent refererer til parent/det omkransende element).

70 PADDING selector { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } h1 { } padding: 5px 10px 15px 20px; H1 Overskrift

71 BORDER-STYLE p { } font-size:12px; width: 100px; height: 100px; margin: 20px; float: left; border-width: 10px;.solid { } border-style: solid;

72 BRUG BORDER AFDÆMPET

73 BORDER Style, width, color selector { border-style: dashed; border-width: 1em; border-color: blue; } selector { border-top-style: solid; border-right-style: dashed; border-bottom-style: dotted; border-left-style: double; }

74 RADIUS OG SKYGGER The 'border-radius' properties Giver mulighed for nemt at tilføje runde hjørner til bokse - en feature som lige nu kan opnås ved en række fikse work-arounds. Eks. border-radius:10px; The box-shadow property Giver mulighed for nemt at tilføje ægte semitransparent skygge til bokse. box-shadow: 10px 10px 5px #888;

75 MARGIN selector { h1 { margin-top: 5px; margin: 5px 20px 5px 20px; margin-right: 20px; } margin-bottom: 5px; Eller bare margin-left: 20px; } h1 { margin: 5px 20px; } H1 Overskrift

76 MARGIN COLLAPSE Vertikale marginer kollapser. Den højeste værdi benyttes. Horisontale marginer kollapser aldrig. h1.top {margin: 10px 20px 10px 20px;} h1.bottom {margin: 20px 20px 20px 20px;}

77 FLOAT

78 FLOAT Browseren er default indstillet til at behandle disse elementer, dette kaldes også for flow. Browserens normale flow: Block elementer udlægges fra top mod bund Tekst elementer udlægges fra venstre mod højre, inden for block elementerne. Objekter i det normale flow influerer på omgivende objekter. Floating og positioning ændrer det normale flow.

79 DET NORMALE FLOW body h1 p h2 ul li Titel Artikel-indhold Artikel-indhold Artikel-indhold Artikel-indhold indhold Artikel-indhold Artikel-indhold Artikel-indhold Artikel-indhold Underoverskrift Her står første punkt i listen Her står andet punkt i listen Her står tredje punkt i listen strong

80 DET NORMALE FLOW <p><img src="logo_itu.png" alt="logo: IT-Universitetet"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis nibh est. Pellentesque sit amet velit non magna faucibus molestie a eget nibh.</p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis nibh est. Pellentesque sit amet velit non magna faucibus molestie a eget nibh.

81 FLOAT PÅ BILLEDE img { } float:left; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis nibh est. Pellentesque sit amet velit non magna faucibus molestie a eget nibh.

82 FLOAT PÅ TEKSTBOKS.tekstboks { float:right; padding: 20px; margin-left: 10px; background-color: #CCC; width: 300px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis nibh est. Pellentesque Dette er en tekstboks, som man f.eks. kan bruge til at fremhæve et citat eller andre vigtige elementer. Typisk i <aside>. Det er vigtigt, at tekstboksen gives plads. sit amet velit non magna faucibus molestie a eget nibh.

83 FLOAT PÅ FLERE ELEMENTER P1 P2 P3 P4 P5 P6 P7 P8 P9 P10

84 FLOAT PÅ FLERE ELEMENTER

85 FLOAT PÅ FLERE ELEMENTER

86 CLEAR img { } float:left; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis Pellentesque sit amet velit non magna faucibus molestie a eget nibh.

87 CLEAR img { } float:left; clear:right; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis Pellentesque sit amet velit non magna faucibus molestie a eget nibh.

88 POSITIONERING

89 POSITION Static: Elementerne følger det normale flow (er normalt ikke nødvendig at bruge). Relative: Flytter elementerne samtidig med at den originale plads bibeholdes. Absolute: Elementet flyttes fra det normale flow og places relativt til det omkransende element. Den originale plads forsvinder. Fixed: Magen til absolute, men elementet placeres relativt til visningsrammen (eks. browservinduet).

90 POSITION-ANGIVELSE Fikspunkt (top, right, bottom, left) Værdier: Absolutte værdier: Pixels Relative værdier: Procent og ems. Positions-angivelse kan ligesom margin antage negative værdier hvorved der rykkes i den modsatte retning. img { position: relative; top: 50px; }

91 RELATIVE Placeres relativt til elementets originale placering i det normale flow. Elementet rykkes svarende til fikspunktværdierne. Den originale plads i dokumentet bevares.

92 RELATIVE em { position: relative; top: 25px; left: 50px; background-color: pink; }

93 ABSOLUTE Placeres relativt til kanterne af det omkransende blokelement ved brug af fikspunktværdierne. Elementet rykkes svarende til fikspunktværdierne. Den originale plads forsvinder. Absolut positionering bør anvendes med omtanke.

94 ABSOLUTE em { position: absolute; top: 25px; left: 50px; background-color: pink; }

95 DET OMKRANSEDE ELEMENT Hvordan bestemmes det omkransende element? Positionerede elementer som ikke er omkranset af et andet relativt positioneret element placeres i forhold til root- elementet (dvs. <html> elementet). Positionerede elementer som er omkranset af et andet relativt positioneret element placeres i forhold kanterne af det omkransende element. Et element som er positioneret bliver udgangspunktet for de elementer som det indeholder.

96 Z-INDEX p { position: absolute; padding: 5px; color: black; } #p1 { z-index: 1; background-color: red; } #p2 { z-index: 5; background-color: blue; top: 30px; left: 200px; } #p3 { z-index: 10; background-color: green; top: 60px; left: 400px; }

97 FIXED Elementet placeres relativt til viewport. Elementet rykkes svarende til fikspunktværdierne. Den originale plads forsvinder. Elementer forbliver fikseret i forhold til browservinduet. Ikke supporteret af >IE v6.

98 FIXED p { } margin-left:220px; #fixed { position: fixed; width: 200px; background-color: pink; }

99 RESPONSIVT DESIGN

100 RESPONSIVT DESIGN En anden tilgang til indhold, design og strategi Et netværk af indhold Modulær indholdsstrategi Proportionalitet Mistet kontrol i traditionel forstand Præsentation: Tilbage til flexible værdier. em, rem og % erstatter px Papiret slippes (måske følelsen af kontrol lå i papiret?)

101 TARGET CONTEXT = RESULT TARGET CONTEXT = RESULT Den proportionale værdi i en given (medie-)kontekst

102 SKÆRMOPLØSNING I % Skærmopløsninger i procent af antal sidevisninger, FDIM: Danskernes brug af internettet 2012 fdim.dk/sites/default/files/mediearkiv/rapporter/danskernes_brug_af_internettet_2012_rapport.pdf

103 700PX 988PX = 0,7085 ELLER 70,85% ELLER 70,85% Den proportionale værdi i en given (medie-)kontekst

104 DET FLEKSIBLE FUNDAMENT em tager udgangspunkt i standardskriftstørrelsen Default: 16 px (i det fleste browsere) Kan erklæres i body i pixels. Eksempel: body {font-size: 18px;} Grids som rammen for dit design 960 px (udbredt standard for screen dengang alle havde opløsninger mellem 1024 og 1280 pixels.) 320x480, 480x320, 1366x768, 1280x1024 osv. CSS, SVG og Ikon-tegn til f.eks. knapper, billedtekst osv. Opløsningsuafhængighed Stigende behov med Retina-display, smart-watches, tv-visning osv. En bevægelse væk fra at bruge billeder og CSS-sprites

105 GRIDS 950px 50px 10px 300px

106 FRAMELESS GRIDS framelessgrid.com

107 FRAMELESS GRIDS framelessgrid.com

108 FRAMELESS GRIDS framelessgrid.com

109 THEGRIDSYSTEM.ORG

110 TYPOGRAFI %, em og rem

111 TYPOGRAFI <p>alle "rem" noder skal have font-size: 50px (100px gange 0.2em), svarende til den første "em" node</p> <div class="em"> em <div class="em"> em <div class="em"> em </div> </div> </div> <div class="rem"> rem <div class="rem"> rem <div class="rem"> rem </div> </div> </div> html { font:100px Arial, sans-serif; } body > div { float:left; margin:20px; padding:20px; background:#ccc; } p { }.em { }.rem { } font-size:12px; font-size:0.5em; font-size:0.5rem;

112 LIDT INSPIRATION Icon fonts: https://www.shifticons.com/ Style tiles: Media queries:

113 ØVELSE 3 Bloggen > Slides og øvelser GoogleDrive: bit.ly/ddkp13_3

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

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

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

CSS fortsat: Boksmodel, floating & positionering

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

Læs mere

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

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

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

Læs mere

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

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

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 GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

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

Læs mere

GRAFISK WORKFLOW 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 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 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 - WORKFLOW HJEMMESIDE TIL ABITO;50

GRAFISK - WORKFLOW HJEMMESIDE TIL ABITO;50 GRAFISK - WORKFLOW HJEMMESIDE TIL ABITO;50 Dokumentation OPGAVEN TaskerieT henvendte sig til os for at få udviklet en webshop til en tøj-kollektion (Abito;50) som hun på nuverende tidpsunkt kun sælger

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

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

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

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

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

opsam ling fra sidst

opsam ling fra sidst Opsam ling fra sidst Den rette tilgang til HTML og CSS Eksperimentér Tænk logisk Detaljerne betyder noget Find inspiration/information på nettet Gode genveje Gem cmd s på Mac ctrl s på PC Bladre mellem

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

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

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

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

Hvor er mine runde hjørner?

Hvor er mine runde hjørner? Hvor er mine runde hjørner? Ofte møder vi fortvivlelse blandt kunder, når de ser deres nye flotte site i deres browser og indser, at det ser anderledes ud, i forhold til det design, de godkendte i starten

Læs mere

Stylesheets - grundteori.

Stylesheets - grundteori. Når du designer med css gør du to ting: på den ene side opmærkes og struktureres sidens indhold med tags, eller markører på den anden side tildeles disse tags css-regler, hvormed du styrer layoutet. Her

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

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

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

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

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

5 ARBEJDE MED EDITOREN

5 ARBEJDE MED EDITOREN 5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links.

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

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

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

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

Læs mere

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

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

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

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

Læs mere

www.johnnihowardsen.dk - nedarvning med selektorer

www.johnnihowardsen.dk - nedarvning med 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 workflow Frank winding

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

Læs mere

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

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

Forståelse for grafisk produktion og workflow

Forståelse for grafisk produktion og workflow Forståelse for grafisk produktion og workflow Fallulah hjemmeside Opgaven: Blev stillet i forbindelse med forløbet avanceret webdesign, jeg har hverken fået karakter eller bedømmelse på den. Opgaven bestod

Læs mere

WEBDESIGN & WEBKOMMUNIKATION

WEBDESIGN & WEBKOMMUNIKATION WEBDESIGN & WEBKOMMUNIKATION 23. februar 2012 #4 - Webtypografi og farve + CSS introduktion PROGRAM FOR I DAG 1. Farve 2. WebTypografi 3. CSS 4. Selectors, inheritance, hierarkiet og specificitet 5. Næste

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

Typografi & ombrydning

Typografi & ombrydning Typografi & ombrydning Selected brandbook præsenterer de værdier firmaet står for og skal afspejle deres nuværende visioner og fremtidige mål. Jeg har forsøgt at udtrykke deres værdier og stil i min produktion.

Læs mere

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

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

Læs mere

Website review groweasy.dk

Website review groweasy.dk Website review groweasy.dk Generated on September 01 2016 10:32 AM The score is 56/100 SEO Content Title Webbureau Odense GrowEasy hjælper dig med digital markedsføring! Length : 66 Perfect, your title

Læs mere

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

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

Læs mere

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

RESPONSIVE DESIGN. Fleksibelt, platformuafhængigt webdesign. Frank Thomsen & Toke Fritzemeier Efterår 2012

RESPONSIVE DESIGN. Fleksibelt, platformuafhængigt webdesign. Frank Thomsen & Toke Fritzemeier Efterår 2012 RESPONSIVE DESIGN Fleksibelt, platformuafhængigt webdesign Frank Thomsen & Toke Fritzemeier Efterår 2012 Første browser med grafik 1993 Første browser med grafik 1993 1995 100% 1995 2003 Første browser

Læs mere

Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.

Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Side 1 Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Dette er nogle gange et ønske fra den enkelte kunde, som blot ønsker

Læs mere

Om styles / typografier / typografiark / stylesheets

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

Læs mere

Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE

Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE Grafisk Workflow & produktion REDESIGN AF HJEMMESIDE redegørelse Hvad går opgaven ud på Inhouse Graphic (IHG), skulle have rede signet hjemmesiden. Hjemmesidens struktur under samme ombæring kigges på

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

komulus i digital udvikling DANIEL WIKLUND MOBILE LØSNINGER UDFORDRINGER OG MULIGHEDER komulus komulus kommuner i digital udvikling

komulus i digital udvikling DANIEL WIKLUND MOBILE LØSNINGER UDFORDRINGER OG MULIGHEDER komulus komulus kommuner i digital udvikling DANIEL WIKLUND MOBILE LØSNINGER UDFORDRINGER OG MULIGHEDER kommuner i digital udvikling ko mu lu s APP ELLER HJEMMESIDE Hvilken løsning passer bedst til vores behov? APP ELLER HJEMMESIDE MOBIL HJEMMSIDE

Læs mere

how to save excel as pdf

how to save excel as pdf 1 how to save excel as pdf This guide will show you how to save your Excel workbook as PDF files. Before you do so, you may want to copy several sheets from several documents into one document. To do so,

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

Webside score templatedownload.org

Webside score templatedownload.org Webside score templatedownload.org Genereret Oktober 18 2015 05:21 AM Scoren er 43/100 SEO Indhold Titel FREE Template Download Længde : 22 Perfekt, din titel indeholder mellem 10 og 70 bogstaver. Beskrivelse

Læs mere

GRUPPE 5 Line - Nanna - Thea - Sarah

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

Læs mere

Tillykke Med Fødselsdagen

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

Læs mere

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

web concept tema 4 Hvordan kan man motivere børn til at spise mere frugt?

web concept tema 4 Hvordan kan man motivere børn til at spise mere frugt? tema 4 web concept Hvordan kan man motivere børn til at spise mere frugt? The objective for this project is to make a campaign that motivates children to eat more fruit. In the campaign there must be information

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

I gang med Adobe Muse CC

I gang med Adobe Muse CC I gang med MUSE Muse er et program fra Adobe til fremstilling af websites, for de som ikke ønsker at arbejde med koder. De fremstillede websites baserer sig naturligvis på HTML, CSS, Javascript mm., du

Læs mere

Analyse af websiden FeelgoodBakery.dk

Analyse af websiden FeelgoodBakery.dk 1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Analyse af websiden FeelgoodBakery.dk Link til redesign af webside: http://nadiacah.com/uge40/landingpage.html Hvem

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

Guiden til overlevelse af HTX Klasse 3.4 Malte Tobias Thomé

Guiden til overlevelse af HTX Klasse 3.4 Malte Tobias Thomé Eksamensjournal Guiden til overlevelse af HTX Klasse 3.4 Indholdsfortegnelse Indledning:... 3 Problemformulering:... 3 Løsning:... 3 Målgruppe:... 3 Kompiler og sprog:... 3 Produktet:... 4 Hjemmesiden:...

Læs mere

Dynamisk Webdesign. Stefan Grage

Dynamisk Webdesign. Stefan Grage Dynamisk Webdesign Stefan Grage Brugen af web Hvilke sites besøger i oftest? Og hvorfor? Snak med sidemanden i 3 min. Kategorisering Utility sites Sociale sites Webshops Indholdstunge sites Utilities Google

Læs mere

Terese B. Thomsen 1.semester Formidling, projektarbejde og webdesign ITU DMD d. 02/11-2012

Terese B. Thomsen 1.semester Formidling, projektarbejde og webdesign ITU DMD d. 02/11-2012 Server side Programming Wedesign Forelæsning #8 Recap PHP 1. Development Concept Design Coding Testing 2. Social Media Sharing, Images, Videos, Location etc Integrates with your websites 3. Widgets extend

Læs mere

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

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

Læs mere

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

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

Læs mere

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

1 Robbins, Jennifer N.: Learning Web Design, s. 41

1 Robbins, Jennifer N.: Learning Web Design, s. 41 I designarbejdet forbundet med at udvikle en hjemmeside, er det vigtigt at gøre sig nogle overvejelser over hvilken optimale skærmstørrelse man designer til, da dette har konsekvens for den efterfølgende

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. Proces. Kodning. Fonts:

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

Læs mere

Design til digitale kommunikationsplatforme-f2013

Design til digitale kommunikationsplatforme-f2013 E-travellbook Design til digitale kommunikationsplatforme-f2013 ITU 22.05.2013 Dreamers Lana Grunwald - svetlana.grunwald@gmail.com Iya Murash-Millo - iyam@itu.dk Hiwa Mansurbeg - hiwm@itu.dk Jørgen K.

Læs mere

ØVELSE 11: TABLES & FORMS (Individuel)

ØVELSE 11: TABLES & FORMS (Individuel) ØVELSE 11: TABLES & FORMS (Individuel) 1. Målsætning I denne øvelse kommer du til at arbejde med to forskellige områder: Forms (formularer) og tables (tabeller) (kapitel 8+9 i LWD.) Du kommer blandt andet

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

Analyse af websiden FeelgoodBakery.dk

Analyse af websiden FeelgoodBakery.dk Analyse af websiden FeelgoodBakery.dk Link til redesign af webside: http://nadiacah.com/uge40/landingpage.html Hvem er afsenderen? - Feelgoodbackery Hvem er målgruppen? - Den moderne familiemor - Det moderne-fællesskabsorienterede

Læs mere

Portfolio. Elektronisk portfolio findes på: www.my-graphic.dk. Sofie Jespersen August 2012 MEDIEGRAFIKER PORTFOLIO

Portfolio. Elektronisk portfolio findes på: www.my-graphic.dk. Sofie Jespersen August 2012 MEDIEGRAFIKER PORTFOLIO Portfolio MEDIEGRAFIKER PORTFOLIO Sofie Jespersen August 2012 Elektronisk portfolio findes på: www.my-graphic.dk grafisk design grafisk design Opgaven Opgaven gik ud på at lave et redesign af Familiemåltider.dk

Læs mere

Blomsten er rød (af Harry Chapin, oversat af Niels Hausgaard)

Blomsten er rød (af Harry Chapin, oversat af Niels Hausgaard) Blomsten er rød (af Harry Chapin, oversat af Niels Hausgaard) På den allerførste skoledag fik de farver og papir. Den lille dreng farved arket fuldt. Han ku bare ik la vær. Og lærerinden sagde: Hvad er

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

Workshop G4 MicroStation V8 XM edtion nye værktøjer 2

Workshop G4 MicroStation V8 XM edtion nye værktøjer 2 Workshop G4 MicroStation V8 XM edtion nye værktøjer 2 FØR I BEGYNDER......1 ACCUDRAW...2 ROTATE VIEW...2 ROTATE ELEMENT...2 ANDRE NYE ACCUDRAW SHORTCUTS...2 SHORTCUTS...3 DE VIGTIGSTE...3 CTRL OG EN FUNKTIONSTAST

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

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

CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter.

CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter. CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter. HTML var oprindeligt tænkt som et rent struktur-markeringssprog, der eksempelvis

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

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

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

Læs mere

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

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

Læs mere

DataHub brugeradgang. DataHub iframe løsning

DataHub brugeradgang. DataHub iframe løsning DataHub brugeradgang DataHub iframe løsning Overview Elleverandør 2 Elleverandør 1 Forbrugs- og stamdata Elleverandør n Central Datahub Energinet.dk Egne forbrugsdata Elleverandør webportal Arkitektur

Læs mere