A laptop showing the Life with Gutz homepage sitting on a table next to a small stack of books and plant.

Life with Gutz

Personal Blog Website

Web icon

WEB

UX/UI icon

UX/UI

I was thrilled when I got the first email about this project. The client, Katie, approached me in need of a site to accompany the launch of her online presence and YouTube channel. She needed a site that would function as a blog and collect email subscribers, with the potential to grow along with her community.

Client:

Life with Gutz

Goal:

Design and develop a responsive online platform for a woman setting up a blog for her personal brand, using Netlify as a CMS.

Website:

lifewithgutz.ca

(NOTE This site is still in the final stages of approvals with the client, so her website is currently composed of placeholder content.)

Life with Gutz sketches, showing wireframes.
Life with Gutz sketches, continued wireframes.

Inspiration

Katie's illustrated portrait and logo.

Katie already had a logo for herself, and was interested in using orange and purple, to match a portrait of herself she also already had. As I considered the sort of content she is putting out, which involves fire and flow and telling stories, I started to imagine the flowing purple shapes that are now a key visual element of the site. I wanted her site to feel polished, but also represent her content and personality.

Components

A sample of the fonts Oswald, Lora and Rock Salt, as well as three hexcode swatches, 523c65, ede6f4, and ffefe4.

This site features three Google fonts, Oswald, Lora and Rock Salt. I included a handwritten choice for Katie, so her content would feel more personalized to her readers. For blog content in particular, this felt like a clear choice.

Watch on YouTube button, background imagery sample and social icons.

Sometimes the blog posts pair with YouTube content. I created a button which will only appear on posts if there is a video to link to. The social nav on the right side disappears whenever the social icons in the footer are visible, for quick access to all of Katie's content.

Adding a CMS

A laptop showing the homepage of the Life with Gutz CMS.

A laptop showing the the blog entry edit page on the Life with Gutz CMS.

After researching the possibilities and understanding the client needs, I knew the best option was a site that I code entirely. I would be able to design with full control of the visual outcome, and set her up with a Content Management System through Netlify. This way she could easily add more content within what I would build. Having such freedom, and having my first client for a job of this scale, was very exciting.

Final Results!

Four different screen sizes, showing different scroll heights of the Life with Gutz homepage.
A tablet with a keyboard displays the website welcome banner horizontally.
A laptop, tablet and mobile screens that show different pages of the website.
Multiple phone screens showing the various pages of the Life with Gutz website.
Visit the website!