Interaction Design

• all typographic style and usage
• color pallet
• image styles and usage
• other
• descriptions detailing how and when visual elements should be used.

all typographic style and usage

(all text are black on white except when it is on the image. then is white. except for commentary and credits)

Title:  Rockwell, 85 pt.Black

h1: Rockwell, 37.5 pt. Black/White

h2: Arial, bold, 18 pt. Black/White

h3: Arial, bold, 14 pt. Black/White

h6: Arial, 10 pt. Gray

p: Arial, 10-12pt. Black/White

Commentary: Arial, italic, 12.5 pt, Gray

Main Navigation: Rockwell, 15 pt Black/White

Overview Navigation: Rockwell, 15 pt, Gray

Planet Navigation: Rockwell, 15 pt, Black/White

color pallet

Text: Black, white, and 30-70% Gray

photo: unlimited

image styles and usage

Only planets with Black sky with stars. Keep it simple and united when changes are made.

descriptions detailing how and when visual elements should be used.

Images are only used when visual aids are needed, and also to differentiate the main page from the other sub pagess.

I found some good images online(national geographic), and to make it usable for my own, I cut and pasted images into my own image.

Below is the diagram that I created using the image from different sources.

And I created a few elements for the main navigation:

This is the logo

This is the main navigation

This is a little character out of the logo for narration purpose and also to help the website feel more friendly.

The principle of typography does not change too far from the print design.  There are more restrictions in which font to use, and limitations apply in the design as well, but the purpose of typography: readability and beauty, does not change. I have made my site fairly simple, but easy to understand.

I’m only using two fonts: Rockwell for titles and Arial for the text part. I added lines and boxes to make more interest in design as well as lifting the readability and quick to understand.

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.

With the basic wire frame in my mind, in the sketches I focused on the different visual options

As I was thinking about the layout and navigation, I tried to think about the educational comic-book-like science magazine that I used to read when I was in 3^rd grade. There was a lot o characters, and everything was explained in conversation-like settings. There were many pictures and diagrams…there was a least amount of text possible. When there was a chunk of text, I usually skipped it. Some characters and stories were just silly, but the important thing is that I still remember those things. Though this website is for 5^th grade and the mature level is different form 3^rd grade, The tendency of people to not read the large text remains in adulthood as well, so I’d like to implement some of those principles.

I also looked at a numbers of different websites as well to get an idea of good layout, and navigation; what’s easy to use, and also pleasing to the eye. The Navigations here in this sketch is not shown well as it is drawn in my head, but basic idea is there.

There are two options for the main layout, or the wireframe that I made. I wanted to do something more visual oriented, and simple but different (example1) but I wasn’t sure how much I would be capable to create that, so I made another one that’s more of a standard form.

SITEMAP

This is a basic site map that I came up with. Solar system for the 5^th grade level is pretty simple, and since it is an educational site, I added a quiz option. I don’t know if I will do it yet, but at least I think it’s a good idea to let kids test their knowledge level themselves. I put in two different categories of gray shades; as main information, and the other as sub information. It makes sense to me in this site map this way, but I might have to change things around when I actually put in the navigation depends on what kinds of layout I choose to do. For example, Objective would go with introductive/ summary stage: “home,” “vocabulary,” and “quiz.” And “solar system,” “planets,” and “compare” would go together as a study stage.

As I was looking at more examples, I noticed that when the visual is dominant in the layout, a lot of interactive feature like flash was required to get the enough information out. Especially in kids websites there were a lot of those. Though that’s the case, there were another successful ways without flash and all that. The layouts are more organized but very easy to figure out what goes where. I’m started to be thinking that’s probably the direction I should be heading. There were also many bad examples of too much information with too much flash and animations; overloading of information that your eyes don’t know where to go. I also noticed as I was looking at more of kids website, the whole language used there are different, even one site had friendly word in the search bar saying “put the words your want to search for” …except it was in Japanese so it was shorter than that and more friendly sound… Anyways, it made me aware of how you can make the site friendlier using those insignificant elements.

OBJECTIVE

1: Earth and Space Sciences

