pba front-end week 3. colors, theory & practice why are colors important…?
Post on 15-Jan-2016
216 views
TRANSCRIPT
PBA Front-End
Week 3
Colors, theory & practice
• Why are colors important…?
Colors, theory & practice
• Vision is (usually) the ”strongest” human sense – primary source of information
• Humans are good at spotting differences in colors (~10 million hues)
• Colors and feelings are closely related• On a website, colors is the first thing we
notice – first impression is important!
Colors, theory & practice
• What are colors actually?
• Physically: Electro-magnetic radiation in a narrow wavelength interval
• Actual colors exist only in our brains…
Colors, theory & practice
• Primary colors:– Yellow– Blue– Red
Colors, theory & practice
• Secondary colors:– Green– Orange– Violet
Colors, theory & practice
• Tertiary colors:– Yellow-orange– Red-orange– Red-violet– Blue-violet– Blue-green– Yellow-green
Colors, theory & practice
• Complimentary colors: Colors opposite each other on the color wheel
Colors, theory & practice
• Analogous colors: Colors next to each other on the color wheel
Colors, theory & practice
• Warm colors
• Cool colors
Colors, theory & practice
• Tint – adding white to a pure color
Colors, theory & practice
• Shade – adding black to a pure color
Colors, theory & practice
• Tone – adding grey to a pure color
Colors, theory & practice
• How do we define a color in quantitative terms (using numbers)
• We use color models• Most widespread color model in the context
of computers is RGB• Additive color model, uses Red, Green and
Blue as additive primary colors (why not Yellow instead of Green…?)
Colors, theory & practice
• Typical representation in RGB is to use 24 bits• 24 bits = 3 bytes• One byte for each component color• Approx 16.7 millions hues possible• Approx what the human eye/brain can
differentiate• www.colorpicker.com
Colors, theory & practice
• How are colors relevant with regards to Web Design?
• Usability: Good color choices make the website easier to use (to read, to navigate,…)
• Convey emotions: Colors are strongly associated with human emotions
Colors, theory & practice
• How does color affect usability• Text: If a website is text-rich, colors should
”support” the user in reading text• Avoid choices that make it hard to read the
text; the user will tire and go away…
Colors, theory & practice
• These are (almost) complimentary colors…• You could then assume that they would
produce high contrast…• ..and make the text easy to read…• …but it doesn’t look like it!
Colors, theory & practice
• Black and white is often a good choice for text• Can appear somewhat ”harsh” on the eye• Can be softened with e.g. beige background,
grey text
Colors, theory & practice
• Black and white is often a good choice for text• Can appear somewhat ”harsh” on the eye• Can be softened with e.g. beige background,
grey text
Colors, theory & practice
• Black and white is often a good choice for text• Can appear somewhat ”harsh” on the eye• Can be softened with e.g. beige background,
grey text• …And even in reverse, maybe…
Colors, theory & practice
• Also, colors should not surprise the user• On a website, I expect that this is a link• ”Wrong” colors may also confuse a user who
must make a choice:
Do you really wish to delete your user profile?
Yes No
Colors, theory & practice
• Fact: Colors invoke feelings!• Why…?• Which feelings?• Depends on– Culture– Personality– Mood– …?
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
• You can find more color symbolisms at: http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm
• You can probably find other interpretations elsewhere as well…
Colors, theory & practice
• Now I have to design a website, including choosing colors…how do I start?
• In many situations, the colors for the website may be predetermined
• Visual corporate identity
Colors, theory & practice
Colors, theory & practice
Colors, theory & practice
• The obvious colors might also be ”taken” by somebody or something you do not want to be associated with…
Colors, theory & practice
• If choice of colors is ”free”…• …start by finding adjectives that match the
theme of your website• Find base color(s) that match those adjectives
(not more than three colors)• Decide what kind of color scheme you will
apply
Colors, theory & practice
• Color scheme – a palette of colors to apply to your wesbite
• Given the base color(s), find additional colors to apply
• A number of standard color harmonies exist for generating color schemes
Colors, theory & practice
Colors, theory & practice
Visual elements
• Why do we actually need graphics on a website…?
Visual elements
• Just as for colors, a distinct graphic can be part of a corporate identity
• In general, we use graphics for– Illustration– Explanation– Integration
Visual elements
• ”Many children on the African continent suffer from malnutrition, which can be attributed to poor living conditions, climate changes, civil unrest and population growth”
Visual elements
Visual elements
• ”Many people find that Puppies are cute, and the prominent eyes, fluffy fur and their childish personalities and behavior support this percep-tion of Puppies”
Visual elements
Visual elements
• An illustration can – obviously – convey emotions very effectively
• Illustrations should of course be chosen in accordance with the general theme, style and tone of the website
• DNA…?
Visual elements
• A diagram can help explain complex concepts to the user
• However, the complexity of the diagram need not be reduced (no dumbing-down…)
• Be aware of physical limitations– Printed material: 300+ dpi (dots per inch)– PC Screen resolution: 80-100 dpi
Visual elements
• A chart can help present quantita-tive data to the user
• Same considerations as for diagrams apply to charts
Visual elements
• General tips on using diagrams/charts:– Trust the reader’s intelligence– Respect the medium– Tell the truth as you see it– Do not bias your data– Be bold and substantial
• …and test it!
Visual elements
• Still quite a number of technical issues to consider when using graphics– Display capacity– Bandwith– File formats– Graphics technology– Graphics compression
Visual elements
• Mainstream PC monitor anno 2011– 24” size, 16:9 format (approx 20” x 12”)– 1920x1080 resolution– Approx 100 dpi– 24-bit color (16.7 mill hues)– Price: Cheap!
Visual elements
• Other displays– Laptop: 12”-17”, around 120 dpi– Tablet: 7”-10”, around 150 dpi (iPad 132)– SmartPhones: 3”-5”, up to 300 dpi (!)
• Upcoming resolutions– 2560x1600 (even in 10” tablets!)– QFHD/4K, about 10M pixels (later…)
Visual elements
• No reason to rework e.g. a printed image with regards to colors – we can show all colors!
• May need to rework resolution• Graphics for the web should be
optimised for typical screen resolutions – current recommen-dation is 72 dpi (ppi)
Visual elements
• Gamma – degree of midtone contrast (?)
Visual elements
• What can we assume about bandwidth…?• Does ”eyerybody” have a broadband (2+ mbps)
connection now…?• What about mobile broadband…?• Is the ”penetration” of high-speed access
related to e.g. demographic factors?
Visual elements
Visual elements
Visual elements
Visual elements
• The more graphics on a web page, the longer it takes to load (duh!?)
• BUT – 0,01 sec vs. 0,1 sec, not so
important– 1 sec vs. 10 secs, definitely
important!
Visual elements
• Even with broadband, care must be taken to optimise physical size of graphics
• Efficient algorithms for compressing images exist – images can thus be stored as:– Uncompressed– Compressed without quality loss– Compressed with quality loss
• Pixel-oriented graphics are called raster graphics
Visual elements
• Uncompressed– Saved as ”raw” bitmap– Fixed number of bits per pixel (4-24)– Size only depends on image size– .bmp format (on Windows)– Should never be used on the Web!
Visual elements
• Compressed without loss of quality– Several different algorithms (e.g. Lempel-Ziv-
Welch, or just LZW)– Used in the GIF image format (and PNG)– GIF only supports 256 colors in an image, but the
actual 256 colors can vary– GIF suitable for sharp-edge line art (logo), simple
animations, low-res clips (animated GIF)– Not so well suited for high-quality images
Visual elements
Good for GIFNot-so-good for GIF
Visual elements
• Compressed with (possible) loss of quality– Most common file format is JPEG– Offers image quality vs. file size tradeoff– Compression highly dependent on image content
and complexity, can be quite impressive– Can be used for….anything. But where is a non-
perfect image acceptable?• Logo, probably not• Photo, probably ok
Visual elements
• http://en.wikipedia.org/wiki/File:Quality_comparison_jpg_vs_saveforweb.jpg
Visual elements
• Progressive JPEG– Loads successively better versions of the image– Useful for providing ”preview” of a large image– Helps on user impatience – NOTE: Not fully supported by all browsers
Visual elements
• Be aware that JPEG is a no-way-back compression of images!
• Keep the original material uncompressed, and create suitably compressed JPEG versions as needed
Visual elementsSmall graphics for navigation, buttons, logos, simple icons, etcSharp-edge line art, e.g. diagrams
Use GIF/PNG
Small-to-medium images(up to about 200x200)
Use GIF/PNG or JPEG, not much difference in file size
Large images Use JPEG
Visual elements
• Vector graphics• Defining an image in
terms of geometric shapes instead of pixels
• No inherent resolution!• Image definition is purely
logical (geometric)
Visual elements
• Creating vector graphics– Mostly useful for creating complex diagrams,
illustrations, etc.– Several professional programs for creating vector
graphics exist (Abode Illustrator)– Most common file format is SVG (Scalable Vector
Graphics), developed by W3C
Visual elements
• Using vector graphics– Can be converted to e.g. JPEG in any desired
quality, and then published– Adobe Flash supports vector graphics directly– Some browsers support SVG, but not all– Recommendation: Create source material as
vector graphics, publish on the Web as raster graphics
Visual elements
• Using video on a Website…why?– Some concepts lend themselves
well to ”dynamic” visual presen-tation (complex instructions, sales presentations, etc.)
– Users are used to video on the Web (Youtube)
– Bandwidth is not really an issue anymore
Visual elements
• Using video on a Website…why not?– Producing high-quality video is
very costly and time-demanding– Users have higher and higher
expectations concerning quality of content
– Bandwidth is still an issue
Visual elements
• Video uses a lot of bandwidth!• Almost all video formats use
some sort of compression• Other factors– Resolution– Frame rate– Content
• http://web.forret.com/tools/video_fps.asp
Visual elements
• Examples of video bit rates (MPEG2)– Blu-Ray: 40 Mbit– 1080i: 25 Mbit– 720p: 18 Mbit– DVD: 10 Mbit– Standard TV, 576i: 3-4Mbit– 320x240: 0,5 Mbit
• BUT, can be reduced with quality loss
Visual elements
• Video compression is also very sensitive to content
• Compression works by storing differences between subsequent frames– ”Car chase” – poor comp– ”TV speaker” – high comp
Visual elements
• Tips on creating video for the Web– Shoot original video – full quality control– Use close-ups – better for low resolution– Use simple backgrounds – better compression– Steady camera – better compression– Avoid zooming and panning – bad for low
resolution, bad for compression– Use hard cuts, avoid ”silly” effects – bad for
compression
Visual elements