Vormgeving voor beeldscherm: LAB 1 : Wat is lelijkheid ? •
Inleiding visual design o o o o o
Stijl Doel Functie Techniek Complexiteit
• • •
Een ontwerper proeft ALLES, kan alles maken en namaken ( Recept, handeling, herhalen) Design is proefondervindelijk : Dus = maken HCI = Human Computer Interaction ( De manier waarop de mens omgaat met interactie )
• • • • • • • • •
1 pixel = 'picture element' The bit = 'Binary digit' Een bit is de kleinste stukje data dat de computer beheert. 1 = aan 0 = uit Bitmap = ' 1 bit zwart of wit ' 1 Bit per pixel : 2 tot de macht 1 : 2 = 2 kleuren mogelijk zwart of wit Bitmap image van 11 x 11 pixels = 11 pixels in de hoogte en 11 pixels in de breedte Bit depth ( 256 x grijstingen ) = 256 combinaties = 256 grijstintenpalet Bit depth ( 8 bit kleur ) = 256 combinaties = 256 kleurenpalet ( 32 bit is max!! ) De kleurenpaletten zijn anders op Mac/Windows -> Oplossing: ontwerp in 24-bit! Web safe palette ( 216 kleuren ) Hue = tint en Value = waarde Schermkleuren ( aantal per bit diepte ) o o o o o o o
•
Aantal kleuren 2 256 256 65.000 16,7 Miljoen +16,7 Miljoen
Apple mac = 72 DPI Microsoft = 96 DPI Printer / laser zwart wit = 600 DPI (lijn) Print / drukwerk kleur = 300DPI (raster)
Beeldverhoudingen o o o o
•
kleurdiepte 1 8 8 16 24 32
DPI = dots per inch. Het aantal dots per inch. o o o o
•
Kleurmode Bitmap Grijstinten Geindexeerdek kleuren Hoge kleuren Ware kleuren Transparentie
Letterbox Computer scherm Widescreen Anamorphic wide screen
Beeldscherm formaten o o o o o
800 x 600 1024 x 768 (= normaal) 1280 x 1024 1920 x 1080 2048 x 1535
oude tv Computer scherm Widescreen Bioscoop
4:3 16:10 16:9 2,35:1
•
Kleurenmodellen o
o
o
•
RGB ( Additief = Bedoeld voor licht en beeldscherm ( mixen is wit ) RGB Staat voor Rood groen blauw. Met deze kleuren word de rest van het pallet aangemaakt door met elkaar te mixen Rood en groen krijg je geel. CMYK ( Subtractief = Bedoeld voor inkt ver en drukwerk ( mixen is zwart ) CMYK Staat voor Cyan, Magenta, Yellow en Black. Hier worden ze kleuren met elkaar gemixt of beter gezegt over elkaar heen geen gedrukt om de juist kleur te krijgen. LAB kleuren = Kleuren die gebruik maken van beide kleur moddelen. CMYK RGB en pantone kleuren.
Middengrijs = neutrale grijs o o o o o
Verf RGB CMYK LAB HTML
% 0-256 % 0-100 HEX decimaal
50 147-147-147 0,0,0,50 62-0-0 #94949494
Oog Monitor Drukwerk Wetenschap Web
LAB 2 : Orde of chaos ? •
De 8 gestalt principes ( http://goo.gl/nQoBW ) o o o o o o o o
• •
Liquid design = een pagina die mee gaat met de resolutie van de computer. Klein scherm is alles zichtbaar en groot scherm is alles zichtbaar. Holy grail layout = 3 colum layout waarvan de afmetingen verschillen o o
• •
Relatie figuur-achtergrond - Figure ground ogranistation Nabhijheid - Proximity Overeenkomst - Similarity Geslotenheid - Closure Uniforme samenhang - Uniform connectedness Goede continuititeit - Good continuation Gemeenschappelijk lot - Common fate Wet van beknoptheid - Pregnace
800 x 600= links en rechts beide 162 pixels breed 1024 x 768 = links en rechts beide 210 pixels breed
midden 357 pixels breed midden 459 pixels breed
Gulden snede = Formaat dat door kunstenaars als ideale verhouden word gezien : ook wel het getal PHI genoemd ( is dut niet PI !! ) verhouding = 1 : 0,618 Compositie = contrast + dynamiek
LAB 3 : De funtcie van de Esthetiek •
Visual design basics o o o
Kleuren toepassing Beeldscherm typografie Visuele hierarchie
o o
Visuele boodschap De funtcie van schoonheid ?
•
Kleur gebruik en herkenning. Hieronder een voorbeeld van emoties.
• •
Kleurenblindheid betekent dat je groen en rood niet van elkaar kunt onderscheiden Contrast kleuren is het tegenovergestelde kleur in de kleuren cirkel. Werkt samen met elkaar ondanks het contrat verschil. ROOD = GROEN PAARS = ORANJE BLAUW = ORANJE Kleurdynamiek : het oog vult de ongebruikte ruimte's zelf in met een kleur. HSB = Hue Saturation Brightness
• •
o o o
•
H. Hue ( tint ) Welk kleur S. Saturation ( verzadiging ) Veel of weinig kleur B. Brightness ( helderheid ) Donder of licht kleur
Ideeal regel = 12 woorden per regel
LAB 4 : Empowerment or Impoverishment •
Stijlbibliotheek = Een samenhang van de sfeer van een website ( moodbord ) o o o o
• •
Semantics = begrijpelijk maken van beeld. Semiotiek = interpretie van tekens en beelden ( erkenning ) o o o o o o o
•
• • •
•
Stijl Herkenbaarheid Conventies ( codes ) kennis Interpretatie Cultuur Universele tekens
Basibetekenis van richtingen: o o o
• • • •
Look en feel Holistic design, visuele ergonomie Toepassing van kleur Fijne typografie
Neutraal = Horizon Negatief = Naar beneden = verleden Positief = Naar boven = toekomst.
Icoon - Een icoon is een teken dat lijkt op haar doel Index - Een index is een teken dat fysiek is aangesloten aan zijn object. Symbool - Een symbool is een willekeurige vertegenwoordiging object. Logo - Een logo is een grafisch element dat, samen met de logo een handelsmerk of commercieel merk vormt. Pictogram - is een plaatje waarop een afbeelding staat afgebeeld die een actie of ding moet voorstellen (denk aan Olympische Spelen, alle sporten hebben een pictogram). Emoticon - is een smiley Mentaal model ( model = plattegrond ) = De gebruiker kan inhoud en fucntionaliteit begrijpen en voorspellen. o 1. Ontwerp bewust o 2. Ga uit van verwachtingen van gebruikers ( voorspelbaarheid ) o 3. Denk in objecten en acties. Consistentie = het opnieuw gebruiken van beeld merken en erkenningen. Denk aan kleur gebruik en logo's
