1. What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Repetition PROXIMITY Alignment Contrast
6. Proximity How to get it: Squint and count the number of elements on a page. Limit yourself to between 3 and 5 elements. What to Avoid: Avoid corners and the middle of the page. Avoid equal amounts of white space between all elements Force relationships between headings and content Don’t put unrelated content elements together
9. Alignment How to get it: Always align elements on the page, even those that are far apart. What to Avoid: Don’t center some text and left align other text. Avoid centering anyway!
12. Repetition How to get it: Choose design characteristics (type face, color, size, cartoon style, picture style) and repeat them. Find existing repetitions and strengthen them by contrast or uniqueness. Accent the repetition. Think black hat, black shirt, black pants, black shoes, white corsage. What to Avoid: Don’t keep repeating if it is becoming annoying. Don’t repeat mistakes. Don’t repeat phrases. Avoid R A N S O m N O T i n g
15. Contrast How to get it: Be bold! Use color, size, and space to differentiate between content Break the rules when it works! This goes for all four elements. What to Avoid: Avoid wimpy contrast! Yellow and white don’t go together. Avoid two different fonts that look alike. Calibri and Arial.
17. What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Repetition PROXIMITY Alignment Contrast
18. Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Proximity Alignment Repetition Contrast What makes a website look good?
19.
Editor's Notes
Intro Slide Talk about the slide Key points: The slide is busy, your eye can not follow the flow of information and just all around BADLY designed.
Those four elements are CONTRAST, REPITITION, ALIGNMENT, and PROXIMITY. Think about the various forms of media you come across on a daily basis: print media such as magazines covers, posters, flyers, electronic media such as Adobe Flash, Powerpoint, and Websites, to visual media such as movie promotions and television commercials. Every piece of media is going to contain some aspect of design as such as those presented by Robin Williams. When you think about TV commercials, there is a strategy to how certain things are positioned and aligned on the set. You will notice repetition in images and dialog. You will notice contrast in special effects or even prop layouts. GREAT Media is NOT just put together on a whim… GREAT Media has a well thought out strategy and execution plan. Just like a Great Website should have. Let’s review the elements you have discussed earlier in the course but this time we are going to add some more detail.
Read the four elements to the audience
Why are there so many words “spelling” PROXIMITY all grouped together?
Be conscious of where your eye is going… Where did you start looking? What path did you follow? Remember the opening slide? Do you remember where you eyes were trying to go? There is was NO grouping of related items on that first slide at all. Let’s take a look at some tips on how to achieve proximity…
Discuss slide
Does alignment mean you have to use an actual line? Click to next slide
Supporting commentary: An actual line may be used as a graphic to make a bolder statement. Remember it all comes back to where is your eye going? Let’s take a look at some best practices on how to achieve strong and bold alignment features… Click to next slide
Notice anything “consistent” with the way repetition is being presented?
Many times you are using elements of repetition in your work: Headline being all the same size and weight, half in margin from the bottom, or the same bullet through the piece… Let’s push the idea of repetition further and create a visual key by… Click to the next slide
Review slide with viewers…
When is comes to CONTRAST, you want to make something STRIKING that draws your readers or website surfer to your page…
Contrast is not to confuse your viewer or create a focus that is NOT the focus… Let’s take a look at how you develop AWESOME contrast… Click to the next slide
Review slide with viewer…
We have REVIEWED and discussed in detail what defines the four elements of design. Now let’s see how we can put these four elements into ACTION… Click to the next slide…
Remember the opening slide…. Now you know about proximity? There is no grouping of similar items for unity. Alignment? What alignment? Remember, never center unless is it absolutely necessary. Repetition? There is not one uniform aspect of clarity Contrast? Non existent… How could we make this slide much more attractive? Click to the next slide
Do you need the element of design at work? Note the proximity by placing the elements of design in one grouping. Alignment, strong visual focus by using right alignment leaving a clean white space for the eye to view and relax. There is repetition that is consistent when it comes to color and font styles. And how about that contrast? The gray bar causes you to focus but not loose interest or sight of the what else is happening on the page… Applying the elements is much simpler than it looks… Click to the next slide
A matrix has been developed to have you start really looking a media and websites from a designers standpoint. Each quadrant contains an element. Your task is going to brain storm by writing down the aspects of a website you like or dislike according to the element in the quadrant… The next steps are to download the Elements Matrix word document and view five separate websites over the next week. Then you will be presented with a quiz where your mastery of the elements is going to be tested… This exercise is designed to help you see who really put the time into how their website was designed… Remember, EVERY great Website site had to be planned and executed strategically…
![[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)