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.
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.
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.
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.
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.
Have a project idea? Feel free to contact me and find out how we can work together.