Design ToolKit

Our readings for this module discuss visual/graphic tools of design and visual design. Select a topic of your choice from the readings, and discuss its importance to information design. Find at least one excellent example on the web to support your discussion. Research design tools such as mapping applications, concept mapping, social media tools, 3D virtual world tools, and any other application that may be used in the design and presentation of information. Include at least one tool of information design as part of your discussion.

 

Considering the path, I was taking as a Web Designer, a lot of the design concepts of Kim Baer’s Chapter 4 really fit.  Let me reiterate, I’ve been weighing a lot about my direction in life and found that with my education on Web Design & Development how closely related this Module is with that class.  I think, considering that I am going in a different direction that these two classes are something I can use later on regardless the direction I finally take.  Having said that I chose Kim Baer’s Chapter 4 Design ToolKit.

 

I came across a great example and breakdown of Visual Design Basics that I believe is definitely a concept of Visual Design.

 

Below is the copy of the page and I will have the citation at the conclusion of this posting:

 

Visual Design Basics

Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.  A successful visual design does not take away from the content on the page or function.  Instead, it enhances it by engaging users and helping to build trust and interest in the brand.

Basic Elements of Visual Design

The basic elements that combine to create visual designs include the following:

  • Lines connect two points and can be used to help define shapes, make divisions, and create textures.  All lines, if they’re straight, have a length, width, and direction.
  • Shapes are self-contained areas.  To define the area, the graphic artist uses lines, differences in value, color, and/or texture.  Every object is composed of shapes.
  • Colorpalette choices and combinations are used to differentiate items, create depth, add emphasis, and/or help organize information.  Color theory examines how various choices psychologically impact users.
  • Texture refers to how a surface feels or is perceived to feel. By repeating an element, a texture will be created and a pattern formed. Depending on how a texture is applied, it may be used strategically to attract or deter attention.
  • Typography refers to which fonts are chosen, their size, alignment, color, and spacing.
  • Form applies to three-dimensional objects and describes their volume and mass.  Form may be created by combining two or more shapes and can be further enhanced by different tones, textures, and colors.

Principles for Creating a Visual Design

A successful visual design applies the following principles to elements noted above and effectively brings them together in a way that makes sense.  When trying to figure out how to use the basic elements consider:

  • Unity has to do with all elements on a page visually or conceptually appearing to belong together. Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
  • Gestalt, in visual design, helps users perceive the overall design as opposed to individual elements. If the design elements are arranged properly, the Gestalt of the overall design will be very clear.
  • Space is “defined when something is placed in it”, according to Alex White in his book, The Elements of Graphic Design. Incorporating space into a design helps reduce noise, increase readability, and/or create illusion. White space is an important part of your layout strategy.
  • Hierarchy shows the difference in significance between items.  Designers often create hierarchies through different font sizes, colors, and placement on the page. Usually, items at the top are perceived as most important.
  • Balance creates the perception that there is equal distribution.  This does not always imply that there is symmetry.
  • Contrast focuses on making items stand out by emphasizing differences in size, color, direction, and other characteristics.
  • Scale identifies a range of sizes; it creates interest and depth by demonstrating how each item relates to each other based on size.
  • Dominance focuses on having one element as the focal point and others being subordinate.  This is often done through scaling and contrasting based on size, color, position, shape, etc.
  • Similarity refers to creating continuity throughout a design without direct duplication. Similarity is used to make pieces work together over an interface and help users learn the interface quicker.

Example of Pulling it all together

Applying design principles to the basic elements can seem overwhelming at first but once you start pulling a page or concept together, it becomes easier.  Below is an example homepage that features some of the principles in action:

  • Color contrast was applied to the logo making the word “stop” stand out
  • Text spacing and size creates a visual hierarchy
  • Featured image in the carousel dominates over the smaller images below it to create a focal point
  • White space is used around text and between sections to allow the page to breath
  • Textured background to helps the elements on the page stand out on top of it
  • Map showing scale
  • Lines to divide sections
  • Shapes to create buttons

 

 

 

