D4DME – Webpage Wireframe and Mockup Design

To begin the design of the webpage I had to wireframe the design using Photoshop. In order to understand how to do it I looked up video tutorials on Lynda that taught me it.

http://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.html

The video proved to be highly useful as it allowed me to understand the importance of wireframing and how it could be done.

From there I went on to designing my webpage using wireframes on Photoshop. Below are screenshots of how I did it:

Screen Shot 2015-02-23 at 18.37.19

Screen Shot 2015-02-23 at 18.37.54

The wireframe experience let met understand the importance of laying out the webpage so that they are positioned consistently. It would also be handy when measuring the pixels and scale of the later boxes in CSS.

I then went on to creating a mockup design by adding colours and drop shadows to let me get a better idea on how it would look when designing with CSS.

Screen Shot 2015-02-23 at 18.39.53

Screen Shot 2015-02-23 at 18.45.08

Screen Shot 2015-02-23 at 18.52.59

Screen Shot 2015-02-23 at 19.47.28

Screen Shot 2015-02-23 at 21.35.38

Screen Shot 2015-02-24 at 14.00.42

After debating a lot about the colour and theme of the design we decided to change it to a more blackboard design.

Screen Shot 2015-03-09 at 16.42.50

Overall this experiment has taught me a lot about the importance of preparation when looking design a webpage. The techniques were very useful to pickup and will prove to be handy in the future.

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