Designing a Gutenberg-Powered Theme: Music

Kjell Reigstad walks through his experience designing a block-powered theme.

Last week, Allan Cole and I shared a new Gutenberg-powered theme called Music. In this follow up post, I’m going to take you through the design process for the theme. At its core, this felt a lot like a typical theme design process, but I did learn a lot about block-based design along the way. 

Blocks

When Allan and I decided to make this theme, we already had a homepage comp featuring a handful of blocks. That comp did a great job of setting the tone for the design aesthetic. To get things going, I decided to apply that aesthetic to the other default Gutenberg blocks. I worked through the Gutenberg Blocks Sketch document from my last post, updating styles as I went.

 

Working this way was great for a couple reasons. First, it helped me focus — I’d never designed a block-optimized theme before, and this kept my design explorations squarely on the blocks themselves. I thought,  “Gutenberg is all about blocks, right? I’ll design some blocks.”

Second, the Sketch file allowed me to see every single block style in one place. In effect, I was creating a sort of pattern library as I went. I thought this was pretty cool, and figured it’d come in handy later on when we began development.

As I got further through these block designs, I realized the need to see all of these individual blocks in context; I’d design a wide-width cover image block, but I had no idea how it’d look in use. So I began dragging blocks around and stacking them up to get a sense of how they’d feel together.

Testing-Ground.png

This helped a little bit, but still wasn’t enough. At this point, I realized something that should’ve been obvious: blocks are not a theme. They’re just part of a theme. By designing blocks first, I’d been avoiding the big picture. Users will never see blocks all by themselves — they’ll exist within full pages. I needed to design more pages. 

Pages

My initial homepage design comp introduced a rough idea of a header and an off-centered text column. I began by duplicating that initial page and clearing out all the blocks on it, then pulled together some sample content. Looking at the project through the lens of my imagined client (the band Superserious), I was able to think through examples of blocks and block combinations that might exist on a real site: the columns block to display album information, the table block to display tour dates. This felt much more effective than randomly placing blocks on a page.

Around this time, I hit my stride, design-wise. I’d lay out a page using my existing blocks and the sample content. Then I’d iterate and experiment with everything on that page. Once things looked right, I’d migrate any new block tweaks back to the global symbols and start fresh on the next page. After a little while, I ended up with a solid set of sample pages.

 

Backing up and thinking about page design helped me shift focus to other, more traditional components that needed to be designed too: archive pages, page footers, post headers, etc. Designing these wasn’t all that different than it would’ve been without Gutenberg. In a way, we’ve all been designing with blocks all along — we just hadn’t called them blocks. Take a look at this entry summary:

Entry-Summary.png

If I’d designed this theme pre-Gutenberg, I still would’ve designed each one of those pieces — they’re all fairly standard parts of a theme. But thanks to Gutenberg, each piece is part of a clear pattern library, to be reused throughout the design by me and by the user. That’s pretty cool.

I’d gone into this project thinking I’d spend most of my time styling individual blocks, but I ended up splitting my time pretty evenly between designing block variations and overall page elements. In that sense, this wasn’t as drastically different from a traditional theme design as I’d anticipated.

Prototypes

I’d been getting ongoing feedback from Allan throughout the process above, but once we were happy with the page designs above, we gathered  with the rest of the Theme team to get broader design feedback. To help with that process, I pulled all my comps together into a prototype. This took just a few minutes to do, and really helped others get a sense of how the theme will work in practice.

I created two separate prototypes with Invision: one for desktop and one for mobile. If my transition from block design to full-page design was about looking at the bigger picture, these prototypes stepped back still further: they showed us the context around that big picture. We were all able to see the designs on-device and test some basic interactions. 

The team’s feedback was (as usual) very helpful — we made some subtle revisions to text contrast, adjusted a number of margins, and kicked off a lot of iteration on the mobile menu treatment.

Development

Allan had been focused on the build from the beginning, and had the majority of the framework in place at this point. After our design feedback session, I jumped into the code too.  

From the development angle, we’d already determined a few things in the design that we couldn’t do, or that would take too much effort. For instance, in my initial design comp I’d had a series of backgrounds run down the page. Gutenberg doesn’t have a method for doing something like that today; despite my wishful design thinking, there’s no method for layering a background behind a group of blocks. We could’ve accomplished it through customizer settings, but we shelved the idea in favor of keeping things simple. We also abandoned a bunch of the play buttons I’d originally included, since those’ll require some custom blocks (more on that later). 

