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
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
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.
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.
This website explains how to use images correctly in your web pages/blogs. It is very in depth because it talks about using images from sites like Deviant Art and Flickr creative commons.
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.
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 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).
Repetition is visually exemplified here. A floral design in a abstract scrapbook image shows repeat squares and flower shaped images conservatively spread out. They review points such as shape, type, weight, and color (etc). All of which bring "unity" according to the text.
Repetition is visually exemplified here. A floral design in a abstract scrapbook image shows repeat squares and flower shaped images conservatively spread out.
Contrast: focal point is an image of a laptop, aligned to the left with its description to the right. Gives a lot of empty space around it to make it your main focus. Besides the focal image other images pop against the black background.
Repetition: Menu items are linked blue at the top of the page. Smaller unimportant items linked blue and smaller at the bottom.
Alignment: Everything is aligned to the left in each group.
Proximity: Under focal point are 4 groups with category titles that you can click to enlarge to see different related aspects of the site.
This is a great site to reference because there are real videos to check out as examples. The first one includes links to other short videos that are a part of this persons video resume.
In today’s highly competitive job market, creating the right video resume to accompany your traditional CV can make you stand out from the crowd. The wrong one, though, can make you a laughing stock.
1. Make Sure It’s Appropriate
3. Keep it Short
4. Don’t Be Afraid to Be Creative
5. Make Sure It Passes the Share Test
2. Don’t Just Read Out Your Resume
Don’t just create
a video resume because you can, create one because it’s relevant to the job you
want to do.
If you’re applying for a role in the online, media, social or creative
professions, then it’s more likely a decent video resume will have the desired
effect, i.e., getting you invited for an interview.
Don’t send a video resume to a more traditional type of company that won’t
“get it.” You might do your chances more harm than good.
Graeme Anthony, from the example above, is a public relations executive. His
cleverly thought out online content adds an extra wow factor to his already
outstanding experience.
2. Don’t Just
Read Out Your Resume
The whole point of a video presentation is to offer a potential employer
greater insight into you than a traditional resume can, so
just reading
aloud the contents of your CV is a waste of everyone’s time.
Use the video to help the employer get a sense of not just what you have
achieved, but what you are capable of achieving in the future.
“Tell them why you would be the right person to hire and what you can do for
them,” says Mario Gedicke, account manager at Mayomann.com, a video employment platform.
You can, however, highlight particularly relevant info from your resume.
“Focus on your experience and skill set (and possible education/training)
especially relevant to the position,” advises Tyler Redford, CEO of resumebook.tv, an online resume management system.
And if it’s appropriate and relevant to the job (as in the example above),
then don’t be afraid to talk about your passions.
3. Keep it
Short
“Keep your video resume short,” says Gedicke, who advises that a
one-minute mark
is ideal.
Redford agrees that a video resume should be “short and
sweet.” He suggests staying within two minutes.
“Keep in mind that recruiters would likely want to use the video resume as an
initial filter for applicants,” Redford says. “However, recruiters do not
typically want to use the video resume in lieu of a real, in-person
interview.”
Think of your video resume as your own personal teaser trailer. In the
example above, the clip is less than one minute and 20 seconds in length, while
the extra time is made up of a
bloopers reel
accompanied with credits, a clever way to show off your personality (and that
you don’t take yourself too seriously).
4. Don’t Be
Afraid to Be Creative
If you’re opting for a video resume, then go the whole hog and make it
spectacular. Be creative, whether that’s with the concept of your pitch, use of
humor, clever production values or brilliant editing.
However, stay classy. “
Be creative, but
professional. Do not deviate too much from the demeanor you would have in the
workplace
,” says Redford. Gedicke suggests this should extend to your
wardrobe too: “Dress professionally, just as if you are going to an in-person
interview.”
In the video above, James Corne creates a spoof AA-style confession, but
maintains a certain veneer and dresses like he was headed to the office. This
demonstrates creativity and humor whilst showing him to be a professional
person.
5. Make Sure It
Passes the Share Test
As with all online life, don’t put content out there that you wouldn’t be
prepared to see go viral. It’s unlikely your video resume will become an
overnight Internet sensation, but imagining that scenario is a good test to make
sure you could cope if it did.
Imagine your
friends and family watching the clip. If the thought of that embarrasses you,
then don’t submit it.
Digital Marketing Job Listings
Every week we put out a list of social media and web job opportunities. While we post a huge
range of job listings, we’ve selected some of the top digital marketing
opportunities from the past two weeks to get you started. Happy hunting!
If
you’re applying for a role in the online, media, social or creative
professions, then it’s more likely a decent
video resume will have the desired
effect, i.e., getting you invited for an
interview.
. Keep it
Short
3
If
you’re opting for a video resume, then go the whole hog and make it
spectacular. Be creative, whether that’s with
the concept of your pitch, use of
humor, clever production values or brilliant
editing.
However,
stay classy. “
Be creative, but
professional. Do not deviate too much from the
demeanor you would have in the
workplace
,” says Redford. Gedicke suggests this should
extend to your
wardrobe
too: “Dress professionally, just as if you are going to an in-person
interview.”
In
the video above, James Corne creates a spoof AA-style confession, but
maintains a certain veneer and dresses like he
was headed to the office. This
demonstrates creativity and humor whilst showing
him to be a professional
person.
5. Make Sure It
Passes the Share Test
As
with all online life, don’t put content out there that you wouldn’t be
prepared to see go viral. It’s unlikely your
video resume will become an
overnight Internet sensation, but imagining that
scenario is a good test to make
sure you could cope if it did.
Imagine your
friends and family watching the clip. If the
thought of that embarrasses you,
then don’t submit it.
Digital
Marketing Job Listings
Every
week we put out a list of
social
media and web job opportunities
. While we post a huge
range of job listings, we’ve selected some of
the top digital marketing
opportunities from the past two weeks to get you
started. Happy hunting!
As
with all online life, don’t put content out
there that you wouldn’t be
prepared to see go viral. It’s unlikely
your
video
resume will become an
overnight Internet sensation, but imagining
that
scenario
is a good test to make
sure you could cope if it did.
Imagine your
friends and family watching the clip. If
the
thought
of that embarrasses you,
then don’t submit
it.
Digital
Marketing Job Listings
Every
week we put out a list of
social
media and web job
opportunities
. While we post a huge
range
of job listings, we’ve selected some of
the top digital marketing
opportunities from the past two weeks to get
you
started.
Happy hunting!
This was the best and my favorite page that I found on the topic of video Resumes. It goes through 5 simple tips to making a successful video resume and gives an example of each of those 5 tips. The tips are making sure its appropriate, Don't just read out your resume, Keep it short, don't be afraid to be creative, and making sure it passes the share test. A great source and a great page.
This article discusses 5 tips for creating a video resume and it gives a video resume example that best fits that specific tip. The first tip is to make sure the video resume is appropriate by making sure its relevant to the job you are applying for. The second tip is not to just read out the resume but highlighting specific information in the resume that is relevant to the postion you are applying for. The third tip is keep it short by staying within 2 minutes. The fourth tip is to be creative and the last tip is not to create a video that would bring shame to yourself.
This website gives five tips for creating effective video resumes. The five tips are extremely helpful to those looking to create a video resume but aren't sure what should be included or where to start.
DD10 HW 4 This website provides five different ways to ensure video resume success. The videos apply to what they are talking about and then there is a brief written explanation.
According to this article, making a video resume can be a challenge. It offers five tips from "pros in the know," plus actually sample video resumes. The first tip is to make sure a video resume is appropriate. A video resume may be acceptable for certain professions and wrong for others. Secondly, do not just read from the resume. The point of a video resume is to present some additional insight into your character and capabilities. Next, keep the video short, around one minute. Four, don't avoid creativity; let your personality shine through. Finally, if you wouldn't want your family or friends to see the video, then don't submit it.
The top five tips to create an impressive video resume are:
1.Make sure it is appropriate
2.Don't just read your resume out loud
3.Keep it short
4.Don't be afraid to be creative
5.Have several peers edit it before sending it out
I really like this website gives good tips to create a good video resume. You really have to think on making it appropriate, and not just read out of the resume, also keeping it short. Another tip was also to be creative and make sure it passes the share test. Really good tips, and has a video for each and good explanation.
The information found on this website will help to create video resumes that stand out yet are appropriate. The website gives 5 tips through videos to help you such as, making sure it's appropriate, not just reading out your resume, keeping it short, creative, and making sure it passes the share test. With these tips, one would be able to create a video resume that is to the point and sticks out as well.
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)
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!
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.
This site rehashes over a few of the principles of new media and gives a more visual look at them. Which is much more pleasant to me than just a wall of text!
This website is very interesting because it talks about the five principles of New Media. It provides images as examples and it explains how each principle is composed and the content the images have.
New media rely on digital technologies, allowing for previously separate media to converge. Media convergence is defined as a phenomenon of new media and this can be explained as a digital media.“
he most prominent example of media convergence is the Internet, whereby the technology for video and audio streaming is rapidly evolving. The term convergence is disputed, with critics such as Lev Manovich pointing out that the 'old' medium of film could be seen as the convergence of written text (titles and credits), photography, animation and audio recording
New Media has become a significant element in everyday life. It allows people to communicate, bank, shop and entertain. The global network of the Internet, for instance, connects people and information via computers.[3] In this way the Internet, as a communication medium of New Media, overcomes the gap between people from different countries, permitting them to exchange opinions and information. Diverse means for this exist even within the context of the Internet, including chat rooms, Instant Messaging applications, forums, email messaging, online video and audio streaming and downloads, and voice-over-internet telecommunications. New Media is defined not only as a communication tool, but also as a tool for the commercial exchange of goods and services.[
transition to new media has seen a handful of powerful transnational telecommunications corporations who own the majority achieve a level of global influence which was hitherto unimaginable.
new media follows the logic of the postindustrial or globalised society whereby 'every citizen can construct her own custom lifestyle and select her idology from a large number of choices. Rather than pushing the same objects to a mass audience, marketing now tries to target each individual separately.'
"virtual communities" are being established online and transcend geographical boundaries, eliminating social restrictions. Rheingold (2000) describes these globalised societies as self-defined networks, which resemble what we do in real life. "People in vi
rtual communities use words on screens to exchange pleasantries and argue, engage in intellectual discourse, conduct commerce, make plans, brainstorm, gossip, feud, fall in love, create a little high art and a lot of idle talk"
New Media has been used extensively by social movements to educate, organize, share cultural products of movements, communicate, coalition build, and more.
New media can be defined not only as things you can see such as graphics, moving images, shapes, texts, and such. It is also things that cannot be seen, such as a Wi-Fi connection. Like radio or electricity, no one can see the Wi-Fi waves in the air floating through the air. But the Wi-Fi concept can be considered new media. So new media can be either concept-based, refer to a solid object, or both.
Any individual with the appropriate technology can now produce his or her online media and include images, text, and sound about whatever he or she chooses. [27] So the new media with technology convergence shifts the model of mass communication, and radically shapes the ways we interact and communicate with one another.
even some forms of digitized and converged media are not in fact interactive at all
"the global interactive games industry is large and growing, and is at the forefront of many of the most significant innovations in new media" (Flew 2005: 101). Interactivity is prominent in these online computer games such as World of Warcraft and The Sims. These games, developments of "new media", allow for users to establish relationships and experience a sense of belonging, despite temporal and spatial boundaries. These games can be used as an escape or to act out a desired life. Will Wright, creator of The Sims, "is fascinated by the way gamers have become so attached to his invention-with some even living their lives through it" [30]. New media have created virtual realities that are becoming mere extensions of the world we live in.
The advertising industry has capitalized on the proliferation of new media with large agencies running multi-million dollar interactive advertising subsidiaries. In a number of cases advertising agencies have also set up new divisions to study new media. Public relations firms are taking advantage of the opportunities in new media through interactive PR practices.
New media can be seen to be a convergence between the history of two separate technologies: media and computing.
new media can now be defined as "graphics, moving images, sounds, shapes, spaces, and texts that have become computable; that is, they comprise simply another set of computer data.
Flew (2002) stated that as a result of the evolution of new media technologies, globalisation occurs. Globalisation is generally stated as "more than expansion of activities beyond the boundaries of particular nation states".[6] Globalisation shortens the distance between people all over the world by the electronic communication (Carely 1992 in Flew 2002) and Cairncross (1998) expresses this great development as the "death of distance". New media "radically break the connection between physical place and social place, making physical location much less significant for our social relationships" (Croteau and Hoynes 2003: 311).
Old media
involve analog processes
as opposed to new media which sample media as a numerical representation in binary code.
This is the best article I've found for this topic. It discusses new media in relation to Manovich's article AND actually interrelates Flew's virtual communities article too! I thought that was pretty cool. It also gives examples of what new media is, and how it is affecting our communities through globalization and social change
NB:Good alignment is invisible. Most readers wont
conciously notice that everything is lined up neatly but
they will feel it when things are out of alignment
Alignment involves the visual effect of setting object or text in an order that is comfortable for the viewer and deliver proper impact. Edge and Center are main concepts. Fine points impact the placement of them object where it makes more sense and balances the picture.
Items can line up either along their edges or on their centers. Alignment
is used extensively to organize all graphic arts. Almost all text
uses alignment to organize lines of type. The letters align along their
bases and the lines begin (and/or end) along a line
There are two major types of alignment: edge and center.
EDGE ALIGNMENT
Any object with flat edge(s) can be used for edge alignment.
Rectangles are especially well suited for this since they have four flat
edges to align. Their right angels also give a sense of order to a composition
using them (similarity).
CENTER ALIGNMENT
Any shaped items can be organized using center alignment. Simple
shapes work best because it is easier to judge their centers so the alignment
is easier to notice.
FINE POINTS
The edges of information
within a picture can also align with other edges in a composition.
This technique can add subtle touches to a composition.
Centering in a negative space is a kind of alignment. This works
best when there is some other alignment to back up the centering.
Narrow strips of background between pictures
and text blocks are called gutters.
Inserts are words or images that overlap other images. They can
partially overlap or be completely inside. They make a compact package
of two or more sets of information and can conserve space or hide unwanted
areas in an image.
This website has a good definition of the alignment as well as it also provides various examples .Which enhances the understanding of this particular element.
This is a really great website which goes really in-depth about alignment.
It covers the basics, but also shows more subtle techniques, such as center
alignment on a vertical axis, center alignment in negative space with gutters
and alignment which occures within the actual pictures.
This webpage was helpful because it focused on alignment of images. This is beneficial because we are in the middle of reviewing and editing our comic tutorials. By placing your cursor over the images with red figures, you are also able to see the grid that was used which I thought was pretty cool!
Good website it talks about the two basic types of alignment and it gives good examples and pictures explaining each one. Edge and center alignment are the two basic types of alignment. Center alignment also refers to having a symmetrical balance.
I like this website because it features a lot of examples of alignment. It uses examples such as shapes and pictures. It also touches a little bit on the grid system, which I thought was neat! :)
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.
I think that the strongest point for this website would be its alignment and proximity
-columns and rows for easy reading
-proximity, the images are all grouped together for easy reading
-repetition, images and fonts are used consistently
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.
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.
I liked this website best because it illustrates the grid method explained in chapter 5. Also it notes that most designers forget about alignment as a design concept which I related to given my first draft of project 1 had no alignment concepts what so ever.
adds to the organization and usability of a web page
This page is more of a resource than an example of aligntment. The examples that Kayla(the author) shows looks like good examples however the resolution they were posted in makes it blurry and hard to judge. Kayla however breaks down in a few brief paragraphs how effective and important alignment is within an article, or project. One aspect that she hits on that makes a lot of sense to me is the images in alignment and how they can also be placed into alignment even though it is a photo. There is a lot more that goes into alignment that first expected.
This page goes into great detail about the importance of alignment, especially in web design. It also has many examples of alignment in different pages for you to see the effects.
This site gives some interesting views on alignment and some examples that I'm not sure I like. In saying that though I really do like some of the notes for instance, that there are many points to align to on a layout. It also is much nicer to use color contrast and other features along with the alignment.
This website is very helpful when it comes to explaining alignment. Even if you have other good elements going around your picture/website, it might look cluttered and there can be a bad use of alignment. This website gives you examples of how to use proper alignment in pictures and on a layout by using the lines, shapes, and contrasting colors.
This website showed various examples of balance in actual web pages. It showed the not only symmetrical and assymetrical balance but also vertical, horizontal, radial, and bileteral symmetry. The author, Stephanie Hamilton, explained how a "rule of thirds" should be used when designing an image. This is when an image is imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally spaced vertical lines. This is so important compositional elements are placed along these lines or intercections.
D#5, HW#1- I enjoyed this website for multiple reasons. First of all, I enjoy websites that start off defining the design element. In this case, alignment. Then, it continues on with examples of documents and even different real life examples including the benefits of the alignment changes. It compares before images with the after images just like the book does also.
This is a very clear and informative article about how digital images are developed and where the pixel comes into play. It simplifies the terminology so it is easy to understand. This article relates very well with several of Manovich's principles of new media.
This seems like an example of emphasis because of the big writing and promoting, it's bright and easy to read. Everything is also centered and has a bunch of "alluring" images.
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'.
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.
