Side-project: Alium
To stretch my design and development legs I decided to create an About/Story page for a fictitious company called Alium. They're a tech firm who brands themselves as a company who thinks differently when it comes to tech solutions, and consults for other businesses on the technology they use.
The goal of page I designed and developed was to guide the website visitor through the company's story. The page had to be engaging, and needed to tell the visitor where and when the company started, and why they do what they do.
It's important to note that the content itself is an important part of that goal. However, for this side-project I haven't focused on the content itself, instead looking at the design aspects of this challenge.
The colour palette for this tech firm is brighter than some similar firms you might see. Rather than formal blues and blacks, and images of code and computers in the background I've opted for something much more fluid and organic as well as energetic.
There are some element on this page which are faded and I've added a slight parallax effect to a few elements to keep it interesting for the visitor too. The reason for that choice was to give a feeling of movement and energy, instead of a few paragraphs of text that just give an overview of the company.
Because this page is telling a story the sections are split into major points in the company's history. Once we reach the present day in that story, there's a Call To Action prompting the website visitor to become the next part in that story themselves.
A strong and clear Call To Action is always important for a business. Make it clear what you want the visitor to do.
Gillies Recruitment
Gillies Recruitment previously had a website, but they had outgrown it and needed something more. They knew they wanted a WordPress site. They'd chosen the theme they wanted, and came to me to customise it.
As with any website, it has a goal that it needs to accomplish. For Gillies Recruitment that goal was placing candidates in jobs they'd love. There was a secondary goal too which was to attract more clients, i.e. legal firms, to place those candidates. Although the website wasn't the only means for achieving these two goals for the firm, the website does need to assist in those goals.
As well as using the WordPress customiser to get the basic layout needed, I also added some custom CSS code to change a couple of layout elements and colours, and add in some CSS classes for more attractive Call To Action buttons. It was those final tweaks added with my custom code that created something simple that helps Gillies Recruitment achieve those two original goals.
Having a clear Call To Action for a business is a must. It can't be hidden away, and it needs to both fit in with the rest of the website and also stand out simultaneously.
Finally, I also installed a few incredibly helpful plugins for WordPress that'd help them make the most of their new site. Plugins like YoastSEO, EWWW Image Optimiser, and UpdraftPlus for automating backups, are all plugins that can make general website usage much easier for my clients.
As with any WordPress project, I also sat down with Gillies Recruitment and showed them how to use WordPress to get the most out of it.
Side-project: Ion Innovation
This is a homepage for a fictitious company called Ion Innovation for which I gave myself a small brief (to stretch my designing and coding legs). Essentially they are a management consultancy for the scientific sector.
The main goal for their website is to book clients on their initial consultation. Therefore, the focus of the page is clearly the contact forms at the top and bottom of the page.
The colour palette is muted. However, I've chosen a complementary colour (a catching yellow) using colour theory for the Call To Actions (for the form submit buttons). That yellow is used on the form fields as well; when the user clicks on one of the form fields they're underlined in the same yellow to make clear to any user which form field they're entering details into. A complementary colour for any Call To Action, that isn't used much on the rest of the page, is crucial to drawing a visitor's attention to the sections of the page that support the website's goals.
This site is also Mobile First (where the code is written for mobile devices first, and then transform gracefully for larger screen sizes) which is important for today's web.
The page is then ready to be coded into a WordPress theme with further pages being created.
Feel free to click the title above, or follow this link to see a live version of the homepage I created.
Maggie's Pastry
Maggie contacted me with a problem - She needed a simple WordPress website that would enable her business to continue growing. I helped her customise a simple WordPress theme into something she could use.
The work included setting up WooCommerce in just the right way to get the functionality she was looking for. This included combining a few extra plugins.
There was also custom coding that was required to match the theme to her specifications (as with many situations I've come across, a pre-made WordPress theme is great if you can find one that's exactly what you need and happens to have the right content blocks laid out for you. Otherwise you have to try hard to fit your content into that pre-made theme - and that's with at least a little coding knowledge). I customised the theme, and also assisted with testing the WooCommerce payment processes, ensuring the contact form worked as there were some problems, and carrying out some keyword research to help her along the way.
Lastly, I sat down and showed her how to use the site effectively so she would get the most out of it.
Perfect Repair
The project started with important keyword research which drove the content and structure of the website. Working closely with Perfect Repair Ltd I created a custom logo, including working on the typography as well as content creation. A styleboard was created that governed the look and feel of the site to create a sense of coherence between the different pages.
That prior work on content etc. led naturally to designing the layout of the pages themselves. The structure of the site was already decided in the previous steps so it was a case of creating a flow for the content.
Lastly, the website was hand coded by me to ensure it would be easily read by any search engine, as well as being functional for visitors (for example ensuring the images were optimised well for the web). Having that control over the code was key to ensuring elements such as image 'alt' tags were used corrently, and the website had a good heirarchy with elements such as heading tags.
Colin David Hair Studios
Briefed with creating a simple yet elegant design, the site was created for Colin David Hair Studios to match the style of the salon. They wanted something straight-forward that would provide the necessary information to their customers.
The logo and images were provided by Colin David, and I worked closely with them on colour choices, typography and layout.