Interaction Design

This seemed to be the most satisfying step in the process. Once I had my style sheet designed, it was only a matter of making a few minor changes between pages to see finally see my webpage come alive.

At first, the fact that I had only one style sheet to build all of my pages from was a slight challenge, but once I wrapped my head around the concept, it was no problem. Another challenge I had was actually getting my website onto my server. There is quite a bit of terminology and other seemingly foreign things that become very confusing when trying to make a site live for the first time. Luckily with a good walk through you can learn the process pretty quickly. You just hope that you will not have to troubleshoot.

As for how my website turned out, I would have done many things very differently. The problem was that I did not know what the possibilities were before I started planning. However, for my first website attempt I am very pleased. I feel like I learned much more than I thought I would, and I would say that that is a success.

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

This has been my favorite stage of building a website thus far. It could just be that all of my hard work is finally turning into something tangible, but regardless, it was very enjoyable.

Thankfully I already had everything planned out or I could see how a mock-up could be very frustrating. It was time consuming and required a lot of layers, but knowing just where to put everything made it very manageable. I only had to do some minimal tweaks to placement due to my sketches being slightly thinner then the actual page, and my text always coming out larger in my text.

I was actually very pleased with how my mock-up turned out and looked better than I thought it would. However, I do see room for improvement and am excited to get feedback and hear some ideas on how it can function ever better.

Mock-up

The goal here is to create the artwork for our website whether by illustration, photography, or some other means. The imagery should not just be there to take up space, but to enhance the page and the information that is being presented.

Imagery for the topic of erosion was a bit of a struggle. Most of the imagery involves very small particles of rock, wind, ice and other objects that are very difficult to illustrate. These things are also very difficult to locate and photograph. I decided to include a small section on each page for either a photo, illustration, or activity to help the students better understand the information. This variety helped with the difficulty of the imagery. This way I could choose what fit best with each type of erosion, whether it be a photo, illustration, or just an activity so the students can see it first hand.

Having to provide our own imagery opened my eyes to just how hard it can be to find everything you need. Because we are students we get to take the easy way out very often and borrow other people’s imagery. While this is a great time saver so we can focus on other things, it is also important to learn how to use our resources, which this assignment taught us to do.

I found that experimenting with typography for this assignment was much different than any other experience I have had in the past. For the most part, the challenges faced in web typography, and their solutions, are much the same as those faced in print, but you just have to go about it a different way.

The main focus of my typographic experiments related to the very specific audience I must appeal to. Fifth-graders are notorious for short attention spans. Most of them are not thrilled to do their homework and aren’t too fond of reading either. From my experience, most of them are looking for any excuse to ditch their homework and do something “fun.” Let’s not give them that excuse. Instead, let’s give them a fun typographic experience.

I found that one of the most important things to consider was readability. That’s why I decided to increase the font sizes a bit more than usual, and give plenty of leading. I also decided that variety would play a big part. I used different sizes of type, and a serif/san-serif combination to keep things from looking bland. I used the serif typeface for the body text to add to readability, and used a large all-caps heading to draw the reader into the page. Hopefully all of these elements will combine to give the little readers an excuse to stay on the page.

I felt that the grey box part of this assignment was quite enjoyable. After doing so much preliminary research, organization, sketching and not really having anything physical to show for it, then getting to create something that slightly resembles the finished product, was very satisfying.

Grey Box Methodology in action

I found the post on grey box methodology by Jason Santa Maria to be very helpful. One thing he said that made an impression on me was basically that the grey box method helps you to stay flexible in the beginning stages of a website so that you don’t get so hung up on visuals that you lose sight of the big picture. I think this helps you to continue to generate good ideas instead of being stuck because you’ve already spent too much time on a mediocre idea.

Following the grey box method helped me to develop the visual hierarchy and organization even further. I was able to give place to the sections I know that I want to include, but allowed for further creativity in the design of things I am not certain of. As I mentioned earlier, it was also very exciting to see the first hint of my website taking shape.

I actually found this assignment to be very helpful, in fact, I wish that I could have done this before I started sketching thumbnails for my website. I will probably even redo my thumbnails now that I have a greater knowledge of what goes into a website.

I tried to sketch a variety of websites. From google, which has maybe a few links and a single search bar, to websites with about 30 or more links to other pages just on the homepage. Of course my website will be more in the middle, it was nice to see a variety. It was also helpful to see how navigation was different from website to website and to see what information was included and how it was presented.

Thumbnails

I found that every website was different, yet the same. They were all organized diffrerently and all had unique information, but they all shared the same purpose. That was to keep the reader interested and entertained. My website will contain very different information than any of the websites that I sketched, but I learned that the reader must be interested and entertained by it none the less.

Now that all the organization is primarily completed, it is to take the leap of faith into sketching for my first website. I found it to be rather difficult in the beginning, but it got easier and easier with each sketch.

Thumbnails

Even though I have probably seen thousands of websites in my life-time, it was hard to think of a creative design. I just kept on coming up with very similar sketches. However, I was able to build off of each previous sketch and eventually started to branch out.

Right now I am not really sure what my possibilities are, or more specifically, what possibilities are actually going to look good. I also feel rather limited with my current lack of experience, but I am sure that will come. I am very excited to see what the veteran web designers in our class have to offer and hopefully that will give me a better idea.

This part of the assignment gave me a much better idea as to just how much organization and planning goes into even a very simple website. I feel like I gained valuable skills in organization as I sorted through the research and started planning out how it would be presented. Being able to start from scratch proved to be hard work, but it was well worth the experience.

I first did a rough sketch of the site map I had been visualizing in my mind, then I put all of my information in an ordered document. I separated the information into pages as they would be on the web. When I knew that my site map would in fact work, I made a final copy.I could then think about how the user would most easily navigate those pages, and then I had a general idea of how the website should look. I was then able to make a very basic wire frame to assist me in my sketches.

Like I said, being able to start from the ground up has really helped me understand how a website works. I was also grateful that we were able to see a website deconstructed in the Lynda.com video, but there is something more satisfying about the process of creation, especially creating something on your own. I look forward to seeing if my website will appear on the web as I see it in my mind at this point.

The research, discovery, and competitive analysis stage of this assignment was crucial in helping me see the big picture and make some very important decisions before getting to involved in the designing of the website. I decided that the clients are 5th grade teachers, and the parents of their students, who may have to assist the children in their homework. The target audience is the students themselves, so more specifically, 10 or 11 year old boys and girls.

I decided that the students need something informative, yet very simple. Visuals will be a very important part of grabbing the attention of the students. The website needs to be well written, very easy to navigate, and most of all a fun experience. The size of fonts, colors used, amount of information on each page, number of pages, and other similar factors will be a huge part of keeping their interest. Most of these factors made the competitors pages nearly impossible for a 5th grade child to navigate. They are much too busy, and although this may not be professional terminology, they are incredibly cheesy.

I chose to focus on the North Carolina 5th grade science standards, which state that students should learn to identify and analyze forces that cause change in landforms over time including water, ice, wind, and gravity. I decided to have a main page with general information on erosion, with four additional links to pages on erosion caused by water, ice, wind, and gravity. My pages will also contain illustrations to help the students understand. It is my goal to create very simple, colorful, pages that get right to the point without confusing the students or overwhelming them with to much information.