Skip to main content

Home/ TWC301: Multimedia Writing/ Group items tagged web

Rss Feed Group items tagged

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.
Paul Angichiodo

Developing Balance in Web Design | Codrops - 0 views

  •  
    Goes in depth about balance and gives great examples
  •  
    I really liked this page, like the last one I posted for contrast this website goes into detail about each kind of balance and gives a picture example of each. It makes it really easy to understand seeing a web page picture or ad, which is what we mostly work with so it makes it easier to understand by showing pictures we relate to.
  •  
    Here is another article about balance in web design! This article is more focused on designing for your audience. It defines the types of balance as: horizontal, vertical, radial, symmetrical and asymmetrical. Each type of balance has examples from the web accompanied by a short description of how balance is achieved in each unique way. The article goes into the properties of balance as well, and has examples from the web to help define them.
Paul Angichiodo

Your Web Site Needs a Chiropractor: Alignment in Web Design | Forum One: Drupal and Ope... - 0 views

  •  
    Here is an article about alignment in web design. It goes into detail about the meaning of alignment and even some history about it. This article contains a lot of helpful advice if your looking for ways to improve your alignment while designing for the web.
anonymous

10 Principles Of Effective Web Design - Smashing Magazine - 0 views

  •  
    I found that this site closely related to the ideas and principals from chapter one of Basics of Design. The site specifically talks about the principles of effective web design and website usability. It talks about how the typical web users brain works and the proper design to get the most out of them. This site shows the effectiveness of simplicity in design and how to get the most out of the space which you are working with. Also it mentioned having effective writing through talking business and the use of bold/italics keywords. Lastly the site encouraged designers to not fear having blank/white space on their site and to communicate with language that is clear and consistent with the concept of the site. Friedman, Vitaly. "10 Principles Of Effective Web Design - Smashing Magazine." UX Design: Smashing Magazine. Web. 22 Aug. 2011. .
Rochelle Drinon

D#13.0, HW#1: Web design techniques and principles from Web Pages That Suck - learn goo... - 0 views

  •  
    I think that this is a really good resource. It lists a lot valid arguments for not doing or doing certain things as far as the design of your page goes. They detail why certain design elements are bad choices and how to avoid them. The site also contains a lot of images and videos that are examples of "web pages that suck." The website is pretty humorous, too.
Paul Angichiodo

The Principle of Contrast in Web Design | Tips - 1 views

    • Michael Clark
       
      I really liked this page because it shows some great examples to increase understanding of the concepts.
  •  
    This page explains contrast and its importance when creating visual interest. It discusses examples of contrast in web page design and how contrast in color, size, and alignment can be achieved.
  • ...7 more comments...
  •  
    I found this website to be packed with great information! It not only explained the different techniques used in contrast, but it lists various websites where they had applied it. They link it to the website too so when you click on it, you go to their website. At the very bottom of the website you also get more resources to other free weblayout designs and how to become a better blogger. I thought this was a great website!
  •  
    This is a very good site because it explains contrast as it pertains to color, alignment and size. There are also pictures of ads that go with each description-very professionally done.
  •  
    goes over some of the basics of contrast and gives some helpful hints
  •  
    I really liked this page, it went into detail explaining the principle of contrast and why it is important in your work. The page also shows many different web page examples that I think would be very beneficial for all of us taking this class.
  •  
    This very informative blog shows readers several awesome examples of contrast. The images displayed very clearly highlight the use of contrast and are great for beginners in design to see. The end of the blog post says to "Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious."
  •  
    This website offers tips for using contrast in web design. The author focuses on three aspects of contrast: color, size, and alignment. He presents some excellent examples of each. Color, for instance, is used in example to differentiate the header, content, and footer sections of the sample webpage. Size can be used to separate elements when the color scheme is limited. This author comments that alignment can be tricky, especially when using multiple alignments.  Centering a large paragraph is a "big typography no-no." However, centering a heading and then left-aligning the content paragraphs can work.
  •  
    Using alignment is tricky but very effect if done right.
  •  
    Here is another article about contrast in web design from WDL. This article is much like the first I shared as it uses various webpages as examples to illustrate the various types of contrast.
  •  
    This is a great website that highlights the different aspects of contrast, including alignment, color, and size. It also gives examples of how each of these are used.
Shannon Ridgeway

Web Design and Layout Tutorials, Graphics Design Tips, Web Site Style Guides, Expert We... - 0 views

  •  
    extensive information and articles about design and layout, especially in web design
Hector Garcia

Web Design: Tips for Effective Copywriting For Web Sites - Letchworth Web Designer and ... - 0 views

  •  
    Web Design
Paul Angichiodo

