Design and Digital Pedagogy, Part III: Good Design is Good Thinking

Assessing Design in Students' Digital Projects

“But this isn’t an English class,” my students protest, when they discover that I have given their poorly written paper a grade less than A. “I thought you were grading this on the ideas!” “Yes,” I agree. “And your ideas are scattered, nebulous, and contradictory. The clunky and incoherent sentences are only a symptom of the real problem.”

No, I don’t really say it quite that bluntly, but I do launch into my speech about how the process of crafting and revising your writing is part of the process of defining and developing your ideas, etc., etc. Good writing is good thinking.

So we take it for granted that we need to include various aspects of writing among our assessment criteria when we assign papers. But as we venture into assigning more new media projects, we may hesitate to evaluate the design component of those projects in courses not specifically focused on design. There are two reasons, I think, for this hesitation: 1) we fear that we are judging mere appearances rather than substance, and 2) we doubt our own competence to make informed judgments, beyond our subjective preferences.

If we are going to assign our students to work in new media, however, we need to give them feedback on their designs, for the same reasons that we need to give them feedback on their writing: because the purpose of any such assignment is (or ought to be) to require students not only to interact with course content, but to formulate coherent ideas about it, and to communicate those to others.

In order to evaluate design in a way that is not only clear and consistent, but also substantive and useful to the students, we need to be able to articulate criteria for good design. Fortunately, this is not as hard as you might think! Using the materials on this page, you can create a design rubric that will help your students use design effectively, and allow you to grade it fairly.

The fundamental questions that you need to ask, and that you need to get students in the habit of asking, are, What are the most important ideas you want to convey with your project? and, To whom do you want to convey them (who is your audience)?

Sound familiar? Right. It’s the same way you’ve been teaching and grading writing for years. So all you need to do is translate your criteria into visual terms. For example:

Tone. In a written assignment, you might evaluate this based on vocabulary, length and complexity of sentences, and use of first person. In design, you are looking at color scheme, typography, and graphics, but you are still asking the same basic question: does the work show awareness of its audience and a contextually appropriate attitude toward the material?

Organization. You know how to assess whether a writer’s sentences and paragraphs flow logically from one to the next while working to construct an argument. Ask yourself the same kinds of questions about the layout of a new media project: are the parts that relate to each other actually near each other? 

You can undoubtedly sense all this intuitively when looking at a visual project, but pinning it down to specific components will be much more useful than telling a student it just doesn’t “feel” right.

“No,” you explain patiently, “this isn’t a design class.” And you communicate to your students, through classroom activities, grading rubrics, and feedback on their papers, that design is crucial to how they express ideas in visual media. It’s not just the frosting.

Design and Digital Pedagogy, Part II: Design and Participation in Class Blogs

A simple google search turns up numerous sites offering advice on the pedagogical uses of blogging, sample assignments, assessment strategies, etc. (Not to mention the heated debates over Blogs vs. Term Papers - but let’s not go there.) Much harder to find, however, are discussions of the design of class blogs, and how design considerations may affect student participation, and even the quality of student work.

It seems obvious enough that an attractively designed page will be more inviting to students, will encourage them to spend more time there and to put more effort into their posts. But there’s more to it than luring them in with eye candy. The visual look of your page can communicate to students whether you are inviting them to a “hang,” where they can show up in their mental pajamas, relax on digital beanbag chairs, and chat over popcorn and root beer, or to a dinner party, where they will need to tuck in their shirts and use the correct fork. If you opt for the more formal tone, how will you balance academic standards with giving students a sense of ownership of this digital space? The more students can identify positively with the class blog, the harder they will work to make their posts meet the standards that the visual presentation subconsciously conveys. If your blog is open to the public, what kinds of readers would you like to attract? Professionals in the field who will respond substantively to the posts? Your students’ peers? Younger students, so that your class can act as the “experts”? Your design will convey to users who is invited in, and how they are expected to behave.

All that still seems pretty obvious, and more or less superficial. But consider a particular pedagogical problem. A colleague of mine recently attempted to use a blog as the medium for discussion of a particular book among his students in a particular course. The results, he said, were so disastrous that he will never attempt it again. Now, this colleague is no technophobe, has no fears that the blog spells the end of liberal education as we know it. So what was the problem? One student, he said, had posted so frequently and so diligently, with long diatribes that attacked the book under discussion and the opinions of other students so vigorously, that the other students felt he had completely hijacked the space, and either stopped putting effort into their own posts, or stopped posting altogether.