Once I jumped into the code, my main revelation was that there were way more block options than I’d originally anticipated. A number of blocks had options I’d never noticed before. I hadn’t realized that paragraph blocks could be set to full width, or that cover image blocks could be floated left or right.

In addition, I realized some design decisions I’d made were actually supposed to be user-editable: I’d overlooked the fact that users can edit the text alignment and image opacity for the cover image block. This required more design exploration, but it guided us towards a much more customizable theme — definitely a win in the end.

Beyond those updates, the majority of the design-oriented development work involved minor fixes and adjustments — polishing up the CSS to make sure it aligned with the intent of the original design. 

Next steps

Now that we’ve had our initial release, Allan and I plan to build a separate plugin with complementary music-centric blocks, like a tour dates block and a mashup of a cover image and an audio player. We’ll hope to showcase those at some point in the future.

In the meantime, keep an eye out for the next post in the series: Allan’s experience from a development perspective.

 

Music: A Gutenberg-Powered Theme

Announcing the Music theme: an exploration of how Gutenberg can transform theme design and development.

A couple months ago, I created a Sketch document to assist with the design of block-driven themes. I posted about that here on Themeshaper, and provided a couple short examples of how it could be used in a theme design workflow.

Since then, Allan Cole and I have been working to make one of those examples — a site for an imagined band named Superserious — into a working example of a Gutenberg-powered WordPress theme. We named the theme “Music.”

Allan and I set out to experiment, learn, and create a resource for the community. We’ve documented our experience designing and building this theme, and will be publishing our notes in a series of posts here on Themeshaper.

To kick things off, we’re releasing Music on GitHub today. We’d love for you to give it a spin, tinker with it, and explore how it works with Gutenberg. Here are a few things to look out for:


Design

Our design goal for the theme has been to show that it’s possible (and encouraged!) to make a Gutenberg theme that doesn’t necessarily look like Gutenberg. We wanted to create something bold and a little experimental; a theme with somewhat aggressive, non-standard styles.

Gutenberg gives users unprecedented control over their site design, opening the door for variety and experimentation. Our favorite example of this is our cover image blocks. They look great out of the gate, but users can adjust the image, alignment, and color to achieve a wide range of looks:

cover-images.png

 


Development

You’ll be happy to hear that the overall theme development process wasn’t all that different with Gutenberg. Common patterns like headers, footers, and loops work just as you’d expect in a Gutenberg-powered theme.

In many areas, Gutenberg makes things easier for both users and developers. For instance, full-width header images used to require a custom-built customizer or theme option solution, but now they’re essentially built in. This was important to keep in mind while building the theme, and was a very positive change for development.

Creating stylesheets for blocks was pretty straightforward. Expanding on the built-in stylesheets in _s,  we added a blocks.scss file to the SASS directory and placed all of our block-specific styles and overrides there. This kept everything nice and organized and is likely to appear in _s in the future.

Since Gutenberg is output by the_content(), we learned to take special care with any wrapper divs that might clip or obstruct the expected behavior of Gutenberg blocks. We’ll talk more about that in a follow up post.



Block Styles

We’re truly excited about the custom editor styles that ship with Music. These styles are a breakthrough: they give users a much clearer sense of what their visitors will see on the front end.

Best of all (for theme developers at least), the editor styles were a breeze to integrate! We built all of these in over the course of just a few hours.



Like most of the work we do, the Music theme is open source. You can find it on GitHub:

https://github.com/automattic/musictheme/

If you’d just like to see the front end, feel free to click around our demo site here:

https://musictheme.mystagingwebsite.com/

In many ways, designing and building this theme was similar to the way we’ve made themes in the past — but we did carve out a few new practices along the way. Allan and I will be sharing them with you in upcoming posts. In the meantime, we encourage you to download, install, and experiment with Music yourself!

 

Read part two of this series: Designing a Gutenberg-Powered Theme: Music

The Promise of Gutenberg: Themes as More Design, Less Baggage

Gutenberg promises the vision you have takes shape in the editor, instead of something you can’t see. Why’s that so powerful?

It happened again.

I sat with a potential WordPress themer, who wanted to know how to get started the right way with theme development. He’s a user experience professional by day, looking to up his coding skills.

He pointed to the WordPress editor, and said something like, “I understand HTML and CSS, but I’m not sure how to make something beyond putting it in there.”