The above clearly points out all the steps I have had to take while taking my Web Design & Development class.  I want to take it a bit further though.

With Kim Baer’s Chapter 4 Design ToolKit she broke down each toolset into categories.

 

Color:    An extremely important tool for an Information Designer.  (Personally, I think it is important for anyone or any type of designer) Color is a very effective way to convey differentiation.  She gives a perfect example of when we first learned a red light means stop and green means go.  Color can also provide a sense of wayfinding, allowing readers to scan text and quickly isolate elements such as subheads and bullets. (Baer, pg.90)

Put it this way color can be used as an eye popper on websites like the one I have shown above with the Stopbullying.gov.  It is clear and as concise as a red light on a stop light.

 

Type Styling:      The styling of type is another key way to differentiate types of information and establish a sense of hierarchy.   Put simply you can utilize what type of fonts, highlighting, bold, italics, and size to help with your type styling.  As shown earlier I used Arial type font, size 12, italic, and highlighted in yellow.  These are things needed when setting up any type of page whether it is a paper, website, spreadsheet, banner, or whatever type document is needed.  With websites though I’ve read enough to know that consistency is the key.  Too much leaves the web page looking cluttered or disorganized.  Well, in my opinion, it makes it look like a website I would pass over than one who kept it consistent, eye catching, and more importantly legible! (Baer, pg. 94-97)

Weight and Scale:           This was rather interesting especially considering Dan Roam’s insistence on visuals being necessity rather than a reluctant use for any business tactic.  Why mention his strategic ethics here?  Well, consider Amazon for a second.  You browse the pictures.  Sure you put in what you are looking for which is words, but ultimately your eye narrows on the picture or your desired pick.  I have read that this is something most humans do as well.  Skimming.  Pictures and visuals help us achieve this.  With weight and scale, and as a way to scan quickly, humans scan patterns and differences.  Changes in the weight and scale of artwork and typographic elements can signal certain pieces of information that can be prioritized.  By using Type and Color this can easily clarify complex hierarchy.  With each of the designs on the pages Baer, 99-101 you can clearly see the example of this.  Quoting Simon Johnston “Graphic design is a form of translation”.  I want to add to that and say it pops out and allows us to read the necessary information.  With the graphic it tells that story. (Baer, pgs. 98-101)

 

Structure:            I’m actually learning this in Web Design & Development.  Effective white space and carefully planned grids can definitely help space out information and help a reader navigate through complex information.   Whether it is writing, multimedia, art, or the organization of an exhibit—can convey additional meaning.  I know I’ve struggled with this a tad due to some web pages also consisting of passive space and how it is seen on other devices.  My computer can have settings that I don’t see passive space, but on another I see it.  Phones and tablets have their own integration from web to device.  How does this relate to structure?  Well, in just about everything we do we need a layout.  When spaced it can draw the reader or user in.  It allows them to navigate quickly and efficiently.  If there isn’t a flow, you can lose the focus of the viewer/reader.  With structure it can allow a client, customer, viewer, reader, to update content easily without sacrificing the integrity of the original design.  This is especially important to web design developers.  Something I’m currently learning about!  And, as you will see from the above content I posted above on the Stopbullying.gov it shows the structure of the content of the web page.  (Baer, pgs. 102-103)

 

Grouping:           Clustering information can help readers locate their information quickly whether it is simplistic or complex.  Multiple entry points allow the reader to absorb information as visual sound bites.  The grouping of information can also signal hierarchies of importance, particularly when used in conjunction with changes in color, weight, and scale.  I am sensing a pattern within Baer’s ToolKit.  This is something I’ve learned a bit, not as much, in my Web Design & Development class.  However, interestingly enough I learned this in the last of my class in Photoshop Introductory Class.  It helped me recognize how a web design page can be grouped by each hierarchy or grouping page.  I like to think of them as sub-categories to categories of information.  As stated above on the Web page Stopbullying.com you can see the hierarchy of information.  I had to wonder if Moodle can be conveyed in the same way with grouping.  You click to get to the page you need and from there you absorb the information and continue on to the next piece of information.  I think all the Basic toolkits are becoming apparent and crucial as a whole.  I think Blogger and WordPress can be a good example of grouping.  They might not be perfect by any means, but essentially the hierarchy of grouping is very much defined by sidebars and the structure.  (Baer, pgs. 106)

 

Graphic Elements:          Not my favorite topic, but here goes.  I would have to say this goes hand in hand with Dan Roams ‘The Back of the Napkin’.  Lines, rules, bullets, and other devices are tools designers still use to purposefully attract the eye.  I think my problem comes with integrating the information to formulate the all-powerful vision Dan Roam insinuates with his drawings of data to picture.  I think that is where I fell short on the drawing.  Graphic Elements suggest graphs, visuals aids, and data.  But, leaving the graphic element aside, it’s the graphic shapes that draw attention to the messages.  It can be a hierarchical tree, timeline, or even graphic icons as a key legend that can give importance of the information.  I’m not a beer drinker (I know gasp, shocker…but I think it’s taste is frankly like how I can’t stand coffee…another gasp, I know).  However, the picture on Baer, 112 is a great example of graphic elements.  Even despite the complexity, the two page does an excellent job with careful detail and eye-catching visual interest.  (Baer, pgs. 110-113)

 

Imagery:              About the best part of Baer’s ToolKit!  I may not be a drawer, but visual aids are about the best thing to keep one’s attention.  I have to agree with the paragraph Baer says: Reader studies show that the marriage of text and image is one of the most powerful ways to help a reader retain information.  Publications know a “flip through” reader may not read paragraphs of text, but will very likely read a caption for an intriguing image.  Designers can also help distill information by creating effective graphics.  Hmm, well, considering graphic elements isn’t my best suit, but imagery is one would wonder why?  I thought so too!  I think it is the getting to the graphic element that isn’t something I prefer, but the results and the imagery of putting it out there, that does.  You basically have a graphic element like a picture and integrate it with the basis of why you have that picture up.  Example: Deep sea photography and on the side of it the technical information for a catalog for a wetsuit.  I think imagery like that can also be used for shopping sites like Amazon to name one.  It is a tool that helps readers narrow on what they want or could want.  I think this is a great way for boosting up sales or advertising like it’s done for a good majority of things people will want or need. (Baer, pgs. 114-117)

 

Sound and Motion:         I think is the most important part to keep an individual intrigued.  However, I think it should be done meticulously and not overboard.  Interactive media provides two additional tools—sound and motion.  Statistically, it has been proven that most retain information by sound, while others rely more on visuals. Combining sound with graphic devices can have a powerful effect.  With anything given by motion and sound it leaves a mark and creates a sense of narrative that is memorable.  I think the best example to that would be a pregnant mother using sound to calm or sing to her unborn child.  Or that child who is now old enough to understand words listens to the sound of a voice while reading to them.  With this enhancement this allows those with impairments to peruse just as one with all of their senses.  I think we have gone leaps and bounds with this ToolKit. (Baer, pgs. 118-121)

 

Now that I have gone through each of these and compared it to usability.gov I have to say that it is all cohesive.   I can go as far as to say that even with Dan Roam’s and Jacobson’s that all of Information Design is interrelated, it’s just the way it’s conveyed and up to interpretation.

 

Citation:

Baer, Kim, and Jill Vacarra. Information Design Workbook: Graphic Approaches, Solutions, and Inspiration 30 Case Studies. Beverly, Mass.: Rockport, 2008. Print.  (Chapter 4 pgs. 89-121)

“Visual Design Basics.” Visual Design Basics. N.p., n.d. Web. 30 Nov. 2015. <http://www.usability.gov/what-and-why/visual-design.html&gt;.

Minimally used citation:

Jacobson, Robert. Information design. MIT press, 2000.

Roam, Dan. The back of the napkin (expanded edition): Solving problems and selling ideas with pictures. Penguin, 2009.

 

 

 

               

 

Advertisements

Posted on December 6, 2015, in ESC, School and tagged , . Bookmark the permalink. Leave a comment.

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 )

Connecting to %s

%d bloggers like this: