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

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

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

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow Grafisk Workflow REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums

Læs mere

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

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

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,

Læs mere

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

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

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

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

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

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

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

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

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

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

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

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er

Læs mere

OPGAVEN 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

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

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

WORKFLOW & GRAFISK PRODUKTION

WORKFLOW & GRAFISK PRODUKTION Opgavebeskrivelse Kunde: Gorm Larsen & Zornig (GLZ) Websitet Social media cheat sheet er en oversigt over forskellige sociale mediers opsætning. Formålet er altså at gøre det nemt at finde de mål, der

Læs mere

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

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

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

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Grafisk w o rk f l ow jemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Deres vision er at skabe enkle og inspirerende

Læs mere

GRAFISK 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

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

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

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML5-side med afsnit,

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

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

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

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

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

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

Grafisk workflow. Layout Da guiden primært skal betjenes med fingrene, har jeg programmeret den som en touchbaseret webapplikation (WebApp). 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

Læs mere

TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0

TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0 TEKNISK DOKUMENTATION FAKTURA LAYOUT ABAQUE VERSION 2.0 INTRODUKTION... 3 SKABELON OPBYGNINGEN... 3 BYG DIN EGEN SKABELON... 3 INDSÆT FELTER... 3 INDSÆT VARELINJER... 3 FILNAVN... 4 LISTE OVER FELTER...

Læs mere

Den gode User Experience. Michelle Andreassen ITAddiction Blogs: QED.dk

Den gode User Experience. Michelle Andreassen ITAddiction Blogs: QED.dk Den gode User Experience Mathilde Hoeg mathildehoeg Michelle Andreassen ITAddiction Blogs: QED.dk Agenda Hvad er brugeroplevelse (UX)? Hvad er en user experience designer? Hvad er brugervenlighed(usability)?

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

Layout af websider. Moderne websidelayout med stylesheets. Af Jørgen Farum Jensen

Layout af websider. Moderne websidelayout med stylesheets. Af Jørgen Farum Jensen Layout af websider Moderne websidelayout med stylesheets Af Jørgen Farum Jensen Artiklens eksempler bygger på tekster om og billeder fra Fredericia Vold. Det er kun eksempler og foregiver på ingen måde

Læs mere

S&E Bazar Fyn. Mads, Asger, Lærke og Alexander WEB-A 11-12-2012

S&E Bazar Fyn. Mads, Asger, Lærke og Alexander WEB-A 11-12-2012 2012 S&E Bazar Fyn Mads, Asger, Lærke og Alexander WEB-A 11-12-2012 Indhold Indledning... 2 Problemformulering:... 2 Problemstillinger:... 2 Kommunikation:... 3 Hvilken målgruppe ønsker vi at henvende

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

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

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

GRAFISK DESIGN. Opgaven. Målgruppe. Procesbeskrivelse. De 4 grafiske designparametre. Kvalitetsvurdering. Farver: Ideudvikling: Form: Typografi:

GRAFISK DESIGN. Opgaven. Målgruppe. Procesbeskrivelse. De 4 grafiske designparametre. Kvalitetsvurdering. Farver: Ideudvikling: Form: Typografi: GRAFISK DESIGN Opgaven Opgaven gik ud på at designe en æske, indpakningspapir og en lille folder til en produktlinie fra Chokoladefabrikken A/S. Derudover skulle der designes et logo til Chokoladefabrikken

Læs mere

SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014

SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014 SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014 SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014 DAGENS PROGRAM Sociale medier og engagerende content Hvad, hvor, hvem Godt indhold og Content

Læs mere

Kriterie for at bestå: Deltagelse i undervisningstiden, udarbejdelse af e-magasin, deltagelse i fælles fremlægning.

Kriterie for at bestå: Deltagelse i undervisningstiden, udarbejdelse af e-magasin, deltagelse i fælles fremlægning. 1. E-MAGASINER (Herning) Hvem kan deltage: Studerende i Herning Kriterie for at bestå: Deltagelse i undervisningstiden, udarbejdelse af e-magasin, deltagelse i fælles fremlægning. På kurset lærer du at

Læs mere

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

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

Læs mere

MOBILE STRATEGIER. Anders Bruun, Skybrud.dk abruun@skybrud.dk

MOBILE STRATEGIER. Anders Bruun, Skybrud.dk abruun@skybrud.dk MOBILE STRATEGIER Anders Bruun, Skybrud.dk abruun@skybrud.dk Agenda Tal og facts Mobil strategi Hvad betyder det for jeres organisation/webredaktører Taktiske valg Baby steps and the big picture Hvordan

Læs mere

Christian Jelbo mobile manager cj@eb.dk +45 2020 0575. Mobil

Christian Jelbo mobile manager cj@eb.dk +45 2020 0575. Mobil Christian Jelbo mobile manager cj@eb.dk +45 2020 0575 Mobil Godteposen Det mobile markedet og Ekstra Bladet Status på Ekstra Bladets mobile aktiviteter Strategi og markedsposition Hvem benytter sig af

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

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

SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014

SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014 SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014 SOCIALE MEDIER ONLINE MARKETING 2. SEMESTER, FORÅR 2014 DAGENS PROGRAM Sociale medier og engagerende content Hvad, hvor, hvem Godt indhold og Content

Læs mere

Kunsten på Silkeborg Højskole - en online kunstregistrant

Kunsten på Silkeborg Højskole - en online kunstregistrant GRAFISK DESIGN Design af responsiv hjemmeside til Silkeborg Højskoles nye kunstregistrant. Oprettelse af ny side på Silkeborg Højskoles primære hjemmeside. Kunsten på Silkeborg Højskole - en online kunstregistrant

Læs mere

Scrollbars side 2-5. Ankerpunkter side 6-7. Text Swap side 8-10. Links i flere farver side 11-14. z-index og baggrundsbilleder side 15-18

Scrollbars side 2-5. Ankerpunkter side 6-7. Text Swap side 8-10. Links i flere farver side 11-14. z-index og baggrundsbilleder side 15-18 Indhold Scrollbars side 2-5 Ankerpunkter side 6-7 Text Swap side 8-10 Links i flere farver side 11-14 z-index og baggrundsbilleder side 15-18 Sprymenuer side 19-24 Sider med dynamisk høje side 25-27 CSS3

Læs mere

Subject to terms and conditions. WEEK Type Price EUR WEEK Type Price EUR WEEK Type Price EUR WEEK Type Price EUR

Subject to terms and conditions. WEEK Type Price EUR WEEK Type Price EUR WEEK Type Price EUR WEEK Type Price EUR ITSO SERVICE OFFICE Weeks for Sale 31/05/2015 m: +34 636 277 307 w: clublasanta-timeshare.com e: roger@clublasanta.com See colour key sheet news: rogercls.blogspot.com Subject to terms and conditions THURSDAY

Læs mere

Sådan sætter du et dokument op med billeder i Microsoft Word (2003)

Sådan sætter du et dokument op med billeder i Microsoft Word (2003) Sådan sætter du et dokument op med billeder i Microsoft Word (2003) Denne vejledning gennemgår hvordan man indsætter billeder i Word, og forklarer de basale værktøjer der kan bruges til at lave layout

Læs mere

Komposition og layout. bokse. Det fotografiske og grafiske arbejde er lavet i Photoshop og Illustrator, og optimeret Programvalg

Komposition og layout. bokse. Det fotografiske og grafiske arbejde er lavet i Photoshop og Illustrator, og optimeret Programvalg Grafisk 1 Opgaven At fremstille en hjemmeside, til en bog om stilhistorie i forbindelse med et skoleprojekt. Hjemmesiden er en fiktiv side for et kunstmuseum med 1 forside og 2 underliggende sider. De

Læs mere

Userguide. NN Markedsdata. for. Microsoft Dynamics CRM 2011. v. 1.0

Userguide. NN Markedsdata. for. Microsoft Dynamics CRM 2011. v. 1.0 Userguide NN Markedsdata for Microsoft Dynamics CRM 2011 v. 1.0 NN Markedsdata www. Introduction Navne & Numre Web Services for Microsoft Dynamics CRM hereafter termed NN-DynCRM enable integration to Microsoft

Læs mere

PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia

PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia GRAFISKDESIGN PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia Trykket hos: PR Offset Papir: 170g multiart silk, omslag 130g multiart silk, indhold Grafisk design Dansk Kedel Kemi,

Læs mere

BOGKORT VEJLEDNING TJEKLISTE FØR DU GÅR I GANG

BOGKORT VEJLEDNING TJEKLISTE FØR DU GÅR I GANG formater som vises BOGKORT VEJLEDNING TJEKLISTE FØR DU GÅR I GANG FORSIDE STAMDATA (skal med) Foto af bogen (3D) eller en illustration af bogens forside (2D)? Det skal i begge tilfælde være i høj opløsning,

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...

Læs mere

Grafisk Workflow Personligt website

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

Læs mere

Vejle Mobil. workshop torsdag d. 09.02.2012. Laura Vilsbæk, Skybrud.dk Anders Bruun, Skybrud.dk

Vejle Mobil. workshop torsdag d. 09.02.2012. Laura Vilsbæk, Skybrud.dk Anders Bruun, Skybrud.dk Vejle Mobil workshop torsdag d. 09.02.2012 Laura Vilsbæk, Skybrud.dk Anders Bruun, Skybrud.dk Det skal vi kigge på i dag Trends og tendenser Tal og fakta Dig og din mobil Mobile muligheder Dig og din mobil

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

Præsentationsportfolio for Hovedforløb 2. Hjemmeside til Jelly Belly Danmark

Præsentationsportfolio for Hovedforløb 2. Hjemmeside til Jelly Belly Danmark Præsentationsportfolio for Hovedforløb 2 Hjemmeside til Jelly Belly Danmark Opgaven Jeg skal lave en ny og mere nutidig hjemmeside til Jelly Belly Danmark. Jelly Belly er nogle amerikanske slikbønner som

