Skip to main content

Home/ TWC301: Multimedia Writing/ Group items tagged visual

Rss Feed Group items tagged

Paul Angichiodo

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

  •  
    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.
  •  
    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."
  •  
    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

  • 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
  •  
    This gives some great examples of visual hierarchy
Shannon Ridgeway

Does Your Design Flow? | Van SEO Design - 2 views

  • Flow is the way your eye moves or is led through a composition. While most of us will naturally move from one element to another in our own fashion, a designer can control to some extent where the eye moves next.
  • Verbal Flow – the path taken when reading text on the page Visual Flow – the path taken when looking at images and graphics on the page
  • To make copy easier to read you can: Develop a consistent typographic style across your site – Be consistent with your use of font size, face, and color Choose a font for your copy that is easy to read – Your copy is not the place for a fancy font Remember the principle of proximity – Place headings close to the text they refer to, captions close to images. Organize your text elements so it’s clear what goes with what Watch the width of columns – Don’t make columns to wide or too narrow as each hinders reading Develop a vertical rhythm in your type – Use consistent line heights and vertical margins and paddings
  • ...6 more annotations...
  • Again a consistent typographic style and a grid-based layout help maintain the pattern and strengthen the flow of your site.
  • Many images have a direction. An arrow, a hand pointing, a face looking in one direction. Your eye will speed up or slow down depending on the direction it was moving when it fell on the image.
  • Use the direction of images to control the the speed and direction of flow Create barriers when you want to reverse the eyes direction Create open paths to allow easy movement through your design Use contrasting colors and shapes to pull the eye
  • Assuming a left to right reading direction as in English, the natural visual flow for people will be a backwards “S” pattern. You can alter that natural pattern with the images you use, where you place those images, and how images, graphics, and text are mixed on the page.
  • Through good flow you can lead the eye from element to element
  •  
    A page on teaching what design flow is and how it works. Teaches you how to keep the reader's eye and make them follow the 'flow'.
  • ...7 more comments...
  •  
    This website gives great advice on how to show flow in a website.
  •  
    Interesting take on flow in design. Definitely worth reading. I like the information and felt that this could be very helpful in creating pages.
  •  
    This is a great website that illustrates how important flow is design. It was my favorite of all the pages I visited It gives a great definition of design flow, as well as the 2 kinds of flow (takes examples straight out of Basics of Design). It then goes on and explains how to improve your verbal and visual flow in your work.
  •  
    This in-depth website shows how to improve your website using the flow to create a more readable page.
  •  
    D#7, HW#1-- This is a great website when discussing visual and verbal flow like the book with Chapter 7. Firstly, it explains what visual flow and verbal flow exactly are so that you know where you're starting off, which I really enjoy in a website. Then, the website gives you visual examples of how to improve your current design or document.
  •  
    This website is good because it gives you a scenario of something you can relate to then it gives you an explanation of both visual and verbal. Then it gives you suggestions on how to improve your work that has to do with visual and verbal flow .
  •  
    Flow is the way the audience's eyes move through out the design. Its a lead from one element to another. Verbal flow is more like a path that leads you to the next reading text on a separate page. This article is really helpful way to improve "Flow" and provides examples for flow. 
  •  
    This is a good website to help you understand what flow is and the different types of flow. It talks about verbal flow and visual flow. It also goes on to explain how to improve your verbal flow and your visual flow.
  •  
    This webpage incorporates more details about many key aspects of flow that were also mentioned in chapter seven. There are tips to improving visual and verbal flow within a page and also how to add flow across an entire site involving many pages.
Paul Angichiodo

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

    • Daniel Throckmorton
       
      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
       
      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
       
      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.
  •  
    The examples in this website provide real-life example, and include a designers explanation below the advertisement/image.
  • ...2 more comments...
  •  
    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.
  •  
    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.
  •  
    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.
  •  
    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.
Shannon Ridgeway

How To Control Flow Within Your Web Designs - 2 views

  • 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.
  •  
    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...
  •  
    a good site that shows how to improve web design with flow
  •  
    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.
  •  
    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.
  •  
    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.
  •  
    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.
