I've been busy the past few weeks working on a major overhaul and update of my website. As I'm now offering web design services to clients, I wanted to make sure my site is in the best possible condition to show off what I can do. In this blog article, I want to outline all the changes and the reasons behind them.
I've added a new page for the web design service to highlight the process I will use and to attract web design clients.
I've also added a new blog section where I can post articles (like this one!), news and anything else I think is relevant to my business or design in general. I've actually wanted to do a blog for a while, but never quite got around to it. The aim of the blog is to attract site visitors by having useful content, which also helps to build trust with potential clients in positioning me as knowledgeable about this field. It should also help with Search Engine Optimisation (SEO). If you don't have a blog on your website, it's certainly worth considering it for some of these reasons.
I've made quite a few changes to the way my projects are displayed and organised.
In the Webflow CMS (Content Management System), I used to have a projects collection which would then have the individual sections for that project attached to it (e.g. introduction, research, etc). I originally did this for layout purposes, but have since learned how to apply formatting styles to particular sections of a rich text field. For example, I can now apply heading styles to relevant parts of the rich text and ensure they match the rest of the styling site-wide. This means that I can now simplify the CMS data structures whilst retaining control of styling and layout.
I've changed the layout of the project pages to be cleaner and less complicated, with a main image followed by project information, followed by images for the project. At the bottom of the project pages, I've added a section for showing other projects of the same type.
Probably the biggest noticeable design change across the whole website is the paragraph font. Futura is my brand typeface (and is also my favourite), but I've noticed when doing updates recently that it doesn't feel quite as legible when there's a paragraph of text, as it does with headers. So I started looking online for inspiration as to what to pair with Futura. I wanted to keep with a sans serif, as a personal preference, but wanted something different enough so it pairs well. I found that Proxima Nova fits my needs well, so I've now changed all non-heading text to this typeface.
I've slightly changed the design of the 'cards' across the site. These cards are elements that display important information, such as services on the homepage or projects. I followed some inspiration from Webflow's design courses and have squared off the corners and cleaned up the design. In addition, to aid usability, the entire card is now a clickable link to take the user to the appropriate link, rather than just a single line of text or a button. This gives the users a bigger 'tap target' which is especially useful on mobile devices.
On the service pages (logo design, web design) I've redesigned the process steps sections to align more closely with the new card designs. Squaring off the corners, and also adding some new images to depict each step, with overlaid text to create a more interesting design. I've also added in a step for the Statement of Work (SOW), as completing the contract is an important stage of a client working with me.
Finally, I've redesigned the contact form. Again, to align with the other cards and elements on the site, I have squared off the corners and updated the button to use my brand colours. To help achieve the goal of the site, which is for a visitor to get in contact with me, I've also made this a reusable component and placed it at the bottom of each page. This has replaced the existing call to action (which took users to the contact page), so that it's now even easier for someone to get in touch with me.
Interactions are small animations that can add visual interest to a web page, and in some cases highlight something of importance to the user.
I've added some subtle interactions to some of the elements on the site, particularly in the navigation bar menus, which have animations when a drop down opens on desktop, as well as having animations when the menu opens on mobile. The process steps on each of the service pages have text that slide in when scrolled into view.
Finally, I've added an animation upon successful submission of the contact form, which makes it much clearer that the message has been sent, as well as a few subtle animations on other parts of the site.
All these little interactions make the site look a lot more professional.
Under the hood changes
As I was making all these changes, I've rebuilt a lot of the site components of the site. This means I have simplified the styles (classes), removing anything unnecessary. Styles can be reused with different content, so this will make future updates easier and also improve consistency and repetition across the site.
I've done a major overhaul of how the site works as a responsive design to make it even more responsive to different browser widths and screen sizes. I've implemented parts of the 'Client First' by finsweet. This is a spacing and class naming system which gives a good structure to how the page is organised as well as making it easier to understand what everything is when it comes to making any updates at a later date. I've also changed all the typography and spacing from using pixels to REM. This means that should the user adjust their browsers preference for font size, the text size and all elements will respond accordingly. In addition, I've implemented the fluid responsive code that is part of the client first system. This means that as the width of the browser changes on each breakpoint, all the elements including text, scale and respond appropriately. This is a really great system and I would include it on any site I build for clients. You can learn more about client first here.
It's important to make the web as accessible as possible. Doing so means that people with visual impairments, who either might struggle with contrast, or those that use a screen reader, can still use the site.
Webflow has some fantastic tools to help with accessibility. The built-in contrast ratio checker in the colour picker is an invaluable tool. When choosing the colours on typographic elements, it shows the contrast ratio and also gives a rating. I've gone through all the text elements on my site and made sure they are all AAA rated, which is the best rating.
It's also important that the hierarchy of headings is correct for when someone is using a screen reader on your website. This means that headings should be in the order of H1, H2, H3, etc, and there shouldn't be any levels skipped on a page. These levels help to show the importance of the information on a page, from the most important to the least. Ensuring this best practice is followed also has the added benefit of helping with SEO as it helps Google and other search engines more easily understand what is on the web pages.
Finally, I've gone through all the image assets on the site and made sure they have 'alt text'. This is a description of the image, which is used for screen readers, and again helps with SEO.
Web design, as with all technologies, is always moving fast and evolving. It's important to look at your website every so often and make sure it's using the current best practices, and that the content and structure will help you, and more importantly, your website's visitors, achieve their goals.
I've learned a lot since I moved my website to Webflow about 2 years ago, and it's now time to put those learnings into practice on my own site. I had already made my website full responsive across all devices from the beginning, but I knew there was always room for improvement.
I've added new content to reflect my current services as well as updating and redesigning existing pages.
I've been able to simplify the underlying data structures and styling to make future updates easier and improve consistency across the website.
I've added some interactions and animations to increase visual interest.
Finally, I've made the website more accessible by increasing legibility of text, ensuring good contrast, improving the hierarchy of headings and making sure all images have 'alt text'.
A lot of these changes will have the double benefits of helping to improve SEO. The blog will add more content and hopefully drive more traffic, and the heading hierarchy and alt text will allow search engines to have a better understanding of the site's content so it's more likely to be shown to users who are searching for this type of content.
If you've got a website, it's certainly worth considering some of the things I've mentioned here. If you like what I've done with my site, and want some or all of those features for your site, then I can help you by harnessing the power of Webflow. To discuss how I can help you, ask a question, or just say hi, send me a message using the contact form (it's at the bottom of every page!). I'd love to hear from you.