1.A: Explain the characteristics, cycles and patterns involving Earth and its place in the solar system.

1.A.3: Describe the characteristics of Earth and its orbit about the Sun (e.g., three-fourths of the Earth’s surface covered by a layer of water [some of it frozen], the entire planet surrounded by a thin blanket of air, elliptical orbit, tilted axis, and spherical planet).

Solar System
Explore our solar system and learn the characteristics of each planet. Compare the sizes of planets and their distances from the Sun. Observe the speeds of planetary orbits and measure how long each planet takes to go around the Sun.

LEARNING OBJECTIVES:

1. List the planets in order from closest to the Sun to farthest away.
2. Classify the planets as rocky planets or gas giants.
3. Observe the scale of the solar system.
4. Describe the shape of planetary orbits.
5. Measure each planet’s period of revolution.
6. Compare the sizes of the planets.
7. Relate the presence of an atmosphere to the size of a planet.

8 VOCABULARY:
* atmosphere, gas giant, orbit, planet, rocky planet, solar system, year

RESEARCH

1. List the planets in order from closest to the Sun to farthest away.

1. Mercury
2. Venus
3. Earth
4. Mars
5. Jupitar
6. Saturn
7. Uranus
8. Neptune

2. Classify the planets as rocky planets or gas giants.

Rocky Planets:
Mercury, Venus, Earth, Mars

Gas Giants:
Sun, Jupiter, Saturn, Uranus, Neptune

3. Observe the scale of the solar system.

see in the sketch
Total Diameter: 7,332,000,000 miles

4. Describe the shape of planetary orbits.

Orbit. Gravity from the Sun is what keeps the planets in orbit around the Sun, just as gravity from the Earth is what keeps the Moon and satellites and the space shuttle in orbit around the Earth. The reason the Moon doesn’t hit the Earth (and the Earth and other planets don’t hit the Sun) is that the Moon is moving fast enough to miss the Earth.

5. Measure each planet’s period
of revolution.

1Orbit              1 Rotation
1. Mercury
2. Venus
3. Earth
4. Mars
5. Jupitar
6. Saturn
7. Uranus
8. Neptune
9. Pluto

6. Compare the sizes of the planets.

7. Relate the presence of an
atmosphere to the size of a planet.

8. VOCABULARY:

atmosphere: a layer of gases that surrounds planets

gas giant: A gas giant (sometimes also known as a Jovian planet after the planet Jupiter, or giant planet) is a large planet that is not primarily composed of rock or other solid matter. There are four gas giants in our Solar System: Jupiter, Saturn, Uranus, and Neptune. they are mostly composed of water, ammonia, and methane; the hydrogen and helium in Uranus and Neptune is mostly in the outermost region.

orbit: gravitationally curved path of one object around a point or another body, for example the gravitational orbit of a planet around a star.

planet: orbiting a star or stellar remnant that is massive enough to be rounded by its own gravity, is not massive enough to cause thermonuclear fusion, and has cleared its neighbouring region of planetesimals.

rocky planet:primarily composed of silicate rocks. Within the solar system, the terrestrial planets are the closest planets to the Sun Terrestrial planets all have roughly the same structure: a central metallic core, mostly iron, with a surrounding silicate mantle.

solar system: The Solar System[a] consists of the Sun and those celestial objects bound to it by gravity, all of which formed from the collapse of a giant molecular cloud approximately 4.6 billion years ago.

year: the amount of time it takes for a planet to make one revolution around the Sun

Organizing Information:Pygmy Goats

One of the difference in print design and interaction design such as web design is the organization of information. Since there are so many different ways to show the information in so many different places, understanding of information in the process of design is even more critical.

This exercise helped me to understand the importance of that, and also prepared me to think in “interactive” way. For example putting styles in html tag names such as h1, h2, strong, etc. was helpful. That way it required me to think of the hierarchy within the contents; which information is most important? And also to think when using the hierarchy, in which way can we represent the information more clearly.

In technical part, combining documents in a book form was tricky, because of difference in style names, or different versions of the program, but working as a group helped to solve problem rather quickly than if I were to do it by myself.