voyage

here is an article that gave me inspiration for this project and also helped me break down the design process so i could match it best with my target audience.
smashing web

Voyage test 2

I’ve just gave my brother the voyage to test again, he seems to like it a lot more especially the games I’ve done. The main thing I need to work on now is wording up the information so it’s interesting, informative and short because he still finds the information too much to read.

So I’m going to cut the word count down to a few sentences for each section, like what most kids books are like.

Voyage validation & a breif update

In todays lesson we went over html validating what is required in this project. I have uploaded my pages and fixed all the pages exept the main page, were their is only 1 error stopping it being passed the error is on a rel="" tag, i have tryed to fix this problem but it breaks the code, the rel tag is linked to a hidden div that appears when an image is clicked. I have discussed this with Giselle and she said aslong as their isnt anymore errors it will be fine.

I am aslong creating an accessibility page and im going to enlarge the navigation making it easier for children to use.

Developing the Voyage

Were i am?

I've coded up the one page website and tested it on my brother and sister who said that its easy to follow and they like the drawing but they both said it was abit boring!.

So iv decided insted of clicking the space station and it taking you to google maps, iv made a little jquery game were you have to search an image looking for an alien alot like wheres wally. After creating the jquery game i imported it into my site using an iframe jquery pop up box.

final design

Here is my final design for the project voyage, iv kept the design simple and easy to follow because im aiming it at kids.

wireframes

My first idea for the voyage was to have five seperate pages with each page having hyperlinks taking you to different pages. Here is the wireframe i created.

After looking through the web i was fascinated with one page website and decided the best way to portray a voyage would be on a one page website letting the user scroll through a story.

So here is are my new wireframes for the voyage.

Thesite is going to start from the bottom letting the users scroll to the top showing various stages of the vohage. Im going to add a navigation to the side of the site making it fixed.

The 1st page is going to be very simple just telling you what the site is about and how to use it.

The second page will have information about spaceships and nasa.

The third page will have information about space, it will also have an image gallery and a link to Google map so you can see your house from space.

The fourth page will have the spaceman landing on the planet with information oh how long it took and about the planet.

The last page will just been an image of the spaceman putting the flag on the planet and being approached by aliens.

Gant chart

Heres my gant chart braking down how i will design and develope the vohage. I created it using illustrator becuase i didnt know how to create one using the programs i downloaded.

DP3: voyage

We have been given our first DP3 assignment called voyage, the brief says we have to create a 5 page website that’s valid to WC3 standards and includes at least three interactive javascript routines that enhance the interactive experience.

I have decided to base my voyage on space, having a man guide you through his voyage. I'm aiming it at kids aged 5-11 to give them a bit of information about space, spaceships and a planet what I have yet to decide.

I am going to create a one page website for this assignment most likely in HTML5, That has five separate areas, Im aiming to make this site fun and easy for kids to navigate around.

After researching on how kids access the web and navigate the web iv determined that I’m going to keep the design simple, because by throwing loads of information at young children it can sometimes put them off and make them loose interest, I will also have to think about how I put across the information I need to make it educational but fun.

These screenshots below are from kids websites. this is the kind of feel i want to portray through my website i want to make the site interactive making the user looking for links, without making them too difficult to find.

I have created two colour charts as a guideline to what colours I will be using.

Structuring my new website

when creating my new website first i thought of what information i wanted to get across then structured the design around it.

1.Logo
I placed my logo in the top left hand corner of the page because users  read from left to right then top to bottom and that's how they mostly view websites. so it made seance to put my logo in that position.

 
2. Tagline
Having a tagline allows the users to gasp a rough overal idea of what the page is about and what the designer (i.e me can do).

3. Portfolio
This is a good way in showing off your best bits off work mostly used in a banner. this can help draw the viewer in.

4. Services
My tagline was a quick discription of what i do. but this part takes them headers and expands them into more depth.

5. Call of action
These are links i have placed in certain areas of my page to try and keep the user viewing then can be links to anything I.e Read more, Contact me, View Portfolio.

6. Social Networking
Adding social networking links into my website allows the user to follow me and see what projects im working on and my design process. it also lets them speak to me alot easier then sending me emails.

7. About me
with all portfolio you have an about me this allows the user to read a little me  and maybe understand how you work, what qualifications you have and were your from.  Its a little along the lines of a cv becuase your trying to sell yourself and your services.

after this process comes the fun part designing the website.

Bad Design

 Billy Connoly's website (bad design)

My Version of good design