Embed Size (px)
Citation preview
CMPT 165 D1 (Fall 2015)
Admin • (Reminder) coursework submission procedure:
1. Upload
2. ???
Only ~110 students did this! What consequences?
• Schedule coming up:
– Today: Colours + go through Unit 6
– Next Tues: Return to Unit 5 (Graphics) - Part 2
– Rationale:
• Give you time to get concepts fully understood (via office hours, read through S.G., etc.)
• Can start A2 (ideas on Unit 6) asap
Submit URL to CourseSys (URL as instructed)
2
File formats PNG JPG GIF
BMP Pixel
Artifacts Aspect ratio Pixelation Dithering Intensity
Value Coordinates
Index Index map
Colour-depth Image resolution
Compression Compression ratio
Lossy Lossless
…
Q: Can you explain each of these in your own words???
This is just a partial list!
CMPT 165 D1 (Fall 2015)
3
Still some time to clarify things
before next midterm!
CMPT 165 Colours
Oct. 29th, 2015
CMPT 165 D1 (Fall 2015)
Colours and light
Recall the RGB model…
• Turn off all 3 light sources dark room black
• “additive”: turn on all 3 sources white
• Model is used in monitors and TVs
5 http://www.xaraxone.com/webxealot/workbook40/page_1.htm
CMPT 165 D1 (Fall 2015)
The “colour gamut” “Entire range of colours available on a particular device such as a monitor or printer” PC Magazine Encycl.
“Colour space”
6 http://dotcolordotcom.files.wordpress.com/2011/10/cie1931gridedit1.png?w=584&h=584
CMPT 165 D1 (Fall 2015)
RGB Model & Colour Depth • Colour-depth: number of bits to represent a pixel
• In CSS, we can specify with a 24-bit color code:
e.g. #FFF = # FFFFFF
7
Q: why it’s called 24-bit? A: store 8 bits/channel = 8 bits x 3 channels = 24
Each hex-number gives 16 levels 2 hex-numbers give 16x16=256 levels
CMPT 165 D1 (Fall 2015)
Colour specification in CSS 1. Presets: “red”, “blue”, …
2. Hexadecimal code:
a) 3-byte hexadecimal 6 numbers, e.g. #0000FF
b) Abbreviated form: 3 numbers, e.g. #00F
3. Function notation: rgb( R-value, G-value, B-value )
Recall: 256 intensity values per channel (again, 256=16 x 16)
e.g.
Brightest red: rgb(256,0,0); /* R: max. value */
Grey: rgb(128,128,128); /*half of 256*/
Brightest red: rgb(100%,0%,0%); /* unit in % */
8
Reminder on function notation: Function_name(input1,input2,input3)=output
CMPT 165 D1 (Fall 2015)
Examples:
• Brightest green?
• Dark green?
• Brightest blue?
• Dark red?
• Purple?
• Dark purple?
• Gray?
• Darker gray?
9
0 9 0
0 4 0
0 0 9
4 0 0
4 0 4
1 0 1
4 4 4
2 2 2
0 F 0
0 7 0
0 0 F
7 0 0
7 0 7
2 0 2
7 7 7
4 4 4
Decimal Hexadecimal
0 1 2 3 4 5 6 7 8 9 A B C D E F
Red Green Blue
0 1 2 3 4 5 6 7 8 9
• 1 20% of 16 • 2/10*16 = 3.2 • Closet is 3 • 3rd value is 2
• 2 30% of 16 • 3/10*16 = 4.8 • Closest is 5 • 5-th value is 4
CMPT 165 D1 (Fall 2015)
24-bit: 2 hexcodes per channel
Examples:
• Bright green?
• Dark green?
• Bright blue?
• Dark red?
• Dark blue?
• Purple?
• Black?
• Gray?
10
090
040
009
400
004
404
000
444
0F0
070
00F
700
007
707
000
777
Decimal Hexadecimal
= 00FF00
= 007700
= 0000FF
= 770000
= 000077
= 770077
= 000000
= 777777
Red Green Blue
0 1 2 3 4 5 6 7 8 9 A B C D E F
CMPT 165 D1 (Fall 2015)
Colour specification (old slide) Decimal system (base=10):
0 1 2 3 4 5 6 7 8 9
Darkest Brightest
This is not used in CSS! CSS uses hex system…
Hexadecimal system (base=16):
0 1 2 3 4 5 6 7 8 9 A B C D E F
Darkest Brightest
Example:
Brightest red? RGB = X X X?
= F 0 0
11
CMPT 165 D1 (Fall 2015)
RGB model
“Truecolor”: 6-digit hexadecimal code Hexadecimal system (base=16):
0 1 2 3 4 5 6 7 8 9 A B C D E F
Dark Bright
00 01 02 09 … … FF
Dark Bright
Example:
Bright red? RGB= XX XX XX?
= FF 00 00
12
A0 A1 …. A9 … F9 FA
CMPT 165 D1 (Fall 2015)
24-bit: 2 hexcodes per channel
Examples:
• Bright green?
• Dark green?
• Bright blue?
• Dark red?
• Dark blue?
• Purple?
• Black?
• Gray?
090
040
009
400
004
404
000
444
0F0
070
00F
700
007
707
000
777
Decimal Hexadecimal
= 00FF00
= 007700
= 0000FF
= 770000
= 000077
= 770077
= 000000
= 777777
Red Green Blue
0 1 2 3 4 5 6 7 8 9 A B C D E F
Slightly darker? 030 020 010
007600 007500 007000 006F00 … 006A00 006900
2 hexcodes give many more colour variations
CMPT 165 D1 (Fall 2015)
Q: What is the hex code for brown?
• I don’t know, so won’t expect you would
• Again, reference sheet to help out:
http://www.w3schools.com/tags/ref_colornames.asp
14
RGB model Just one colour model… few other ones exist
15
CMPT 165 D1 (Fall 2015)
Alternative representations: HSL+HSV
• Hue: just the colour
• Saturation: vividness
E.g. “Saturated red”
E.g. “Washed out red”
• Lightness/Value: refers to strength/intensity of emitted light
16
E.g. to describe blue: “pale blue", "pastel blue”
https://upload.wikimedia.org/wikipedia/commons/a/a0/Hsl-hsv_models.svg
CMPT 165 D1 (Fall 2015)
RGB and HSL representations Hue: [0,360]o on a rainbow color wheel
Saturation: [0,100]%
100% is the full color
Lightness: [0,100]%
100% gives white
17
Try these RGB-HSL converters: http://www.workwithcolor.com/hsl-color-picker-01.htm http://hslpicker.com/#fff http://www.binaryhexconverter.com/
(Image of color wheel taken from first link)
• Red starts at 0 degree • Green at 360 x 1/3 • Blue at 360 x 2/3 • Order of the rainbow colours?
CMPT 165 D1 (Fall 2015)
RGB and HSL representations
18
Increasing saturation in green
G
B R
http://dotcolordotcom.files.wordpress.com/2011/10/cie1931gridedit1.png?w=584&h=584
CMPT 165 D1 (Fall 2015)
Colour specification on “Opacity” • May add transparency to any element: “alpha channel”
• “Opacity”
– Amount of light absorption
• Strength of 0 to 1
• 1 means 100% absorbed
• Examples:
19
hr {
border-color: red;
opacity: 0.5;
}
img {
opacity: 0.25;
}
http://www.archive.europapier.com/service/knowhow/testingpaper/visual-characteristics/img/opacity.jpg
opacity: 0.25; opacity: 1;
CMPT 165 D1 (Fall 2015)
Colour specification in CSS 1. Presets: “red”, “blue”, …
2. Hexadecimal code:
a) 3-byte hexadecimal 6 numbers, e.g. #0000FF
b) Abbreviated form: 3 numbers, e.g. #00F
3. Function notation: rgb( R-value, G-value, B-value )
Recall: 256 intensity values per channel (again, 256=16 x 16)
e.g.
Brightest red: rgb(256,0,0); /* R: max. value */
Grey: rgb(128,128,128); /*half of 256*/
Brightest red: rgb(100%,0%,0%); /* unit in % */
20
Reminder on function notation: Function_name(input1,input2,input3)=output
CMPT 165 D1 (Fall 2015)
Colour functions in CSS + CSS3 body {
background-color: rgb(256,0,0);
}
h4 { /* red with opacity, alpha value of 0.3 */
background-color: rgba(255, 0, 0, 0.3);
}
h1 { /* green using HSL colour model */
background-color: hsl(120, 100%, 50%);
}
h2 { /* dark green */
background-color: hsl(120, 100%, 25%);
}
h3 { /* dark green with opacity 0.3 */
background-color: hsla(120, 100%, 25%, 0.3);
}
21
Be very careful with syntax: 1 value is in degrees; 2nd, 3rd expressed in %
CMPT 165 D1 (Fall 2015)
Colour theory
• Lots of literature on various complex theories
• 3 basic categories:
1. Logical arrangement of colours (colour wheel)
2. Aesthetics: colour harmony
3. Connotations, associations, social/cultural contexts, and corresponding uses
22
CMPT 165 D1 (Fall 2015)
Don’t pick colours randomly!
• 2 general schemes:
• Various selection methods: 1. Monochromatic Scheme
2. Complementary Scheme
3. Analogous Scheme
4. …
More details at
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
Web design: choice of colour scheme
23
Dark on light. Light on dark.
CMPT 165 D1 (Fall 2015)
Colours and their associations
• Associations with temperature
Image from
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/
24
“Hot/Warm colours” “Cold colours”
CMPT 165 D1 (Fall 2015)
Colours and its context • Colours are often used symbolically, encode different information
• Associations:
– What’s colour for warning?
• Red or Yellow (traffic signs)
• Cultural contexts:
– E.g. Black+White in Chinese culture: “bad luck” (vs. “elegance” in Western cultures)
– E.g. Holiday colour themes?
• Christmas?
– red + green
• Halloween?
– Black + orange
• Remembrance Day?
– Black + Red (poppies)
• Valentines?
– Red + pink + white
– Brown?? … “for chocolates”
• … 25
CMPT 165 D1 (Fall 2015)
Summary
• Key terminologies – Luminance vs. brightness
– Hue vs. saturation vs. value
– Opacity vs. transparency
• RGB, HSV, HSL models – Colour space, color gamut
– Alternative ways to specify colours in CSS
• Colour theories – Colour wheel + choice of color schemes
– Contextual and semantic meaning of colours
26
CMPT 165 Unit 6: Design principles
Oct. 29th, 2015
CMPT 165 D1 (Fall 2015)
INTERACTION
• Give feedback/responses to your audience
Web-programming
(Python, Javascript, PHP, etc.)
STYLE
• Describe visual properties of each element
Cascading Style Sheets (CSS)
Elements to good webpage designs
CONTENT
• Messages to your audience
You provide in this course
reminder: typos/grammar? (professionalism/ impression)
28
STRUCTURE
• Give meaning to each element
• “Meta” data (meta=about)
Done via a markup language
(XHTML, HTML5)
CMPT 165 D1 (Fall 2015)
Webpage design issues
Visual design issues
– Effective use of colors
– Effective use of shapes
– Visual flow
Usability design issues
– Consistency
– Web conventions
– ….
29
Learn by evaluating others’ websites… When you visit a website ask yourself: • What is the first thing I noticed? • Where is my attention being drawn to?
• Can I find the information that I am looking for?
• What would make that easier?
CMPT 165 D1 (Fall 2015)
Visual design principles The Non-Designer’s Design Book suggests principles:
1. Proximity
2. Alignment
3. Repetition
4. Contrast
Examples in this lecture from above book + links below:
http://kevintomasso.com
http://www.vanseodesign.com
http://www.csszengarden.com/
http://www.presentationzen.com/
30
CMPT 165 D1 (Fall 2015)
Principle #1: Proximity
Related elements should be “proximal” to (close by) each other
Proximity principle
Elements should not be placed in – Random matter
– Cluttered without intention
31
CMPT 165 D1 (Fall 2015)
Why proximity principle matters?
Helps to improve usability:
• Easier to scan your page
• Easier to find relevant information
• Realize what items are related before reading
– E.g. Business vs. personal
Tip: use white space for separation
32
Corporate
Personal
CMPT 165 D1 (Fall 2015)
Another example…
33
Another option: Better echoes “proximity” principle
?
CMPT 165 D1 (Fall 2015)
Another example…
34
CMPT 165 D1 (Fall 2015)
Visual design principles The Non-Designer’s Design Book suggests principles:
1. Proximity
2. Alignment
3. Repetition
4. Contrast
Examples in this lecture from above book + links below:
http://kevintomasso.com
http://www.vanseodesign.com
http://www.csszengarden.com/
http://www.presentationzen.com/
35
CMPT 165 D1 (Fall 2015)
Principle #2: Alignment
What’s awkward about this?
• Elements are not aligned
• Elements appear to be randomly positioned
36
CMPT 165 D1 (Fall 2015)
Principle #2: Alignment
• Concerns the proper positioning of elements
• In this example, right alignment (& proximity) helps guide the visual flow
37
vs.
CMPT 165 D1 (Fall 2015)
Principle #2: Alignment
38
CMPT 165 D1 (Fall 2015)
Visual design principles The Non-Designer’s Design Book suggests principles:
1. Proximity
2. Alignment
3. Repetition
4. Contrast
Examples in this lecture from above book + links below:
http://kevintomasso.com
http://www.vanseodesign.com
http://www.csszengarden.com/
http://www.presentationzen.com/
39
CMPT 165 D1 (Fall 2015)
Principle #3: Repetition “Repeating some aspects of a design feature throughout…”
Q: why?
• Encourages consistency; use same: – formatting rules for headings, paragraphs, lists, etc.
– colour scheme throughout entire website
– layout (repeated placement of buttons)
This is another reason why we should use style sheet!
…Reuse one external style sheet
40
CMPT 165 D1 (Fall 2015) 41
Q: What elements are repeated? • Caption in semi-
transparent red blocks Q: what elements violated consistency? • Colour: red in different
hues
CMPT 165 D1 (Fall 2015)
CMPT 165 D1 (Summer 2005) 42
CMPT 165 D1 (Fall 2015)
Another example
43
Notes: Effective use of colours + shapes Why effective?
- Reuse of shape (puzzle pieces) - Colour scheme? - Monochromatic puzzle pieces
CMPT 165 D1 (Fall 2015)
Principle #3: Repetition …does not mean you avoid changes
44
vs.
Repeat color choice (green) in subheadings to enhance coherency
Q: What can be improved?
CMPT 165 D1 (Fall 2015)
45
CMPT 165 D1 (Fall 2015)
Visual design principles The Non-Designer’s Design Book suggests principles:
1. Proximity
2. Alignment
3. Repetition
4. Contrast
Examples in this lecture from above book + links below:
http://kevintomasso.com
http://www.vanseodesign.com
http://www.csszengarden.com/
http://www.presentationzen.com/
46
CMPT 165 D1 (Fall 2015)
Why it might work better? • White background
• Gives strong contrast against the rest: highlights where important info are
• Connects the graphical portrait to personal info
Principle #4: Contrast “If two items are not exactly the same, then make them different. Really different!” (p. 63, Robin Williams)
47
CMPT 165 D1 (Fall 2015)
Principle #4: Contrast Strategies for contrast:
• Vary colours, e.g.
• Vary text properties:
– Font face
– Font size
48
A Typical Headline Lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, solet feugiat bonorum his eu. No decore voluptua nam. Nullam aeterno liberavisse nec id, doming efficiendi liberavisse no pri. Per ea alterum expetenda sententiae, quo et rebum nominati dissentiunt, quis diceret rationibus id pri. Ut qui ignota aliquando, pri ea congue ceteros, no sed
A Typical Headline
Lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex
tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant
fuisset patrioque eum, atqui integre vivendum cum ex, cu sea sadipscing
neglegentur. Mea ne wisi commodo, solet feugiat bonorum his eu. No decore
voluptua nam. Nullam aeterno liberavisse nec id, doming efficiendi liberavisse no pri.
Per ea alterum expetenda sententiae, quo et rebum nominati dissentiunt, quis diceret
rationibus id pri. Ut qui ignota aliquando, pri ea congue ceteros, no sed dolorem
Option 1: serif as headings; sans-serif for body text
A Typical Headline Lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, solet feugiat bonorum his eu. No decore voluptua nam. Nullam aeterno liberavisse nec id, doming efficiendi liberavisse no pri. Per ea alterum expetenda sententiae, quo et rebum nominati dissentiunt, quis diceret rationibus id pri.
Option 2: reversed; smaller font-size for body
CMPT 165 D1 (Fall 2015)
Principle #4: Contrast Strategies for contrast:
• Vary colours, e.g.
• Vary text properties:
– Font face
– Font size
– …both
– + colour scheme:
• Pale green background colour
• Dark green text
49
A Typical Headline Sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale
temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea
putant fuisset patrioque eum, atqui integre vivendum cum ex, cu sea
sadipscing neglegentur. Mea ne wisi commodo, solet feugiat bonorum his
eu. No decore voluptua nam. Nullam aeterno liberavisse nec id, doming
efficiendi liberavisse no pri. Per ea alterum expetenda sententiae, quo et
rebum nominati dissentiunt, quis diceret rationibus id pri. Ut qui ignota.
A Subheadling
Lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option
alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex
brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum
cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, solet
feugiat bonorum his eu. No decore voluptua nam. Nullam aeterno
liberavisse nec id, doming efficiendi liberavisse no pri. Per ea alterum
expetenda sententiae, quo et rebum nominati dissentiunt, quis diceret
rationibus id pri. Ut qui ignota.
Another Subheadling
Psum dolor sit amet, cum ea periculis complectitur, ex quo option
alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex
brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum
cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, solet
feugiat bonorum his eu. No decore voluptua nam. Nullam aeterno
liberavisse nec id, doming efficiendi, quis diceret.
CMPT 165 D1 (Fall 2015)
Principle #4: Contrast And in graphics too…
50
vs.
vs.