anonymous

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

  •  
    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.
Nicole Schmitter

Flow - Composition Flow - Motion in Layout - Motion in Artwork - 0 views

  •  
    This website is a perfect example of visual flow. It consist of 7 pages displaying the definition and images that explain the concept of visual flow. It stresses basic points such as making sure your text flow from left to right and the viewer's eyes should not slow down.
  • ...3 more comments...
  •  
    I liked this website it gives a good easy to understand definition of visual flow which is one of the important in overall flow , it gives some examples of images as well , with text and how to use flow for your audience.
  •  
    - Layout and Artwork that Conveys Motion By Jennifer Kyrnin, About.com GuideFiled In:Web Design / HTML Using flow in a design carries reader`s eye through out the page. Visual flows can be achieved in several ways such as perspective, curves, motion in images , faces etc.
  •  
    On page one, visual flow is defined well. But there are great examples on pages 2-5 on how to use it correctly. Mostly focuses on how the viewers eye catches the prominence of the right elements. Achieving flow through a flawless scheme that leaves no snags or visual loss of the designs message.
  •  
    This site explains how flow can be used, as well as different ways to create flow. It shows common mistakes when using flow and how to correct them.
  •  
    This is a tutorial that shows examples of good and bad flow. Ways to achieve visual flow is through arrows, sequential images, perspective, gradients, size changes, curves, motion in images, and faces (especially the eyes).
Alex Portela

Composition and Design Principles - 1 views

    • freda yamoah
       
      This website gives you the idea of composition and design principles that helps you understand the effect repetition in a design. There are several ways to use repetition in a design. Repetition gives motion so it can be used in all designs that have visual element.
    • Alex Portela
       
      This site specifically outlines examples also explained in the book about unity. Lines, shapes, images, colors, textures and other effects can be creatively laid out to give variety and depth draws more attention to the subject. The butterfly is a great example of that uniformity as well.
  •  
    Web site contains basic understanding of balance and all principle elements of design.
  • ...5 more comments...
  •  
    I like this website because it had really good examples of the basic ideas of design principles .
  •  
    D#2 HW#2 I like this article because not only does it discuss the principles of design but it also uses these principles within the article. Unlike other articles this one is actually practicing what it is teaching.
  •  
    On this website it showed various techniques in achieving balance in web design. It explained various methods such as the six visual elemnts of color, line, shape, texture, tone, and volume. It also goes in depth about varous techniques like size various, variety, visual effects, and unity that can help with accomplishing visual balance to any design.
  •  
    This site is from an art teacher's perspective. Scroll half way down the page until you get to the balance section where there are very pretty, helpful example of balance.
  •  
    D4 HW1- I like this website because it shows how different types of elements can give different visual weights to the page. This is covered in the textbook, but this website is able to show it in color also.
  •  
    This website gives you the idea of composition and design principles that helps you understand the effect repetition in a design. There are several ways to use repetition in a design. Repetition gives motion so it can be used in all designs that have visual element.
  •  
    This website was very informative and gave many examples demonstrating how to incorporate visual elements within page design. It also defines and describes design principles, many of which match up with the principles listed in Chapter 1 of our book on pages 12 and 13.
Nicole Schmitter

Balance- Principles of Design: Balance - 1 views

    • Jennifer Greenhalgh
       
      This website is a great supplement, showing the intertwining relationship of balance to it's other design elements.
  • Our eyes are drawn by color.
  • Symmetrical balance is mirror image balance
  • ...7 more annotations...
  • Asymmetrical balance occurs when several smaller items on one side are balanced by a large item on the other side, or smaller items are placed further away from the center of the screen than larger items. One darker item may need to be balanced by several lighter items.
  • Smaller areas with interesting textures (variegated light and dark, or random
  • Visual balance works in much the same way. It can be affected not only by the size of objects, but also their value (ie. lightness or darkness, termed visual weight). 
  • Large flat areas without much detail can be balanced by smaller irregularly shaped objects
  • Value refers to the darkness or lightness of objects.
  • his is a very tricky type of asymmetrical balance that often ends up looking out of balance. 
  • The third type of balance is radial balance, where all elements radiate out from a center point in a circular fashion. It is very easy to maintain a focal point in radial balance, since all the elements lead your eye toward the center. 
  •  
    This website is a good example of balance because is shows diverse variations of balances;(Symmetrical (Formal) Balance Asymmetrical (Informal) Balance Radial Balance ). Which gives the person reading a better understanding of the term balance .
  • ...9 more comments...
  •  
    D#4, HW#1- I really enjoyed this website for many different reasons. Most importantly, I liked it because it told you more than just what balance is and how it is used. It described why this happens by the color being drawn in your eyes and gives examples about darkness/lightness in black and white. It shares information with the book and shoes other examples how your eyes are brought to specific areas on a page.
  •  
    I like this article because it clearly describes the difference between symmetrical and asymmetrical balance. It also discusses how colors, shapes, and textures can be used to create balance. 
  •  
    This website explains the main concepts of balance. In showing the distinction between symmetrical and an asymmetrical layout, this website acts as a basic guide.Visual examples are shown for a better prospective,This is my favorite site out of the 3 bookmarked.  
  •  
    This is the best out of the three that i found this week because it gives very good examples of formal and informal balance. It really helped me understand the design principle better. 
  •  
    Visual weight is the illusion of a visual element on the page, work, etc.  The size, color and texture contribute to the weight.  This theory gives more of a balance design in terms of art.  Visual balance works by the size of objects and by their value.  Symmetrically balanced is where visual elements are mirrored and are symmetrical.  The don't have to be identical but they have to be similar in terms of number of objects.
  •  
    This website was very useful! It provided a description of not only two, but three different kinds of balance. I like that radial balance was the third kind that was briefly mentioned but it was not in our textbook.
  •  
    This page shows illustrations and art to show good examples of balance. Symmetrical (formal) balance and asymmetrical balance are discussed.
  •  
    A brief summary of balance and three was to achieve it.
  •  
    This website went over everything that was in this weeks reading and it was more in a condensed version on my opinion. Why i really liked this website than the other two i bookmarked, this one gave really good examples of the type of balance that was being discussed and also made it easier to understand.
  •  
    Summary: This website goes over the principle of design for balance touching on the topic of symmetrical balance which is basically what ever is done one side of a design you do on the other side, copy cat. Then it goes on to tell about asymmetrical balance win color, value, shape, position, texture, and eye direction.
  •  
    This site explains that when something is symmetrical is has formal balance and when it is asymmetrical it has informal balance. Balance can become either balanced or unbalanced by color, value, shape, position, texture, or eye direction.
Shannon Ridgeway

Adding Visual Flow to Design | Academy - Detroit - 0 views

  •  
    Explains visual flow and gives a list of some helpful techniques designers use to include flow in their layouts.
  • ...1 more comment...
  •  
    I also really like this site because it has a list of some techniques you can use to enhance the flow of your page.
  •  
    This website discusses how to add visual flow your design. It's main topics include visible lines, slight lines, motion, alignment, text, repeating patterns, etc.
  •  
    This website has many different techniques that must be considered when trying to create good visual flow in multimedia writing. It covers different elements such as lines, motion, alignment, text, repeating patterns, and varying sizes. This website was shared because it gives you many different variables to choose from when creating visual art.
Mckell Keeney

D#7 HW#1 Data Flow 2: Visualizing Information in Graphic Design | Brain Pickings - 0 views

  •  
    A brief overview of the book, Data Flow 2, Visualizing Information in Graphic Design. Shows some photos and charts that illustrate good flow and uses the words "Eye Candy." Includes links to three other sources, such as Clothing Maps of Europe and London Tube Maps. There is a link to information on their review of the book, The Visual Miscellaneum.
Esther Gray

PAGE DESIGN: Visual hierarchy - 0 views

  •  
    This website explains visual hierarchy. It also discusses all of the different aspects of making a web page look visually appealing. 
Yajahira Bojorquez

D#7, HW#1: BASIC DESIGN PRINCIPLES WITH DEBBIE HODGE: FLOW - 1 views

  •  
    BASIC DESIGN PRINCIPLES WITH DEBBIE HODGE: FLOW I like how this website applies the principal of flow to scrapbooking. It has a great visual and very simple explination of flow.
  •  
    I really like this article because it discusses flow from a scrapbooking perspective. I love scrapbooking and found this article to be very helpful in regards to graphic design as well. 
  •  
    It gives good definiton of what visual flow is and it gives directions on how to create a flow on your scrapbook page. It also has other examples of flow and good images. Also explains visual triangle and sequence.
Alex Portela

D#6 HW#1.1: Harmony In Design Part 2: Repetition » SitePoint - 0 views

    • Alex Portela
       
      Repetition is a great technique that goes along well with balance. It helps create more visual effects to catch the eye. Here we learn that images and text need uniformity and repetition.
  • repetition
  • Design elements can be photographs, illustrations, type, headlines, backgrounds and textures (and anything else you might like to add to your design)
  • ...2 more annotations...
  • visual harmony is the agreement or balance between design elements.
  • Two or more identical, or near identical elements are not only an expression of visual agreement, but the repetition also helps to catch and draw the eye into your design.
  •  
    This was my favorite of the different sites that I found on the topic of repetition. I thought that this site very closely followed what the Basic's of Design taught on the subject. The site gave a background of what repetition is and why it is important. It also gave great examples of different forms of repetition such as; repetition of a image/icon, border, or decoration. It really helped me understand why repetition is such a key component in design!
  • ...3 more comments...
  •  
    This website is a good, quick overview of certain parts of repetition in design. I like that they give picture examples to illustrate them.
  •  
    This web page caught my eye because it provided many examples of what repetition should be look like in different works .
  •  
    This is my favorite of the website I found that helped supplement my understanding for several reasons. I think the examples are great. Not only that it is very similar to the book in that it talks about repeating visual elements such as images, lines, even typefaces. The series of books are a perfect example because they show you can use repetition without being identical, as long as it is conceptual related. 
  •  
    I like this article because it gives visual examples of repetition used in books, movies, and ads. 
  •  
    This website has good examples of repetition and they explain it better when having an image. They have good images and good explanation.
Paul Angichiodo

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

    • Alex Portela
       
      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.
  •  
    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.
  •  
    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.
Mckell Keeney

Emphasis: Super-Size Your Graphics to Create Visual Impact - 0 views

  •  
    CVI - Center of Visual Impact - supersize one graphic at least three times larger than everything else for emphasis.
Paul Angichiodo

6 Ways to Create Emphasis in a Painting - 0 views

  •  
    This website, although directed towards artists, is still very useful for anyone trying to create visual emphasis. The ideas are the same for either, whether you paint it or piece it together. The part I like best is that it shows specific examples and how and why those work. There are also links that lead to similar concepts on how to make things visually appealing.
  •  
    Here is an article about creating emphasis in your work. Even though the article is aimed towards painting the same basic principles can be applied to anything. It gives visual examples with each tool for creating emphasis in your work.
Franz Ferguson

DD#6HW#1Red.jpg (1024×687) - 0 views

  •  
    This photo shows the repetition of color and how i draws attention to the hair of all the women in the crowd. The technique used in this form of repetition was the technique of visually and conceptually related images. The visual aspect is the red hair and fair skin of the women within the photo. The conceptual aspect is all the same hair and skin type people gathering together creates a sense of repetition.
anonymous

DD#6 HW#1 -Developing Visual Rhythm in Web Design - 0 views

  •  
    D6 HW1- Don't be fooled by the Rhythm instead of repetition, this website does talk about using repeating items or patterns to bring unity and motion to the design. This website takes more realistic visual aides as examples. Helping to apply the pronciples of repetition to a busier, and more typical, design.
samantha negrin

Lyrics, albums, songs, artists and more music | LetsSingIt - 0 views

  •  
    I think this website displays balance because of the visual weight of the headline. It's definitely a good choice for the site, the title and what they want people to remember is large and bold "LetsSingIt" and underneath in a much smaller, italic font it reads "your favorite music community" - it has less visual weight. 
1 - 20 of 112 Next › Last »
Showing 20 items per page