Last week I spent a little time putting Blockbase to the test. I had some explorations into warping text and images using CSS and SVG filters gathering dust, and I thought it would be fun to explore pulling those into a highly-opinionated block theme.
In the past when I’ve done a theme experiment like this, I’ve generally started with something like the emptytheme generator in the WordPress theme-experiments repository. This provides you with just the required files for building a block theme, so it’s a good minimal way to get started.
This time around, I used Blockbase. While it doesn’t yet include a quick generator script like emptytheme does, there is one in the works. In lieu of that, I just created a child theme like I normally would: by adding style.css, functions.php, and index.php files. I also copied over the child-theme.json file from the in-progress Quadrat theme, since I knew that would get me started.
My work in child-theme.json was very brief — I just changed a few variables and used Blockbase’s compiler script once. Then I copied and pasted over the block style effects from the plugin mentioned above.
Once that was all in place, I jumped into custom templating. I created just two templates, plus a custom header that featured a video loop of me waving at the camera (but filtered into oblivion using the tools at photomosh.com). I used a “Warped and Stretched Photocopy” block style on the header’s text, and “Photocopy” style on the featured images. Combined together, this created a highly stylized look and feel, reminiscent of (for better or for worse) the old days of Flash animations:
This all worked pretty well in the editor too! Due to a combination of Gutenberg limitations and browser bugs, I ran into an issue getting my SVG filters loaded into the Site Editor’s iFrame, but aside from that, things looked just like the frontend:
The filters did work great in the post editor though, so I can show you how that’s supposed to work by loading the header there:
In the end, the filters bug is not really a fault of the theme, and something I’m sure I could resolve if I choose to devote some more time to this exploration.
The theme is obviously a little over-the-top, but that was really the point of the experiment! I’m amazed I was able to fold my earlier block styles work into such a distinctive, full-featured theme with minimal effort.
Overall, I found that the benefit to using Blockbase was peace of mind. Compared to starting fresh or using emptytheme, Blockbase ensured that I had a fully-functional block theme immediately. It already contained extra templates for pages like 404 and search, and it was full of little CSS fixes for things that full-site editing just doesn’t quite support yet.
This eliminated a lot of extra busywork, and allowed me to dive right in and focus on the theme-building aspect that’s most exciting for me: the theme’s design and creativity.
The code for the theme is over here in case anyone would like to poke around:
Mel Choyce discusses and highlights GPL-compatible fonts.
Pairing type can be hard, especially when you’re limited to using only free, open source fonts in your themes. What that means can be confusing, and there aren’t a ton of high quality sources for you to obtain compatible fonts.
I want to talk to you about font licensing, where to find high quality, expressive free fonts, and show off some examples for font combinations you can use in your own theme designs.
Open source fonts are usually released under the SIL Open Font License, or OFL for short.
Finding the perfect typefaces for your theme can be challenging. Limiting yourself to the smaller bucket of available OFL fonts? Now that’s stressful. Open source fonts sometimes have a few downfalls to look out for:
The font might not include multiple weights and italics or obliques.
The kerning on the font might be spaced unevenly.
The fonts themselves might not be high quality.
However, constraint breeds creativity. We can still design professional, visually appealing themes using plenty of available license-compatible fonts.
Where to find free fonts
There are many places to find OFL fonts, ranging from directories, to curated collections, to individual type foundries. Here are a few sources I recommend.
Directories
Google Fonts
With almost a thousand available fonts, Google Fonts is one of the largest directories of open source fonts on the web.
Google Fonts’ filtering tools allow you to view fonts that contain a minimum number of available styles, which can often be a proxy for quality. I’ll usually search font fonts with at least four available styles (usually regular, italic, bold, and bold italic), though searching for six+ generally nets more versatile options. They’ve also recently introduced a toggle to limit results to variable fonts.
Google Fonts also gives you the option of downloading and bundling the font files in your theme, or linking to the files on their CDN.
Font Squirrel
Font Squirrel is another long-established directory of open source fonts. It provides more granular filtering options than Google Fonts. This is a great resource if you’re looking for a typeface with a very specific feel.
Font Squirrel also offers a web font generator service where you can upload your own font files, and convert them to all the different formats you’ll need to embed the fonts into your theme.
Collections
Beautiful Web Type
Beautiful Web Type showcases a curated collection of high-quality open source typefaces. Instead of a list of fonts, this website actually demos them in action, allowing you to get a good sense of how each typeface looks and feels in context.
Open Foundry
Open Foundry is similar, focused on showcasing the best and newest high quality open source fonts.
You can type in your own text directly into the font listings to preview how it will look, and adjust the font size, line-height, and letter spacing of the text. You can also dive deeper into each typeface and see a type specimen.
Type Foundries
Velvetyne
Velvetyne is a collection of type designers who create and distribute open source fonts. Their philosophy and ethos resonate strongly with WordPress’ own.
Looking for a striking, experimental, or overall fun typeface to use in your next project? Velvetyne’s got your back.
Collletttivo
Collletttivo is another collection of individual type designers who release open source fonts under the same foundry. Their fonts feel punchy, and eye-catching, and many push the envelope of modern typography.
League of Movable Type
The League of Movable Type is the oldest open source font foundry, opening its virtual doors in 2009. This group was my introduction to web type. They offer a diverse array of high-quality typefaces ranging across many different styles.
Pairings
If you’re looking for somewhere to start, here are seven hand-picked open source font pairings you can use in your next theme design. I’ve shown each in a potential context so you can get a feel for how the pairings could work in action.
Luiss Serif & Luiss Sans
Luiss Serif and Luiss Sans by Antonio Pace showcase the beauty of font families. Designed with similar characteristics and proportions, these sans and serif typefaces match beautifully.
While versatile, I think using this pairing in a theme meant for longform text will help it shine brightest.
Ribes & Subjectivity
This font combination will infuse your theme with funky, retro vibes.
Ribes by Luigi Gorlero takes inspiration from the ’50s funk and jazz aesthetic. I love how the horizontal slant of the counters make the typeface look like it’s squinting at you.
Subjectivity is a display geometric typeface by Alex Slobzheninov. Its funky qualities play well off of Ribes. Generally, display faces are not suited for longform text, and that’s also the case here.
Use this combo in your next landing, splash, or marketing page theme design.
Mazius & Montserrat
Mazius is a gorgeous calligraphic serif by Alberto Casagrande, featuring not one, but two italic styles (the second of which is shown in this demo).
Montserrat by Julieta Ulanovsky has been around for a while, but was redrawn and expanded in 2017 with new weights.
Mazius works great for large headings, while Montserrat is versatile enough to take up the slack for smaller headlines and all body content. This pairing works well for any theme needing a just touch of elegance.
Facultad & DM Sans
Facultad is a sans serif typeface designed by Andrés Torres for the Faculty of the Arts at the University of Cuenca. Its calligraphic construction, wide counters, and generous x-height make Facultad a great choice for any modern academic news or magazine theme.
With its even, round shapes, DM Sans by Colophon pairs well with Facultad because of its differences. Its geometric qualities draw more attention to Facultad’s interesting calligraphic details.
Together, the pairing feels warm and inviting, while also strikingly smart.
Le Murmure & Compagnon
Sometimes you need to let some personality shine through. This pairing is bold and unconventional, but with two typefaces from Velvetyne, it might work for your next personal portfolio theme.
Le Murmure by Jérémy Landes was designed for the French design agency Murmure. This condensed titling font reminds me of the interesting angles achieved when you squeeze a handful of pipe cleaners. Only, you know, cooler.
Compagnon is a family with five different styles, inspired by old typewriter specimens. It’s super funky and fun to play with. If you use it, you’ll want to make sure your theme supports editor styles; this is a font that needs to be live-previewed.
Big Shoulders Text & Space Mono
Big Shoulders Text is a condensed sans-serif typeface by Patric King, created for the City of Chicago’s Brand Standards and inspired by “Chicago’s multiple histories in railway transport, journalism, advertising, and public political action.”
Space Mono was designed by Colophon for Google Fonts. It was designed for headline and display type, but I think it can be safely used for body copy if your size is large enough and your text sparse enough. So: okay for things like restaurant menus, bad for longform.
Combined, these typefaces remind me of old offset printed menus and the newer hipster styles that harken back to them.
Ibarra Real Nova & Inter
Ibarra Real Nova is an elegant serif typeface, designed by José María Ribagorda and Octavio Pardo based on 18th century Spanish type.
Conversely, Inter by Rasmus Andersson is a highly readable modern font created specifically for screens.
In this pairing, Ibarra Real Nova sets the overall elegant and classical tone, with Inter as a supporting actor. Use in any theme with a flair for the dramatic.
I hope these provide some inspiration to all you themers out there. If you use any of these font pairings in your next theme, let me know! I’d love to check them out 😁
Exploring ideas about the evolution of layout and presentation in a post-Gutenberg world
What described below is an broad idea, some thoughts on one way the WordPress ecosystem might evolve in response to the new capabilities of Gutenberg. Huge thanks to Kjell Reigstad and David Kennedy for helping me think through these concepts!
Traditionally, themes have been the only authority when it came to the layout and presentation of a WordPress site. They provided the entire page structure, typography, the color scheme, the menu functionality, the responsive rules, and more. Themes generally had the full power to dictate if and how users could customize each of those elements.
With the advent of Gutenberg, we’ve seen some of those responsibilities shift. Regardless of their theme, users can now add responsive column-based layouts to any page, assign custom colors to most of their content, and insert rich elements anywhere within a post or page. As a result, some of the responsibilities for the design of a site are blurred: The theme takes care of some aspects, while Gutenberg handles others. Much of that architecture is still to be defined as Gutenberg moves into Phase 2 and beyond.
Gutenberg brings many opportunities to WordPress, but the biggest impact comes from the way it can enable a much clearer product architecture — one which enables modularity, consistency, and interoperability — and the positive impact that can have on the end user experience of WordPress. To that end, it can be helpful to think of layout and presentation not as the “Theme”, but as a set of interrelated pieces, each with their own set of responsibilities, working together to create a site.
Blocks
A block is a component that exists visually a page. It can be a “simple block”, like a paragraph or an embed; or it can be a “complex block”, which has a layout of multiple nested blocks, like a testimonials section. This distinction doesn’t necessarily matter to the user as there’s a unified insertion and discovery mechanism. Blocks can contain placeholder content that is neutral — in other words, they start as a “blank slate”, except for placeholder content that guides users as to how to add content to the block.
A block can contain layout information, including media queries that define how the block behaves responsively in different viewports. A block could conceivably define styles that would override the ones provided by the template or the global styles, in order to create a unique presentation for a particular block.
Templates
While Gutenberg makes it easy to create a custom, complex page layout from scratch, the process of starting with a blank slate and designing a layout that looks good will likely still be daunting for many users. Giving users access to a collection of pre-built Gutenberg page templates would enable them to get started more quickly and simply tweak the template to their needs.
A template would define a collection of blocks in a particular order and layout that make up an entire page. In addition, templates can contain “starter content” — editorial boilerplate text and media so that a user can simply tweak and replace rather than having to start from scratch. The concept of a template library would mean that there could be a core library of basic templates, in addition to non-core templates that can be developed by anyone and installed separately (similar to how blocks work).
Styles
Styles would define the global aesthetics of the site, and would provide a central definition for typography, colors, spacing, icons, and more. Brent Jett has suggested some interesting ideas for how this might manifest on the user-facing side. Styles may also provide some global guidelines for layout, such as global settings for responsive behavior, etc. Layout that is specific to a page template or a block should be defined locally by that element, though.
Themes
Given all the new controls over layout that blocks and templates can provide, what does a theme mean in this new world? It seems that themes can become more lightweight. Perhaps a theme is simply a JSON wrapper that defines the components of that theme — identifying the blocks, templates, and styles that make up the theme. Rather than bundling all of the parts of the theme in a tightly coupled piece of software, the theme could simply be a high-level definition that identifies the modular dependencies (styles, templates, blocks) that need to be installed. When a theme is deactivated, a user could even have the option to keep the templates and blocks in their library for future use. This could allow for greater flexibility but also greater standardization, creating a consistent and modular framework for shaping how sites get built in the future.
We all know that themes will evolve, and this is just one early idea. As we move forward together, WordPress will surely benefit from the sharing of ideas and explorations around the future of themes. If you have a vision yourself, please share it! Feel free to use the comments below, your own blog, Twitter (use the tag #gutenideas), or wherever you can get the word out.
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.
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:
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.
Announcing the Music theme: an exploration of how Gutenberg can transform theme design and development.
A couple months ago, I createda Sketch document to assist with the design of block-driven themes. I posted about thathere 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:
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:
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!
Making a theme is really exciting. It’s a great way to practice your coding skills. It could be a good way to bring in some extra pocket change. Best yet, seeing someone use something you’ve built is incredibly rewarding.
I’ve watched the quality of theme design get better and better in the WordPress.org directory in the last few years, but I still see a lot of themes that look the same. Free themes still lag behind premium themes in terms of design quality. You can help change all that. You don’t need a design background to make good design decisions: a developer conscious of design can still make a good-looking theme.
Here are a few general tips and tricks you can apply to your themes to give them a solid design base, regardless of your background.
Pick a Direction
When planning out your new theme, have a specific user or use case in mind. That use case shouldn’t be “a theme for everyone.” Your use case can still be pretty broad — “a modern theme for small businesses” is still targeted enough for your ideal user to solve a specific goal by using your theme. Alternately, you can get super specific, giving yourself a prompt like “a food blogging theme targeting smartphone photographers.” Each theme idea has a different set of constraints, and by embracing and sticking to these constraints, you can make better themes.
Once you have a direction in mind, think through that scenario and what your target users would need. The more you imagine how people are going to use your theme, the stronger your concept becomes.
For a modern business theme, think about what a great business website needs. If the company has a physical location, site visitors need an easy way to find an address or directions. People visiting the site need a way to contact the business, via phone, email, or contact form. The theme needs strong page templates, but probably not a unique blog template. It probably needs a navigation bar that can support up to a dozen or more pages at various levels. Typography should probably be strong and serious. A business might also need to display their products, so you could consider adding support for popular e-commerce plugins.
On the other hand, an amateur food blogger, especially if they don’t have a nice camera, needs a theme that focuses more on super strong typography. Photos should be present, but de-emphasized in case they aren’t top-quality. The theme’s users need a way to easily display recipes. Maybe this means building a plugin that pairs with the theme for extra feature support, or maybe it means really nice post styling. A variety of page templates probably aren’t extremely important, but well-styled category archive templates are. Type can have a little more personality, but still has to be readable.
In both situations, you want to have a strong responsive design so site visitors can browse on their phones or tablets. After all, 50% of web traffic comes from mobile devices.
Look at other themes and websites that fit within your use case. Find five really great ones and figure out what makes them great. Take these insights and apply them to your theme.
Visual Design
Typography
Typography is probably the most important part of the vast majority of themes. What’s a site without text? Type needs to be clear, readable, and context-appropriate. There’s a couple rules of thumb you can use to make sure your theme’s typography looks good.
The hardest part of theme typography is picking the right fonts. The “popular” sorting option on Google Fonts is a surprisingly okay place to start looking for a font to use. Try to pick fonts that have multiple weights. Depending on the font, a light or semibold weight might be more appropriate than just regular or bold. At the very least, avoid using fonts that don’t come with bold or italic. There is (finally)! a “number of styles” filter in Google Fonts that you can also browse through. Don’t trust Google’s recommended font pairings — they’re actually pretty poor.
If you want to combine a serif and a sans-serif and you’re unsure which typefaces to pick, go for a font family. These are built to have similar features and will naturally pair well. Some families on Google Fonts include Merriweather Sans and Serif, PT Sans and Serif, and Noto Sans and Serif.
When in doubt, use font combinations from sites you like.
Once you’ve chosen your font(s), you need to style your text to be readable. This means using appropriate font sizing. Don’t make someone squint! Use at least 14px or higher for your body text. If 14px looks too small, don’t be afraid to go up to 16px, or even 18px.
One of the biggest issues I see concerning type on themes is an overall lack of line height, which is the space between each line of text. As a general rule of thumb, my headers are always between 1.2-1.4 the size of my font, and my body text is almost always between 1.4-1.6 the size of your font. And the awesome thing about line-height is you can even just use line-height: 1.4 instead of having to calculate the actual pixel value.
As a general rule, paragraphs shouldn’t be more than 50- 75 characters long. This helps keep them nice and readable.
Finally, limit the number of font styles. I mentioned earlier that you should look for fonts that have multiple font weights. While you should seek these out, don’t combine too many different font weights and sizes, since they negatively impact your content’s hierarchy and flow.
Color
There is a lot of psychology around color. You don’t need to be an expert in color, but learn a little bit before you pick them for your theme. Colors also have different meanings in different cultures, so keep your audience in mind when picking your palette. For a good introduction to color theory, watch Aaron Jorbin’s presentation on WordPress.tv.
Color also affects whether or not your users will be able to view your theme. Keep in mind contrast when designing your themes — contrast that’s too high or too low makes it hard for people, especially people with visual impairments, to read your text and navigate through the site. Keep in mind people with low vision or color blindness.
Don’t use too many bright or bold colors. They’re great for emphasis and drawing attention to specific parts of the page, but too many strong colors can make your theme hard to look at, or can make it difficult for people to find the most important content on the page.
Soften your blacks. Pure black doesn’t really exist in the world around us, and pure black on the web ends up looking harsh and unnatural. Add hints of color to your black by going up and right in most color pickers, or go for a dark grey.
If you’re struggling with color, here’s some things you can do:
Stick to dark text on a light background with one or two accent colors. You can’t go wrong with dark grey text on white.
Let everything breathe. Use ample white space between separate elements in your theme.
Finding the right balance of whitespace is hard. When in doubt, l o o s e n t h i n g s u p a l i t t l e. (Just not your lowercase text — only add letter spacing to uppercase text.)
Details
Don’t go crazy with the details. Less is more.
For example, consider if the drop-shadow you’re using adds a necessary sense of depth to your theme, or if it’s purely decorative. If it’s necessary, tone it down a little. In general, don’t use drop-shadows darker than 25% opacity. The same can be said for gradients; try to keep gradients subtle.
Use animation sparingly. I mean really sparingly. Inappropriate animation is jarring and detracts from your theme. Motion should only be used to show change, not for decoration.
UX Design
There is nothing worse than finding a theme that looks awesome and does what you need, only to install and activate it and find a thousand options you need to hand-configure to make it look like the demo.
Many of WordPress’s core philosophies revolve around simplicity and ease of use:
Great software should work with little configuration and setup.
Design for the majority.
Decisions, not options.
Clean, lean, and mean.
Striving for simplicity.
You should take these core philosophies to heart when creating your themes. Cut the number of options down to what’s absolutely necessary. For example, instead of letting people control every single color in your theme, let them choose two or three and generate a color scheme based on those colors. Make smart defaults and informed assumptions. If you include options that can be previewed, put them in the Customizer. Stop using gigantic theme options and settings pages. They are almost universally a bad experience for users.
Lastly — user test! If you’re creating a premium theme, you owe it to your users to make your theme as easy to set up and use as possible. UserTesting.com is relatively cheap and easy. Running as few as 3 user tests will catch the majority of your theme’s issues.
Free theme? No budget? Ask around for some beta testers. Don’t want to? Then at the very least, set up your theme on a couple different demo sites. Try it on one totally new, empty site, and then try setting it up on a site that already has content. Record your screen as you set it up. If you did well and remembered where everything was — awesome! You can now use that video as documentation. Did you struggle? Figure out where the process broke down, and fix it.
Love the idea of user testing? Read Rocket Surgery Made Easy by Steve Krug. It’s short, concise, and explains everything you need to know to run a good user test.
You don’t need to be a designer to make a good theme — you just need to be conscious of your design decisions. Now go forth and 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.
It’s been a while but we finally changed the theme on ThemeShaper! No need to scroll to the footer it’s using Further designed by the illustrious Takashi Irie. We’ve made a few modifications using a simple child theme but it’s pretty close to the stock theme. For now. I’m sure there will be many tweaks over the next few weeks and months.
For the historically minded this is the first theme on ThemeShaper.com not designed or built by me — we should have done that sooner! That said, I hope to continue the tradition of unusual design choices here with more experimentation and the use of cutting-edge magazine themes like Further (check out the infinite scrolling on the home page).
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.
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.
Icon fonts are a truly great hack. They’re lightweight, scalable, and a clever way to use vector-based images on the web at a time when SVG just doesn’t have enough popular browser support to be practical. Despite starting out life as a hack, icon fonts are like the sprites of vector graphics, and I think they’re here to stay.
Enter Genericons, a new icon font made especially for blogs by Joen Asmussen with contributions from Sheri Bigelow and Takashi Irie. They were designed with simplicity in mind to keep a minimal, “generic” aesthetic so they can be used in a wide range of projects. They look sharp at small sizes because each icon has been aligned to on a 16×16 pixel grid.
Have you checked the character map for the web font you use in your WordPress theme?
Thanks to all web fonts, nowadays we have much more choices for fonts in our WordPress themes. You might have checked if your theme looks good with Lorem Ipusum text but I’m afraid that’s not good enough. Lorem Ipusum text doesn’t have all digits, punctuations, and symbols from the Basic Latin character set. A WordPress theme should support at least all the Basic Latin characters, and this is only assuming your theme will be used for English language. This seems to be basic but often it’s overlooked. Continue reading “Don’t let Lorem Ipsum decide the fonts used in your WordPress Themes”
ThemeShaper 