Building for Creatives: A Peek Into My Web Design Process

If you have ever wondered what goes into creating a website,  let me walk you through a small project to illustrate the process. Despite its size, it went through the same motions as any other web-based design. The design was for a theme-based website-building platform called Swwwift.

The Brief
The project brief was to create a flexible, Gutenberg-compatible theme for small photography businesses. Although I had complete creative freedom, my top priority was functionality—for both the visitors and the designer setting up the page. All of my design projects are underpinned by what the users want or need from it and the technology. I wanted to make the design flexible, allowing layout changes without sacrificing consistency or flow

To achieve all of my goals I needed additional elements. I created a "sketch" of a persona, then fed a few instructions and specifics about a business to ChatGPT, requesting a few headlines and paragraphs of text for the page. Having an actual example of copy allowed me to establish a content hierarchy and divide it, forming neat blocks that would then translate into the layout. The two main goals I focused on were showcasing the portfolio and providing a point of contact for bookings.

The Design
With the layout and content sections in place, the visual side of the design developed organically. Knowing that the photos would be the page’s main focus, I decided a minimal, monochromatic theme would work best. While the images took centre stage, the text conveying offers and information on the photographer was also important. To complement the visuals, I introduced a strong font, a clean layout for paragraphs, and ample space for all elements to breathe.

The brief also called for transition and animation effects to add a bit of eye candy to the mix. The options here are almost limitless, but my approach was to use these effects sparingly, focusing on enhancing the scroll experience and the way content loads on the screen.

Since this was going to be a theme, I introduced alternative layouts for some of the blocks. This way, the theme could also be used for other businesses that rely heavily on photography. 

Handover
This is the moment when the page comes to life—a part of the process I care deeply about because how
I hand things over will determine how well the idea translates into code. As I progress with any design,
I maintain a document with notes and suggestions for the developer, and all these points are included in
a “cheat sheet” I create alongside the UI.

The Checklist
Here are a few things you can do to make the process of getting the page sorted easier:

• Who are you talking to?
  Knowing who your audience is and what they are looking for is key. Establishing priorities like user journeys, content hierarchy, and strategy is vital and is usually done with the designer, so don’t worry if you have no idea where to start.

• What is the main goal of the page?
  Having a clear objective focuses the entire process. It helps create a structure for user journeys and establishes a hierarchy for the copy, making colour and image choices much more organic to your brand.

• The content
  The design follows content. Before you start working with the designer, prepare text for your page and include it in the brief. Even if it’s not final, it will help the designer understand your message and tailor the design to fit the content.

• Moodboard
  If you have specific ideas about the look and feel of the page, take the time to find design examples that resonate with your brand and note why you’ve chosen them.
  All that information will be much needed in the initial stages of the design.

The theme is now available on Swwwift.io