Interaction Design

Here is my vision of my site. Hopefully I can pull it off with the coding!

While designing, I found myself holding back because of my lack of knowledge about coding a website. That was a big struggle for me when it came to designing. I just had to forget the coding and design what I wanted it to look like.

When creating a mock up, i wanted to see my site as realistic as it will be on the web. Things have continued to change through the past week and here are my posts as of yep for my mock ups.

The mock up’s have changed very subtly in the past week or so, including the background image behind the site. I just did the change on my dreamweaver site and didn’t bother changing the mock ups. I do have my live site screen shot with the background I am using. I also changed my activities page to a quiz because I found it would be a nice thing to quiz them on what they’ve learned on the site. They can also divert back to the other pages to retrieve information.

When I first put together the Photoshop mock ups I had each page in a different file on my jump drive. I was then told by Brother Franson to put them all together in one Photoshop file and just seperate them out into several different folders within my layers pallet. I did so, and it helped me realize how realistic that is to working in dreamweaver and on a real site.

This is a mock up of an activities page i put together.

Mock up for Homepage

Maybe I was watching a star trek marathon...

So ideally I would like the keep the audience on the same page for most of the experience. This layout still needs additional tabs and descriptors but is communicating the feel I think I want for this site.

a better structure

This is the main home page.

and this is what you see on the Planet category-overview.

When you click on one of the planet, you will see this:

And Other categories such as Overview follows as this:

This is the size comparison page, but there are three more categories: Distance, Gas/Rocky, and Year/Rotation.

The other navigation shown: Vocabluary would be simple as well, Quiz might be PDF atatchment. I’m not sure.

It was fun to see actual visual building up.

This is actually a new thing for me.  When I last built a site we did not do mockups, or this process for that matter.  I have found that as I created the mock up things such of the navigation changed look, and position.  I also found myself taking out parts of the design to simplify the site.  As always I am open to any and all feed back.

Continental Shelf sub page

Home Page concept

Main Page

So for my web site, I wanted to have all the information all right there in the same window without having to scroll through a bunch of pages. I want to be treated like any other lesson that you would get out of a textbook, even though it’s a website, I want to treat it like book almost.

I went very simple when it when it comes to the sidebar and header. After looking at all of those bad sites, I noticed that they were very crowded and the colors and fonts they used were really distracting and obnoxious. So I wanted kids to go to a place that was calming and not too crazy, so they’ll actually want to look through the information.

I wanted my site to be very simple so that it didn’t take away from the stuff that the kids needed to learn. I have found it very helpful that I can design my pages all in one file. I’ve really liked how you’re able turn off different layers for different pages. I’ve spent a lot of time on these and I hope that I will be able to put it all online.

Lesson Page

Key Term Section

This is my first shot at a mock-up.

mock-up of Water Cycle home page

Still have plenty of work to do…

It’s finally starting to look real.

It’s really exciting to finally get to add color to the still lifeless design. In this digital comp I focused on communicating what I think the finished web site will look like including some definitions for tags I know I’ll be using throughout the site. I chose colors that resemble weather and still communicate effectively.

Weather is fun.

I used an outer glow effect simply to indicate for myself the 960px width suggested that we use. I really don’t think I’ll use something like that in the final design.

It’s amazing how tentative some of the organization of the web site still is. I’m still developing more of the site, by adding pages and links and finding other relationships between the pages that will help the interactivity of the web site later on.

This is the mock-up I created for the homepage of my Genetics site.

It’s sparse, I know, but working out the navigation and layout in design mode helped me see the direction I really want this site to go in. I realize that I should have done this a while ago, and that if I had, I’d actually have a real mockup that is ready to go straight to the code. But I will definitely work more on this.

My little site.

So, this is pretty general, but it’s what I want to start with. I want to make icons that change color where you hover, and then the current page you are on will have the down arrow. The image that is transparent in the background is a sample of how I want some of the images to interact with the edges of the content area. I like the white space, but I think that maybe one of the columns could be used for something more. I’m also not sure about the logo yet. Any suggestions?

Another option?

Okay, these are both pretty poorly designed, especially this one, but I kind of like the layout.