There are low-tech approaches to this problem, of course: just as he would have done with a student who was dominating discussion in the classroom, my colleague spoke to the student in person, urging him to tone down his rhetoric, etc., all to no avail. But could design have prevented this from seeming like such a problem in the first place? What if the class page was set up so that, from the home page, the user saw only the first few lines of each post? That would have the effect of equalizing all of the voices in the conversation, at least in the initial view. Neither the students nor other readers would have to scroll down past one classmate’s endless rant in order to get to the thoughtful comments of others farther down.

Furthermore, this format would encourage students to craft their first sentences more carefully, in order to spark a reader’s interest, and to convey the main idea. The structure itself builds in an intrinsic reason for what otherwise seems to students like just one more pointless requirement: “Wait - we have to have a main idea?”

So, should you rush right to your class blog and adorn it with cutesy pictures, flashy fonts, and eye-catching colors? Maybe. But first, you will need to think carefully about what you want your blog to accomplish. Then you will want to study the other posts on this page for design principles that will help you achieve your goals.

Photography 101: Shot Composition

Ok, so now you’ve thought about lighting. What’s next? Well, you have to figure out where you want your subject in the picture. We’ve all seen photos where the person is in the dead center of the shot, surrounded by giant swathes of unused, meaningless space. So, first thing’s first –

Think about EVERYTHING in your picture

Really spend some time thinking about where you want to take your shots. Is there something interesting or unique about the place you’ve chosen to shoot? Is there a reason to include lots of background behind, or around, your subject? Is there an interesting pattern in the picture (repetition in shapes, figures, etc)? Is some random guy’s foot sticking into the bottom right corner of your frame?

There are a lot of elements in this shot, but they come together in a unified way.

Avoid the Center 

Our instinct when we take a photograph is to shoot the subject right in the middle. If the subject is the most important thing, why shouldn’t it be in the middle? That’s how we know what to look at, right? 

Wrong. Luckily, we have developed the capacity to infer the importance of objects in ways other than calculating how close to the center of a picture they appear. It looks pretty uninteresting and uninspired, doesn’t it? Instead of doing this, experiment with angles and perspective. Remember the “Rule of Thirds”: Every picture can be divided into nine segments in three sections. Your subject should never be right in the middle section. Instead, try moving it (or at least part of it) into the left or right sections.

Experiment! 

Now that most casual photographers have moved into digital and away from film, you have lots of chances to take that perfect photograph, so don’t be afraid to experiment. Sometimes breaking all the rules can result in something you never expected. [insert final photo…of something] For more information and tutorials, go here and here.

This shot is interesting because of the unconventional angle.

Design and Digital Pedagogy, Part I: It's not just the frosting.

When Aimée Morrison stood up on the first morning of DHSI 2012 to describe what she would be teaching in her multimedia design course, she got all 400+ participants salivating (a dozen of us with anticipation, the rest with envy), by announcing that we would spend our week applying the frosting to the DH cupcake. She also unleashed a metaphor that would be pretty much beaten to death over the next 30 minutes, and which, appealing as it is, radically understates the importance of design to any digital project. This is the first of three posts in which I make the case that design is not just decoration; it is as fundamental to digital humanities and digital pedagogy as writing is to traditional scholarship. Along with writing, design constitutes the medium through which our readers/users will engage with our projects. This point is especially crucial in digital pedagogy, where we need to consider students both as users of our materials and as designers of their own.

So let’s try a more nutritious metaphor. Yesterday for lunch, I bought a beautifully packaged Greek salad from the university library’s cafe. Through the clear plastic lid, I could see bite-sized chunks of cucumber and red and yellow peppers, enticingly sprinkled with bits of feta cheese and accented with glossy kalamata olives. As soon as I reached in for my first bite, however, I discovered that those tasty and colorful tidbits rested on top of one giant leaf of Romaine lettuce that had been wedged, uncut, into the bottom of the container.

