Rebuilding my site on WordPress

Squarespace to WordPress.com

I’ve been on Squarespace almost exclusively for the past 10 years in some way or another. I was initially attracted to it’s sleek design, visual no-code platform, and marketing toward designers and their portfolios — sounds like me! For awhile it worked, I was able to upload my work, customize it here and there to get the look I wanted, then be able to land a job with it and forget about it.

Differences and pain points

While Squarespace was a great “set it and forget it” platform and was relatively easy to update, I wanted slightly more customization out of the box. I wanted to create re-usable parts, apply them where needed, and write more content overall.

Squarespace’s page design was great at making those static pages while staying on theme. Blogging however, you were limited to a very simple and rigid format. This works well for creating and pushing out content, but it didn’t make it easy to customize the look of the blog post unless you wanted to add additional CSS styling.

I wanted more control baked in.

The switch to WordPress.com

With that in mind, I decided to switch over to WordPress.com. Having worked at Automattic, on the WordPress.com brand team¹ I wanted to put myself in the customers shoes and see what I could create for myself mainly using core WordPress and a few minimal plugins like Jetpack, The Icon Block, Dynamic Year, and Create Block Theme. No theme builders like Elementor or Semplice, only what was baked into the Gutenberg block editor — Which is now part of core WordPress.

Seeing the ways in which people like Rich Tabor and Nick Diego were able to present work, write, and extend WordPress gave me the inspiration and confidence that I could make a great looking website using block based themes.

Being able to use design and build components and patterns for use across the site, and in blog posts, was what I was missing from Squarespace.

I made the switch. Now I needed to identify the main sections and patterns I want to solve for…

Problems to solve

There were a few priorities I wanted to address in building out the site:

Research

The goal here was to create something unique, personal, and my own and I needed some inspiration from around the web.

I wanted to find websites with interesting components and patterns and try to understand the underlying structures on what made them good, so that I could implement that structure into my own site.

Patterns needed to be full-width and responsive to maintain flexibility and scale from desktop to mobile screens.

Since I want to write more, finding great and interesting reading experiences was a top goal. These sites really impressed me:

Next was the portfolio piece. In my previous Squarespace site I had large, full-width images that was either one or two columns. I wanted to keep that simplicity here and not over complicate the layout, and keep the scaling from desktop to mobile simple.

Last consideration was typography. Having access to a wide range of fonts from Adobe Type and Google Fonts on Squarespace and formatting type styles is top-notch. When coming over to WordPress I felt this was lacking, but nothing that was a deal-breaker for me. I also had purchased Pitch and Pitch Sans from Klim Type Foundry and I’m using that as my main typefaces for my brand. Pitch has a nice heritage in typewriting aesthetic while Pitch Sans feels modern and code like with it’s monospaced formatting.

Once I collected those examples, I began to wireframe and explore components and how they could start to fit together.

Pages and components

Now that my visual research was done I needed to turn that collection into useful auto-layouts and components in Figma. This would help me start to think through the layout and user-flow of the site before building in WordPress.com.

Next I began piecing together those components into layouts to explore the basic structure of website. I needed a page for:

Modularity was a defining feature for the site, so I took time to create layouts that could scale from showcasing a design project, photos, and written blog posts. Components to think about and consider included:

Design iterations

From the inspiration I gathered, piecing together these disparate parts took some time, and for a while nothing felt like it was working.

I started out trying to replicate the structure of my Squarespace site, but that wasn’t very inspiring.

I took a pause from that direction and went back to the drawing board. Maybe a more modern and Swiss style could work?

While I liked the structure and the design and layout started to feel more cohesive, it still didn’t feel like this was the direction to go in. Perhaps this would work well as a stand alone theme?

Finding traction

I had more complexity than was necessary and began to simplify the elements on the page to a header, posts, a large text navigation, and a footer.

After inverting the page to black, I started to find traction. The site immediately felt like it was going in a direction that I was liking.

Keeping in mind my photography, I wanted to give my portfolio a more personal touch. I dug into my black and white film photography archive from film stocks like Illford HP5 and Kodak Tri-X 400. The image chosen was taken at Ruby beach over the summer with friends visiting in town which became the main visual anchor and feature image.

From there, I began to build out all modular components. I got about 80% of the design figured out and moved into refining the components and page structure.

Referencing the page template types in WordPress to make sure I was accounting for each use case generated by the platform.

Once that was established I took the design components, layouts, and intended patterns into the Editor to start building.

WordPress implementation

While Figma contained all the pieces necessary, and the plans to implement this full and content rich site. I ran into one issue — my content wasn’t ready yet.

So to get the ball rolling, I focused on creating the theme and home page first. This allowed me to establish my new site, styles, layout, and have a place to put content while I’m building out more posts and projects.

Create block theme

To create my own theme, I started with the Assembler theme (available on WordPress.com) as my base. This theme is built around the idea of using patterns to quickly build pages and create the your theme. It also comes pre-loaded with lots of patterns already made.

I installed the Create Block Theme plugin and created a new theme for my site titled GSDC_1.

From there I began customizing and establish the global styles for my site.

Building patterns

Building the components in Figma was the starting point to make sure everything was working well and felt cohesive.

These patterns could then be applied to the templates, posts, and pages while being consistent design wise, and with synced patterns, updated site wide.

I ended up creating 36 custom patterns for the site.

Setting styles

In the global styles panel I established the layout widths for default 720px, wide 1280px, and full width 1440px dimensions. I uploaded Pitch and Pitch Sans to be used across the site and set up my theme color palette.

Figma vs Published pages

What is currently on the site is still a work in progress, especially compared to the Figma files. I’m working through updating design projects from the past, writing articles (such as this one) to populate the journal and document my design process and experiments, and further refine the site details. Not to mention additionally culling through thousands of photos to upload.

More to do

Overall I feel pretty solid on the look and feel, global styles, and functionality. During the build out in WordPress.com, I had to tweak the design slightly to make sure everything was working nicely and looked good on the platform from desktop views to mobile.

I didn’t get to a few of the ideas I originally had in Figma. This was due to a couple competing priorities:

1. Technical difficulties in building the component in WordPress.com that I hadn’t figured out how to code or find a plugin that was relevant
2. Getting an MVP up without losing momentum in the process.

Functionality to include are:

Thanks for reading and keep an eye for V2!