Exciting news – my new personal website, developed using Frontity, is now live. The creation of my website included both a design and bespoke development phase. In this article, I would like to go into more details regarding the design processes and my decision to use Frontity.

The Brief

The new website marks my first personal website in the last four years. My old website is still live and made using HTML, CSS, Bootstrap and JQuery. It is safe to say things have moved on since then and it looks pretty dated.

The idea for my first attempt was to build a minimal site and try something new. The design stage took the form of creating a layout for the content. Despite this, my designs lacked any visual originality or real challenges for the frontend. Work on the website became boring early on in the development phase.

After a period of self-assessment, my solution was to create a specific brief for the project. The brief included listing all the functional requirements for the website. It also included adding a branding phase, which would be the primary influence for the overall design.

Brand Design and Layout

As a developer working without a design team, there is always a temptation to overlook the branding and design phases. Instead, the emphasis is typically on building something with the latest framework. Ignoring ideas generation often reduces the creative possibilities. As someone with a passion for frontend development, fully immersing with this stage was crucial.

Putting the concept first meant writing straplines and creating mood boards before writing any code. My final brand uses the symbols associated with coding:

chosen identity

Like many of my favourite sites on awwwards.com, my thoughts were that the website should feel immersive. My interests were also to make a point of the dissonance between the disciplines of design and development. For example, there is sometimes a temptation to discard all imaginative concepts as not being technically feasible.

example of layout for concept

Despite this, developing my website was an opportunity to fully-experiment with intriguing and impossible looking visuals. Due to the complexity of the designs, it was crucial to make prototypes first, before fully committing to them. 

Developing the Website Using Frontity

Frontity, the React framework for WordPress

For my project, my specifications for what framework to choose were pretty open. The emphasis was to explore new technology that would contribute to modernising my stack beyond WordPress. My priorities were also to build upon my existing skills as a developer.

My background is really in PHP and WordPress. More recently, my tech stack had come to encompass modern frameworks such as Vue and React. Interest in these frameworks is mostly down to the demands for websites with more complex UI requirements. During my research, my desire to retain a WordPress component, whilst still furthering my skills in React, lead me to discover Frontity.

Frontity is the React framework for WordPress. Building the site presented a decent enough challenge as my first in-depth React project.

Styling (CSS in JS)

Most likely, in the future, this blog will feature a more in-depth post on Frontity. For now, my main points are how streamlined the development experience of using Frontity is in comparison to regular WordPress code. For example, instead of PHP templating, the code is written using React. This means no more separate files for everything, and allows you to keep all the markup (known as JSX) and CSS inside one component. I loved this feature of working with the framework.

In many ways, the challenge of using Frontity came more from the styling than it did transitioning from PHP to React. The framework is opinionated and uses Emotion CSS (more similar to pure CSS than SASS). However, it is a small price to pay for such a high performing site.

Screenshot of lighthouse analytics for the homepage

Reflection

The site turned out much better the second time around. The key for this was in writing a solid project brief, which contributed to an improved creative stage and making the right decisions with the technology. Working on your site provides a unique opportunity to get hands-on experience in disciplines outside of your direct expertise, as well as experiment with new and exciting technology.

Thank you for reading. If you have any questions about this article, don’t hestitate to drop me a line.