This is my site map

Site Overview |  The main objective of my is to inform. I want the viewer to be able to know about me, my projects, my skills and my design by viewing my site. I think that it’s important to make this site easy to navigate and not content heavy. I will have about 5 areas of navigation: About, Contact, Blog, Portfolio and Other. I think that all of these areas are important so I choose to include them all. Some of these areas will be very simple (About, Contact and Other), while the other ones (Portfolio and Blog) will have a lot of information.

Audience Description | My goal audience is future employers and fellow design students. I want to be able to show all of my abilities through my portfolio while at the same time showing how a successful website is created. I want to impress an employer so that they will be interested to see more. I want to be able to depict my work to my fellow students as well.

The Solar System

HERE is a link to my live site!

Imagery for Assignment 2.

For the website that I designed, I choose to go with images from Nasa’s website and also wikipedia’s website. I like the consistency of the photographs and also the detail in the planets.

My website:

This is my photoshop comp. I like the look of it because it’s clean and simple. I don’t want to overload on the information. I choose the colors because they seem like colors a 10-year-old would like.

Typography is limited on the web.

This is unfortunate. Fortunately, my website isn’t too heavy type wise. I will use a san serif font for my title words and i will use a serif face like palatino or georgia. I’m not sure what other information is needed for this post. My typography will include a little information about the individual planets, moons, etc. and then it will include a list of facts about that particular planet.

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.

thumbnail sketches

Here are my initial thumbnail sketches. There are several differnt web layouts that I like. One of my favorite ideas was to have the main navigation from planet to planet to be a magnification rollover. I want it to work something like the dock on mac computers. I think that would be a really cool way to have the students learn planets. I don’t know if that would be too complicated though. The rest of my sketches include just some other ideas and layouts that i think look good. I’m trying really hard to keep it simple and easy to use as well as entertaining. Let me know if anyone has suggestions. As for me, i’m going to bed:)

Structure

The basic structure the i’ve come up with for my website consists of a different page for each planet. On the specific planet page there will be an image, information about that planet, fun and quick facts about that planet and the navigation to take you to other pages. When i looked at other websites i noticed that they felt really text heavy. i want to get my subject across to the kids without being too deep into the content that they are overwhelmed. I want my site to be easy to use and fun so that the student actually enjoys learning about planets.

site map & basic structure

Research

Who is your client?

5th grade teachers

Who is your target audience?

5th grade students (10 yr. olds)

What do they expect?

To learn about a specific scientific subject. In this case it will be about the  planets in our solar system.

Write a list of required outcomes: (these were taken from California Standards Test Questions)

-Students know the Sun, and average star,  is the central and largest body in the solar system and  is composed primarily of hydrogen and helium.

-Students know the solar system includes the planet Earth, the Moon,  the Sun, eight other planets and their satellites, and smaller objects, such as asteroids and comets.

-Students know the path of a planet around the Sun is due to the gravitational attraction between the Sun and the planet.

Objective:

Explain the following: The solar system consists of planets and other bodies that orbit the Sun in predictable paths.

Discovery

Content will be taken from books and articles. Illustrations and/or photographs are needed to get the idea across and make it interesting for the kids to learn. It’s a very visual subject because we can’t see planets with just our eyes, we need something to depict what they look like so that the students will be able to recognize what they are seeing. I will also need text that qualifies with the California teaching standards.

Competitive Analysis:

Strengths & Weaknesses:

Content- lots of info. heavy subject. possibly too confusing?

Web-minimal helpful and easy info. poor websites. old and ugly.

Print- Lots of information in books, etc. interesting. Possibly not modern enough. Needs to grab attention.

VISUAL AUDIT:

My concept: to create a clean and simple site. intriguing so it keeps the kids’ attention. don’t overload on the information. Colorful but not too distracting. Clear objective and options. Easy to read text so that it is fun for the child participating as well as beneficial and helpful in the learning process.

kidsastronomy.com

enchantedlearning.com

learningplanet.com

nasa.gov

This is my experience of lab no. 4.

During this lab we added CSS styles to a given HTML code. I thought that this was a really good practice of skills that I already have but I also learned a lot during this process. In my other experience, I just wrote the code for both html and css from scratch so to have the css window show me all the options i had and how i could easily edit them was a HUGE help! It actually made me upset that I didn’t know about it earlier. Oh well, here are some images of what i changed.

This is what the actual file looked like.

This image includes the CSS styles I added to the given HTML code.