My website rendering for the grey box method.

This is my concept for my grey box method. I want to make my website equally about the planets and the other parts that make up the solar system. I’m going for a clean look. I think with a subject as vast as the solar system that it would be very easy to go into infomation overload. I want to effectively teach the 3 concepts without adding too much info and losing the kids interest. I think that it’s important to keep a focal point. In this rendering the focal point will be the header with the site name and logo. As the student navigates through the site it will be easy for them to go back to the home page, etc.

Creating a design helped me visualize my website.

Well creating the grey box for my website I could really visualize how the text blocks would effect the titles. With just the wire frame I never noticed how important it was to make sure the heading and content flowed together. Designing on the web is almost nothing like designing for print. Because of the limitations of the web it can make it very difficult to make all the spaces flow seamlessly. I learned that without text and hierarchy, your wire frame will not always make sense, and you may need to rethink your wire frame in the end.

I found the Gray Box Method to be extremely useful transition. Usually after the sketches, I lose myself in trying to push pixels around here and there as I try to mold and design something that is a close equivalent to warm jello (constantly changing shape and form). The Gray Box Method allows me to put a solid foundation underneath that won’t flex upon every aesthetic whim. I have the cake baked and solid; now I can focus on frosting it (well, almost… technically it’s still not online and functioning, but you get the picture).

The following are the Gray Box models of both the entry-level home page and a main-level page for the site. The site name is Science Tkt (standing for Science Tool-kit-terminal) in connection to the idea of the design. I know there is a Science TKT certificate, but we’ll call the difference between the capitalization good enough.

The site will be designed to appear as though the viewer is looking at a computer-type terminal that they can access to learn the basic information (or tools) to start exploring the world of science. The home page displays as the terminal cover which retracts to reveal the desired main page layers below (which in turn pull out or retract) as the student navigates through the site.

Home Page

Main Level Page

All of this is so very new! I like it!

This really helped me simplify my thoughts on how I wanted this to look. Not only did I have the chance to see what the basics of the site would look, but I could also how different values interacted.  in no way am I perfect, or even good at this, but I think this a step in the right direction. As always i am open to any and all critique and advice.

Making a gray box is useful to the overall design. It solves problems before you get to the details of designing.

After I had the basic structure I wanted, I started putting more detail into it, and changing it around until I got my “gray box”. Even though it still doesn’t have many details, like the pictures I want to use, the typography isn’t exactly what I want to use, and there aren’t any colors, it gives me a much better idea of how to design my site. It shows me what’s working and what’s not, and helps me put more things into place, like the tabs and links i want to try to use.

the gray box

Designing a gray box first I think will help me with the overall design, because it’s already mostly laid out. I’ve already worked out the kinks, so even though there’s still lots of work to do, this will be nice to look at to help me make my design choices.

Unable to restrain my desire to design, my wire-frames are way over worked. I admit to have wasted time on details and I’m not ashamed in the least. I’m having a blast.

I’ll quickly represent the several versions in order of their creation:

Graybox 1

I began focusing on the different types of erosion. Before long I realized that this approach may not be very helpful to the student or teacher. Landforms don’t just change through erosion. I neglected to include the lesser known but equally important principle of deposition. They are really the yin and yang of this natural process that shapes our world.

Graybox 2

Although this was an improvement, it became apparent that I’m a boring 30-something trying to design a website for kids. So below is my first stab at trying to redeem myself.

Graybox 3

I’m itching to be done now that I’ve done the greybox.
I can see how I want it to be done. The greybox method gives both the client and the designer a good idea of where the project is heading before the actually production.

It’s hard to know if your organization in navigation & hierarchy really does work for your topic because you’ve been staring at it for hours and putting it together by yourself.

The real test is to be able to put your work in front of a random person and see if they know where they are on the whole webpage. I made my “gray box” mock-up kind of in the middle of “the book” or information, just to show what it will be like throughout the piece. The homepage won’t be that elaborate & I think that the navigation is more important than designing the homepage first…

The categories that I will be teaching are “Structure of Matter”, “States of Matter”, “Changes in Matter”, and then an easy Quiz at the end to see if the student really understood what they read. In each category I’m going to have 5 different “sub-sections” or “pages” that will divide up the content so that it doesn’t seem so overwhelming. They will include images and not so much text because I’m pretty sure 10-11 year-olds don’t like to read a ton of text… I mean, well… I don’t, and I’m twice their age…

Boxing out the design

Because the top left corner is the first place users look that is where the site identification will be. The site options or navigation is underneath with lots of space for each tab so it is easy to see and has a quicker read. The imagery has the most space because this is the “eye-catcher” which also serves to teach visually. The header will contain a permanent image that helps to brand the site. The content will have most of the words and such. So they don’t get lost they are placed next to the image they will be describing, close to navigation, and in one of the viewer hot spot locations on the page.
Overall I like this design because it is simple and straightforward.