Archive | Design for Web RSS feed for this section

Design principles | slender man

12 Feb


Experimenting with clay, i created a model of slender man.


Student Spaces | Final Website | 3Fifteen Design

18 Jan

View my website by clicking here





Design For Web | Website References Used | Bibliography

18 Jan

Design For Web | App Site Development | Photoshop app user interfaces

17 Jan

With the development of my app site I thought it would be appropriate to create some user interface graphics as most app sites featured on typically have a number of examples of the interface. This is because it is the best way that an App can be sold to the user, as if the interface is not appealing, then few people will download it. I tried to make them look as professional as possible by scouring the appsites website, as well as looking at apps on my own iPhone to figure out how successful apps design their interfaces, in order to follow suit.

for the interface I created of the half iPhone (above), I used a number of resources. I had to use the Teehanlax iOS 6 iPhone 5 user interface icons, which I edited myself so that it suited my app site. I used the TWG Retina display icons that I referenced in my previous post to create the button icons at the bottom, and had to mirror the gradient overlays that were being used in the original PSD file for the iOS6 interface icons.

For the home page iPhone interface, I used the leather interface referenced in my previous post. I used the cambridge university accommodation image from Cambridge Rooms and the oxford image from Oxford Rooms website. all of the other aspects of the interface was created using Photoshop alone and my own logos. for all of the iphone images I have used, I used the iPhone PSD files from Graphics Fuel. It was a useful PSD file because all elements were still separate so I could place my user interface underneath the screen shine to make it look more professional.

Design For Web | Appsite Design | User Interface graphics

17 Jan

youtube iPhone user interface

Student Spaces user interface

with the structure of my website complete, the only things left to add are screen prints of the ‘user interface’ of my app to make it seem like an official app site. for this screen print, I decided to use the YouTube app interface where you can press the menu button on the left hand side and it reveals a number of tabs and settings. for the interface I created, I made all of the side buttons, and I found a set of retina display iPhone icons from TWG Retina Display Icons. I had to add the gradients to the buttons, and I also created the main app page from scratch which can half be viewed to the left of the iPhone window. I used a leather pattern overlay which I got from

Useful Website for tutorials | Web Research | Design For Web

16 Jan

Screen Shot 2013-01-16 at 01.07.58

Codrops situated on Tympanus website, is a brilliant resource for CSS3 animations and transitions for links etc. I have used this a lot as the source code is available to use for commercial purposes and they produce brilliant outputs!

Design For Web | Apple animation transitions

15 Jan

I have always wondered how apple managed to make their animations so smooth, and here is a good description and diagram of how it is made possible!