I’ve always been someone who becomes bored when things don’t change. When projects don’t live. I had this feeling with my personal website. So, the first logical thing to do were some minor changes, to optimize some aspects and giving a better user experience. But as I started I noticed… that wasn’t enough for me. Sometimes I have this “Fuck it, just start this thing from ground up” moments. And that was definitely one of them. So I’ve done a complete redesign of my site. But let’s start at the beginning.

old site
Part of the design of my old site

I first started my site around Christmas time 2016. Mainly for playing around with some technologies and creating a presence on the web. Looking back I had one big problem… Not knowing what to do. Not knowing where to set my focus. So I ended up publishing a site that didn’t fit my needs.
A simple one-pager, made with Wordpress, with no content or blog like structure in mind. But I found it nice to have to option and the possibilities of this platform. The first goal was just to ship it, and now I have to admit… The first result wasn’t the thing I’ve expected. After nearly 6 Months I had enough. Things had to change.

I’ve read a lot about how to redesign your site, setting focus and stuff, but at the same time, I’ve wanted to keep things simple and minimal. To archive that, I’ve divided my planning process into 3 different parts:

Planning the concept on paper

Just a simple note, that was all I needed to set the focus. I have first seen this in a video of Mackenzie Child, where he designs a new site. This note is divided into 4 big parts. In the beginning, you just write down some goals and what you want to archive on the site. For me, this were 3 simple things: Getting to know me a little, set up a blog, keep things minimal and focus on content. —

…By the way… One big aspect for me was also to build this entire thing here in English! Mainly because I want to get better in writing and also because of the wider audience I could reach. But enough from that, back to the planning.

planning process
My paper concept and first sketches

Next up are the vibes and the emotions that should be created. What colors do you want to use? Do you want to use round or cornered shapes? How do you want to work with animations? The last two parts focus on the content of the site. So which pages do you need? And what subpages are coming with them? What elements do they need and what is the overall structure of the site? After this little, written concept, I had a first overview and a point from where to head into the next part.

Designing the interface

Well, I think I don’t need to tell you everything in detail here. There are designers out there, who can tell you things about that much better than I do. But I still want to give you a look on how I did this part and what tools I’ve used. For a lot of quick app prototypes or simple mocks, I’m using Adobe XD. I know, Sketch is at the time much more feature rich, but I also like the simplicity of XD and how fast you can get started. In the beginning, I always create an artboard which is kind of my style guide for the whole project. This is the place where I put all colors, fonts, sizes, and themes.

styleguide
Part of the styleguide. This one got changed a lot!

Then creating some simple shapes going from rough outline to details. Also, make sure to put in some (dummy) content. You can and should always check the experience and usability with the prototype functionality. This is very handy! Oh and don’t forget the mobile site of things! Because my main playground is the mobile app area, I like to make sure that everything works fine on mobile. So I end up designing the mobile interface first and transfer it to the larger screens afterward. When everything is looking good, it’s time to move to the last part.

The actual coding

As already mentioned in the other parts, I’ve wanted to keep everything as simple as possible, but also want to power the code by myself. And I’ve also wanted to move away from Wordpress. Don’t get me wrong. Wordpress is an amazing tool and platform, but I’ve wanted to try something new. Here comes my core tool in the game: Jekyll.
Jekyll is a static site generator based on ruby. It allows you easy customizing and blogging functionality by generating markdown written posts to static sites. Exactly what I’ve wanted! So I’ve worked myself a bit into the Jekyll universe and tried a lot of things out. After some time I’ve ended up creating a custom theme for my site. I could easily code down my simple interface design and Jekyll works perfectly for me!


And now after some time of work and experimenting, I have a completely new web presence. Looking back, I’m really proud of what I accomplished and I’m really satisfied with the results.

Where to go from here

Now only one thing is completely new to me… the blogging. But I will try it out and see where things are going.

Thanks for reading my article! And oh, welcome to my new web home. Take a seat and look around. I would be really happy if you would come back to check out my projects or my other stuff. Follow me on Twitter to keep up to date. I’ll try to hit the publish button bi-weekly. If you have any questions, feel free to contact me!