Design Aesthetics for the Web

Take your web design skills to next level. Learn how to incorporate principles of design such as contrast, unity, and balance in specific ways that improve your websites.

Introduction

• Welcome
• Using the exercise files

1. About Aesthetics

• What is aesthetics?
• Examples from art and design

2. Using Elements of Design

• Understanding the elements of design
• Using color to set the site’s mood
• Tweaking color value to add contrast
• Using texture to add depth
• Repeating shapes to unify your design
• Structuring your layout with form
• Using space to organize your design
• Setting boundaries with lines
• Communicating with the right fonts
• Challenge: Working with color
• Solution: Working with color

3. Incorporating Principles of Design

• Understanding the principles of design
• Using contrast to set areas of interest
• Applying font styles to show emphasis
• Aligning objects to achieve balance
• Using hyperlink styles to create unity
• Applying background patterns
• Adding scrolling and animation
• Using border styles to add rhythm
• Achieving proportion by scaling objects
• Creating simplicity
• Using gradation to create perspective
• Challenge: Banner ad
• Solution: Banner ad

4. Web Design Industry and Trends

• Emphasis: Designing for hand gestures
• Typography: Choosing and using web fonts
• Balance: Editing images for social media
• Form: Moving beyond flat design
• Color: Theory and trends
• Movement: Adding type over video
• Pattern and gradation
• Challenge: Type over video
• Solution: Type over video

5. Designer’s Role and Web Design Workflow

• Responsibility: Understanding the designer’s role
• Research: Form follows function
• Composition: Using the grid
• Accessibility: Using size and color
• Responsive aesthetics: CSS for devices
• Communication: Leading viewers through a design
• Originality: Stepping out of the box
• Challenge: The designer's role
• Solution: The designer's role

Conclusion

• Next steps