Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Design Aesthetics for the Web (2016)

Design Aesthetics for the Web (2016)

2h 47mIntermediate2016-09-26

Authors

Sue Jenkins

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

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

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal