Skip to main content

Home/ TWC301: Multimedia Writing/ Group items tagged hierarchy

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
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.
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
anonymous

How to Use Visual Hierarchy in Web Design | Design Shack - 2 views

designshack.co.uk/...visual-hierarchy-in-web-design

visual hierarchy

shared by anonymous on 25 Aug 11 - Cached
  • Alex Knab on 25 Aug 11
     
    This was my favorite of all the sites I found that related to the content of chapter two. The site's main focus was on the use of visual hierarchy in web design. The use of visual hierarchy has the power to improve the amount of content and information the reader actually views and absorbs on a page. With the correct use of hierarchy you can almost control what is viewed and the path that is read. According to this article position, size, color, and visual complexity are the different parts of visual hierarchy. If these different principles of visual hierarchy are applied correctly one can create the optimal page for steering their readers attention to wherever they would like.
Esther Gray

PAGE DESIGN: Visual hierarchy - 0 views

webstyleguide.com/...hierarchy.html

twc301

shared by Esther Gray on 12 Jan 12 - No Cached
  • Esther Gray on 12 Jan 12
     
    This website explains visual hierarchy. It also discusses all of the different aspects of making a web page look visually appealing. 
Nicole Carnal

D #2 HW #2 Advertisements that use emphasis - 0 views

psd.tutsplus.com/...liantly-photoshopped-print-ads

Advertisements emphasis color bold hierarchy ch 2 chapter

shared by Nicole Carnal on 19 Jan 12 - Cached
  • Nicole Carnal on 19 Jan 12
     
    This site shows different advertisements that, for the most part, do a great job of showing emphasis. Most use color, boldness, or hierarchy to convey their message.
Hector Garcia

D#3HW#1: Design View / Andy Rutledge - Contrast and Meaning - 0 views

www.andyrutledge.com/contrast-and-meaning.php

TWC301 contrast

shared by Hector Garcia on 24 Jan 12 - Cached
  • Design is largely an exercise in creating or suggesting contrasts, which are used to define hierarchy, manipulate certain widely understood relationships, and exploit context to enhance or redefine those relationships
  • he function of contrast in defining meaning can be explained by comparing fundamental opposites: dark/light, soft/hard, fast/slow.
  • In a layout, contrast helps lead the reader’s eye into and through your layout. Each component of the page—graphic, textual, or interactive—has a job to do, and each of those jobs falls within a hierarchy that’s specific to the project at hand.
  • ...1 more annotation...
  • Website visitors quickly scan a page’s layout and decide how and where they’ll begin consuming the content. If you’ve used contrast to craft a visual information hierarchy, you can compel viewers to look where you want them to.
  • Hector Garcia on 24 Jan 12
     
    Page introducing primary forms of contrast such as size, texture, color, position, shape, and orientation.
Anastacia Albinda

D#2 HW#2 - 0 views

spinner.cofc.edu/...visualhier.html

visual hierarchy

shared by Anastacia Albinda on 17 Jan 12 - Cached
  • Anastacia Albinda on 17 Jan 12
     
    This website is helpful to those who want more examples and explanations for Visual Hierarchy. I also enjoyed how it did not offer only one page of content, but it gave you a plethora of information in a very easy to navigate website. 
Merlyn Reyna

D#3 HW#1 Contrast and Meaning - 0 views

www.alistapart.com/...contrastandmeaning

chapter3 article TWC301 Chapter 3

shared by Merlyn Reyna on 08 Jun 11 - Cached
  • your grasp of these fundamentals determines your ability to communicate effectively. Without fundamentals, you will flounder when faced with complex design challenges or constraints.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      some fundamentals being the tips they have given us in the readings so far.
  • These basics of creative communication are consistent across art forms: painting, music, dance, acting, poetry, design, and all other artistic endeavors. I divide them into two categories: vocabulary and grammar.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      Contrast as well as other fundamentals are not only used in one media of communication it is used in all kinds of communication.
  • nce, angular lines and forms are generally indicative of strength, speed, and masculinity, while rounded lines and forms are generally associated with softness, slower tempo, and femininity.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      Different lines and textures convey different ideas and feelings.
  • ...9 more annotations...
  • Moreover, most of the rules of language have exceptions, and some creative modes of communication make little or no reference to rules. Every language is lent nuance, style and character by the way that each individual uses it, and there are exceptions for every grammatical rule.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      Using funamentals to convey important information is communicating and in a way is like its own language.
  • which are used to define hierarchy, manipulate certain widely understood relationships, and exploit context to enhance or redefine those relationships…all in an effort to convey meaning. Contrast is important because the meaningful essence of any thing is defined by its value, properties, or quality relative to something else. That’s right: nothing has much meaning by itself, which is one reason why design is important.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      expressing the important information in something is best shown when contrasted. The more a title stands out the more impact it is going to have on the viewer and the easier they will remember that name.
  • contrast is closely tied to human perception and survival instincts, as we’ll examine later, and this makes contrast a powerful and essential tool for designers.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      it is human insticnt to be drawn to bold information
  • Furthermore, each component is but a piece of the overall project message and objective. With creative uses of contrast, you can influence user choices and compel specific actions.
    • Delaney Hensley
      Delaney Hensley on 08 Jun 11
       
      each piece of finished product has its own role, it is important to distinguish that role and convey it appropriately.
  • The function of contrast in defining meaning can be explained by comparing fundamental opposites: dark/light, soft/hard, fast/slow.
  • every element on the page you’re designing has to be positioned, styled, sized, or otherwise distinguished in accordance with its specific importance and place in the overall communicative objective.
  • ontrast helps lead the reader’s eye into and through your layout.
  • Contrast is everywhere and a part of everything we see, do, experience, and understand.
  • Contrast is just one component of design fundamentals.
  • Karla Freeman on 10 Jun 11
     
    Gives great definitions of contrast and design. I think it will be a great resource now and later.
  • Merlyn Reyna on 24 Jan 12
     
    Contrast defines hierarchy, understanding relationships to convey a message.  It is used to hand in hand with the principle of emphasis in order to keep its emphasis.  Every element must be positioned with style, size, and distinguished with a specific importance.  This article gives an idea of how contrast is typically used by giving examples.  
Kelly Corbett

Good and Bad ads that caught my eye print | adland.tv - 0 views

adland.tv/...good-and-bad-ads-caught-my-eye

ads print emphasis hierarchy

shared by Kelly Corbett on 30 Aug 11 - No Cached
  • Kelly Corbett on 30 Aug 11
     
    These ads are good examples of the emphasis and visual hierarchy we were talking about. In most of the ads there is a prominent text, which your eye is drawn to first, followed by smaller text, or images, that you look to next. This helps get your attention first, and then you read the rest of the ad, just like they hoped you would. 
Kyle Redding

D#2--HW#2 Understanding Visual Hierarchy - 0 views

http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/

started by Kyle Redding on 05 Jun 11 no follow-up yet
Rebecca Jordan

D#2 HW#2 - C2 site/page bookmarking - 1 views

www.designmeltdown.com/...Contrast

shared by Rebecca Jordan on 23 Aug 11 - No Cached
  • Rebecca Jordan on 23 Aug 11
     
    I am a little partial this one particularly because of the fact that we were just asked to pick out our favorite blog site and what we liked about it etc ect.. It talks about where the eyes should be drawn to and how using contrast in a web page or any design can add value to it. It discusses how to use colors appropriately and how to make the text pop out. It also points out that contrast is a tool for accomplishing hierarchy.
Jennifer Greenhalgh

Lenstory Films - Minneapolis Filmmaker Group - 0 views

www.lenstoryfilms.com

shared by Jennifer Greenhalgh on 01 Sep 11 - No Cached
    • Jennifer Greenhalgh
      Jennifer Greenhalgh on 01 Sep 11
       
      Although small, the bright yellow of the logo makes it stand out, giving it a high visual hierarchy
    • Jennifer Greenhalgh
      Jennifer Greenhalgh on 01 Sep 11
       
      the more muted yellow shows that while it is not as important as the name of the company, it is still high on the visual hierarcy
    • Jennifer Greenhalgh
      Jennifer Greenhalgh on 01 Sep 11
       
      The bold white borders draw your attention down giving you the 3rd place of viusal hierarchy.
Daniel Throckmorton

D#2, HW#2 - Emphasis in Web Design | Academy - Sacramento - 0 views

www.iadt.edu/...Emphasis-In-Web-Design

twc301 reference emphasis web

shared by Daniel Throckmorton on 05 Jun 11 - No Cached
  • The larger an element, the more emphasis it gets
  • more emphasis is placed on elements at the top of the page
  • users won't have to scroll to see it
  • ...4 more annotations...
  • limit the number of colors on a single page
  • If everything is trying to stand out, nothing will
  • Because you can create plenty of Web pages for your site, you don't have to force a single page to do too many things
  • Knowing the hierarchy of a page will help you emphasize wisely
Paul Angichiodo

Visual Movement - Flow in Web Design | Codrops - 0 views

tympanus.net/...visual-movement-flow

