Design Principles Notes

  1. Spacing – Space makes things clearer. Three aspects of space are line spacing, padding and white space. Good line spacing will make the text easy to read, don’t want too much or too little. Padding is the space between elements or text; you don’t want things overlapping, this helps make things easier to read and look better. White space  is used to give balance, proportion and contrast to a page; you don’t have to fill up the whole page.
  2. Navigation – Navigation needs to e simple so there is no confusion. Things that will help get you around the site should be easy to find; sub-headings can help with this.
  3. Design to Build – Don’t make it too complex because you do have to create this. Make sure it will look okay on different sized screens. Sometimes moving an object around in a design can make a big difference in how you have to code your CSS. Fine a balance between  what looks good and small changes that can simplify your build.
  4. Typography – Different fonts say different things so make sure your font fits with what your website is about. Make sure your type is at a good size, you can use this size to create hierarchy within the text. Make sure to have good spacing (#2). Make sure lines of text aren’t too long, use columns. Make sure the color works well, wrong color can make it hard to read. Good rule is to stick to left aligned text, it generally looks better.
  5. Usability – Make sure the website can actually be used easily. Standards can be good to follow, ex: links are generally underlines so doing this would make links easy to find. Make sure to try out your design. Put the things users will use most in plain sight, good place is on the home page.
  6. Alignment – Line things up, it will look better. Doesn’t mean everything has to be lined up perfectly, use common lines.
  7. Clarity (Sharpness) – Keep your designs crisp. In CSS everything will be pixel perfect  but in Photoshop that isn’t the case. Make sure borders are clearly defined, over-emphasized borders slightly exaggerate the contrast.
  8. Consistency – Make similar things the same (ex: all headings the same size). Consistency will make you look more professional. Make early decisions and stick to them.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s