Tue May 8

Goals

• I know what Webdesign is and it's purpose;
• I know guidelines for margin use, weight distribution, symmetry, and colors;
• I know the grid concept;
• I know Bootstrap;

What is Webdesign?

• The concept (Multidisciplinary, ergonomy, interface design, user experience, etc. )
• The purposes
• The audience
• The choices

Guidelines

• The use of margins
  • Why use margins
  • Consistency
  • The multiplier factor
• Whitespace
  • Good use of whitespace
  • https://www.crrtt.com/
  • http://wanna.tech/
  • https://www.mozestudio.com/
  • https://voltafootwear.com/
  • Bad whitespace use
  • https://www.branded3.com/uploads/2007/10/Jami-Lin.jpg
  • http://www.gatesnfences.com/
  • Why is important
• Grid concepts
• Why use a framework?

Bootstrap 4

• Overview (Getting Started - Responsive Breakpoints) https://getbootstrap.com/docs/4.1/layout/overview/
• The Grid - https://getbootstrap.com/docs/4.1/layout/grid/
• The use of columns, sizes, combinations,etc.
• Overview of the elements

Goals

• I work and improve the design of my Personal Project and/or Portfolio
• I understood the use of the margins
• I understood the use of the whitespace
• I understood the grid structure concept

Bootstrap Contents

• Starter Template: https://getbootstrap.com/docs/4.1/getting-started/introduction/
• The use of columns: https://getbootstrap.com/docs/4.1/layout/grid/
• Font Stacking and contents: https://getbootstrap.com/docs/4.1/content/reboot/
• Image Usage: https://getbootstrap.com/docs/4.1/content/images/
• Navigation: https://getbootstrap.com/docs/4.1/components/navbar/
• Header Presentation - Jumbotron: https://getbootstrap.com/docs/4.1/components/jumbotron/
• Tables: https://getbootstrap.com/docs/4.1/content/tables/
• Progress Bars: https://getbootstrap.com/docs/4.1/components/progress/
• List Groups: https://getbootstrap.com/docs/4.1/components/list-group/

Webdesign Inspiration and Research

• https://www.webdesign-inspiration.com/
• https://www.siteinspire.com/
• https://www.awwwards.com/websites/
• https://www.pinterest.com/