FIT1050 Web Fundamentals

Visual Design
for the Web

Week 4
Copyright Warning
Commonwealth of Australia Copyright Act 1968

Warning
This material has been reproduced and communicated to you by or on behalf of
Monash University in accordance with section 113P of the Copyright Act 1968 (the Act).

The material in this communication may be subject to copyright under the Act. Any
further reproduction or communication of this material by you may be the subject of
copyright protection under the Act.

2
Learning objectives
What is design?
● Appreciate the role of design in web development.
● Consider examples of web design influences.
Design principles and methods
● Fundamental guidelines for design
● Practices for planning a design
Colour and typography
● Colour theory and colour formats
● Font classification and font stacks

3
What is Visual Design?

4
Web development vs. web design
Development is…
● Understanding how things work
● Understanding functional requirements
● Technical implementation and testing
● Solving technical problems

Design is…
● Aesthetics and emotional appeal
● Understanding user expectations and preferences
● Creating and implementing visual elements
● Content, media and communication
Design and technology influence each other
1991 Text Simple Graphics
JPEG Animated GIF Presentational Formatting
1998 CSS Formatting True-Colour Displays
CSS Layout JavaScript Flash
2005 Modern Smartphones YouTube Scalable Vector Graphics
Tablet Devices Mobile Apps High DPI Displays
2012 HTML5 Video Web Fonts CSS Effects Bootstrap
CSS Flexbox Layout CSS Animation CSS Viewport Units
2019 CSS Grid Layout CSS Dark Mode
6
Design is influenced by cultural context
Design follows style trends
Design communicates personality and values
Good design understands the target demographic
Different audiences prefer different experiences
Form versus function
Visual Design Principles
and Design Methods
Jakob's Law of Internet User Experience
Conventional designs tend to have higher usability due to their familiarity.

Users spend most of their time on other sites. This means that
users prefer your site to work the same way as all the other
sites they already know.
- Jakob Nielsen, Nielsen Norman Group

● Sites that look and behave in unconventional ways require more time to learn.
● But sometimes, an unexpected novelty and creativity can be very enjoyable.

How do we make creative designs that are still easy for people to learn and use?
https://www.youtube.com/watch?v=wzb4mK9DiHM
Principle 1: Contrast improves visibility
#
Principle 2: Repetition creates consistency
Principle 3: Alignment reduces chaos
Principle 4: Proximity establishes groupings
Design details provide interaction clues
Observe conventions of how visual elements typically appear and behave. Design
them with an appearance that matches their functionality.
Create a set of styling rules
Planning layouts with wireframes
Wireframes are an early step in the
design process to plan the content
structure and layout of a design.

● Can be hand-drawn sketches or

simple digital diagrams.
● Primarily black and white outlines.
● Clear depiction of all required
elements and content types.
● No visual style or detailed content.
Planning visual style with mockups
Illustrated mockups are then created to
apply and test visual styles with realistic
depiction of content.

● Created using as a digital graphic.

● Includes colour, fonts and realistic
elements.

A mockup allows design ideas to be

tested without worrying about coding.
Digital Colour
on the Web
Browsers recognise 140 standard colour names
How we see colour = how computers display colour
#

BLUE GREEN RED

Your eye contains millions
of cells that detect light.
Most detect brightness,
some detect red, green
and blue wavelengths.
Red, green and blue light Pixels in a computer
can be combined in display contain red, green
different amounts to and blue sub-pixels that
produce other visible allow a single pixel to
colours. display a specific colour.
Functional colour notation on the web
Red Green Blue notation Hue Saturation Lightness notation

0 Red 255 0 Hue 360

0 Green 255 0 Saturation 100

0 Blue 255 0 Lightness 100

rgb( 0 , 0 , 0 ) hsl( 0 , 0% , 0% )

rgb( 255, 255, 255 ) hsl( 360, 100%, 100% )

Colour values with transparency
Functional colour notation systems support an optional alpha value for transparency.

rgb( 0, 0, 0, 0 ) to rgb( 0, 0, 0, 1 )

hsl( 0, 0%, 0% / 0 ) to hsl( 0, 0%, 0% / 1 )

In both notations, the alpha value can be a decimal number 0 to 1, or a percentage.

● 0 or 0% The colour is displayed completely transparent.

● 0.5 or 50% The colour is displayed half-transparent.
● 1 or 100% The colour is displayed fully opaque.
Hexadecimal RGB colour values
Hexadecimal colour values begin with a
Wait… Hexa-what?
hash followed by 3 hexadecimal octets
The hexadecimal counting system
to represent a 24-bit colour value:
use 16 digits instead of 10 digits to
represent number values.
#ffffff
0 1 2 3 4 5 6 7 8 9 A B C D E F
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

A pair of hexadecimal digits can

represent any integer value between
0 (00) and 255 (FF).
Choosing a colour scheme
#

https://coolors.co/app
Guidelines for web colour schemes
Successful colour schemes typically feature:

● A well-defined palette based on a theme or

company brand.

● A limited number of unique colours.

● A very dark or light colour used for text.

● One or more contrasting colours used as

backgrounds.

● A strong feature colour used to indicate

interactivity, such as hyperlinks and buttons.
Digital Typography
on the Web
Establish visual identity with typographic pairs

https://artisanthemes.io/best-google-fonts-combinations-modern-agency-website/
Generic font family classifications for Web
Generic Family Examples of Common Typefaces
Specifying font stacks
For a typeface to display correctly in webpage, the font files must be available on the
user's computer.

● When a specified font is not found on the computer, the browser will substitute a
default font, such as Times New Roman or Arial.
● For designs that require a specific typographic style, provide a stack with a list of
alternatives, ending with a generic font family name.

Poppins, Century Gothic, Arial, sans-serif

Downloadable web fonts
A website can link to font files for
modern web browsers to download
when a web page is loaded.

Online web font services such as

Google Fonts (right) provide many fonts
that can be used freely in sites.

Note: A stack with a generic family

should still be used in case the web font
can't be download/displayed.
Next week
● Media formats for the Web
● Image compression and optimisation

Reminders
● Assignment 1 is due on Friday at 11:55PM
○ Week 4 lab covers video optimisation (for Assignment 1 submission)
● The brief for Assignment 2 will be released at the start of week 5
○ Assignment 2 will be a group assignment - attend week 5 lab to join a group.