Basic Principles of Design How to make your websites and video graphics look more professional
Basic Principles Contrast Repetition Alignment Proximity Limit your fonts
Contrast Making elements different from each other to make them stand out. Guides your eye around the page - or to where you want the viewer to look Adds visual interest and makes layout more attractive to the viewer. Rule - if something is different from another element, be sure to make it very different.
How to Use Contrast: Color Watch your color choices. There’s a difference between color difference and value difference Value is most important
Value: Contrast’s Best Friend Why is the left column better than the right column? VALUE DIFFERENCES!
How to Use Contrast: Size Create a focal point / dominating force No focal point creates confusion Control where the eye goes first, then second, etc.
Where does your eye go?
Repetition Repeating certain elements that tie everything together Each web page or super should look like it belongs to the same site or video The heart of a theme Helps viewers navigate a site quicker (they don’t have to re-learn where elements are)
Bad Repetition These pages are from the same site. They don’t look alike.
Good Repetition Recurring fonts Recurring colors Recurring symbols Recurring placement Pages don’t have to be exactly the same - only the elements that make them up
Alignment Simply put - the items on your page line up with each other. Without alignment, you have items placed randomly on the screen, creating chaos One of the biggest problems on the web
What Alignment does creates order organizes page elements groups items creates visual connections Good alignment is invisible - most readers won't consciously notice that everything is lined up neatly but they will feel it when things are out of alignment.
Avoid Center Alignment
Small Tweak = Big Improvement
Poor Alignment
Proximity Relationships that items develop when they’re close together Used in conjunction with alignment Group things that deserve grouping Subheads with block text Pictures with captions
Proximity: Grouping Examples
Limit Your Fonts! Good design is based around consistency. An easy way to achieve consistency is by limiting artistic motifs (themes) on your site or in your video Fonts are at the core of a theme Long story short: USE ONLY TWO FONTS! A third font is a rule breaker, but can be used on purpose to make an element stand out
Good Use of Fonts
Bad Use of Fonts
Terrible Use of Fonts
One last thought on fonts According to some experts… If your fancy font looks modern or contemporary, then your basic font should be a sans-serif. If your fancy font looks old fashioned, then use a serif font for your secondary font.
What do you think?