Design Aesthetics for the Web (2016)
2h 47mIntermediate2016-09-26
Authors

Sue Jenkins
Author, Teacher at Marywood University, Owner of Luckychair.com
Course details
A basic understanding of the principles of good design (such as contrast, unity, and balance) is the foundation for creating beautiful websites. In this course, Sue Jenkins explains design aesthetics in simple terms, and shows how to incorporate the principles and elements of design in specific ways that improve your websites. Learn how to adjust adjacent colors to add contrast, create depth with texture, incorporate movement, and use repeating shapes, patterns, and borders to unify your design. Then find out how these principles play out in industry trends—and how technology such as social media and web video affect design. Sue also explores the designer's role in the process and key concepts that apply to every workflow, including responsive design, accessibility, and originality. Along the way, Sue offers challenges to test your knowledge and think more deeply about design aesthetics for the web.
Learning objectives
Understanding aesthetics
Picking harmonious colors
Structuring your layout
Using space to organize your design
Communicating with the right fonts
Aligning objects to achieve balance
Adding movement with scrolling and animation
Achieving proportion by scaling objects and text
Creating CSS for different devices
Learning objectives
Understanding aesthetics
Picking harmonious colors
Structuring your layout
Using space to organize your design
Communicating with the right fonts
Aligning objects to achieve balance
Adding movement with scrolling and animation
Achieving proportion by scaling objects and text
Creating CSS for different devices
Skills covered
Web GraphicsWeb DesignPersona
Concepts
0. Introduction
- 01 - Welcome
- 02 - Using the exercise files
1. About Aesthetics
- 03 - What is aesthetics
- 04 - Examples from art and design
2. Using Elements of Design
- 05 - Understanding the elements of design
- 06 - Using color to set the site s mood
- 07 - Tweaking color value to add contrast
- 08 - Using texture to add depth
- 09 - Repeating shapes to unify your design
- 10 - Structuring your layout with form
- 11 - Using space to organize your design
- 12 - Setting boundaries with lines
- 13 - Communicating with the right fonts
- 14 - Challenge - Working with color
- 15 - Solution - Working with color
3. Incorporating Principles of Design
- 16 - Understanding the principles of design
- 17 - Using contrast to set areas of interest
- 18 - Applying font styles to show emphasis
- 19 - Aligning objects to achieve balance
- 20 - Using hyperlink styles to create unity
- 21 - Applying background patterns
- 22 - Adding scrolling and animation
- 23 - Using border styles to add rhythm
- 24 - Achieving proportion by scaling objects
- 25 - Creating simplicity
- 26 - Using gradation to create perspective
- 27 - Challenge - Banner ad
- 28 - Solution - Banner ad
4. Web Design Industry and Trends
- 29 - Emphasis - Designing for hand gestures
- 30 - Typography - Choosing and using web fonts
- 31 - Balance - Editing images for social media
- 32 - Form - Moving beyond flat design
- 33 - Color - Theory and trends
- 34 - Movement - Adding type over video
- 35 - Pattern and gradation
- 36 - Challenge - Type over video
- 37 - Solution - Type over video
5. Designer s Role and Web Design Workflow
- 38 - Responsibility - Understanding the designer s role
- 39 - Research - Form follows function
- 40 - Composition - Using the grid
- 41 - Accessibility - Using size and color
- 42 - Responsive aesthetics - CSS for devices
- 43 - Communication - Leading viewers through a design
- 44 - Originality - Stepping out of the box
- 45 - Challenge - The designer's role
- 46 - Solution - The designer's role
Conclusion
- 47 - Next steps
Related courses
- Design Aesthetics for Web Experiences
- Planning Your No-Code Website
- Product and Architectural Visualization Techniques
- AI Prompts for Gamified Learning Design
- Graphic Design: Insight and Advice
- Space Planning for Architects and Designers
- John Maeda on Design, Business, and Inclusion
- Writing and Communication Skills for Architects and Designers