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.
Showing posts with label composition. Show all posts
Showing posts with label composition. Show all posts
Friday, June 8, 2012
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.
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: Photographing People
Photographing people, especially if you don’t know them well, can be one of the hardest things to do. Some people may not want to have their picture taken. In some cultures, taking someone’s picture is considered to be very bad luck. Your subject might just be very camera-shy. Taking photos of people requires flexibility, patience, and respect. Don’t take pictures of someone who really doesn’t want his or her picture taken. It probably wouldn’t come out well anyway.
You will also likely have to overcome some of your own trepidation when you begin photographing people, but, if done well, these images will be some of the most interesting and rewarding pictures you can take.
So how do you make sure you get the best photo possible?
1. Get Close. It may make you nervous to get in someone else’s space, and you should probably ask permission before you do so, but you’ll be able to get a much more intimate, interesting photo this way.
2. Don’t Force It. Say cheese! Staged photographs can look cheesy, canned, or just plain boring. Sure, there’s a time and a place for people giving their best megawatt smiles all in a row, but the best photos of people tend to be the ones where they’re being natural (well, as natural as possible with a camera sticking in their face). People often start out quite stiff and nervous when you’re taking pictures of them “in the wild,” as I like to call it. My solution to this is to persist and stick around. After you take a gajillion photos, they will have stopped worrying as much about how they look and what you’re doing.
3. Take Some Time. If you have the luxury of hanging out with a person or group of people for a while, you’ll have more opportunity to get shots while they go throughout their days. This will provide you with some variety, and will give you a chance to take spontaneous, unstaged photos. Keep your camera on you at all times and be ready for any opportunity! Here’s a good tutorial if you want more info.
You will also likely have to overcome some of your own trepidation when you begin photographing people, but, if done well, these images will be some of the most interesting and rewarding pictures you can take.
So how do you make sure you get the best photo possible?
1. Get Close. It may make you nervous to get in someone else’s space, and you should probably ask permission before you do so, but you’ll be able to get a much more intimate, interesting photo this way.
2. Don’t Force It. Say cheese! Staged photographs can look cheesy, canned, or just plain boring. Sure, there’s a time and a place for people giving their best megawatt smiles all in a row, but the best photos of people tend to be the ones where they’re being natural (well, as natural as possible with a camera sticking in their face). People often start out quite stiff and nervous when you’re taking pictures of them “in the wild,” as I like to call it. My solution to this is to persist and stick around. After you take a gajillion photos, they will have stopped worrying as much about how they look and what you’re doing.
3. Take Some Time. If you have the luxury of hanging out with a person or group of people for a while, you’ll have more opportunity to get shots while they go throughout their days. This will provide you with some variety, and will give you a chance to take spontaneous, unstaged photos. Keep your camera on you at all times and be ready for any opportunity! Here’s a good tutorial if you want more info.
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?
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.
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. |
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.
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!
 | ||||
| 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:
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.
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 |
 |
| Podcast Master Track |
 |
| Final Mixdown of Podcast Track |
Photography 101, Part IV: The Best Entry-Level DSLR Cameras
For the true photography aficionados, the DSLR (Digital Single-Lens Reflex Camera) will be the best choice. These cameras can get very expensive indeed, so I’m just looking at the basics here (which could still cost you between $500 to $1000). Canon and Nikon tend to collect the most accolades in this category.
The Canon EOS Rebel is a very popular choice, and is consistently rated at the top of “Best of” lists. The Nikon D3100, 5000, or 5100 come next, followed by the Sony Alpha (model SLT A37 or 57). These cameras will produce excellent image and video, and you will be able to tweak a lot of settings on them – they’re very much made for customization, if that’s your goal. Many of these cameras come with good “starter lenses,” which you may eventually want to upgrade if photography becomes a true passion for you. See recommendations and ratings here and here.
The Canon EOS Rebel is a very popular choice, and is consistently rated at the top of “Best of” lists. The Nikon D3100, 5000, or 5100 come next, followed by the Sony Alpha (model SLT A37 or 57). These cameras will produce excellent image and video, and you will be able to tweak a lot of settings on them – they’re very much made for customization, if that’s your goal. Many of these cameras come with good “starter lenses,” which you may eventually want to upgrade if photography becomes a true passion for you. See recommendations and ratings here and here.
 |
| A DSLR with wide-angle lens will produce great photos. Joseph Lamperez, all rights reserved. |
Thursday, June 7, 2012
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.
These last-stage negotiations resulted in the consistency-variation and subtlety-boldness principles that undergird the published website.
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.
Subscribe to:
Posts (Atom)