This salad had major design flaws. It looked pretty, yes, but it failed to take into account the device I would be using (a flimsy plastic fork incapable of cutting vegetables), or my social media platform (a table, at which I sat face to face with people I had just met, and in front of whom I wanted to appear moderately dignified or at least competent - not distorting my mouth to wrap it around an oversized leaf, with salad dressing dripping down my chin). All this made it unnecessarily difficult to get to what should have been the salad’s main substance.

And yet I have to confess that I’ve been guilty of arranging course websites very much like that salad - and then feeling surprised and frustrated to find that my students had picked the fun stuff off the top and left behind the main material that I really wanted them to engage with.

This is not to say that students should never have to grapple with whole lettuce leaves on their own. But we do need to demonstrate the use of knives and cutting boards (or at least train them in delicate nibbling techniques) AND provide a space in which it is safe and expected for them to make a mess. 

OK, enough with the salad. The point is, when we are designing digital resources for our teaching, we can’t just stuff all the materials onto the course website and assume that the students will learn from them. We need to design with their learning in mind. Whether we like it or not, our designs communicate values and expectations, and we can and should use design intentionally to promote the kind of engagement with course material that we want. This may be as simple as using layout to indicate which materials are most important; visually coding objects according to the kinds of tasks students are expected to do with them; etc.

When I come out of design class and meet the exhausted looks of my colleague who has been doing battle with GIS all day, I do have the slightly guilty feeling that I have been playing with pink sugar and sprinkles while he dutifully eats his vegetables. But I also know that I’m learning more than how to make unappetizing content into digital Little Debbies for my students. The principles illustrated on this page have helped me see digital delivery of course materials not just as an alternative to photocopying, but as a medium in which I can reinforce what I am telling my students about what kind of work I expect them to do.

Podcasting: The Benefits of Audio Design

DHSI Design Podcast: Why Podcast?

Despite the growing reliance on visual mediums of new media, podcasting presents an accessible method of sharing information. Digital audio content hosted online through podcasts are easy to upload, distribute and download, meaning that anyone with a computer, microphone and editing software can make podcasts.

Working in Garageband

User-friendly software audio software, in this case we used Garageband, allows people without a high level of knowledge in audio editing to construct professional-sounding podcasts without the use of a studio, professional equipment or a trained audio technician. Opening up the field of audio production, scholarly work can be discussed, shared and promoted by using podcasts effectively.

Podcast Master Track

Using Garageband, separate audio tracks can be recorded then edited on their own. Each individual track is contained within the master track, which can then be mixed down into a single file. Theme music, stingers, and effects break up the vocal narrative of the podcast, creating a format that is listener friendly as well.

Final Mixdown of Podcast Track

Because of the ease with which podcasts can be created thousands upon thousands exist, often making it difficult to produce a piece that is distinguishable from the vast audio minefield of available podcasts. By using social media resources, such as blogger, tumblr, twitter or facebook individual podcasts can be promoted and shared across online networks, allowing podcasts to gain listeners.

Photography 101, Part III: The Best Budget Cameras

The trusty, budget-friendly Lumix DMC-FH25

 “Budget” can be a hard word to define when you’re discussing electronic gear, but here I’m discussing cameras that are under $200 (sometimes well under). I’m somewhere between this category and the above in terms of my own values as a photographer, so I chose to purchase a Panasonic Lumix (model DMC-FH25). It’s not the fanciest of the Lumixes, but it’s a solid camera that didn’t break the bank, and it’s consistently top-rated. Unlike some of the more expensive compacts, the budget cameras may not have great zoom capabilites, may have a slightly lower resolution, etc. But these are great for photographers who want the ease of taking pictures without having to fiddle with a ton of settings – much of the time the “Automatic” setting will be optimal.

A good budget camera will still capture plenty of detail.

See CNet’s list of the best budget cameras here.

Principles of Design: Composition

The end result of a visually decipherable website is often at odds with the piecemeal process of its composition. Designers put in incremental creative effort - using aspects such as colour, typography and layout - that, once integrated, must cross the gap instantiated by the graphic user interface: the gap of the producer and the consumer/viewer/reader. Furthermore, visual composition tends to hit us all at once: the overall effect of the individual design components working together is important.

The difficulty of describing visual stimuli and their impact naturally carries over in the narration of one's design choices. One thing we definitely learned in the collaborative space of DHSI is that to work on creating a website requires having a vocabulary to communicate what desired effect you want to achieve, and through what constitutive parts and processes.

So bear with me!

