Making sense of the rabbit hole... Hierarchy in design...
Nothing is wasted. I can't tell you how many times I've heard that said. And this holds true for design, I can tell you. Years ago, I worked in the newspaper business as a graphic designer among other things. Much of what I learned about good design was learned there through painful trial and error. During much of that time, I thought those mistakes were just wastes of time. Turns out that they were quite useful. They taught me about the importance of hierarchy in visual design.
I bring this up because this week in EdTech 506 we read about hierarchy in design. In layman's terms, using hierarchy helps you organize an image so that the reader knows what to read first. Hierarchy also helps you make visual sense of what's important in a graphic.
As Lohr explains in our book "Creating Graphics for Learning and Performance: Lessons in Visual Literacy," where we were born, what language we speak, and the arrangement of visuals all work together to help us understand the message of a graphic.
I'll give you a practical example from my newspaper days. You knew you had achieved something as a reporter if your story or ad was placed above the fold on the front page. This is prime real estate for newspapers because they are folded in half. Anything below the fold is out of sight. It might still be the front page, but you have to open up the paper. In other words, the hierarchy of importance on the front page of the newspaper goes in this order
Above the fold ===> Below the fold
Making Sense of the Rabbit Hole
Hierarchy tells us what to pay attention to. According to Lohr, some of the ways we know what to pay attention to are:
• How the text reads - left to right is common in Western society • What is on top - the headline is an example of this • Alternating light and dark on a series of lines - this helps separate individual information on a table • Separating information in a pie chart or graph • Color choices • Avoiding extraneous information • Putting words before numbers in statistics
All of these elements set up the reader's expectation for what comes next or below the information. They also bring clarity to lists.
Some of this information I knew before I ever started working on Wonderland Cafe. (Again, thanks to the work I did in the newspaper business.) However, it was good to be reminded of it as I worked on this week's assignment.
We've Been Down This Path Before...
As with the assignments that I have completed over the last several weeks, I built this week's lesson on some of the visual elements from the work I did in previous weeks. Before I move on and explain my rationale for my hierarchy assignments, I'd like to point out the visual elements that I borrowed from other assignments. I do this to maintain visual continuity over the project.
• Color schemes • The banner element at the top of the page • The arrows • The colored bars • The fonts
Additionally, I looked at the long-term requirements for this project - not just this week's assignment - but the overall project. One of the things that are required for the final project are three lessons. I started really looking at this part of the overall assignment this week, too.
Bringing It All Together
For that part, I combined the information from these two graphics to create the first lesson, which covers how to spot online predators.
This graphic introduces the idea:
This graphic gives you a place to write down what you learned:
And this week's graphic gives you the information so that you can fill out the sheet above.
From the Red Queen Down... Lessons in Hierarchy
As for the hierarchical elements that I used for this week's assignment, you can see:
• The use of a header - this includes the banner, which is a different shape than the boxes below it. Aside from adding visual interest to the piece, it stands out because it is different than what comes below it. • The arrows - they point in the direction that people in the Western world read. • The arrows and the boxes beside them read from left to right. • The shading on the arrows and the boxes alternates between light and dark to help you read the information better. • The lines of text alternate between shorter lines of text on the lighter boxes and longer lines of text on the darker boxes.
Last Thoughts Before Leaving Wonderland
The challenge that I had was the information itself, meaning that I am so used to having clickable links that dealing with the URLs was a bit of a challenge. Some were too long for one line. I separated them, but didn't add a dash because it would have changed the address. I did try to be logical about this, however. I cut the URL off at the back slashes. Hopefully, that's intuitive.
Lohr, L. (2003). Creating graphics for learning and performance: Lessons in visual literacy. Upper Saddle River, NJ: Merrill.
Standard 1: Design Standard 2: Development Standard 3: Utilization Standard 4: Management Standard 5: Evaluation