Potential Solution for Barclay’s Online Banking Website on Mobile

As a barclay’s account holder I’ve always been annoyed by the lack of mobile support when it comes to their main website. I guess it’s due to the high attention for their mobile apps. So I decided to try and do a mock up of a mobile view for their website.

Barclays_mockup_before.png

Current Website

Barclays_mockup_after.png

Potential Solution

Advertisements

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.

Task 3 – Stop-Motion Animation

In this task we were asked to create our own stop-motion animation. In order to do this we had to sketch out a series of images and place them in a row on long piece of paper. We had to make sure they had 12 frames in order create a 12fps animation. I decided to do the bouncing ball.

Below is my outcome once I assembled it on imgflip.com

dy5yi

Overall I was very pleased with my animation of the bouncing ball. Despite it being such a short animation it was great way for me to get the taste of stop-motion animation. It also let me appreciate the hard work and effort it must have taken to create my childhood cartoon shows such as The Simpsons.

Task 1 – Alphabet Outcome

I decided to take on alphabet task with theme of “things at university”. After I took all the pictures I assembled them all together on photoshop.

Below is the outcome of my task:

ABC

Overall I am quite pleased with my outcome as I was able to demonstrate my ability of being aware of what’s around me. It also let me test my ways of turning several objects into an art piece. I enjoyed the practise despite being unsure of where to start and how I could get all the letters.