Deel 7: The power of design
Web Design
Design voor dieren
The power of design
Toen de eerste liften uitgevonden werden, klaagden velen over hoe traag die waren
Hoe hebben ze dit opgelost?
Design voor dieren
Een mens is een dier met ingebakken gewoontes, assumpties en gevoelens.
Als designer gaan we inspelen op de psychologie van de mens.
Design voor dieren
Probeer op de volgende slide:
De grote tekst niet te lezen,
maar wel de kleinere tekst eronder.
Lucy speelt viool op de bank van het park voor toeschouwers
George gaan voetballen met zijn vrienden, maar is vergeten om zijn voetbal mee te nemen. Dat is ergens wel spijtig, want nu weet hij niet wat ze wel kunnen doen.
Daarom denkt George -- och -- we kunnen evengoed even naar lucy gaan luisteren, want die kan echt goed viool spelen
Design voor dieren
Hoe graag we het ook niet zouden hebben, sommige gewoontes kan je niet loslaten.
ROOD
PAARS
GROEN
GEEL
ZWART
BLAUW
ORANJE
ROOD
ROZE
Design voor dieren
Web Design is bedoeld voor mensen, het is dus belangrijk om de mens te verstaan
in hoe deze een design verwacht.
We gaan hierbij niet tegenin de psychologie van een mens gaan, maar eerder meewerken.
De kracht van uitlijning
The power of design
De kracht van uitlijning
👍
👎
De kracht van uitlijning
Wanneer elementen uitgelijnd zijn op elkaar komt het geheel over als helder, zelfzeker, elegant, formeel en betrouwbaar.
Goede uitlijning is onzichtbaar, het hoeft geen effectieve lijn te zijn in je design.
De kracht van uitlijning
Uitlijning hoeft niet saai te zijn.
Responsive concepten
The power of design
Responsive concepten
Hoe breder het scherm, hoe korter de pagina.
Tekst blijft dezelfde font-size, en op mobiel kunnen er nu eenmaal minder woorden naast elkaar staan
Responsive concepten
Iedere schermbreedte is relevant.
Maar je moet voorlopig maar 320pixels nemen als minimum om te testen.
Responsive concepten
Horizontale scrollbars zijn niet ok
Gelukkig zijn verticale dat wel.
Enkele voorbeelden
stubru.be
bol.com
stad.gent
Element breedte
The power of design
Element breedte
Breedte van iets wordt bijna altijd vastgelegd.
<div class="my-div"></div>
div {
background: orange;
width: 50rem;
margin: 0 auto;
max-width: 100%;
}50 rem
Element breedte
Max width wordt dan de breedte van de browser.
<div class="my-div"></div>div {
background: orange;
width: 50rem;
margin: 0 auto;
max-width: 100%;
}34.2 rem
Element breedte
Een manier om bijvoorbeeld een div ook niet tegen de rand te laten komen.
<div class="my-div"></div>div {
background: orange;
width: 50rem;
margin: 0 auto;
max-width: calc(100% - 2rem);
}32.2 rem
Element hoogte
The power of design
Element hoogte
De hoogte wordt vaak niet vastgelegd, zodat deze zich aanpast aan hoeveel ruimte de content nodig heeft.
Lorem ipsum dolor sit amet en
Lorem ipsum
Lorem ipsum dolor sit amet
De rand van het scherm
The power of design
Rand van het scherm
Plaats geen text tegen de rand van het scherm 👎
<div class="my-div">Lorem Ipsum dolor sit amet</div>div {
max-width: 100%;
color: pink;
}
Lorem ipsum dolor sit amet w en
Rand van het scherm
Geef wat ruimte tussen de rand van het scherm en de tekst 👍
<div class="my-div">Lorem Ipsum dolor sit amet</div>div {
max-width: 100%;
color: pink;
padding: 0 1rem;
box-sizing: border-box;
}Lorem ipsum dolor sit amet w en
Rand van het scherm
Hetzelfde telt voor de rand van een visuele box.
Lorem ipsum dolor sit amet w en
Lorem ipsum dolor sit amet w en
👎
👍
Typografisch lang woord
The power of design
Typografisch lang woord
Bij langere woorden
kan het voorkomen dat
woorden langer worden
dan de schermbreedte.
Dit is een nederlandstalig woord
Typografisch lang woord
Bij langere woorden
kan het voorkomen dat
woorden langer worden
dan de schermbreedte.
Dit is een nederlandstalig woord
div {
word-break: break-word;
}Interpretatie in design
The power of design
Interpretatie in design
Wanneer je een design aangeleverd krijgt, zullen de aangeleverde designs altijd gebaseerd zijn op enkele schermbreedtes.
Het is jouw verantwoordelijkheid om deze deze designs om te zetten naar iets aangenaams op iedere schermbreedte.
Interpretatie in design
Tekstuele beschrijvingen zullen nooit perfect beschrijven wat er gevraagd wordt.
Het visuele eindresultaat is het belangrijkste
Oefening @Campus
Mario II - Uitgelijnd
Uitdaging
Design the font
(Enkel voor studenten met voorkennis)
Kleuren keuze
The power of design
Kleuren keuze
Kleuren hebben een impact op hoe je webpagina bekeken wordt.
Er zijn kleuren die esthetisch goed bij elkaar passen, maar er zijn er ook die vloeken naast elkaar.
Kleuren kiezen
- ColorSpace: Kleurenpallet genereren op basis van 1 kleur
- Color-hex: Enkele populaire kleurenpallets
- ColorMind: Kleurenpallet genereren gebaseerd op een afbeelding
Kleuren kiezen
- ColorDesigner.io: Palette generator en nog enkele leuke tools
- Color Hunt: Platform waarbij je kleurenpallets kunt liken
- Adobe Kuler: Meer technische aanpak naar hoe kleurenpallet samengestoken kan worden
Web Design Deel 7: The power of design
By Evelien Rutsaert
Web Design Deel 7: The power of design
Design voor dieren, de kracht van uitlijning, Responsive concepten, Responsive voorbeelden, Element breedte & hoogte, De rand van het scherm, typografisch lange woorden, interpretatie in design, kleuren keuzes
