Viewed: 2249

About the redesign V2

Website in 3 minutes

This post is just about some thoughts and processes I make whilst designing a website, but this one is about one for myself. As the saying goes “you are your own worst critic.” It certainly stands true for this, many ideas went to waste but I’ve got something I’m relatively happy with. I hope you enjoy the read.

Well where do I start? Like everyone redesigning their own personal website, it takes a lot for you to design something you truly, truly are happy with. While I’m not truly happy with this redesign, I’m happier than the previous version. I think I went through around 10 different designs, while some may have done more. I completed a fair few in full code and the majority of the pages of that design.

Why this design?

Well it’s a pretty easy to answer that question. I came to this design through chance to an extent. I thought the idea of adding a 3D type depth, was a pretty cool idea. The other challenge I kind of set myself was, being able to do it in as few images as possible and replicating as much in CSS. Which I think I have done very well (just try zooming in and everything apart from the header will remain crisp).

Inspiring buttons

3D buttons by Rogie King

3D type buttons by Jonatan Flores

Inspiring designs

An older design of Made by Elephant

The vertical navigation and display of the work helped inspire the recent work on the home page.

Not enough inspiration?

While I have only noted a few examples, they are the ones that played quite a big part. Various websites, articles and such, helped me with ideas for content layout. As that was what the main focus was to me, I want to give users a good experience, a simple experience and not too much ‘blab.’ However I did do a rather large amount of sketches to get a rough idea, far too many to show just on here, as well as Photoshop mockups. Reason being I was trying to go for something that wasn’t really inspired from anywhere, though the overall design probably relates to many things, of course.

Sketches

Albeit poor quality, you will get an understanding as to where I was going!

The drawings most like this design.

Firstly, this is what the final sketches look like in my book. The rest below will be of concepts and a couple went further and were almost what I ended up with.

Sketches of a totally different idea.

This one almost saw the light of day. I coded the majority of the pages.

A rough idea, which I thought wouldn't work.

A rough idea, which I thought wouldn’t work.

Actual designs

The two which I was most happy with before hand. Both of these examples are in the browser. So there is a couple of things that are out of place, like the pink line and misplaced footer text. Why didn’t I use them? This may be a question of yours but because they weren’t as adaptable/easy to work with for being responsive. This one is much easier to make responsive. While it isn’t at current it will be at some point. I will follow it up with a blog post when it is.

One of the ideas that was possible.

One of the ideas that was possible.

Wrapping up

Well, this turned out to be longer than I’d expected. I had so much to show of how I got to this design you see now and all that I’ve done leading up to it, the post could easily have been twice the length. Basically I wanted to achieve something that would work responsively (when I’ve got the correct CSS in place) and a design which could easily adapt from time to time to make easy changes for blog posts.

Next to read

About the redesign V3

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design beautiful websites. You can unsubscribe anytime.

Subscriptions not currently being accepted and will return shortly.