4 Types of Grids - Web Design Showcase | Template Monster Blog - 0 views

  •  
    Here is an article from template monster that discuses the different types of grids used in web design. The article defines each type of grid as well as showing multiple examples from the web where each particular grid structure was used.
Daniel Throckmorton

10 Principles Of Effective Web Design - Smashing Magazine - 1 views

    • Daniel Throckmorton
       
      Refer to step 1: Don't make users think.
    • Daniel Throckmorton
       
      This coincides with the design principle of emphasis.
  • “keep it simple”-principle (KIS)
    • Daniel Throckmorton
       
      I prefer KISS - Keep It Simple *Stupid
  • ...6 more annotations...
  • reduce the cognitive load
    • Daniel Throckmorton
       
      Coincides with the design principle of balance.
  • Users don’t read, they scan.
  • users search for some fixed points or anchors which would guide them through the content of the page
  • the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives
  • the web-page should be obvious and self-explanatory
  • The only element which is directly visible to the users is the word “free”
    • anonymous
       
      I agree and think that these are very good guidelines. You don't really think about them when you are reading different instructions, but when I look back it makes sense. I don;t really ever read anything untill it catches my eye and looks interesting. ONce I start reading if its to wordy or boring I stop reading, I don't to have to think to hard.
  •  
    This website lists "10 Principles Of Effective Web Design" that I believe are very useful. The images and information about where the users eyes fall and how to strategically organize your page are all helpful in designing not only blogs but any web page. These tips are very effective because they view everything from the users' perspective, saying things such as "users follow their intuition" or "users want to have control." I think that the aspects mentioned are good to take into account when design a site.
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
Mackenzie Voss

Web Design Tips: The Use of Balance | Webitect - 1 views

  •  
    This site is a good resource because it gives good examples and explanations as well as other great links to use as resources of balance.
  •  
    This was my favorite site found in my search for related content to chapter 4 of basics of design, and on the topic of balance. This site explains how important balance is in webdesign and how it make make a site look "good" and give it something extra. It talks about the different types of balance; formal. informal, and radial, and how to include them on your site or page. Lastly it explains that looking at examples can be a real help in learning to use balance in your design.
  •  
    Gives ways of balancing in web design. In order to balance the web page, you use contrasts in light (light versus dark), large designs versus smaller, and etcetera.
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.
Rebecca Jordan

D#3 HW1- C3 bookmark - 0 views

  •  
    I thought this site gave really good examples for web designs. It is particularly useful for me and the group because we are starting project one. Its gives good ideas on objects like logos, headers and how web sites/ pages should use correct contrast.
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.
Paul Angichiodo

25 Examples of Emphasis Applied in Web Design | Codrops - 0 views

  •  
    This website gives us 25 cool ways to put emphasis in our blogs. It also leads you to a link where Patrick (author) wrote an article on developing emphasis in web design.
  •  
    Here is an article on emphasis used in webdesign. It has 25 different examples of emphasis used in various webpages and it explains how it is used in each example as well. If you are into web design its a pretty interesting article.
Alex Portela

D#1 HW#13.2 - 0 views

    • Alex Portela
       
      The main concept in CH1 identifies the importance of the design process through various steps. This site specifies web site building application and how to make it simple for the average viewer.
  • REST In simple terms, REST is a set of principles for structuring a web application and RESTful refers to an application that follows those rules. Within a RESTful MVC application, controllers are limited to a standard set of actions to perform: Index—displays a list of items of a particular type Show—displays the details of a specific item New—displays a form for creating a new item Create—saves an item to the database using the data from New Edit—displays a form for editing an item Update—updates an item in the database using the data from Edit Destroy—removes an item from the database
  •  
    The main concept in CH1 identifies the importance of the design process through various steps. This site specifies web site building application and how to make it simple for the average viewer.
Heather Groen

D #4 HW #1 Asymmetrical balance in web design - 0 views

  •  
    This webpage explores asymmetry in web design. The author mentions that many websites use the technique of balancing a large image on one side with text on the other. He talks about how an image can be directly tied with the text, such as an example of a product, or it could be more decorative in that it plays off an idea presented by the site but doesn't necessarily reflect the product or service. This site also explores the use of backgrounds and how to perhaps make a common two-column design more unique.
Matthew Aber

D #2, HW #3, B - 0 views

  •  
    I stumbled on this page while looking for information on dominance in a web page. As it turns out this whole site has a cornucopia of supplemental information that would probably help out later on in the term. But this page in particular is great because they show simple black and white, literally, diagrammed explanations of how the idea really works.
  •  
    This web page discusses the concept of focal points, which is covered on page 26 in (Graham, 2005).
1 - 20 of 170 Next › Last »
Showing 20 items per page