Interaction Design

Creating imagery consistent with the feel of the website I wanted proved harder than I expected.

Make your own constitution - Logo

I really love old illustrious logos and type, and since this website is about the creation of a constitution I thought the imagery should reflect the time period of our country. A little dated and ornamented, but also a touch of today with the type. This logo didn’t go through the typical brainstorm, sketch, refine process. I took the first Idea I had and so it’s looking pretty amateurish at the moment and unrefined, so it’s something I’ll have to revisit when the assignment is over.

Uncle Sam illustrations

To try to spice up the page, and give it a little more playful feel I thought I could balance out the info heavy left with an illustration. There aren’t many meaningful pictures I was planning on using for the site so it all came down to something that could help communicate. As you go through the process of choosing how strict or liberal your constitution would be the header up top will go through the different images of Uncle Sam writing your constitution. On the last page the background will change to an illustration of the world your constitution would have created (oppressive, anarchistic, happy medium) and comparable countries. Hopefully it illustrates the weight of the decisions that were made when making our country’s constitution. I haven’t made the outcomes yet, so we’ll see how that turns out.

I used Uncle Sam because he is a familiar and already a powerful symbol for what the country stands for. The idea is to impress to the audience that everything our country stands for is contained in the constitution, again showing the weight of their decisions as they go through the website & respect for the decisions made when our country was founded.

This is a little closer to what I had in mind, but didn’t have time to make in my first photoshop comp

Photoshop comp - Constitution website

My main concerns are about balance and where my site’s elements are placed

• The top illustration (uncle sam) seems off balance. Possible culprits include:
  • white space above “start here” text
  • red striped hat
  • thought bubble not carrying its weight
  • An empty stage except for U. Sam (I was thinking of putting a black cat up there too)
• There are some pretty harsh divisions through out the page (horizontally) which I’m not sure are logical breaks or harsh interruptions to the flow.
• The space under the 3 little columns seems very sparce, but I’m not sure what to put there

I’m not as concerned with how the logo/illustration quality because at this point they’re about as good as they are going get if I want to get the project done, but critiques are always welcome. (the logo has a long way to come but sadly my photoshop skills are lacking in that dept.)

Any input is appreciated!

It’s actually pretty embarrassing to post this, but I really want that 1 preparation point

I had some catching up to do with a recent change to my topic, and with just a few hours to come up with a photoshop comp this is the best I could do. What I found most frustrating was how wishy-washy I was at placing elements. Yeah, I have a wire frame and thumbnails but I feel like I need to go back to the drawing board and iron out the details. Working away on the computer without a crystal clear direction is just frustrating as sin.

My hideous first draft

I’m not just talking about representing a website in a little thumbnail. The thumbnail is just a map for squeezing a lot of information into a manageable space to be absorbed by the audience

Initially I was going to do a website on the solar system & outerspace but found the objectives to be too broad and large for the scope of this assignment. These first thumbnails were from those sketches, but I think the methods of presenting the information work with the topic I’ve settled on now.

Sketches from my first topic: The Solar System

After changing my topic I chose to do 10 more sketches, and found that I had to really stretch to find unique ways to present the page’s info. Some are certainly less effective than others, but I like many of the ideas I came up with. Unfortunately it’s hard for anyone but myself to see what my little chicken scratches are representing.

Thumbnails from my current topic: The constitution & citizen's rights

After nailing down the content & concept of the site coming up with the structure seemed to come very naturally.

Site Map

My site is going to have 3 basic learning areas, with one overview/summary area.

• Citizen Rights
• Citizen Responsibilities
• Law enforcement
• Consequences

My site map

Wire Frame

The wire frame of my site is simple at the moment, and I don’t anticipate the site being cluttered with much more. While there will be a guided or preferred way to move through the site, the navigation will be under the main logo so people will still be able to move around freeling

My site's basic layout (probably less than 960px)

I did have a little trouble making the wire frame because it seemed like I was having to guess a lot on how much visual weight the design elements would take, and so I’m sure the structure will change through the process but that’s the general idea.

It took me a while to find a concept that I was both passionate about, and felt I could find a good solution to teach 5th grade kids. I chose to use Georgia’s social studies standard on understanding citizens’ rights & how they are protected by the constitution.

5th Grade website

Another website

School resource that is difficult even for educators to use

Develop Site Concept

Two concepts I’m considering at the moment:

• Follow an illustrated character through several situations, educating the audience on possible outcomes, and have the audience choose a desired outcome.
• Have students draft their own constitution, letting them select what they feel is important, and showing them how the decisions they make will affect the outcome of the country. (step-by-step process resulting in a happy/medium/sad ending illustration)

a. Explain the responsibilities of a citizen.
b. Explain the freedoms granted and rights protected by the Bill of Rights.
c. Explain the concept of due process of law and describe how the U.S. Constitution protects a citizen’s rights by due process.

More Info:

SS5CG1 The student will explain how a citizen’s rights are protected under the U.S. Constitution.
(page 3)(info)

Spending group time outlining specific rules of procedure from document naming conventions to the necessary content everyone must create for the document will save lots of time in the end and smooth the process throughout the project.

When starting a new assignment I tend to get excited about it, and get ahead of myself. Unfortunately when working with a group this can cause a lot of wasted time & backtracking. This assignment was a great exercise in organizing and arranging content into a logical accessible order, but even more so it helped me realize how important organizing the group’s efforts rather than just diving into the assignment.

I thought a lot about the learning model’s emphasis on group work and why the university pushes it so hard. My feelings before were that group work was: hard, inefficient & unnecessary.  In past experience it has usually been easier for people to work separately and then put everything together in the end than to put forth the effort needed to work collaboratively throughout the project.

After this experience I decided that the learning model’s emphasis on group work isn’t there to annoy us, or make us force 5 people’s efforts together at the end but to learn how to synergize. The potential is there for a group to create something much greater than the just the sum of the individuals. It only takes a little more organization and effort from the get go to direct the group’s efforts. Learning and educating the group on the tools available so that everyone is up to speed allows everyone to focus on what matters on the assignment rather than spending so much effort making up for people going their own directions.