DAGENS PROGRAM Layout og komposition [Pause] CSS [Pause] Individuel obligatorisk øvelse
LAYOUT OG KOMPOSITION
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
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
DET KLASSISKE WEB-LAYOUT
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.
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.
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!
ENDOMONDO
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, 2004. http://www.nngroup.com/articles/the-need-for-web-design-standards/
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.
ALIGNMENT
ALIGNMENT
WEBSITE BIG.dk
KOMPOSITION
HORISONTAL SYMMETRI
HORISONTAL SYMMETRI
HORISONTAL SYMMETRI
VERTIKAL SYMMETRI
TILNÆRMET SYMMETRI
TILNÆRMET SYMMETRI
RADIAL SYMMETRI
RADIAL SYMMETRI
ASYMMETRI
ASYMMETRI
DET GYLDNE SNIT Forholdet mellem to elementer er 1,618 : 1
FOURSQUARE.COM
FASTCOMPANY.COM
WEBDESIGNERWALL.COM
BBC.CO.UK
WIREFRAMES Værktøjer til at sikre struktur, form og funktion
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.
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)
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.
RESPONSIVE DESIGN Design til forskellige visningsforhold
GRACEFUL DEGRADATION GRACEFUL DEGRADATION Not-So-Graceful Degradation
PROGESSIVE ENHANCEMENT PROGESSIVE ENHANCEMENT Indholdet i fokus
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
CONTENT FIRST
ONE WEB
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
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
RESPONSIVE DESIGN ikke mobilt design
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)
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
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
TEST
NAVIGATION
NAVIGATION
KOLONNER
KOLONNER
PAPIR & BLYANT? Til øvelsen senere i dag Clayton Good Morning (Pinterest): http://pinterest.com/pin/232779874462482550
LAYOUT MED CSS
TÆNK I BOKSE realdania.dk
cbs.dk
OGSÅ DE USYNLIGE cphcleantech.com/home/about
OG BRYD DEM vsp.lf.dk
BOKSMODELLEN
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
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: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
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).
PADDING selector { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } h1 { } padding: 5px 10px 15px 20px; H1 Overskrift
BORDER-STYLE p { } font-size:12px; width: 100px; height: 100px; margin: 20px; float: left; border-width: 10px;.solid { } border-style: solid;
BRUG BORDER AFDÆMPET
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; }
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;
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
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;}
FLOAT
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.
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
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.
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.
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.
FLOAT PÅ FLERE ELEMENTER P1 P2 P3 P4 P5 P6 P7 P8 P9 P10
FLOAT PÅ FLERE ELEMENTER
FLOAT PÅ FLERE ELEMENTER
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.
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.
POSITIONERING
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).
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; }
RELATIVE Placeres relativt til elementets originale placering i det normale flow. Elementet rykkes svarende til fikspunktværdierne. Den originale plads i dokumentet bevares.
RELATIVE em { position: relative; top: 25px; left: 50px; background-color: pink; }
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.
ABSOLUTE em { position: absolute; top: 25px; left: 50px; background-color: pink; }
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.
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; }
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.
FIXED p { } margin-left:220px; #fixed { position: fixed; width: 200px; background-color: pink; }
RESPONSIVT DESIGN
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?)
TARGET CONTEXT = RESULT TARGET CONTEXT = RESULT Den proportionale værdi i en given (medie-)kontekst
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
700PX 988PX = 0,7085 ELLER 70,85% ELLER 70,85% Den proportionale værdi i en given (medie-)kontekst
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
GRIDS 950px 50px 10px 300px
FRAMELESS GRIDS framelessgrid.com
FRAMELESS GRIDS framelessgrid.com
FRAMELESS GRIDS framelessgrid.com
THEGRIDSYSTEM.ORG
TYPOGRAFI %, em og rem
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;
LIDT INSPIRATION Icon fonts: http://css-tricks.com/examples/iconfont/ https://www.shifticons.com/ http://pictos.cc/ http://symbolset.com/ Style tiles: http://styletil.es/ Media queries: http://mediaqueri.es/
ØVELSE 3 Bloggen > Slides og øvelser GoogleDrive: bit.ly/ddkp13_3