Conor McAfee

Nov 1, 2015

At long last, my personal website has gone live with a fresh lick of paint. In the past, I have always neglected my website - it only got a refresh whenever I was starting a new term at University or if I was applying for a new job. This time, I wanted to do it right.


I’m about to point out the obvious here, but the reason for this redesign was to show off what I can do as a designer & front-end developer. My previous websites have been rather basic to say the least, and were merely put together because I was applying for a job. I want this one to be different.

To me, these were the most important aspects I had to cover to make this redesign stand out from previous versions:

Mobile First Design/Build

In 2015, this should be implemented in the majority of websites created. Yes, there are some websites which maybe do not warrant a mobile first design, or even a responsive website - but they are in the minority.

Many people talk about mobile first design, but to me mobile first is more so about the content & the implementation. It is about structuring your content so that the important information is not missed out. For example, take my About section - it is pretty different on mobile than it is on desktop.

My first step was to write all this content, so that I knew what I had to work with. The next step was to decide what would be relevant to users viewing on a mobile device and to those on a desktop. Once that was decided, I was then able to start thinking about the design aspects of this section along with the build.

If you take the time to look through this site, you will see that there is a lot less going on in the mobile sizes compared to the desktop - my reasoning for this was that if anyone comes across my website whilst on the go, they will probably have came from one of my social media profiles - and more than likely will be en route to a blog post or a case study.

If someone was looking to collaborate on a project, or potentially hire me for a project - they would be doing it on a desktop rather than mobile device.

Unique Landing Page

This was the main one for me, I wanted the landing page/homepage to stand out from the crowd. It’s too easy to have a huge background image with a piece of text in the middle. I’ll admit I was struggling with ideas at the start, I was against the idea of using images from projects I have worked on, particularly on the homepage. This works well for agencies and full-time freelancers, but I was not wanting to portray either of those.

After some more tinkering on Photoshop, and trying out full screen backgrounds of random peoples MacBook computers it hit me that it is extremely hard to design without any assets or content. Enlisting the help of my friend Ronan O’Dornan of Nexus Photo was the best decision I made to get the ball rolling with this project.

Since the website is sort of like an online cv, I thought a portrait of me will get the design juices flowing. I met with Ronan in Conway Mill in Belfast where he had access to the loft, it was a pretty unique location to get photos taken, and even though I felt totally awkward getting these done, I was buzzing to see what I could do with them.

Conor McAfee - Half and Half

Above you can see an initial design concept that actually made it to code and live site, I did like this idea however it wasn’t overly unique and I was never totally satisfied with it. By this stage I had came up with this UI below.

Conor McAfee - Posts UI

I really liked this idea, and it went down quite well on Dribbble which is always a nice wee pat on the back. Once I seen the reaction that it got, the cogs in my head immediately started thinking that something like this should be on the homepage instead. By this stage I had abandoned photoshop and was purely designing in the browser, which has its good & bad points but they are for another day.

After some tinkering and playing about with Flexbox at the same time, you can see now what is currently the homepage on this website.

Conor McAfee - Homepage UI

To me, this was taking the best elements from that Dribbble post along with additional tweaks to highlight certain call to actions and I finally have a homepage that I am really happy with. If you’ve any on thoughts on it, please do give me a shout.

Blogs & Case Studies

This is new to - but I feel it is a necessary addition to help me stand out from the crowd a bit. I hope that they can:

I had intended on building a Labs section into the website as well as Blogs & Case Studies - this may still happen but I recently have came up with the idea to take part in a 52 Week UI challenge. I have plans to start it in January in timing with the new year. More on that soon.


Last but not least, my favourite part of web development at the moment. Performance.

Of recent I have been following the work of Scott Jehl and Patrick Hamann in regards to web page speed. If you are not following these guys I suggest you start. It was mainly Patrick’s work with the new Guardian website that opened my eyes about how you can improve the speed of your web pages without cutting back on content. I’m still finding my feet with everything you can do to improve page speed and this will be a work in progress for a while after launch - but I am pretty happy with the current scores on Google PageSpeed Insights at present.