Planning New About Page!

Today it has just hit us that we have one week left till the easter holidays!!! This means we really need to get a wriggle on with the page so we can get the hard bits down and work on the easy bits over the holidays. Yesterday In the workshop we realised that Rafiel accidentally Written over Becky’s code for the about page. So after this we thought we really should add more to the page to make it match the posing page. Me and becky both thought it would be a good idea to make the page have a cool little Toggle/Hover Over to make the page more exciting. To do this it would be difficult as we had previously used bootstrap… So We thought we need to start over again.

11165862_864765020263511_425986763_n11127211_864765023596844_42030045_n11169106_864765006930179_508644712_n11156849_864765010263512_1599771126_n

As you can see above I have made a few sketches of potential ideas we can use for the about page. My ideas have came from many about pages i have seen over the years and also a few webpages I saw when looking for the best about pages on the internet. Most of the pages I looked at followed very simply layouts that mainly consisted of box formations. The following designs where based on this fact…

  1. The 1st photo is my design that was based on becky’s first design for the about page that she made using bootstrap. This is a simple design with the navigation bar at the top of the page so the user can navigate though the site. Next is a few boxes that include an image, name and text on each one of the boxes.  This so we can show who was included in the project and we can then talk a bit about ourself so the user knows us a bit better.
  2. The 2nd photo is a different design as i’m trying to get away from the original idea. I wanted to use some jQeary in my design to make the about page a more exciting and interesting. For this design I was was wanting 4 circles with a rectangle in the centre of the page. Then as you hover over a circle with one of our faces in then the information will them then when you take the mouse away it disappears or this could be a click function.
  3.  The 3rd design is displayed around 4 simple squares on the page then have a function of then the user clicks or hovers over a box then all the others drop to the bottom or top as the middle box then expands and displays any information needed. Then then un clicked or the mouse is moved the boxes will go back to normal.
  4. The 4th design I would have 4 simple boxes that you can click onto and then the box expands as the others lay below and shrink. Then if you click again the image moves to the side and a information box about the person will pop out. Then you can click again to hind this.

After looking over my 4 final ideas I took some time and finally I went with Number 3! this was because I fell that this is the best for the page. the layout is nice and simple and also is really user friendly. It don’t make things too complex on the page and includes everything I was planning to include. After this I then coloured it in to see if it looked any better. After this I then thought to make the design on photoshop to see how I want it to look when I go to design it in HTML and CSS. So blow you can see the finished PSD design of how the page will look. I also followed the same colour scheme as the posting page as you can see below, by sticking to the grey blue and green theme. The next steps from here would be to create this design now in HTML and CSS and make all the functions work as I have intended.

11125488_864764996930180_1513847805_n Screen Shot 2015-03-18 at 09.29.13Untitled-1

___________________________________________________________________________

References:

Unknown, 12 of the Best About Us Pages on the Internet Available from: http://www.blogtyrant.com/best-about-us-pages/ [Accessed on the 24th March 2015]

Unknown, 20 Creative & Useful “About” Pages Available from: https://creativemarket.com/blog/2013/08/21/20-creative-useful-about-pages %5BAccessed on the 25h March 2015]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s