From the earliest stages of brainstorming, our group found itself employing the vocabulary of visual communication almost unconsciously as we talked through the principles we wanted the visual composition of DHSI Design to achieve. One of the first words used in conversation was "subtle", then followed by the idea that we have one piece of bold design or color. We were enacting in our design process the subtlety-boldness binary of strategic visual composition. Similarly, while discussing the affective impact of the website, Emily suggested that we work with lots of negative space to allow for easy legibility of the blog posts. Here, she was tweaking Alexander White's notion of space as one of "The Seven Design Components". After going off to design the various elements of colour scheme, logo, fonts, and layout, we met to discuss rendering these parts into an overall aesthetic. This was where visual composition had its last say.

Emily and Verena discussed the importance of keeping the negative space of the logo header in sync with the rest of the background. They also coordinated the purple "d" in the header (#8E008E) with complementary colours.

Similarly, they used a monochromatic color scheme to coordinate the blues of the CSS in the balloon with those of the dates, label tags and hyperlinks.

These last-stage negotiations resulted in the consistency-variation and subtlety-boldness principles that undergird the published website.

Design Demands Attention

My digital humanities eureka moment occurred at 5:20pm on Tuesday, June 5th, 2012 and its catalyst was as much brilliant design and multimedia as content. I was watching and listening to Jeffery Witt describe what seemed to me an interesting take on an online digital critical edition of an ancient work in philosophy by Petrus Plaoul when he clicked on a link, opened a hidden menu, and brought forth an image of the original manuscript text – actually one of four different editions – with two taps on a track pad I was hooked. Although I find them fascinating, text encoding and digital edition projects are not my field and I have struggled at times understanding the application.

Click to Enlarge

At 5:20 Tuesday, I got it. I see the incredible scholarly merit of many DH projects that had escaped me. While Jeffrey Witt’s project is brilliant in conception, it is the design that sparked my DH awakening. Witt’s design meets all of Lev Manovich’s key features of new media design. The project is modular, with translation and original image easily connected and navigated. The edition is automated in the presentation of the image of the original manuscript. It is variable in the choice given to the user on which section, translation, or ancient edition is accessed. Finally, the ancient manuscript images are transcoded to make them more accessible and useful in the context of a digital critical edition.

The key design feature that seals the deal, however, is that of proximity. The Latin encodings, translations, and original manuscript images are viewed one above the other with one click. Even a non-Latin reading, non-medievalist such as myself can have fun with Petrus Plaoul. In fact I have found myself going back to the site - even before I decided to write this post. Placing the new and the old work in close proximity focuses and maintains my attention.

Great design has this effect, when Dr. Witt clicked on the link to the image of the original, there was an audible rumble in the audience as eyes lifted from Twitter feeds to focus their attention on a unique design where key elements of research are placed in proximity. In digital projects great design grabs you by the shoulders and holds you in place giving the content a chance to seep in.

Explore Jeffrey Witt’s critical edition www.jeffreycwitt.com

Principles of Design: Color

Why Color Is Where It's At

We chose to begin our design process by selecting a color scheme for our blog. Color is incredibly important because it will influence most (if not all) of the other decisions you will make about logo design, layout, and so forth. This is because colors can lead the eye to certain parts of the page, make elements advance or recede towards the background, or make elements appear larger or smaller. Consider the following:

•  Lots of white or soft, light colors can give the illusion of space.

•  Warm colors tend to stand out, whereas cool colors tend to stand back.

• Saturated (ragingly bright) colors catch the eye, so you should use one of them to emphasize a single point

Selecting a Mood

Color schemes also are important in creating an overall mood for your site. In considering mood, keep in mind the audience you are trying to reach and the product or message you are trying to promote. For color scheme ideas, look to the professionals: Nordstrom is an upscale outfit and so they use a simple, formal black and white color scheme. Anthropologie has a vintage clothing theme going, so they use washed out colors and playfully bright highlights to express a mixture of romantic nostalgia and fun. Don't feel like you have to come up with a completely original color scheme- go with what has already been shown to work!

Here are some examples of webpages that really create a mood with color:

More Hazards More Heroes
 This is the webpage for a folk musical group based out of Nashville. They have selected a complementary color scheme of turquoise blue and orange. Notice how the interactive parts of the page (the "play" and "download" buttons) are graphically rendered in warm colors, whereas the static parts of the page, such as titles, are in cooler shades. The muted brown tones in the background echo the laid-back, simple acoustic music that the group plays.


Brunet Garcia

These people do a lot of marketing, so their website is very graphics heavy. The front page employs a high contrast monochromatic color scheme, which is bold and attention-grabbing, just what marketing is supposed to do! Once again, the interactive element, a movie, has a bright red mark to draw the attention. The monochromatic scheme seems simple, but it is a good choice because their other pages have graphics brimming with color, and the layout should not distract from these images.


Decode
Here is another design agency with a beautiful website. They have employed a triadic color scheme, using brown, fuchsia, and sea green. Notice how large blocks of color that are merely decorative (i.e. in the background) are understated, whereas the tiny hyperlinks are bright pink! These unlikely colors give the site a youthful, modern vibe, but are slightly muted so that they avoid recalling a 6 yr-old girl's bedroom. Chocolate is a great color because it can add a subtle tone of seriousness to its more outgoing neighbors. In this case, it is replacing orange as the third element in a triad.

You don't have to have a bunch of flashy graphics to make good use of color on your website. Basic shapes can be just as striking and often very appropriate. If you are interested in adding your own photographs to your design, check out our blog posts on photography- anyone can take artful, beautiful photos with a little practice, and it doesn't require thousands of dollars of equipment, either!

 

 

Principles of Design: Typography

Legibility and Readability

For the typeface designer, the concept of legibility  - or ensuring that each individual character is distinguishable from the rest - remains a primary concern. However, for most web designers employing already-assembled fonts, the typographic principle of readability becomes more important, itself branching into two distinct concerns: the ability to see the text on the screen and the ability to read the text on the screen. Both concerns are front-and-center in the designer’s rationale behind choosing their font. Additionally, the designer has the option of manually kerning the characters and adjusting the leading between lines, allowing for the most effective contrast between white space and characters. In our Multimedia course, this was accomplished using Fireworks and CSS: for example, in her execution of the “DHSI Design” header logo, Emilie manually kerned Helvetica to allow the weight of the font its maximal visual impact. In the choice of font for the blog’s main content, Verena chose Open Sans with both seeing the text and reading the text in mind. Open Sans employs more space between characters, allowing the reader to visually digest the posts and also to read across at a quicker pace.

 

 Combining Fonts

In most websites, the designer has to choose a combination of fonts to service the header, body, sidebars, and footer. While all of these spaces in the visual field don’t have to be different, often it helps to strategic choose how your fonts will work with, or against, each other. The three main options for this process are concord (high degree of similarity in adjacent fonts), contrast (high degree of difference), and conflict (neither, but not similar enough to be harmonious). The Typetester online tool is a great way of seeing how your various font choices will look alongside each other. Once we decided to operate within the sans-serif family of typefaces, our design template involved working within, and tweaking, the concord strategy. In the header, Helvetica achieves certain things on its own - for example, as a bold, big, bloggy, and yet minimalistic font, it coordinates with our image and color scheme, letting the color coordination stand out - however, it also works concordantly with Open Sans in the body.

 

Fonts for the Web

When selecting typeface for the web, you have to keep in mind that text will be displayed in a number of different contexts- mobile devices, different browsers, and different operating systems handle fonts in divergent ways. Increasingly, normalizing typeface is becoming automated, but there are still some good standard practices to follow for the web. One is to specify a font family rather than just one font for your blog. (Usually interfaces like Blogger and Wordpress do this for you). A font family is a collection of similar fonts in a list, usually found in your CSS. If the first font in the list can’t be displayed, the next one will automatically be displayed.

So, if you specify “Arial, Arial, Helvetica, sans-serif” as your font family, the browser will first display text in the Arial typeface. If no Arial fonts are available, it will move to Helvetica, and finally any sans-serif font if nothing else is available. This keeps your text looking relatively consistent across different devices. Here is a nice display of font families. Another great resource for fonts for the web is Google web fonts which hosts hundreds of free fonts on the web that you can link to with your CSS. This means you can use totally crazy, creative fonts and they will still work on other peoples’ displays.

We stuck with a simple, sans-serif collection of fonts for our website. In general, the textual content of a site like a blog is most easily read with a simple, appropriately sized font like Verdana or Arial. Elements of a site like headings, subheadings, and page titles can be more creatively typeset, as viewers will skim over them quickly and their primary purpose is to break up large chunks of homogeneous text.

 

Cultural Considerations of Typography for Web Design

The explosion of digital text has meant that fonts and word processing are now permanently interwoven with the texture of everyday aesthetics. This means that the use of fonts on the web throughout the Internet’s history has given certain typefaces cultural associations. It is important to watch what other designers are doing in order to catch aesthetic trends and adapt to them. For instance, you probably have recognized that Comic Sans is not popular with web designers- In fact, it’s anathema. Meanwhile, clean, minimalistic fonts like Helvetica have become a popular way to express forward-thinking design savvy. Some other considerations:

• Verdana is a very legible font, but it is also “invisible” because so many people use it. This makes it a great font for large blocks of textual content that must be read carefully.

• Times New Roman is also very legible, but because it was the default font in the “Netscape era,” it can make a page come across as out-of-date. It can make for nice headings, however.

• In general, serifed fonts can evoke more of a “period” look because they were used in pre-digital print for so long. This can be great if your webpage has a vintage or historical vibe, but probably isn’t appropriate for advertising cutting edge techie innovation.

For the total typography geek, I Love Typography has great font reviews that explain the historical background behind the creation of innovative and beloved fonts. They also have good articles on selecting fonts and typography for the web.

Blog design

Blogger is great for the flexibility it gives users in customizing themes and layout. After you set the default colors and fonts of your blog, you may still find that there are other properties you'd like to customize. In the interests of allowing other would-be bloggers to learn from our work, I will document the CSS properties I added to the template using the HTML editor function on Blogger.

Here are the styles I added to the template in order to set the background image and anchor it to the top:

body {
background-image:url('http://farm2.static.flickr.com/1303/4689693936_a31a9da55d_o.jpg');
background-repeat:x-repeat;
background-attachment:fixed;
}

#outer-wrapper {
background:$bgcolor;
}

