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

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

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: Style tiles: Media queries:

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