Elements of Visual Appeal

 

Contrast

“Contrast is often the most important visual attraction on the page ­-it’s what makes a reader look at the page in the first place.” –pg. 3

When there are a lot of elements on a page that are very similar visually, it’s harder for the viewer to pinpoint where their attention should be, and know which elements are more important than others. Over all it makes the page appear to be one big muddled mass that is hard to digest. By intentionally using different styled elements in a strategic way, the page becomes more visually interesting and easier to read, because the contrast breaks the page into smaller chunks.

Good Example: This website uses mostly color contrasts to section out different areas and links, but there is also contrast in the type that makes it more visually appealing as well. EducationWorldScreen Shot 2016-02-21 at 7.11.12 PM
Bad Example: This website had very little contrast. It might be the look that they were going for as a art museum, but everything appears very muted and unimportant on their website. PomonaScreen Shot 2016-02-21 at 7.11.24 PM

 

Repetition

“You can repeat colors, shapes, textures, spatial relationships, line thickness, fronts, sizes, graphic content, etc. This develops the organization and strengthens the unity.” –pg. 3

Repetition is very important because it is what ties a page together and makes it feel cohesive and unified. Much like when a page has no contrast, when there is no repetition the page also becomes more difficult to understand but for the opposite reason. Instead of one big mass, with no repetition it is broken up into too many different pieces and becomes a cluttered mess. There are many different ways to create repletion, such as with color, fonts, shapes, etc. but you don’t need to use all of them to create effective repetition.

Example 1: This site has a strong design because the colors and shapes are being repeated throughout and tying it all together. SproutSocialScreen Shot 2016-02-21 at 7.11.42 PM
Example 2: Some of the colors are repeated on this webite, but the shpaes and type and images are overall so different that nothing feels like it fits togetetr well. The Teachers Guide Screen Shot 2016-02-21 at 7.11.49 PM

 

Alignment

“Every Element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.” –pg. 3

When it comes to placing the elements on the page, attention needs to be paid to how the elements line up with one another. When the visual elements line up well, it guides the viewer effortlessly around. When there is no attention paid to how the elements line up however, the page becomes almost like a maze and it can make the viewer feel confused about where their attention should go next. Using a clear grid when designing the layout is the most effective way to keep everything well aligned.

Example 1: Websites like notcot.com make great use of the grid to show many different posts on one page. notcot Screen Shot 2016-02-21 at 7.11.58 PM
Example 2: There doesn’t seem to be any consideration for alignment applied to this website. SuzanneCollinsBooks  Screen Shot 2016-02-21 at 7.12.06 PM

 

Proximity

“When several items are in close proximity to each other, they become one visual unit rather than several separate units.” –pg. 3

After making sure that the grid is set up and the elements line up with it, it’s important to then set the proximity of the elements to one another so help build and even more solid structure for the page. Elements that should be viewed together, such as list items, should be places closer together to emphasize that they belong together. While there should also been a good amount of special separation between elements and section that are different from one another.

Example 1: This website clearly separates out each section of text in an easy to read and visually appealing way. BenLind Screen Shot 2016-02-21 at 7.12.20 PM
Example 2: It’s hard to understand what is going on with this website when most of the texts and links seem crammed to one side while there is so much more under utilized space. Art.YaleScreen Shot 2016-02-21 at 7.12.27 PM

Image Content: Clear subject

“In a simple photo, its subject is clear. Don’t leave your reader wondering.” –pg. 136

When people view images online, they only want to see the details that they need to in order to understand what the image is about. Busy photos take longer to take in and understand and that can cause the viewers to feel a bit frustrated with it. When shooting or choosing images to use online, there needs to be more attention paid to the details, and making sure that none of them are unnecessary or overly distracting to the actual subject. When using photos of people, it’s also good to use action photos because they create more visual interest.

Example 1: These photos are al stills from movies, but all show people in action, which makes the photos more compelling. AGoodMovieToWatch Screen Shot 2016-02-21 at 7.12.45 PM
Example 2: It’s hard to tell in the photos exactly what you are looking at, and in some the subject seems blocked by plants block the subject and the contrast makes it seems messier of a scene than it probably is. MakeWayForPeople Screen Shot 2016-02-21 at 7.12.52 PM

Image Content: A well-composed photo 

“To qualify as a good photo –one that will be a compelling addition to your document –the photo also needs to be well composed.” –pg. 138

In addition to making sure the subject of a photo is clear and simple to see, it’s also important to make sure that the image has a good and compelling composition. There are a few simple ways to enhance a photo, by simply adjusting the composition a bit. It’s a good rule of thumb to have the subject places in a way that creates an asymmetrical balance, and that they fill the frame tightly. It’s also good to make sure the lighting provides a good range of lights and darks, and that any elements in the photos that create lines for the viewers eyes to follow don’t take them straight out of the photo.

Example 1: This website makes great use of well composed photos to create an emotion connection with the viewer. HelmanAfgn Screen Shot 2016-02-21 at 7.13.01 PM
Example 2: A lot of the photos on this site are busy just have too much going in in them. ThisLittleClassOfMine Screen Shot 2016-02-21 at 7.13.15 PM

 

Web Graphics

“Resolution is extremely important when it comes to digital images. If an images doesn’t have high enough resolution –usually expressed in dots per inch (dpi) or more accurately pixels per inch (ppi) –the image will appear pixelated and fuzzy in the final output.” –pg. 138

