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.


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.


Workshop – Processing 1

At this workshop, we were introduced to processing. A programme writing software that uses similar language as Java. this was my first ever attempt of programming.

We were taught the very basic skills about programming. And was able to create an interactive piece of work.

Screen Shot 2014-10-30 at 15.13.27Screen Shot 2014-10-30 at 15.13.36

Overall this first workshop on processing turned out to be quite chilled and I was able to feel comfortable with the software. I was also happy to see that I was able to create an interactive piece for the outcome as I have never really done anything like this before. From here I intend to go and learn more about processing so that I get more used to the software and language.

First Workshop – Bridge and Photoshop

In my first photoshop workshop we were introduces to using Adobe Bridge and Adobe Photoshop. These software’s would be the tools we needed to help complete our first task of the alphabet photos.

We learnt the very basics of how to use Adobe Bridge as it is a software that helps you edit and organise your images better. For a more advanced level of editing we were introduced to Adobe photoshop and the simple functions and features the software had to offer.

One of the key skills I learnt from this workshop was how to mask and the importance of masking. Firstly, the importance of masking is to allow us to continually edit and modify an image. Therefore I would be able to edit an image and then send it to someone else to further edit it and they’d be able to see the changes that have been made. There is a downside to that as the files would then be bigger than usual. Below is an example of how I masked my image:

I first chose a picture that would be ideal for the masking example. I duplicated the image and changed the new one into black and white.

Screen Shot 2014-10-29 at 19.51.34

The next step was to create a mask layer which was found at the bottom of the layer panel. After that we used the brush tool and choose black. The reason why we do this is because the masking layer works with white to reveal and black to conceal.  I then would go over the area we wanted to have in colour.

Screen Shot 2014-10-29 at 19.53.57

Screen Shot 2014-10-29 at 19.57.07

This is the outcome once I have finish painting in my bus.

Screen Shot 2014-10-29 at 20.09.12

The useful thing about masking is that if I was to make a mistake, I could just turn my brush tool to white and it would repaint the saturated area.

Overall I found this workshop to be very helpful even though I have worked with Photoshop before. I was able to learn the importance of masking and how to mask.