These CSS styles I added to the Flickr badge:

#flickr_badge_uber_wrapper {
text-align:center;
width:175px;
}

#flickr_badge_wrapper {
padding:10px 0 10px 0;
}

.flickr_badge_image {
margin:0 5px 0 5px;
}

.flickr_badge_image img {
border: 1px solid black !important;
margin: 5px 4px 0px 0;
display:inline;
float:left;
}

#flickr_badge_source {
text-align:left;
margin:5px 10px 0 10px;
}

#flickr_badge_icon {
float:left;
margin:5px 5px 0 0;
}

Logos and what they convey 2

http://www.aupress.ca
An Open Access Scholarly Press: a digital collection of peer reviewed scholarly work that provides valuable educational resources (e-books, journals, websites and videos).Great compact logo! It ties in a generic bird silhouette with a short block of capital letters (AU PRESS). Mirror effects provide repetition for cognitive emphasis. Did you notice the AU with Athabaska University cosying up below? What about the silver shading and brush strokes that connote airyness and elevation echoing the bird taking flight graphic? For me, this logo conveys a UP press that’s forward looking and flexible!

LOGOS and what they convey

Typefaces evoke particular moods. Also consider, for the overall design, issues with legibility and visual impact of graphics, fonts, colour, composition and even special effects.

Some examples from RESEARCH PROJECTS

TAPoR

• Keeps track of texts users want to study.
• Helps users learn about different tools for text analysis.
• Allows users to run tools on texts to analyze them in different ways.

This logo conveys a feeling of confidence created by a typeface of gorged happy letters suspended over a celestial silver-blue, blown up pixel background. Beckoning, rich and boyant!

It's not what you say, it's what you repeat

The internet is a big and complicated place, right? I don't know about you, but I probably look at 10 or 20 websites every hour. And follow a hundred or so Twitter streams, and subscribe to a heap of podcasts, etc. In fact, many of these streams and sites and 'casts are produced by the same people.

How to keep it all straight?

The streams and sites and media that are most memorable to me are those that have consistent visual elements across all their various permutations. We're trying to do that with DHSIdesign as well. You can see our blog logo at the top of this page, and we've created a Twitter avatar to match:

We're using this same graphic for our Flickr feed as well, so hopefully, every time you come across our work, you'll know immediately that it's us!

What do you think?