A web graphic’s resolution and file format are important and somewhat complex things. There are a lot of different file formats, which all do somewhat different things, but JPGs, GIFs, and PNGs are the main ones to use for web graphics. And while images that will be used on the web don’t need to be as high a resolution as images for print (only 72dpi, compare to 300pdi for print), issues can arise with the image quality when they become resized. Making a smaller image even just a bit larger can cause it to appear blurry and more pixelated.

Example 1: When thinking about amazing high quality photos, national geographic is the first thing that comes to mind. They are possibly most well known for the quality of photo they use in print and online. NationalGeographic  Screen Shot 2016-02-21 at 7.14.07 PM
Example 2: This is a decent website but most of the photos used seem blurry and lo quality. ThisWorldRocks Screen Shot 2016-02-21 at 7.14.15 PM

 

Choosing more than one photo 

“Once you’ve eliminate any poor quality images from consideration, your next step is to look at your potential images with an eye towards contrast …in the image content.” –pg. 143

When using more than one image, it’s good to think about the story that the images tell together. One image should serve as a sort if introduction, which has a more broad subject that sets the scene and gives the viewer a better overall understanding of the content. The other images should take the viewer deeper into the story and give more detailed information, with more focused subject matter. For example using a wide shot, and then a couple close up shots together is a good way to present the images together without repeating content in an unnecessary way.

Example 1 Good: This crafting tutorials are the perfect example of how tho tell the story through images. It starts with a general shot, then a series of detailed images, and ends with another shot of the completed project. ApartmentTherapy Screen Shot 2016-02-21 at 7.14.27 PM
Example 2: While the images are all lovely, and they seem to fit the same general style, it’s not comeletly clear how they are linked. Some shots are close up, but those are not of details from the other general photos. BloodAndChampagne Screen Shot 2016-02-21 at 7.14.54 PM

 

Illustrations

“Illustrations are often the best choice, if not the only choice, for a design project.” –pg. 150

Using photography on web pages is great when the subject matter requires that level of realism –like journalistic street photography for news articles. But for some topics, photography might be too limited to accurately depict what the content is about. This is especially true with topics like fantasy where the subject is something that simply does not exist, or when the subject is something non-tangible, like psychology concepts. Illustrations can be created in many different styles and the different styles can communicate different feelings to the viewer, which can enhance a web pages overall message.

Example 1: Many news sites use illustration for articles that are hard to use photographs for. Popular science often post articles on topics for which photographs would be impossible. PopSci Screen Shot 2016-02-21 at 7.15.01 PM
Example 2: There are a lot of cute illustrations used on this page, but maybe a bit too many. CarbonMade Screen Shot 2016-02-21 at 7.15.07 PM

 

Clip Art 

“If you really want to use clip art, visit a digital stock site to purchase something appropriate.” –pg. 152

For the most part clip art is something that should be avoided at all costs. The clip art that comes preinstalled with many programs is always poorly designed and any viewer who sees it being used will know there wasn’t more care put into the design of the page and take it’s content less seriously. There are some websites that sell illustrations that are typically better designed and are a good alternative to clip art if some simple clip art style illustration is still needed.

Example 1: This website doesn’t use illustrations that are straight from the old clip art galleries, instead it uses custom illustrations that are more completing and stylish than any clip art could be. AdobeKnowHow Screen Shot 2016-02-21 at 7.15.17 PM
Example 2: The images on this site might not all be exactly clip art, but the quality is still low and there is no cohesive style, so it’s basically just as bad. FunBrain Screen Shot 2016-02-21 at 7.15.25 PM

 

Video and multimedia components

“Video and animation make excellent focal points because they include the eye-catching element of motion.” –pg. 153

Using video or animation on a webpage can add a lot of dimension to the page, but it also requires more planning to make sure that it works well with all the other content on the page. For one thing, it needs to have the same style as the other elements so it doesn’t seem like an out of place after thought. It’s also then important to make sure the video or animation itself is well designed and transitions smoothly so it doesn’t become too distracting for the viewer.

Example 1: The animation on this website is so smooth that you don’t totally realize that you are watching an animation when it first loads. Ot24 Screen Shot 2016-02-21 at 7.15.31 PM
Example 2: This site uses a video in the main content, but it takes forever to load, then had a an ad, and then starts with some graphics that don’t totally relate to the content before getting to the real topic. AOL  Screen Shot 2016-02-21 at 7.15.45 PM

 

Type as image 

“As design elements, letterforms are fantastic. Set alone, or as individual words, letterforms can have the same compositional impact as photos.” –pg. 154

Typography has a lot of possibilities when it comes to enhancing a design beyond simply picking a font to set chunks of text in. Text can also be used as a visual element in ways that are similar to photos or illustrations to draw the viewer’s attention and highlight certain points. One way to use more visually interesting type is to deign a headline to stand out even more from the rest of the text. Another way is to use well-designed pull quotes set apart from the main text.

Example 1: The color of this site is a bit bright, but the typography is what takes center stage and works well as images. IAmAlwaysHungry Screen Shot 2016-02-21 at 7.15.51 PM
Example 2: The typography on this page is a bit all over the place. The logo and headlines are supposed to be fun, but the design is so poor that it doesn’t read well. AtoZTeacherStuff Screen Shot 2016-02-21 at 7.16.00 PM

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s