shared by Paul Angichiodo on 07 Jun 11 - No Cached
    • Daniel Throckmorton
      Daniel Throckmorton on 17 Jun 11
       
      This is actually the best analogy for flow that I've seen.
  • The image
  • is leaning toward the right
  • ...11 more annotations...
  • the image of Andrea is facing left guiding the eye to the large, colorful title
    • Daniel Throckmorton
      Daniel Throckmorton on 17 Jun 11
       
      This follows the reverse 'S' pattern that the book was talking about.
  • create a triangle
  • large orange circle grabs your eye as soon as you load the site
  • upper left to the lower right
  • little hidden arrows
  • shape, type and cold contrast to guide you where you need to go
  • blatant pointers
  • guide your users on a path through the site.
  • Lines, shapes, color, depth and hierarchy can all be used to guide the viewer from one point to the next
    • Alex Portela
      Alex Portela on 22 Feb 12
       
      This site has great visual ad examples to show and demonstrate coordination of color and shapes that help the flow of design deliver easy to read messages. Color and lines are exemplary here.
  • N M on 07 Jun 11
     
    The examples in this website provide real-life example, and include a designers explanation below the advertisement/image.
  • ...2 more comments...
  • Bridget Esqueda on 02 Oct 11
     
    I found this web page to be very resourceful. I'm always looking for visual examples and this website had all great examples using real life web pages. It points out exactly what is "flowing" in the design. It gave me great ideas on how to use flow with images and even shapes.
  • Kelly Corbett on 05 Oct 11
     
    This is my favorite of the websites that helped supplement my understanding because it not only explains flow and visual movement but shows examples and each aspect of the example that demonstrates flow. This helps me see exactly how flow can be used, and in all types of different ways.
  • Micheal O'Neil on 06 Feb 12
     
    I bookmarked this website because it really supplemented some of the techniques described in Basics of Design. This website shows great examples of how to manipulate viewers path. The advertisements near the bottom of the page show how to create a visual path for someone with out using a human body.
  • Paul Angichiodo on 01 Apr 12
     
    This article is about visual flow in web design. It acknowledges the differences between flow on the web and flow on fine art. The article provides numerous examples of how visual flow is used on the web.
Paul Angichiodo

Fully Understanding Contrast in Design | Webdesigner Depot - 1 views

www.webdesignerdepot.com/...derstanding-contrast-in-design

shared by Paul Angichiodo on 08 Jun 11 - No Cached
    • Alex Portela
      Alex Portela on 26 Jan 12
       
      The book describes on page 56 that there are a variety of contrast techniques. Color is a noticeable contrast but we learn that this is only part of many methods. This site gives a variety of different techniques like color, size, shape, and position.
  • toni tassell on 08 Jun 11
     
    Great examples!
  • ...3 more comments...
  • Alex Knab on 30 Aug 11
     
    This was my favorite page found on my search for content related to chapter three of basics of design. This site gives a great outline of what the design principle contrast is and how to properly use it in page design. It describes and shows examples of positional, shape, color, and size contrast. This was a wonderful site that supported and reinforced examples right out of the book. I really loved the great and creative sites that it had in it's examples and I felt inspired to aim for design of that quality.
  • gabrielle begay on 25 Jan 12
     
    Summary: Contrast is usually kept simple, like color for the beginners but there are other elements to consider when it comes to contrast in any design. The first thing that most of learn in color contrast and the obvious of color is the white and black which is okay but there are other ways to use color to grab attention as the examples under color with explain. Next to color that grabs attention is size, the bigger the better as the writer explains because it shows that something is important and will draw the read to read the rest. Then we have shape contrast which gives a different feel to make other things notable cause no one likes to see a plain and boring design. Finally there is positional contrast that makes hierarchy standout by using different alignments. I found this website to the be the best because it touch on everything in the reading and gave examples to show what is meant on each topic. 
  • Paul Angichiodo on 26 Jan 12
     
    Here is an article from the Webdesigners Depot. It explains various types of contrast (color, shape, size, etc.) and gives real life examples from various webpages across the internet.
  • Shannon Ridgeway on 30 Jan 12
     
    Comprehensive coverage of contrast, even talks about "shape contrast"
  • Paul Angichiodo on 25 Feb 12
     
    Here is an article from the Webdesigners Depot. It explains various types of contrast (color, shape, size, etc.) and gives real life examples from various webpages across the internet.
Daniel Flores

D# 2 HW# 2 Emphasis in Web Design - 2 views

webdesign.about.com/...aa083007.htm