We’ve all been there. Having that vision of what you want your site to look like, and not knowing how to get there. Gutenberg promises the vision you have takes shape in the editor, instead of some PHP file or a special plugin that isn’t truly native to WordPress. That’s powerful! It shifts much of the customization control from the themer to the person using the theme.

Today, if you’re trying to get into WordPress development, you might start by tweaking an existing theme. Then making a child theme. Then diving into a custom theme. My user-experience professional friend did just that. He’s already customized a theme and made a child theme. But the whole world of specialized WordPress theme knowledge can intimidate even professional web workers. Imagine how it feels to new users of WordPress who have never built a website before?

But with Gutenberg, people – professionals and beginners alike – can begin building what they want. Now, Gutenberg will no doubt need its own specialized knowledge. But at its heart, it will transform what a theme means to WordPress. They can become more about pure design, powered by the simplicity of CSS.

You might be saying, “But you can already use CSS now to change a theme’s design.” That’s true, but much of a theme’s structure gets determined by and locked away in template files. Hard to change unless you start learning how to “theme.” But with much of that structure and markup becoming blocks that can be added to a theme, it becomes easier for people who aren’t themers to see different possibilities.

Say goodbye to lots of custom widgets and theme options. Oh, and to limiting page templates. The future of WordPress themes can become more about empowering users to work on their vision instead of always having to learn how to “theme.” It starts in the editor and not with the theme.

Photo by Dmitri Popov.

Themes are Mission Control

When we think of space flight, we often think of the thing that gets us there: the shuttle, module or rockets that take us out of this world.

However, in the early days of space flight programs at NASA, one man realized how important control from the ground would be to quickly evolving missions. Christopher Kraft pioneered the creation of Mission Control, the place where dozens of engineers, scientists and staff on the ground assist the astronauts in carrying out their mission from thousands of miles away.

About the Flight Director, the person in charge of Mission Control, Kraft said:

[T]he guy on the ground ultimately controls the mission. There’s no question about that in my mind or in the astronauts’ minds. They are going to do what he says.

The notion of Mission Control makes a good metaphor for a WordPress theme. Themes sit at the center of the WordPress experience. They run the show. WordPress is the ship and rockets that get us there. Without a theme, the mission won’t be successful. Sure, at its core, WordPress is publishing software, but many more people interact with the front end of a site than its back end.

So how do we start thinking of themes as an experience, rather than part of the experience?

Design how the pieces fit together. Most themers see the parts of a theme experience as separate. I did too, until recently. When I say separate, I mean as different parts of one flow. We often create the theme and the documentation with little thought as to how customers get from the theme to the help text when they need it. We also don’t spend time on onboarding or setup with customers. All that matters though, and it can help get a customer to success and make them feel like a success. We need to pay more attention to how those parts connect for a better experience.

Be consistent. Themes in WordPress have this great strength because they can do nearly anything. Their biggest weakness? They can do nearly anything. This means how a theme behaves can vary widely from one to the next. We’ve tried to address this in projects like Underscores and the TUX (Themes User Experience) list, but you can never do enough. I’d like to see themes only vary greatly from the norm if it accomplishes an important design goal for the customer.

Mind the internals. Recently, we had our support team at WordPress.com share why themes frustrate our customers. So much of the frustrations boil down to what a customer might not have control over in a typical theme. Things like how an image is cropped or how WordPress Core handles some default data. Experimenting with how these types of things work for your customers can mean they’re happier in the end.

If you make these items a bigger part of your theme design process, you’ll have more control over your theme’s experience. And your customer’s missions will have a greater chance of success.

Photo courtesy of NASA.

Balancing Options vs. Overload

On WordPress.com, one thing we’ve been focusing on is making themes that just work. It’s a bit of a balancing act; it’s very tempting to allow customers to control every aspect of their theme, because it seems like the simplest way to give them what they want.

That idea may sound great to customers, but having panels of options in the Customizer and an armload of documentation to figure them out is daunting. You can change things, but you’re also faced with making dozens of small, similar decisions about various aspects of your site, and deciphering the purpose of various controls.

It is true that in WordPress themes, some options are necessary. When designing and building a theme, it’s important to distinguish what options fit the actual intent of the design, and what options are being added for the sake of adding them.

You can often figure out which is which by tracking common pain points.

One way to do this is through support requests. On WordPress.com, we have a dedicated, talented team of Happiness Engineers who interact with customers every day. As Gary Murray wrote in a recent post, support teams are an important link between our work and our customers, and an invaluable wealth of information.

