New website with a new (more social) direction

 

I’m always pretty chuffed with it and away a go, not to update it or do any more with my site until the next time I decide to update. In essence, its a futile excercise that delivers very little as I simply don’t have time to constantly write blog pieces and the work posts I do are few and far between as historically I don’t promote myself…my work projects are normally word of mouth.

So based on that lovelly bit of honesty, the question must be asked

Why update the website…again?

I’m at a point in my career where I would like to do more freelance work. I’ve gained enough knowledge and experience to be able to offer potential clients a great service with quality work, so a site redesign is always a good start to help showcase what I can do.

However the same problems still arise for the most part in that in order for the site to have purpose, I need to generate content for it however that’s just not going to happen. I simply still do not have the time or inclination to write blog posts. There will be a few more now, but not on a level with a serious blogger.

So how do we solve this problem?

I may not have time to write blog posts, but I do have time to tweet (@seganaUK) and I also have a Nokia Lumia 1020 which means I also have time to Instagram (@seganaUK) as the Lumia 1020 has a phenomenal camera and I simply love taking pictures with it.

This then got me thinking, could I utilise my Twitter & Instagram activity to help populate my website and give users (and potential clients) a feel for who I am.

Thankfully the answer was ‘Yes’.

The solution

Both twitter and instagram offer API’s to allow people to retrieve a lot of data. After going through the API documentation for both, I began to write some test scripts to pull back data from my own accounts to see what I would be working with. What I learnt was that both services allow people to retrieve a hell of a lot of data and both sets of data don’t really have a similar structure, so how was I going to take each data stream and display them in a meaningful way for my site.

I could get stupidly geeky, but I won’t bore anyone here so instead simplyfy it somewhat. I take each feed, pass it to a function which picks out the information I want to use and builds an array using that data. Each twitter & instagram array has the exact same structure, meaning I could combine them into an output.

But why leave it there? I do have some blog posts & some work posts, surely I should combine them too? Well yes, I should so I did. Very similar to twitter and instagram, I did some geeky stuff and then combined those arrays too.

What I ended up with was a load of information from twitter, instagram & my own website all ordered by the date it was posted and to top it off it was all built into a custom made WordPress Plugin which I’m still to name and release (I’m thinking WordPress Social Feed Gallery).

Then for the fun part (I also find the coding fun, but many don’t) ‘The Design’. The design mostly came from the fact that when I think of instagram I think of old Polaroids, so my initial concept took a polaroid style look & feel on top of a plain background with a pastel orange colour used as the main accent for the site…it was nice. I liked it, but it always seemed to lack the real polish I was hoping for.

It was a bit of a mix of flat design with some skeuomorphism elements and it was ok and I showed a few people who all thought it was great, but again there was something just slightly off about it, so as all designers do I began to tweak.

First thing to go was the skeuomorphism elements. Pure flat design all the way I decided. This worked well and was definitely a move in the right direction. Next up was the colour scheme. I love subtle pastel shades and used in the right way they can be really effective, however they don’t scream & shout at a user. So then, something brighter!

I’m feeling the orange at the moment, so decided to stick with that but just went with various shades of ‘in your face’ orange before settling on the one used. The site was almost there. It almost felt right, but there was still one thing (well maybe two) missing.

Scrolling through the site with an updated feed, I kept being drawn to a picture I had taken of my 2 little girls. I was particularly proud of it and in black & white it has quite an emotive fell to it so the qusiton was then asked:

Could I get away with a full screen image background?

It was good, very good. I was very pleased with myself. It looked beautiful and with some tweaking to the number of blocks per line on the page, the background image could be appreciated enough without drawing a user way from the feed items.

I felt I was there, but I still couldn’t hit publish. Something niggled was there some final trick I was missing and it turned out I was, there were 2 things missing:

  1. I added a nice parallax effect to the background image. It gives the nice slow scroll behind the feed items.
  2. Contact & About pages. They were boring and took the user away from what I was trying to do, so I got rid of them! Well the pages anyway lol I split the ‘About’ into a couple of feed item blocks in the site to always be displayed and also to a large block at the bottom of every page on the site. I also wrote a lovely little script to move the contact part into the site header, to be slid out should a user wish to contact me.

With these things in place, I sat back, patted myself on the back and decided to push the ‘Publish’ button…