Skip to main content

Home/ TWC301: Multimedia Writing/ Group items tagged whitespace

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Caitlin Burke

Graphic Design Principles: (Balance) Whitespace - 0 views

www.alistapart.com/...whitespace

design whitespace layout balance

shared by Caitlin Burke on 10 Sep 11 - Cached
  • Caitlin Burke on 10 Sep 11
     
    This article expands on BoD's introduction of how to use white space well. Whitespace can drastically enhance the balance of a page layout if used well.
Hector Garcia

D#4HW#1: Principles of Design and Page Layout - 0 views

www.siggraph.org/...chap1_3.htm

TWC301

shared by Hector Garcia on 01 Feb 12 - Cached
    • Hector Garcia
      Hector Garcia on 01 Feb 12
       
      Although this page is specifically for a website, it applies the same elements that can be used in blogs, and other design prospects.
  • All whitespace should be accounted for. This does not mean that you should fill all whitespace - it means that when you have areas of whitespace it should add to the overall compositional balance of your page.
  • When working with layout, it is essential to focus on balance and the shape of the unused space. By applying principles of figure/ ground relationships, contrast and similarity, and proportion, the designer can structure the space into an effective whole.
  • ...6 more annotations...
  • The designer can change the background color easily, so when we refer to white space, we are referring to the background color or the "ground" in a figure/ground relationship. The whitespace in a composition is as important as the elements that have been placed upon it.
  • Every element on the page effects how other elements on the page are perceived.
  • When arranging elements on the page, you should consider the visual weight of each element. Weight can be determined by the size of the object, the value (dark objects weigh more than light objects), and the density of the detail or texture.
  • Proportions and size relationships should also be considered when trying to establish balance. All objects on your page will be evaluated in relationship to other objects on the page, therefore a large object will appear much larger when placed next to small objects, thus affecting the balance.
  • The simplest type is a formally or symmetrically balanced page.
  • An asymmetrical compositional layout depends on the skillful arrangement of elements with different visual weights. For instance, a large body of text can be balanced by a dark image.
Briseida Aguirre

D#2, HW 2 - 0 views

www.vanseodesign.com/...visual-hierarchy

shared by Briseida Aguirre on 05 Jun 11 - Cached
  • The goal of visual design is to communicate.
  • We are visual beings and can quickly pick up on visual cues to better understand our environment.
  • Headings are hierarchy and make some words more important than the rest of your type. Tags for blockquotes and lists, strong, and em, also add a visual hierarchy to your typography.
  • ...9 more annotations...
  • Think of the basic design principles contrast, repetition, alignment, and proximity.
  • Contrast
  • Repetition
  • Alignment
  • Proximity
  • You create a hierarchy in design, by adjusting the visual weights of your element.
  • The mechanisms for controlling visual weight are the same in both cases. Size – As you would expect larger elements carry more weight Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest. Density – Packing more elements into a given space, gives more weight to that space Value – A darker object will have more weight than a ligher object Whitespace – Positive space weighs more than negative space or whitespace
  • Your hierarchy should begin with thoughtful consideration of the content and goals of the page. Only after you’ve decided intellectually the hierarchy of your page should you attempt to visually design that hierarchy.
  • Visual Hierarchy is a deliberate prioritization of
  • Briseida Aguirre on 30 Aug 11
     
    This gives some great examples of visual hierarchy
Paul Angichiodo

Is Your Web Design Balanced? | Van SEO Design - 0 views

www.vanseodesign.com/...web-design-balance

shared by Paul Angichiodo on 07 Sep 11 - Cached
    • Alex Portela
      Alex Portela on 02 Feb 12
       
      This site describes the physics explanation of balance. And demonstrates this visually. Many things can create balance, like color in a painting or the size of objects on each side.
  • Balance is important in life. Work and play; diet and exercise; yin and yang. A beautiful face is often a matter of the right balance of features. Balance is also a very important design principle. It will help you create an aesthetically pleasing whole and help you better control flow in your designs.
  • Balance in design works the same way as a lever or see saw. Your design will have a vertical (or horizontal) axis and the weight of the various elements on either side of the axis and their distance from the axis will determine if your design is balanced.
  • ...7 more annotations...
  • There are two kinds of balance that correspond to our lever images above, namely symmetrical and asymmetrical balance
  • Size – As you would expect larger elements carry more weight Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest. Density – Packing more elements into a given space, gives more weight to that space Value – A darker object will have more weight than a ligher object Whitspace – Positive space weighs more than negative space or whitespace
  • Symmetrical balance is like having our fulcrum in the center of the lever. To achieve balance we need to have elements of equal weight on both sides of a central axis.
  • Symmetrical balance tends to be more formal and more static. It evokes feelings of consistency, elegance and classicism.
  • Asymmetrical balance is like having our fulcrum off center. Unequal weights need to be placed on either side of the fulcrum in order for balance to be in equilibrium. Visual weight will not be evenly distributed around a central axis and often you’ll find one dominant form on one side of the axis offset by several less dominant forms on the other.
  • Radial balance – all elements radiate in or out from the center. Think beams of light coming from the sun. It’s easy to maintain a focal point in radial balance as it will always be the center.
  • Mosaic balance – many elements on the page create a sort of balanced chaos. Think of a Jackson Pollack painting. Mosaic balance lacks hierarchy and can look like noise. It’s harder to define a single focal point in all the chaos.
  • Rebecca Jordan on 07 Sep 11
     
    I felt like this page had some great visuals and definitions of what balance is. I love how they describe that colors can actually "weigh" more than others. I like that they offered new terms like radial balance and mosaic balance (chaotic balance). They gave examples of every concept that they talked about and in a wide range of designs. The writer also does a silly example of making a formula for balance.
  • Paul Angichiodo on 26 Feb 12
     
    Here is a more general article about balance. It uses physical balance as an example to help explain what balance in design is using both the vertical and horizonal axis. The article discusses visual weight in design elements, explaining how each element can effect balance. It also addresses the types of balance: symmetrical, asymmetrical, radial, and mosaic balance.
Paul Angichiodo

Understanding Visual Hierarchy in Web Design | Webdesigntuts+ - 0 views

webdesign.tutsplus.com/...visual-hierarchy-in-web-design

shared by Paul Angichiodo on 28 Aug 11 - No Cached
  • Caitlin Burke on 28 Aug 11
     
    Gives good description and examples of the concept of Visual Hierarchy in Web Design and discusses its importance. Also has an exercise to do to test visual hierarchy when you come across a website.
  • Heather Groen on 13 Jan 12
     
    Informative post about how the human brain registers hierarchy naturally and techniques that can be used to achieve effective visual hierarchy in web desgin. The site offers examples of each method: size, color, contrast, alignment, repetition, proximity, density and whitespace, and finally style and texture. I particularly like this quote: "Good visual hierarchy isn't about wild and crazy graphics or the newest photoshop filters, it's about organizing information in a way that's usable, accessible, and logical to the everyday site visitor."
  • Paul Angichiodo on 26 Feb 12
     
    Here is an article on visual hierarchy in reference to web design. Along with the list of ways visual hierarchies can be formed visual examples are given as well. This article even goes in the psychology behind visual hierarchy and why its necessary for designers when creating.
1 - 5 of 5
Showing 20▼ items per page