Interaction Design

The hope is, as I have said on other posts, to make this as easy as possible to navigate and get to the information a reader is looking for.  My hope is to present the information in such a way that it will be visual interesting and entertiaining for a 5th grader to look at and read.  Most of these ideas are targeted to accessibility, but a few others I decided to be a liitle bit more visually entertaining.  I have toyed with the idea of using a submarine motet for a bit and a of these go in to that idea a little.  I am sorry that the sketches are not any better.

My thumbnails sketches for my personal portfolio website.

I took a long time to come up with this first idea, and I think I like it the best right now. It was inspired by the Pandora website.

my favorite idea

The top navigation would get me to the home page, my portfolio, and my contact information/stuff about me. Then the sidebar would navigate my portfolio once you get there. It will have the sub categories of my portfolio (posters, logos, magazine spreads, etc). I want the pictures to be able to slide to the left and right, and have mini pics along the bottom so you can click on one to go straight to that pic instead of using the arrows if you want to. Then along the bottom of the viewing screen is another small navigation bar where you can click to learn more about the artwork (the process, sketches, explanations, etc).

This next idea was just me thinking on paper.

thumbnail sketches group 2

And this was my last idea…

thumbnail sketches group 3

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

My sketches started out messy and on loose scraps of paper. I’m constantly forgetting where they are (sketchbook, notepad, buried on my desk?). Even so, I’ve gotten my act together to briefly represent this stage of my creative process.

During this first round of thumbnails, I mainly worked on trying to understand the content and how it ought to be organized. I made some subtle indications of style but nothing really inspiring.

Sketches: Round 1

After taking a break and having worked a little in Adobe Illustrator on the structure I noticed that my design was pretty boring and content heavy. So I went back to pen and paper to try and work some of those issues out. Here’s what I came up with:

Sketches: Round 2

I tightened up some of my better ideas to prepare for my wireframe and “gray box.” Here it is in all it’s glory (or lack thereof):

Sketches: Round 3

Putting the pencil to the paper.

Thumbnails

Sketching is the most important step in making layout decisions. Here are some of my sketches. I want the site to be interesting and new, however the usability needs to be intuitive. One thing that is important is for the content on the main page to fit on the first screen. I don’t want the information to be overwhelming. I also think it is important for the images to be simple and interesting and the type to be fun.

Here are some thumbnails of layouts for websites that I searched. They were all very interesting and different in their navigation and also what I found interesting is that some of them were a format where everything fit on the exact browser size while some other websites main focus was that they scrolled down and kind of read like a real scroll from old times.

After looking at the other sites, I decided that a very simple clean look was the direction that I needed to go for this.

This is a basic idea of how I want my site to look.

I decided that I wanted everything above the fold, because I feel like when you are just constantly scrolling, you feel like you’re really not accomplishing too much. so I put everything you need to see in few, and buttons at the bottom of your information so you can go back and forth between pages of information.

From the look of the site map you would think that everything would have it’s own page, but it wont. I will the information going along the left side and you will see graphics or pictures in the right half. Now each key term will be high-lighted and when you put your cursor over it, it will change all the information on both sides based on the hight-lighted word. It’s still early but my goal is to be able to easily go through all the information without being overwhelmed.

In this lab I was able to draw thumbnails of well designed websites. It was also important to understand the anatomy of the sites i was drawing and to understand them better while drawing thumbnails that could communicate.

Here are the 12 sites

While doing these thumbnails it really helped me to look at and understand more about the anatomy of a website. It helped me to find some fun and creative websites that really worked for there purpose but also in the process I found some really bad sites that didn’t accomplish anything. 

By drawing thubnails of sites I was really able to take apart each website and find the best places to put information, body type, search bars, headers, navigation and more. This lab also helped me to understand how creative you can really be. You do not have to stick to only one the normal format that many websites stick to. 

I also found it interesting to see how some sites were designed in other languages and how they were designed differently.

Now I think I will be able to understand how much more creative I can be with the design of my own websites. It is also always a good idea to know what is out there to help you be a good designer.  I hope that my thumbnails are able to communicate the message of the websites that I drew. It isn’t always the easiest thing to do.

Sketching with structure, accessibility, and design in mind.

My sketches started off pretty rough, because like I said before – I didn’t know anything about how I wanted the site to be organized. I knew nothing of the structure, I was just placing things where I thought maybe they should go. But after I had the basic structure in place, sketching out thumbnails for the Water Cycle site became much easier.

part of my first round of thumbnails

Now that I had my structure figured out, it was easier to decide how to design the site. I had a much better idea of how to organize the information, and therefore could make better decisions on how to make creative design decisions. My next thumbnails not only went faster, but I think they make a lot more sense, are more orderly, and make more sense to the viewer.

part of second round of thumbnails (after designing basic structure)

I learned that sketching out several ideas, creating thumbnails, is a good way to experiment with placement and organization of the structure. It lets you see what works and doesn’t work right away, without spending a whole lot of time figuring it out.

This part is the most laboring, and also the most fruitful.

I have a couple forms of ‘thumbnails’. First, there are the ones that come as my thoughts are completely open to anything and still clueless as to what is needed. In this case, the actual pen to paper process helps, even if the visual result means nothing.

Then, there are structural sketches. In this case, elements are placed in specific locations, though nothing visually is depicted in these locations. Next, are these ones in which structure is still being determined, but bits of style are leaking in.