Archive for December, 2011

Finding Visual Inspiration

December 19th, 2011 by Katie Koch | No Comments | Filed in Teaching

Carmen and I translated the students’ post-it note wireframes into low-fidelity wireframe drawings. We presented the drawings back to them for review. It was tough to have our work critiqued by the students! They had great questions for each page: “Why is this here? Do we need to have it?” and “This page looks weird. Let’s change it.” We were proud to see our students turning a critical eye to their and our work, and it was exciting to see their reactions to a near-complete project.

After we received sufficient feedback we transitioned into a visual exploration exercise.

To introduce visual design concepts we first gave a (very!) quick lesson on typography. With a few basic principles in mind, we asked the students to dig through the pile of books and magazines we brought to find examples of interesting typography. The visual materials were a great platform for sharing ideas and talking about what they do and don’t like.

We repeated this exercise with hierarchy and layout concepts. Again, they hunted for interesting visual content and were able to easily share what they did and did not like about the designs. After each example we talked about how the concepts might be relevant to our Project GROW website. The girls were easily able to make connections between the magazine content and the ideas they had in their heads.

Our last exercise was about color. For inspiration, we showed them Color Index and again asked the students to find some magazine examples with great colors. Not surprisingly, they chose a lot of bright, exuberant colors. They liked the idea of adding in a lot of vibrancy and using a rainbow of options in the color palette.

The students left class with plenty of ideas in their heads for what the site might look like. We’re excited to see where the visual design goes in the coming weeks!

Tags: , , , ,

The Elements of a Conversation

December 18th, 2011 by Katie Koch | No Comments | Filed in Teaching

We began our November 21 class with one question: “What does a conversation look like?”

I showed a few examples to the girls, who began to consider what the differences are between having a conversation with someone on Facebook (using comments and likes) versus a Twitter conversation, where we show our admiration by following and retweeting the words of others. Many of them had never considered that there are patterns in the way we communicate online, and most had never thought about how we might begin to design such a thing.

We did a quick brainstorm session to define all the places online where we have conversations. The obvious answers came out first: Facebook, Twitter, email. As we dug deeper into our storm, the girls came up with more places where conversations happen: YouTube, Tumblr, blog posts, SMS, Skype.

The girls paired off to sketch out what a conversation “looks” like. I asked them to draw all the elements of the page that help a person know how to begin or continue a conversation. Through all their sketches, we realized the important elements are always the same: Text box, reply/send button, user name, and avatar.

Halfway through the exercise one student raised her hand and boldly asked,

“Ms. Katie. What does this even have to do with the website we’re designing?”

Great question! I polled the class for a good answer and one girl replied,

“It’s because we want people to interact with our site. And we have to learn how to get them to do that.”

After they sketched a conversation, I asked them to act out the context around a conversation. One student gave a compelling performance showing how the Blackberry Messenger might be used to flirt with a boyfriend or share stories with friends. Mosi and Bibi gave a great skit showing how a new friend might be contacted using Facebook.

This class was designed to give the students a break from thinking too deeply about their wireframes. It ended up being a great learning experience and a good diversion from the website production process.

Tags: ,