Design Aesthetics for the Web

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