How I made: joannaeyre.co.uk

I think it’s safe to say the idea of designing and developing your own website fills most people with both excitement and dread (mostly dread), and it felt that way for me too at the beginning of this project.

It becomes a never ending thing. You design it, you start to build it, you then start to loathe the design and end up going back to the beginning. Wash, rinse, repeat.

I decided to completely re-haul my own site about 6 months, or a year ago and then I officially started it about 3 months ago, and now here we are.

This time however, I found the process to be so much easier, and that’s because I set myself an actual brief other than simply ‘re-design my portfolio’. It’s not a complicated website, in either design and code, but that’s completely on purpose based on the following information.

Why the change?

First thing I did, was really think about why I felt this was the right time to re-do my site. There were very few real reasons I could think of, but they were important:

• I don’t do design much anymore – 95% of what I do is front end work, and my website didn’t reflect that.
• Because of this, my code has become so much better as it’s my main focus. I didn’t feel my old site represented me well as a developer.
• The design itself seemed out of date.

Setting myself a criteria

The next thing I did was set out all the things I did/didn’t want from my new website. Coding many varied types of websites, as I do, you become aware of the many little (and big) trends that come and go and it can be easy to try and put them all in to show off your skillset. That’s what I did with my old site, and it aged because of it.

This is the list I made and decided to stick to:

• Keep it simple and accessible (gov.org.uk is a big inspiration for me)
• No lame photos of myself taking up the whole screen
• Choose a sexy, but easy to read typeface 
• Fast loading
• No unnecessary scripts (keep it plain HTML)
• No distracting animations – I personally find lots of moving parts very distracting, especially on a website where reading is key.
• Keep it high contrast
• Easy to read copy – no huge fonts, text that’s too small, or big chunks of centred text
• Content is key
• Get to the point (content wise)
• Only use WordPress for the blog
• Make links and buttons clear

The biggest question every designer should ask often is ‘does this improve the user experience?‘ and that’s what I asked myself with every decision I made.

For reference, here’s a screenshot of my old site, which breaks a lot of those rules (it especially did with the OTT animations).

Personally I find it hard to read light text on dark backgrounds, so god knows why I decided to design my website that way. I guess I thought it looked ‘cool’, or whatever 😅I got rid of that immediately.

I also recently learnt about neumorphism and even found myself experimenting with this new design trend, only to go back to my original list and see ‘keep it high contrast’, which neumorphism typically isn’t. And so I decided against it. Did it improve the user experience on my site? No, it looked kinda cool, but made it terrible to use.

A shiny new code base

The main thing I wanted to achieve from my new site was a shiny new code base that was clean, tidy and easy to maintain. This is the set up I went with:

Main website – Static HTML

For the main part of my website I wanted it to be just static HTML. I still wanted to have reusable components, making changes to my site easy, so I used handlebars.js to create a little framework so I could manage headers, footers, nav, etc all from a single file. Gulp then just spits out plain HTML.

I also developed my own gulp set up for this site, which you can download and use for yourself here: handlebars-template

I used very minimal jQuery (22 lines) for the mobile menu, but other than that everything is plain HTML and CSS, meaning it’s fast.

The CSS is written using Sass for easy code management. As a side note; Sass might just be my favourite coding language in the whole world.

And on that note, one of my favourite tools in the whole world is Browsersync. For those that haven’t used it, it refreshes the browser for you every time you save a change, and means you can view the local site on multiple devices simultaneously (including virtualBox)

Blog site – WordPress

The only CMS I wanted was for my blog, for which I chose WordPress as it’s a platform I am well versed in.

There was nothing complicated about the set up, it was pretty much out of the box. In fact I think it’s the first time I’ve used WordPress as just a blog 😂

I copied the main codebase and created a new WordPress theme from it, removed the unnecessary CSS, and then integrated with WordPress. I’m currently not using any plugins, which is nice!

Style guides are my favourite

One of the things I do with every project is create a style guide first. This involves me going through every part of the design first and looking for repeatable/global elements.

This ensures much cleaner code as there’s less repeated styles, and also gives any other developer working on the site a starting point when developing new features.

You can see my style guide here. You’ll see it’s very minimal, but that’s because my site is very minimal 😀

What I hope(d) to achieve with my site

The most important thing for me, is that it’s very easy for potential clients to understand exactly what it is I do and how I do it.

I now feel comfortable if anyone wanted to poke around in my code, which happens a lot, and I also now feel excited about writing regular blog posts because I’m proud of what I have to share.

My site is now in a place where I feel I can easily evolve and improve on it as I continually learn new skills and I can’t wait to share them.

Is it finished? Hell no. I’ve only just begun to use it myself in a real world environment. Only by using it regularly will I be able to weed out any little UX issues and see places for improvement.

With that in mind, if you’re poking around in my code and feel I can make improvements (likewise with design or usability), please do let me know!