How I designed ciaran.co.za
In 2020 I started freelancing. I wanted to create a simple website to advertise my services, as well as to demonstrate the kind of product that I can deliver. I went for a simple, familiar and functional website design using Wordpress as a base CMS.
I went with the domain ciaran.co.za - it's not every day your first name is available as a domain name.
The mockup was made with a simple Sass setup using webpack, and gradually turned it into a WP theme of its own as the design progressed. I find this to be the most effective way to create a custom theme for Wordpress.
I chose a colour palette of muted pastels, which I feel represent my personality well. By using colours which aren't too flashy, nor too dull, the theme is able to 'pop' on a number of different screen types, including when dimming / anti-blue-light software is used.
I used Karla as a heading and body font as it's very legible for long and short-form content, on devices of all sizes.
Accessibility is important, and sometimes (rarely) the 90's web managed to get it right more than we do today.
In order to quickly and easily add new work to the website, I created custom shortcodes for different cards I would need.
The first of these is a simple card that I use for items in my skills section, as well as for posts on my blog roll.
I'm using Ionicons as a flexible icon set which I can easily incorporate into the shortcodes I made. Here's a text example of what the shortcode looks like in the back end.
I also created a more fleshed out card for use on my projects and portfolio page. This card needed space for a subtitle, a button with a link, and needed to look great on both desktop and mobile.
The corresponding shortcode
Forms are an important part of any website. I've got CTA buttons littered all over, leading to the same basic inquiry form. This helps keep my incoming emails organised.
I tried to use a different CTA text on each button to keep things interesting. The buttons open the pop up form pictured below.
I've got one other form on the home page - a simple mailing list sign up.
