SoPlayNice Website Redesign

June 4th, 2015 by in News and Updates, Projects

I am in the middle of redesigning SoPlayNice. It’s an attempt to add more features and spruce it up a little bit. Not only so I can show off some more skills to potential clients and employers, but also because I’m fed up of looking at the image on the homepage.

As with most websites you build, there comes a time when you believe it could be done better, there are bits which need improving and bits which need taking off completely. Currently I feel that about most of SoPlayNice, so when I had some spare time the other weekend I opened up Photoshop and started playing around with some ideas.

In a break from playing with the basic HTML and CSS files, I thought it would be a good idea to chronicle the redesign. From design stage to fully built and functional.

Old Version Main Issues

I still quite like the old version of the website, it works, the content is clear and there is not anything too distracting. Yet, little bits of the design annoy me each time I see them, so they are the main aspects which will change.

  • Homepage Images – I don’t do photography and it seems a bit weird that a photograph is the first part of the website you see. I love having images on each article and around the website, but it should not be the first thing people see.
  • Portfolio Colour Squares – I really liked these when I first created SoPlayNice. They were simple, but got the point across. They need to change to showing off the actual work though.
  • Portfolio Pages – They are a bit boring. I haven’t designed this section yet, but the idea and some sketches I have work well. The idea is to have a full page with the title of the project and then scrolling down reveals to workflow and designs/ideas.
  • Comments Section – The article pages work well, content it key on them and this comes across. The comments section is poor though, it doesn’t look like I have paid a lot of attention towards them.

Fixing the Issues

The first point of call in doing so was searching for some inspiration around the web. The current sites I use for looking at other website design are:

By looking at these ideas start to build in your head, mixing and matching certain elements to how you might want to see it.

Photoshop Opens

I always hear a lot about better programs than Photoshop to make designs in, such as Sketch and quite a lot of people using Illustrator. For the time being I’m a Photoshop man. It serves its purpose of allowing me to quickly make a fully-fledged design which taking too much time. Once I have enough of an idea in Photoshop too, I tend to jump into the HTML/CSS preview, which I find represents your ideas a lot better, as that is how the design will ultimately end up on screen.

The following image is which I came up with. Simple, clean and has some bright colours. When coding it up I can add some CSS3 animations and effects to make it more lively.

SoPlayNice Redesign

It is all still a work in progress.

In the next post I will discuss how I start to put the Photoshop design into a HTML and CSS preview design.

Tags: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Have a project idea? Feel free to contact me and find out how we can work together.