shared by Daniel Flores on 15 Jun 11 - No Cached
  • anonymous on 15 Jun 11
     
    This page goes over similar material covered in Chp 2 with an emphasis :) in webs design. Brief but interesting.
  • Daniel Flores on 27 Aug 11
     
    Trying to make everything on a Web page stand out means that nothing will stand out. Good designers learn to use emphasis wisely so that the important parts of the layout dominate without overwhelming and there is a visual hierarchy that leads the reader through the Web page.
Heather Krieger

D#2, HW#2-Chapter 2 Website - 1 views

www.viget.com/...typography-tuesday-hierarchy

shared by Heather Krieger on 26 Aug 11 - Cached
  • Heather Krieger on 26 Aug 11
     
    D#2, HW#2 I thought that this was the best website that demonstrated Chapter 2 in my opinion. The website talks about the same kind of elements as in the chapter including size, color, weight, and style. I also enjoyed it because the writer explained, like the book, the reason for each of these techniques and why they help the reader get the information that is being shown to them.
Shannon Ridgeway

How To Control Flow Within Your Web Designs - 2 views

speckyboy.com/...l-flow-within-your-web-designs

flow TWC301 design

shared by Shannon Ridgeway on 05 Oct 11 - Cached
  • Visual design has a flow as well. You have something to communicate and you want your audience to take in different parts of your page. Some elements of the design are more important and you want to make sure they’re seen right away, and some elements of the design are best seen after having first seen a different part of the design.
  • Design flow (also referred to as movement or direction) is the way the eye moves or is led through a composition
  • Repetition in color, shape, and size create a path that can pull you to move in a certain direction.
  • ...3 more annotations...
  • • Arrows – again it’s difficult not to visually follow the direction an arrow points• People/Faces looking in one direction – similar to arrows when we see a person facing or looking in a given direction, we tend to also look to see what they’re looking at.• Perspective – creates strong visual cues to follow. By it’s nature perspective creates a direction that begs to be followed. If all roads lead to Rome, you’re going to end up in Rome at some point
  • The large black circle in the upper left is the entry point into the painting. It’s the first thing you notice. It’s larger and darker than anything else on the page. It holds more visual weight than any other element in the painting.
  • Space can imply flow in a variety of ways. The space between elements creates paths of emptiness much like footpaths through a forest of garden. An element with visual weight calls for you to rest your eyes on it. Space gives you room to move around elements.
  • ivette munoz on 05 Oct 11
     
    I liked this article the best. It discuses flow within web designs and it covers all the basis for smooth flow for people that are trying to create their own web page. It covers what design flow is and gives an image example of how flow flows within a graphic design. The author states that it is important to create an entry point, "something that stands out from everything else so that most people look at it first". The author also gives advice on controling flow within a design by using arrows, people or faces that look in a certain direction, and perspective. Using space to control flow is something that I found interesting the author states that "varying the space between a series of elements can be used to create rhythm and motion".
  • ...3 more comments...
  • Daniel Flores on 05 Oct 11
     
    a good site that shows how to improve web design with flow
  • Ariella Gabino on 05 Oct 11
     
    This website does a great job explaining the importance of flow in your design. It also gives great examples, mainly of we pages most of which are blogs. I thought this could help us improve our blogs also it is great for those of us who are visual learners to get the importance of flow by all the examples shown.
  • Heather Groen on 18 Feb 12
     
    This site includes several visuals to supplement the presented material on using flow in page design. The primary elements are most important and are intended to be seen first. Other elements are best viewed after the primary element. This hierarchy can be established through flow. An entry point is something that stands out from everything else so that the audience will look at it first. Obvious directional cues include arrows, people/faces looking in one direction, and perspective. Repetition and space can also be used to create flow.
  • gabrielle begay on 22 Feb 12
     
    I found this website to be very helpful when it came to discussing flow and how to achieve that. Besides talking about using visual cues to guide the readers eyes, using space to control flow, and creating harmony using flow, it also gives examples of various websites that have demonstrated good flow of design.
  • gabrielle begay on 22 Feb 12
     
    Control the way your eyes moves through a design by starting off with an object that will catch the viewers attention. How to control the flow oif your design by using visual cues to guide the eyes in that direction. Creating space to control flow and also creating harmony using flow.
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.
  • 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.
  • 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
  • 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.
  • 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.
Taylor Rowand

D#2 HW #2 - 0 views

news.discovery.com

TWC301 Design Discovery-news

shared by Taylor Rowand on 31 Aug 11 - Cached
  • Taylor Rowand on 31 Aug 11
     
    Being that this is a news site, emphasis is a huge priority. As you can see the articles are displayed very well with a clear difference in informational hierarchies in regards of titles, body text, and headlines.
1 - 20 of 20
Showing 20▼ items per page