Interaction Design

Working with dreamweaver and getting my site up and working took a lot more work than I expected.

I really hope that I can learn more about getting a website up and running but I think it will take a lot more work. I think it was really good to learn to learn  how to make a style guide. Now i can design a site and know what to tell a person when they need to code the site.

What I have finished so far on my site is on my site at  www.jessicabutlerdesign.com .

The style guide is your best friend.

I guess I didn’t really create a full-fledged style guide, but I did keep to my pre-determined styles:

Fonts: Trebuchet & Gill Sans

Colors: Grey, green, yellow, orange

Spacing between elements: 4 px

Imagery: simple and to the point

heading, subheads, styles, etc: all were consistent on each page

Just keeping to these general guides really helped me pull my site together without having to worry about designing it while I was focusing on coding it. It was a really good experience to learn how to create a style and mockup and stick to it!

The Style Guide for Newton’s Genetic Lab is simple.

To brand the site and cut down on confusion the logo and navigation are the same on every page. This is also helpful if the user enters on a page in the middle of the site, they will know where they are at. The sidebar is always on the left, the content on the right and the footer always stays at the bottom. This is also to create a familiar atmosphere across the pages.
Colors were chosen that are bright and fun. The cartoon Mr. Newton adds a fun kid-like element. He shows up from page to page with fun facts and once with his dad. I think this adds a human element to the information.
For the different examples of inherited characteristics photography was used so the trait being talked about was easy to recognize on screen. The idea is the student will instantly know what they are learning about and in future places where they see these traits, widows peak for example, they will remember that John Travolta has a widow’s peak (he is the faceless man in the photo), and that it is a dominant trait.

Mr. Newton is here with his father for students to see what traits he inherited from Dad Newton.

I’m not completely sure how to make a style guide at this particular juncture, but I found that looking at my basic home page template, that it was the basic for all of my type and actions on my site.

The style stay the same throughout my simple site

The vocabulary page imcludes the same font and styles

I tried to stay simple in both font style and in actions. As you switch the different pages within the site, you know where you’re going and and return to where you’ve been very easily.

I haven’t yet placed a style guide in my site, but I believe we are going to be working on that later on in the course.

Through much trial and error and viewing of video tutorials along the way, I successfully completed the creation of my style guides. Not really knowing what I was doing actually forced me explore the tools available in dreamweaver to great depth.

I actually thought that this part of the assignment went very well. Much better than I had imagined. I felt very unprepared but once I began to explore dreamweaver I had most of the knowledge gained in lectures and tutorials come back to me. I got stuck several times but as I mentioned, trial and error coupled with the Lynda.com title on dreamweaver gave me an eventual solution to the problem.

I was quite pleased with how my style sheets turned out because they looked almost identical to my photoshop mock-up. This means that I was able to do exactly what I wanted to using css. Like I said, the best thing about this part was having to figure most of what I was doing out on my own because now I will never forget it.

The website style guide