Meet The Team Web Page

The first task that we had to do as a group in this unit was to create a ‘Meet the Team’ page on our web application.  Seb Faull started to work on the visual design of the page using Adobe Illustrator in a wireframe format so we could quickly adjust something if it needed be. Here is what the wireframe looks like:

yumi-about-us-WIREFRAME.fw

Now with this wireframe in mind we discussed the importance of responsive design. So we thought, what would our ‘About Us’ page look like on a tablet or a smartphone? After a fe initial ideas Seb came up with this design for mobile and tablet for the ‘About Us’ page:

yumi-about-us-mobile-WIREFRAME

Now that Seb had created the initial design wireframes for the ‘About Us’ page I decided to take it a step further by developing a final design of the ‘About Us’ page using colours, graphics and images. The logo is an early version of the web app. Here they are:

about-us

And the mobile version:

about-us-mobile

As the project proceeds we analysed that it would be a good idea to comment our coding as we went along so that we don’t get confused by each other’s lines of code. Between us, we suggested that we stamped each comment with an initial so that we knew who has commented, for example:

  • <!– E: Elliot’s HTML comment –>
  • /* E: Elliot’s comment */
  • // E: Elliot’s PHP comment
  • // E: Elliot’s Javascript comment

The final result of our ‘Meet The Team’ page looks like this:

Yumi

As you can see, it is responsive:

Yumi

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