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.

Photography 101: Highlights, Shadows, and Artificial Light

These are other major considerations when you’re thinking about lighting. You’ll need to play around with where you are in space to ensure that the direction of your light is illuminating your photograph in the way you want. For example, if you’re shooting someone in direct sunlight on a bright day, you may not even be able to see his or her face because of the shadows that will fall on it. Try varying your shooting locations and angles to get the best pictures you can. Play around with it! Experimentation in photography is a key to success.

Many things are wrong in this photo.

This one is much better! Can you see why?

Another thing to take into consideration is artificial light. Of course there are many sources of artificial light, but for the purposes of this beginners’ tutorial I’m only going to talk about the one you’ll most likely encounter – the flash. Using your camera’s flash can be great in low-light situations, but often the flash will wash out and flatten your subject. Think about when professional photographers use flash bulbs. You’ll usually see them use bulbs in conjunction with other gear – like umbrellas, light diffusers, etc. The flash, on its own, can be a harsh mistress. See what happens when you don’t use it. Sometimes this will mean you have to hold the camera quite still, but you may like the outcome!

Color on the Web

Color on the Web

In the past, designers used to recommend "web safe colors," a list of 216 colors that would display exactly the same way, no matter what device they appeared on. This is no longer necessary as most devices can easily generate millions of colors. In HTML and CSS, color is expressed in a six digit "hex code." For instance, the hex code for white is FFFFFF. Here is a handy chart from W3 schools about hex colors. Hex codes correspond to RGB values, a three digit code specifying the amount of red, green, and blue light in a pixel. Most graphics editors and color scheme tools will display the hex code for a color along with the RGB values, which can be useful in editing the CSS of a page- you can make sure you are using the same hue and shade of brown for all of your headings and links, if you should so desire.

In working with images, photographic media is best displayed in bitmap color (24-bit) in the JPEG file format. Graphics such as logos and clip art are often best displayed in the GIF format, meaning they will be limited to 256 colors. In thinking about what format best suits your images, consider how much color gradation and variation there are in graphical elements. Also, consider that if you are attempting to match graphical color (in a logo for example) to a page's background color, the two may not always match up. You might end up with a box around your logo, like this:

 In this case, you will want to add transparency to the logo so that the page background color shows through, or use an unambiguous background color such as black or white. Matching shades of gray can be particularly difficult.

There exists a plethora of tools online to assist the would-be designer in working with color. Design Shack has a great review of tools available. We worked with Color Scheme Designer to help us choose which colors might work well for our blog. When selecting web colors, keep in mind that you are trying to create a scheme that helps the reader find the most important elements of your page quickly and allows them to read text clearly. Make sure your hyperlinks are distinguishable and keep large blocks of text simple- black and white may be boring, but when your readers are trying to concentrate on getting through a lengthy article, they're not going to want to be distracted by oddly colored text anyway.

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.

Photography 101, Part V: Mirrorless Interchangeable Lens Cameras

If you want to take excellent images on par with a DSLR but want a lighter, more compact camera, you should consider buying a mirrorless camera (or sometimes called a compact system camera). These cameras have the same sized sensor as a DSLR (allowing for high image quality) and you can take pictures in manual mode or simply “point and shoot.” The removal of the mirror and optical viewfinder reduces the bulk of the camera body. Although it will be a bit of a stretch to fit this camera into a pocket, it is lightweight and can be easily stashed in a small camera bag or purse – no need to carry this camera around your neck!

next-gen interchangeable lens camera.  LoneWalkerNYC on Flickr.  All Rights Reserved

DPReview compiled a comparison of leading cameras in this field

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 VI: The Best Camera Phones

Many people are interested in documenting their lives via social media like Facebook and Twitter. Technology now allows us to take photos, upload them, and tag ourselves – and our location – all on the same device. Camera phones are now ubiquitous, so how does yours compare?

The iPhone 4 is top rated for photography. Nick Morris, all rights reserved.

Predictably, the slick Apple iPhone 4’s camera wins out in this category. Apps like Instagram and Hipstamatic make it even easier to edit and add effects to your snapshots after the fact. But for those of us not in the cult of Apple, there are other options. The HTC Evo3D, an Android phone, is another great choice, as are the Motorola XT720 and the Samsung Galaxy. Tech Radar has a great list – they’ve taken the same pictures with 10 different camera phones and reviewed them accordingly.

Of course the sky is (almost) the limit when it comes to a camera, but hopefully this guide has gotten you to think about what might work best in terms of your own needs and values. I encourage you to do plenty of research before buying your camera – the websites I’ve linked to above are great places to get expert advice and ensure that you make the best purchase possible. Happy shooting!