Shopping Cart

No products in the cart.

Utopia Fluid Design

Appreciating the Craft of Good Web Design

I’m getting deeper into web design as I brush up my skills in pursuit of a refresh of my site and the ability to offer my services to clients. I’m having a lot of fun learning and trying things out.

Since I’m going to stay on WordPress for now, I’m deciding if I want to use ​Bricks Builder​ with Kevin Geary’s ​Automatic CSS​ framework, or use native WordPress (aka Gutenberg) and explore their full site editing (FSE) capabilities.

Luckily, today there was a live-streamed ​Bricks vs Gutenberg​ page-build demo starring Kevin Geary and Brian Coords. Both talented web developers on different sides of the aisle as far as tools go.

Bricks vs Gutenberg Showdown!

Kevin is an advocate for Bricks and developed his own CSS Framework to use within it. Brian is an advocate for just using WordPress by itself without the need for an additional page builder plugin. They both had a chance to build out a web page (they chose to recreate the homepage of ​ghost.org​) and explain their processes.

I tuned in hoping that this would help me decided which direction I wanted to go. By the end, I’m pretty sure I had my answer. I was in the live chat and managed to get a few of my questions answered which was nice.

I was leaning towards Bricks already, but was hoping Brian could sway me into using WordPress by itself, which could save me some money. But his approach was pretty technical and over my head. He’s a seasoned web developer and basically coded a lot of stuff himself that he brought into WordPress to help him “fix” the problems in the Gutenberg editor. He didn’t use the new Full Site Editing features.

His approach wasn’t for people like me, but for professional web devs who are building sites for clients. I’m not there yet. I found his workflow tedious and convoluted. I wasn’t the only one, given by the comments in the live chat.

Kevin’s approach in Bricks uses his own Automatic CSS framework, which is another paid add-on. His workflow is very fast and streamlined and it’s obvious he’s very experienced and has a lot of practice. But for someone at my skill level, I think the two tools combined could help me bridge the gap.

Sure I can just get an off the shelf theme like ​Blocksy​ or ​OllieWP​ and use their presets, but that’s basically what I have now. I want more room for customization and to build a site that feels more uniquely me, more cohesive, and not like a patchwork of hacked together parts.

Bricks Builder in Action from bricksbuilder.io

Another thing that excites me about Bricks is that by using it, I will be improving my actual HTML/CSS skills with best practices in mind. These skills transfer over even if I don’t want to use Bricks anymore. It helps me become a better web designer.

Being a better web designer excites me because I love the idea of tending to my digital garden (more on that below). Making a cozy space on the web for all my creations and ideas. And if I can help others do that too, all the better.

Fluid Typography and Spacing

Probably my favorite part about this whole exploration is learning about design systems and fluid typography, spacing, and colors.

Using a fluid design system, your typography (from headers to body text) and spacing (padding and margins) are calculated mathematically using ratios like the golden ratio, or a musical scale such as minor third or major fourth.

For example, check out ​utopia.fyi​ or​ typescale.com​.

image 17
Utopia – Fluid Responsive Design

Also check out this article ​Consistent, Fluidly Scaling Type and Spacing​ by Andy Bell for CSS-Tricks and ​fluid-type-scale.com​.

This is how you get aesthetically pleasing and well balanced designs that have an elegant rhythm and flow to it. Not disjointed or clunky designs that break or look weird on mobile.

You can achieve perfect consistency with colors, shades, spacing, and typography across your entire site and on all devices. Changes are made by adjusting only a few variables instead of having to adjust every single element individually or eyeball it. I love that.

Design wise, you aren’t just winging it and figuring out what font sizes or margins to use on the fly, but you are working from a standard and letting math do all the work.

And with colors, you pick a base color, a primary, secondary, and accent colors, and the math calculates all the various shades and transparencies you could ever need on your design with perfect color harmony.

This may be old news to some of you, but to me this is new and exciting to learn about. It’s the difference between a “pro” design and an amateur design.

Favorite Things of the Week

Here’s a few of my favorite links this week that have inspired me:

🍎 Maggie Appleton and Digital Gardening

Very impressed with her work. I first discovered her via ​her talk​ The Expanding Dark Forest and Generative AI. It’s about the growing corporate lifelessness of the modern web. You can read her ​excellent article​ on it.

The Expanding Dark Forest and Generative AI by Maggie Appleton

Btw, that’s one ​beautifully designed website​. I love the attention to detail like her different “growth stages” on each article, indicating how complete and comprehensive it is. First time I’ve ever seen an “assumed audience” card at the beginning of a post, and “planted over X years ago” date stamp with “Last tended over 1 year ago” modified date. Nice!

She also turned me onto the idea of ​Digital Gardening​. A term that’s been around for a while, but new to me. The idea is that your personal website is like a garden that you continually tend to and prune.

“They’re not following the conventions of the “personal blog,” as we’ve come to know it. Rather than presenting a set of polished articles, displayed in reverse chronological order, these sites act more like free form, work-in-progress wikis.” –Maggie Appleton, on Digital Gardening

Makes me think of Levi’s ​Integral Guide​, a huge collection of healing and self-development resources. A site wholly managed and maintained by one guy and is like his personal garden.

I really admire their passion and focus on the craft. It really shows. 😚👌

image 18
Integral Guide to Well Being – a great example of a Digital Garden

🎨 Color Palette Tools. I’m a big fan of ​Coolors.co​ and use it to make most of my palettes. But I’ve also been checking out ​atmos.style​ and ​color.adobe.com​. Very cool.

📌 Designer focused Pinterest alternatives like mymind.com and cosmos.so. They both have manifestos about privacy and good design. Anyone use these? Really nice designs.

🌎 The Return of the Personal Website revisited. Sophie Koonin’s ffconf 2023 presentation titled ​This Talk is Under Construction​ was pretty good. Another nostalgic “bring back the weird personal website” piece. She’s got a fun site at localghost.dev which has a clever theme switcher at the top. I love this. It’s similar to what ​Max Böck​ has on his site. I feel like I want my new site to have a mix of this “indie, personal website” vibe and the professional sleekness of a site like ​Shift Nudge​. Btw, again great attention to detail on that site. I’m gonna be stealing some ideas for sure 😆

What Else I’ve Been Up To:

💆🏻‍♀️ Posted Episode 11 of the We Should Be Working Podcast Zach and I continue to discuss my time in Austin and my decision to go backpacking in Europe for 3 months in 2017. We discuss my fleeting aspirations to be a professional cuddler and sexual healer, touching on topics like The Red Pill, Manosphere, and a healthy masculinity outside of women and work. ​Listen to Episode 11 Here​.

🌌 Doing Some Dream Work. I started reading ​Let Your Body Interpret Your Dreams​ by Eugene Gendlin. What I like is that it’s less about decoding your dreams with your analytical mind, but learning to dialogue with your body and get more into feeling. Shout-out to Brianna at ​Exist Better​ for the ​recommendation​ in her latest video.

That’s about all.

Have a good weekend ✌️

Jeff

Jeff Finley
Jeff Finley

Jeff is a graphic artist, designer, musician, writer, and mystic with a passion for truth and personal growth. He's the author of Wake Up, Maker/Mistaker, and Thread's Not Dead, as well as the creator of Starseed Supply Co. Learn more about him here.

Articles: 255
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments