FIT1050 Web Fundamentals
Visual Design for the Web
Copyright Warning
Copyright By PowCoder代写 加微信 powcoder
Commonwealth of Australia Copyright Act 1968
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.
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
What is Visual Design?
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 needs and preferences
¡ñ Creating and implementing visual design
¡ñ Content, media and communication
Design is influenced by popular technology
1991 Text Simple Graphics
JPEG Presentational Formatting Animated GIF
1998 CSS Formatting True-Colour Displays CSS Layout JavaScript Flash
2005 Modern Smartphones YouTube Scalable Vector Graphics Tablet Devices Mobile Apps
2012 HTML5 Video Web Fonts CSS Effects Bootstrap CSS Flexbox Layout CSS Animation HTML5 Canvas
2019 CSS Grid Layout
Design is influenced by cultural context
Design follows style trends
Design is for the target audience
Design for different user experiences
Form versus function
Visual Design Principles and Design Methods
Contrast is visual difference that improves visibility
Repetition reuses elements to create consistency
Alignment places elements to reduce chaos
Proximity establishes relationships
Jakob’s Law of Internet User Experience
Experimentation is fun, but conventions based on tried and tested techniques deliver reliable and predictable outcomes.
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.
– , Group
¡ñ Sites that look and behave in unconventional ways require more time to learn.
¡ñ The quickest usable design is a familiar design.
Understand how conventions aid understanding
Observe how visual elements normally 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
A mockup allows design ideas to be tested without worrying about coding.
Digital Colour on the Web
How we see colour, how computers show colour
Different colour notation systems for screens
0 Red 255 0 Green 255 0 Blue 255
Saturation 100
Lightness 100
Hexadecimal RGB colour values
Hexadecimal colour values begin with a hash followed by 3 hexadecimal octets to represent a 24-bit colour value:
Wait… Hexa-what?
The hexadecimal counting system use 16 digits instead of 10 digits to represent number values.
0 1 2 34 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 and 255.
Modern web colour values
All modern web browsers also accept functional notation colour values: rgb( 0, 0, 0 ) to rgb( 255, 255, 255 )
hsl( 0, 0, 0 ) to hsl( 360, 100%, 100% ) Both formats also accept an additional alpha/opacity parameter:
rgba( 0, 0, 0, 0.5 ) hsla( 0, 0%, 0%, 0.5 )
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
Best Google Fonts Combinations for a Modern Website (Including Color Palettes!)
Generic font family classifications for Web
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 font stack should still be defined in case the web font can’t be displayed.
¡ñ Media formats for the Web
¡ñ Image compression and optimisation
¡ñ Assignment 1 is due on Friday at 11:55PM
This week’s lab activities include
¡ñ Video optimisation for the web (for Assignment 1 submission)
¡ñ How to submit assignment 1
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com