TRIPLAGENT Mockup Challenge

We were given the challenge of recreating a mockup to the best of our abilities within photoshop, one the left is the original and on the right is my mockup;

TRIPLAGENT-MOCKUP TRIPLAGENT-ORIGINAL

Screen Shot 2014-10-27 at 17.24.57

Another element we were tested on was the way we named our layers, I made sure mine were structured in such a way that should someone else have to work on the project they’d be able to understand what each layer represented.

Back to Code

As our first task we were told to recreate this site (http://dynamic.artdesignhull.ac.uk/shared/framework-03/home-page.php)

With a few visual aspects that were due to my photoshopping skills on the buttons and the actual images i chose to include, there are very few differences between the two sites as you can see, they are almost the same.

Original;

Screen Shot 2014-09-25 at 01.23.41

My Version;

Screen Shot 2014-09-25 at 01.23.30

I understand a few things are very important when designing websites. Firstly, keeping your code tidy so you can hand off the work, I believe I have done that with both my HTML;

Screen Shot 2014-09-25 at 01.22.04

and my CSS;

Screen Shot 2014-09-25 at 01.22.16

Secondly a keeping your hierarchy of files tidy and in order, I believe I have also done that;

Screen Shot 2014-09-25 at 01.22.40

Featured Image: http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/code-wallpaper-2.jpg