ps.design - More than just an after-thought

After launching version 4 of my website and version 3 of my blog in early 2011, come the middle of the year I became increasingly frustrated that the website that I loved designing and publishing bored me upon updating it and adding new items. Not only did the appearance now look drab and flat, but it was also a pain to update having so many pages to change for just one portfolio item. I made the decision then to have a one-page site as my new design for my website, and an equally brilliant design for the blog.

After a serious mix-up that was the result of me basing my first attempt on a template purchased from ThemeForest and claims of being a copycat, I decided to go from scratch and design a site from the ground-up, from everything to the style and structure, to the social icons used to link to my other accounts.

After falling in love with the textures seen on SubtlePatterns.com I decided to use the texture you see behind this text as a base, with a mix of colour that was desperately missing from my previous website. Around the time I was building ideas, I was using Google+ and loved the idea of the Circles to organise your friends and colleagues, and wanted to implement the same sort of idea for my site. Focusing on what areas I design in, I come up with a colour scheme to describe each area: Green, web design; Red, wallpaper design; Blue, UI design; Pink, graphic design.

The biggest sticking point was how to implement colour into other areas of the design, areas that wouldn't necessarily have any colour infused in them, like large blocks of text. This is where the circles idea come in, and tied in with the colour scheme, I included the circles you see behind the text to link together the different sections of the one-page design.

Using the same circles approach with the social icons, I wanted to design a set of icons that were unique to me and yet faithful to the original colours and styles of the original branding. I come up with the icons as the last part of the design, and to celebrate becoming a Pro on Dribbble, gave them away as a freebie.

Also, after implementing the idea in v4, I decided to go one step further for v5 and design a custom icon for saving as a bookmark on iOS devices rather than just a flat icon with my logomark on it. This time, I looked through the App Store for inspiration and the 3D icon effect, particularly the Wunderlist icon. After coming up with a wooden version, I finally settled on a black leather version to make it look more like a sketchpad with leather cover. To see this icon in it's full effect, simply visit the website on a iOS device - iPhone, iPad or iPod Touch - and select Add to Home Screen, where it'll place the icon, ready to touch for easy access to my site.

After a warm reception on Forrst and Dribbble for the design, I cracked on with coding the design up in simple HTML5 and CSS3. Implementing new features such as border-radius, multiple backgrounds, and web fonts, and implementing features missing from the previous design - improved navigation, sticky footer, improved copy - the end result is a site I'm happy with, and that has deserved the positive reception it has received and I can confidently say that I won't have plans to do another re-design. Yet...

This same colour and texture scheme will run into v4 of the blog design, with a new responsive layout and improved WordPress theme, and another project I'm working on alongside the blog. Somewhere down the line, too, this website will become responsive so the site can be viewed on different devices, providing the same unique experience, but customised to your browsing preference.

Websites ps.design v5 has featured on: