Vormgeving voor beeldscherm:

Transcriptie

1 Vormgeving voor beeldscherm: LAB 1 : Wat is lelijkheid? Inleiding visual design o Stijl o Doel o Functie o Techniek o 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 Kleurmode kleurdiepte Aantal kleuren o Bitmap 1 2 o Grijstinten o Geindexeerdek kleuren o Hoge kleuren o Ware kleuren 24 16,7 Miljoen o Transparentie ,7 Miljoen DPI = dots per inch. Het aantal dots per inch. o Apple mac = 72 DPI o Microsoft = 96 DPI o Printer / laser zwart wit = 600 DPI (lijn) o Print / drukwerk kleur = 300DPI (raster) Beeldverhoudingen o Letterbox oude tv 4:3 o Computer scherm Computer scherm 16:10 o Widescreen Widescreen 16:9 o Anamorphic wide screen Bioscoop 2,35:1 Beeldscherm formaten o 800 x 600 o 1024 x 768 (= normaal) o 1280 x 1024 o 1920 x 1080 o 2048 x 1535

2 Kleurenmodellen 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. o 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. o LAB kleuren = Kleuren die gebruik maken van beide kleur moddelen. CMYK RGB en pantone kleuren. Middengrijs = neutrale grijs o Verf % 50 Oog o RGB Monitor o CMYK % 0,0,0,50 Drukwerk o LAB Wetenschap o HTML HEX decimaal # Web

3 LAB 2 : Orde of chaos? De 8 gestalt principes ( ) o Relatie figuur-achtergrond - Figure ground ogranistation o Nabhijheid - Proximity o Overeenkomst - Similarity o Geslotenheid - Closure o Uniforme samenhang - Uniform connectedness o Goede continuititeit - Good continuation o Gemeenschappelijk lot - Common fate o Wet van beknoptheid - Pregnace 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 800 x 600= links en rechts beide 162 pixels breed midden 357 pixels breed o 1024 x 768 = links en rechts beide 210 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

4 LAB 3 : De funtcie van de Esthetiek Visual design basics o Kleuren toepassing o Beeldscherm typografie o Visuele hierarchie o Visuele boodschap o 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 H. Hue ( tint ) Welk kleur o S. Saturation ( verzadiging ) Veel of weinig kleur o B. Brightness ( helderheid ) Donder of licht kleur Ideeal regel = 12 woorden per regel

5 LAB 4 : Empowerment or Impoverishment Stijlbibliotheek = Een samenhang van de sfeer van een website ( moodbord ) o Look en feel o Holistic design, visuele ergonomie o Toepassing van kleur o Fijne typografie Semantics = begrijpelijk maken van beeld. Semiotiek = interpretie van tekens en beelden ( erkenning ) o Stijl o Herkenbaarheid o Conventies ( codes ) o kennis o Interpretatie o Cultuur o Universele tekens Basibetekenis van richtingen: o Neutraal = Horizon o Negatief = Naar beneden = verleden o 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

6