McKay High School Web Design II Class Site

Design Pix

Design Principles Lesson

You did a little work with 4 principles of design in Web I. You now get to expand your understanding of design principles and put them into practice in a website. You can do research on 'Principles of Design' and you will find 4 Principles, 8 Principles, 10 Principles, etc., but regardless of which research you read and how many principles they proclaim, the idea of design is critical. We will use 8 principles simply because they are presented in a way which will hopefully make sense and improve our overall design skills.

1. What are the 8 Principles of Design

The eight principles we will focus on are:
  1. Proximity
  2. Visual Hierarchy
  3. Symmetry/Asymmetry
  4. Repetition
  5. Unity
  6. Contrast
  7. Dynamics
  8. Emphasis

Lets learn about these by looking in an on-line reference that focuses on these basic design principles. Begin by creating a WORD document that lists the 8 principles, a quick understandable definition for each one, and then a couple of examples. This document will become a reference guide for you as you design pages/sites and as you review for quizzes.

2. Apply the Principles

Now the fun begins. You get to be a web designer for your own site.

  • Come up with a plan for a site...of your choosing.
  • Once your plan is done, create a simple web page/site that clearly demonstrates each of the 8 principles of design.
  • Put indicators on each piece that show me how you used the principle, for example, This table with pictures of different types of basketball shoes is an example of proximity. The images being placed close together on the screen shows the viewer that they are all closely related.
  • You may create your project using Notepad++ or Dreamweaver.
  • Include CSS either embedded or a separate CSS document.

When you finish your design principles site, upload it to the server and add a link on your index that says "Design Principles Demo". This will allow me to know where to see your work. When you have uploaded, linked, and tested your project and found everything to be ready for me to see, simply send me an email letting me know you are finished with the design principles project.

3. Moving On...

When you finish this project, you should have at least a step more understanding of how to use design principles in your web site development efforts. You are now ready to move forward with your next web design adventure. Let the teacher know you are done and ready for more!

Contact the Teacher | ©2016 McKay High School