Læs mere

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information web som medie Internet vs WWW Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information Internet protokoller (forskellige måder at udveksle information

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

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

RESPONSIVE WEBSITE GRAFISK WORKFLOW DOKUMENTATION

RESPONSIVE WEBSITE GRAFISK WORKFLOW DOKUMENTATION RESPONSIVE WEBSITE DOKUMENTATION OPGAVEN Opgaven gik ud på at designe og kode et responsive website til sommerhuset Brink Møllegaard. Websitet skulle præsentere og informere besøgende om huset og området

Læs mere

Forretningsmodeller for mobile applikationer

Forretningsmodeller for mobile applikationer Forretningsmodeller for mobile applikationer Indsigt og strategi Søren Kottal Eskildsen Alexandra Instituttet A/S Skabelon til forretningsmodel for mobile Click to edit Master title style applikationer

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

Hvilke typer koder findes der?

Hvilke typer koder findes der? Introduktion Hvilke typer koder findes der? Responsmekanismer og benchmark ifht. sms. Øg din ROI på din medieinvestering Hvad er det der bygger bro efter din kunde har scannet kode Payment / Salg Promotion

Læs mere

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. 1 Grafisk workflow GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet

Læs mere

Byg web sider. Introduktion:

Byg web sider. Introduktion: Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se

Læs mere

DYNAMISK WEBDESIGN Intro

DYNAMISK WEBDESIGN Intro DYNAMISK WEBDESIGN Intro 1 PLAN... Mød din kursusansvarlige: Tess Gaston Mød din hjælpelærer: Frederik Wordensjold Hvad er DYNAMISK webdesign? Indhold Semesterplan Hvem ER I? (graf) Hvad KAN I? (pull)

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

QUICK START Updated: 18. Febr. 2014

QUICK START Updated: 18. Febr. 2014 QUICK START Updated: 18. Febr. 2014 For at komme hurtigt og godt igang med dine nye Webstech produkter, anbefales at du downloader den senest opdaterede QuickStart fra vores hjemmeside: In order to get

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

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

2013 SP1. Konfiguration af koncernindblik. Configuration Guide

2013 SP1. Konfiguration af koncernindblik. Configuration Guide 2013 SP1 Konfiguration af koncernindblik Configuration Guide Intellectual Property Rights This document is the property of ScanJour. The data contained herein, in whole or in part, may not be duplicated,

Læs mere

WordPress som CMS 1:2. Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes

WordPress som CMS 1:2. Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes WordPress som CMS 1:2 Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes Jeg er Lasse Claes De næste to uger Mål Du skal lave din portfolio i WordPress Sidegevinster Du lærer at

Læs mere

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk GRAFISK DESIGn Webdesign Min chef ville gerne have lavet en webside til firmaets udlejningshus i Italien. Huset på 200 m² er et traditionelt toskansk landhus i tre etager og ligger i gåafstand fra middelalderlandsbyen

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

CMS - BRUGERMANUAL CMS

CMS - BRUGERMANUAL CMS CMS - BRUGERMANUAL LOG PÅ ADMINISTRATION Sådan kommer du i gang! For at logge ind i dit nye CMS-administrationsmodul skal du efter dit domæne skrive: admin. Eks.: www.dit_domæne.dk/admin Første gang du

Læs mere

Overblik Program 28. maj

Overblik Program 28. maj Overblik Program 28. maj Opbygning af planche Brand & identitet Tekst til planche Tekst til planche Overvej målgruppen - Hvem er målgruppen for produktet? - Hvordan signaleres det i skrifttyper? Tekst

Læs mere

Denne designmanual indeholder de grafiske værktøjer og retningslinier for profileringen af SuperBest som Hele Danmarks fødevaremarked.

Denne designmanual indeholder de grafiske værktøjer og retningslinier for profileringen af SuperBest som Hele Danmarks fødevaremarked. Indhold Forord Scandinavian DesignLab... 2 SuperBest's nye logo... 3 Primært logo... 4 Primært logo Varianter og Sekundært logo... 5 Farvepalet... 6 Typografi... 7 Primært logo Skiltning... 8 Sekundært

Læs mere

Portfolio redesign. Kia Dahlen! cph-kd51@cphbusiness.dk! 1. semester eksamen! MUL-A 2013! !!! www.mul17.itkn.dk/portfolio/index.html!

Portfolio redesign. Kia Dahlen! cph-kd51@cphbusiness.dk! 1. semester eksamen! MUL-A 2013! !!! www.mul17.itkn.dk/portfolio/index.html! Portfolio redesign Kia Dahlen cph-kd51@cphbusiness.dk 1. semester eksamen MUL-A 2013 www.mul17.itkn.dk/portfolio/index.html Underviserer: Ditlev Skanderby Frederik Tang Ian Wisler-Poulsen Jesper Hinchely

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

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

Pixlr - vejledning Udarbejdet februar 2014

Pixlr - vejledning Udarbejdet februar 2014 Pixlr - vejledning Udarbejdet februar 2014 www.skive.dk 2.1 Billedbehandlingsprogrammet Pixlr.com Til redigering af et billede kan du med fordel benytte webtjenesten Pixlr, som du kan tilgå fra hvilken

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