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

client business card and flyer

Here is the final design for the business card and flyer i created for a client.

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.

client project

Today i met a client who owns a barber shop called Mario's barbers. He wants me to slightly redesign the logo, create flyers, business cards and a website so basically the whole package.

Today ive redesigned his logo around his ideas and started to create rough business cards.

Old Logo

New Logo

Business Card

What im up to?

Im currently working on a report about networking, I have anaylized my network and put all the people i think can help me in this indistry like comapnies, freelancers, events and people from uni. I have also approached a couple of company asking them some question that i could add to my report, I have also asked about work placements and for them to look at my portfolio.

I have made an attemp at designing my network but im not sure if it really works.

Networking

In todays lesson with Shaun, we was split into groups of 5 and tasked to brainstorm & create a network showing what we think the web is.

Virtual Environment storyboard

Haunted ride Evaluation

My main ideas and intentions that I was trying to express in the project were: 

In this project my aim was to create a 1 minute long animation of a haunted house, what consisted of 2 to 3 scare scenes and would fit inside the Waverley theatre. I went with a traditional haunted house ride theme with ghosts and skeletons.

The methods I use to develop my ideas were: (brainstorming, , visual research, storyboards etc)

I first created mood boards to get an idea of what style I wanted my ride to be, after deciding on a theme I went onto create sketches of the cart and entrance.  I also produced a storyboard for the narrative of my final animation so I knew how it would pan out.

I took a risk by trying something new. (Explain):

I took a risk by mixing both 3d object with 2d projected images in my scare scenes. i think that this worked well and saved me a lot of time.

Some of the unexpected problems I had to solve while working were:

One problem I had when building  my ride was creating fog, after applying it to my scene I couldn't set it to the right height and amount I wanted. Another problem I was faced with was cameras and making them move and follow the scares in my ride.

The decisions and choices I made to help solve these problems were:

For the fog I researched and looked at tutorials to help find how to alter the setting and also a suitable level of fog for my scene. For the cameras I just perceived and played around with the timeline until I got it looking smooth.

The things I have learnt from this particular project were: (Specific examples should be cited.)

I have learnt the difference between lights and how you can target a light on a specific object or area. I also learnt how to create fog and camera animation.

Areas for improvement , If I were to do this project again I would change or do differently:

If I was to re-do this project again I think I would work a lot more on the second scare scene. for example because it's a library I would possibly have floating books and I would spend a lot more time on creating the to make it look authentic.

A new project that might grow out of my experience maybe:

With what I have learnt I feel that I could create an animation in my own time and feel comfortable using cameras and lighting.

Virtual Environment week 3

I have changed my scare scenes since my first ideas mainly to do with the second scene. The second scene is know longer an office its a library. here are my sketches.

Scene 1 outside.

Scene 2 inside.

Virtual Environment week 3

In todays lesson we learnt how to add textures and how to make quick realistic shapes using diffuse, alpha, bump and uvw maps.

Here is a screenshot from my haunted house.

I have also finished making the entrance for my ride and here is images i researched whilst finalizing my design.

Here is the sketch i created and also the rendered version in 3ds max.

Virtual Environment week 2

Heres a few images ive gathered for inspiration on how i would like my upstairs scare scene to look like.

Heres a screenshot of my progress.

This is how i would like my haunted ride library room to look like along with the feel as you go through it.

What i've been up to

In our two week break alongside doing my visual essay i have been working for a client structuring and designing his website.

He's a musician who wants to promote himself and his  music by going online. Heres the template i created for his homepage.

At first i thought of coding it up to be a blog theme but after thinking about it i decided to just run the blog feeds through the page using rss feeds, JavaScript and CSS.

So far its been tricky coding the Rss feeds but I've finally got it to work, and i've also used rss feeds on the media page to make his site more user friendly letting him add new videos via his blog instead of trying to import them into the website manually.

Virtual Environment week 1 Homework

Track model

This is my scale of my haunted house ride it consists of two floors. the first floor is going to be a grave yard. The second floor will be a spooky office out of a haunted house. 

Story board

Cart design 

Virtual Environment week 1

Mood Board
Here is a mood board for the type of style i want to portray on my haunted house ride. i have gone for a traditional theme with skeletons, chains, coffins, ghosts and so forth.

Screenshot

This screenshot shows the structure of the roller-coaster, I have designed in todays lesson with Andrew. I created it like this because i want to have two floors to give me space to create various rooms containing a scene and scares.

Interactive Space 500 word Evaluation

For the interactive space assignment I had to create a online portfolio which consists of at least 5 pages.  At first I created a very simple theme and feel but after feedback from Shaun and other people on the course I decided to focus most of my time in making it look interesting & giving it a personal feel. I researched various online portfolio's until I started to get a feel into how I wanted mine to look and be structured, I kept my website to one font Arial, And 3 colours black, pinky red & blue. I went for a traditional way of presenting information because that's what I believe is the most easiest to follow with the logo in the top left hand corner followed by the navigation bar, Then an image gallery what should hopefully draw the viewer's into my site, Then with the content below followed by a footer.

The pages my portfolio consists of are;

Home Page

I structed the content, so that people would read the tag-line that's in a big font, then go onto reading a brief introduction to my page and myself. I also added feeds from my blogger so the viewer gets the chance to see what im upto / working on and I added a section of my latest work.

About Me

The about me page is very simple in its design I wanted to give it a facebook kind of style with a section on the right with a picture of me and basic information, Then with the content flowing down the right.

Portfolio

my portfolio took a little bit more planning and gave me a chance to be a bit creative because I separated each area of design In which I offer, I gave each area an icon so that the viewer doesn't have to read the heading to find out what their looking at the icon tells them. I used J query to make each of the images pop out instead of going onto another page, what makes it look a lot more proffesional.

Contact Me

With my contact page I kept this simple with a little message from me and a section of other ways to contact me. this page helped me learn a lot more about form's and coding using PHP.

Freebee's

this page is also very simple I've set it out almost as if it was running through a blog, because I do want eventually want it to be in a blog running alongside my portfolio but I didn't have the time to learn how to do it,  but it is something I am going to pursue over the holidays. I create a freebee's section because like blogging it is a great way to get gain traffic to my site.

I didn't struggle much with this assignment because it is something I have experience in and love doing, the only things what ticked my brain was the information in my footer didn't show correctly on all browsers but after researching a little on margins & padding's I quickly fixed the problems in my coding, I also had a few problems with CSS3 and borders but it was quickly fixed after a little more research.

If I could change my portfolio I would defiantly change the tag-line & its font because its suppose to be eye catching and because it's the same font and the information so it doesn't work.

You can view my online portfolio live http://leighhattersley.comxa.com