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.

Using Color Scheme Designer

What We Did- Color Scheme Designer

We wanted our site to look professional and subtle, but with a hint of youthful forwardness and fun. For a professional look, lots of white space is always a good way to go. We decided that the primary color scheme for our site should be lots of white with gray scale and highlighted with a few bright colors for contrast and energy. Emily noted that magenta was a good color to achieve this goal, so we headed over to the Color Scheme Designer to find another shade that would work well with magenta. We only wanted two "highlight" colors at most, so we selected the designer's complementary color scheme option:

Umm…. Okay. No. So, sometimes, complementary colors only look good together in theory. That blinding alien green color just won't do. This is why the human element is important in design! Let's try another combination, and analogic color scheme:

That's a lot less glaring. We can use magenta with a rich purple or orange tone to draw the eye to the important parts of our blog's layout. The colors are close enough together that they don't clash, but far enough apart that they're interesting to look at. It's still a bit bright for what we're going for though.

In the end, we decided on a color scheme completely independently of the designer's algorithms: purple highlights for our logo and turquoise for our links. Emilie and Verena toned down the saturation of the colors to go with the more understated grayscale tones, making our site more consistent. The design process involves a lot of tinkering, and fortunately it's fairly easy to tinker with colors up to the final stages of the design process.  

Remember: As with most principals of design, LESS IS MORE. Have fun playing with colors, but don't go overboard! Keep in mind our examples of professionally done websites above; The idea is to frame and highlight the content of your blog, and too many colors can be very distracting.

Exporting Your Work In Color Scheme Designer

In the far right hand corner, CSD's export tab gives you a number of options for exporting your color scheme. If you are manually entering the hex codes for your colors in a program such as Dreamweaver or Blogger, you can get the exact shades you want by exporting them using the HTML/CSS option. This will give you a grid of the hex codes representing the colors in your scheme, under various shades and saturations:

You're probably not going to use all of the colors in the palette. For instance, you could use colors in the first column for elements that stand out in your design, such as page titles and links, and colors from the third column for elements that stand back, such as page backgrounds or header bars. The HTML/CSS option also gives you a PURL to your palette, so you can link back to it or visit it another day.

The XML option will export your palette colors as an XML document. If you wanted to, you could use this option to create a database of different palettes and use XSLT to display them. This function won't help you add color to your webpage, however.

The text option merely generates a list of hex codes and RGB values for all of your colors. The ACO and GIMP options are for importing your palette into a graphics editor such as Photoshop or the GIMP.

More and more metadata

Findability and searchability.  Those were our goals for this blog--so, metadata to the rescue!

To tackle the matter of making the blog findable by a search engine, we've put metadata in the head of the blog's html template.  Looks like this:

Notice how we're also using the Dublin Core standard to describe our blog?  I didn't see other blogs doing this, but since there's an existing metadata standard to describe web documents, we're using it.  Now if anyone uses a tool that harvests DC metadata from web documents, DHSIdesign is covered.

To make the content of our blog more searchable, we're using a controlled vocabulary to tag, or label, our posts.  This way, related posts will be collocated within the blog.

Here's the CV we came up with:

Ironically, "metadata" isn't included in here. :)  So we're officially adding "metadata" to this list, starting . . . now.

Blogger is already telling us who created posts and when they were posted, so we didn't need to include that information.

Now, hopefully, people will be able to 1) find our blog and see what it's about and 2) navigate the content within.  Yay!