For themes, the support requests often involve how to set up a theme or use different options (which is why making themes that just work from the get-go is important). But other requests have to do with customizing a theme in specific ways. Some are unique to a customer’s specific goals; others come up again and again from different customers, either in the same theme or across several different themes.

In the Ixion theme, we recently added an option to control the opacity of the overlay used on front page photos, after several customers asked about changing or removing it.

Ixion with its two new options.

One purpose of the dark overlay is to ensure the text on top is legible against the photo. But if you’re starting with a photo that’s already pretty dark, the overlay isn’t needed and can make it hard to distinguish details in the photo. We were able to add this option while maintaining the original appearance, so customers who weren’t troubled by the opacity didn’t know the change happened.

Another feature that came from frequent customer requests was Content Options. A brainchild of Thomas Guillot, Content Options are a way for customers to make small visual changes on their site, like hiding the date, author name, or featured images. Rather than adding the options to individual themes, it’s a feature available in Jetpack and WordPress.com that themes can support. That way, the options are available in several themes and implemented exactly the same way.

Both additions were guided by the goal of keeping things simple, balanced with following actual customer requests.

When looking at adding options to a theme, there are a few things that can help to keep things simpler:

First, aim to make a theme that just works on activation. If the design’s not possible without multiple options, rethink it. If options are necessary to get the theme to work well with different kinds of content, find a way to make the theme more forgiving instead. Make the theme do as much work as it can by itself.

In a similar vein, make the theme make the decision. You could allow customers to switch a sidebar position, or make the header sticky, but unless it’s a very common request it’s best left out. Chances are, one option looks best and makes the most sense for the theme you’re building — use that one.

Use existing WordPress functionality rather than custom options. I don’t mean stretch the options beyond their original intent, just don’t reinvent the wheel. For example, look to use the custom header image or featured images in the theme before adding another image upload option to the Customizer.

When adding options, rethink your approach to customization. Alright, you’ve discovered your customers can’t live without being able to change their header’s layout. Rather than having separate controls to move each individual item — logo, header image, menu, social links, site title — is there another way to approach this? Aim for simpler, more opinionated controls to limit the decisions customers have to make. Basically, make your options smart.

Last but never least, user test, talk to your customers, and work directly with them when you can. They’ll help guide you to that point where your themes can help them feel empowered, but not overwhelmed.

Photo by Patryk Grądys on Unsplash.

The Next Chapter for Themes

Every few months I read a post about how the WordPress theme business has shrunk. The authors always reach a similar conclusion. Sales have dwindled. Competition has increased. Putting food on the table, finding a niche and standing out is near impossible.

It may not be so impossible though. With a new editing interface on the horizon, the theme landscape will change in a big way. That editing interface, and eventually better site customization, means we (those who create themes) will all have a chance to redefine what a theme is and means to people who use WordPress. It will be new, fertile ground to discover – the next chapter for themes. We just can’t make the same mistakes we’ve made before.

A long time ago, especially in Internet years, you could sell a collection of well-designed WordPress themes and make a living. These became known in the WordPress space as premium themes. What made them “premium” was loosely defined. They often sported a unique look or carried interesting features. As a consumer, premium themes always seemed more special to me. They took risks. That runs against what we say on the Theme Team at WordPress.com, where we do nothing but create WordPress themes: The only difference between a free theme and a premium one is the price.

As more and more theme shops sprang up, the feature race began. Many themes became as complex as WordPress itself. Designers and developers had less time to experiment because we spent more time glancing over our shoulders. What’s the next trend? What’s this other theme shop doing?

To correct for the complexity, the larger theme ecosystem became obsessed with standards. Like making sure a theme did things the WordPress way or always met “best practices.” The web industry as a whole also continues to obsess over and rely on build tools and frameworks, sometimes to a fault. They should solve technical hurdles for us. But do they? Sometimes they do at the expense of our customers. Make no mistake, I’m not arguing against best practices or tools. We do the same thing. However, the status quo, even if it means well, can blind you to what’s important.

What’s important, you ask? Our customers. Doing the invisible things that make their experience its best. Focusing on accessibility, performance and security. Making sure the the small screens look just as good as the large screens. Gutenberg, the project name for the new editing interface, will make one theme become many. A customer using a theme will be able to bend it many different ways – turning the focal point of the theme from its capabilities to its design.

Customers want their sites to look just right. They don’t want to learn a theme. So when the new age of themes begins, promise me you’ll focus on what they want. You won’t get distracted by the many different ways to extend this new editor or become mired in all the ways to prevent the abuse of customizing it.

This matters. Your customers need you. And you’ll stand out and put more food on your table.

Photo courtesy of Hermann.

Behind the Design of the Forefront theme

If you’ve read my previous articles you’ll recognize the title of this post. For those of you who are new, these are my thoughts behind the themes I’ve designed. This time, I’d like to talk about Forefront — a responsive Business theme.

Continue reading “Behind the Design of the Forefront theme”

Behind the Design of the Ryu Theme

Much like I did for the Further theme, I’d like to share my thoughts behind Ryu — the free theme I released recently.

Yes, you guessed right. It’s named after the main character of the classic game. If you know why the character was named Ryu, you will understand why I named this theme Ryu, too. 🙂

I mentioned this in my previous post about the Further theme, Behind the Design of the Further Theme, too that I strongly believe that we, as WordPress theme designers, should create amazing themes for specific purposes/audiences rather than multi-purpose themes that are just good. In many cases, themes designed for a specific purpose or a targeted audience perform better when people use them for that purpose. I’ve created Ryu specifically for the Facebook, Tumblr, and Twitter generation of personal bloggers.

Continue reading “Behind the Design of the Ryu Theme”

The Recipe for a Great Theme

Have you ever looked at a WordPress theme and thought, “Man, I wish I could do that!” Well, here’s a little secret: You totally can.

Yes, you can make a theme, and you don’t need to be a theme expert to do so. You just need three things:

  • An idea,
  • a healthy dose of curiosity,
  • and time.

An Idea

Until five years ago, I’d never touched a WordPress theme. I didn’t have a lot of experience, I’d never experimented with dynamic programming languages, and I’d never had to design for a vast and varied audience.

But what I did have were ideas – how about a theme for babies? Or a theme with changing seasons? Or a theme with animated fish? I didn’t know how to make these themes happen – I just knew I wanted to make them.

Without an idea, there is no theme! So before you do anything, figure out what you want to build. Have a goal to strive for, write up some notes, sketch it out.

It doesn’t have to be mind-blowing, or revolutionary, or the Next Big Thing, as long as you’re excited about it. You’re probably not going to make history with your first theme, but why let that deter you from making something really cool?

A Healthy Dose of Curiosity

If you like to learn, you’ve already taken a huge step toward becoming a themer. WordPress changes often, so theming techniques change often, too. You don’t have to venture far for learning material – you’re looking at a wealth of theme-makin’ goodness right here at ThemeShaper!

But I encourage you not to get mired in the technical details. You know how you may use Photoshop, but you probably don’t use one-tenth of its capabilities? Theming is like that. You don’t need to know how to do it all – you just need to figure out one piece at a time.

Think of your theme as a puzzle, and break it into smaller components – a fixed sidebar, an animated drop-down menu, a customizable header that changes colors – together they’re an intimidating obstacle, but if you tackle each piece individually, you’re likely to find it’s not as difficult as you think.

Also keep in mind, you don’t necessarily need to start from scratch (unless you want to!) Maybe you’re less interested in coding a theme, but you want to illustrate one – you can always build a child theme, or use a starter theme, so you don’t have to dive as deeply into the code.

Here are some of our favorite ThemeShaper resources to get you started:

And finally, tutorials have their place, but don’t be afraid to play around! Some of the best learning experiences and discoveries are hands on. Remember: There are very few things you could do to your WordPress theme that a quick Ctrl+Z can’t fix.

Time

We’ve come to the part I can’t help with. You have the idea, you have the tools, now you just have to make it happen. Easier said than done, but as they say, Rome wasn’t built in a day. Some of the best themes take weeks, months, or possibly even years, to come to fruition.

But beware: Theming is addictive. If you spend enough time with it, you may find yourself staying up late into the night to squash a CSS float bug, or research scripts for a post slider, or find just the right shade of blue for that navigation menu. Don’t say I didn’t warn you!

I hope this inspires you to give theming a chance if you haven’t already – it’s a great opportunity to try something new and make something cool!

Behind the Design of the Further Theme

Recently, I released Further — Automattic’s first premium magazine theme. I’ve been given a chance to write about my thoughts behind its inspiration, design, and development. I hope this gives you something to think about as you design your next WordPress theme or website.

Continue reading “Behind the Design of the Further Theme”