Design WordPress Work

Block Patterns, Draft Animatic, Iteration Two

An exploration of adding more complex groups of blocks, called Block Patterns, to the WordPress block editor, Gutenberg.

Design WordPress Work

Link Inserter, Iteration Two

An early design for the Link Inserter UI in the WordPress Block Editor.

Design Portfolio WordPress

Link Inserter, Iteration One

A very early design of the Link Inserter interface in WordPress. Experimental at the time this post was published.

Design Work

Communicate with Silent Movies

It can be hard to describe a visual idea with words. Thats why photos exist. But sometimes even a picture doesn’t get the job done. Thats why GIFs exist.

It can be hard to describe a visual idea with words. Thats why photos exist. But sometimes even a picture doesn’t get the job done. Thats why GIFs exist.

Soon, will have a new View Site menu that will show you a preview of your awesome website. One thing my team has been tweaking is the loading state. We’ve done our best to reduce the loading time, but sometimes you’ll have to wait. Them’s the breaks.

Take a gander at the following screenshot:

The static screenshot from Sketch does a pretty good job at conveying my intentions for the design, but it still requires some (written, or other) explanation.

Take a gander at the following GIF:

Adding some motion to the picture helps convey the idea without me having to explain anything. Now here’s a (not silent) video of how I made the GIF above:

I originally wrote and published this post over on on August 31, 2017.


Go Marching, a Minimal Photo Theme for WordPress

I really enjoy taking photos. Not like, professional photos, but off the cuff pictures, usually with my iPhone. I’ve always wanted a theme that did nothing but show my pictures, and maybe a title and description. So I made one. I’m calling it Go Marching, as in “The ants go marching, one by one…”

[wpvideo ol7ZlYIH]

The theme shows a single photo at a time, filling up the entire browser window. You can check out the initial version of the theme over at my (new) photo blog:

I plan to add a grid view for archives, as well as add support for comments. Once the code is a little more stable, I’ll see if I can submit it to the theme repository.


My first Android device: The Nexus 7

Hell has frozen over: I’ve got an Android device. The primary motivation for getting it is to test out Automattic’s applications, websites, and services. So far, my early impressions are really positive. But there have been plenty of hiccups along the way. For example, it took me a good two minutes to figure out how to turn the thing on. I swear, that power button is hidden on purpose. It’s too far down from the top of the device, and wraps too far behind the curvature of the side. Once I finally figured out how to turn it on, and setup my Wi-Fi password and Google account, I started to play. That didn’t last long however; About two minutes into using the tablet it prompted me to install an update. So I tapped yes and watched it restart a handful of times, wondering if I was ever going to be able to use it. When the update finished, I was surprised to find that I had to reenter my Wi-Fi info and Google credentials.

Its still really early, I’d like to just provide some high-level thoughts in a few of the things I miss from iOS. I’ll be spending a lot of time with the device over the coming weeks to get intimately familiar with android. I think it’s important as a UI designer to become familiar with as many different devices and operating systems as I can.


High level thoughts:

  • Swype, a fancy way of “typing” by drawing lines between the letters in the word is by far the fastest and most accurate way of typing.
  • Speech to text is a close second, and puts Siri to shame.
  • The regular touch to type experience is actually kinda terrible when compared to the iPad.
  • Selecting text is far superior to iOS’s gimmicky loupe zoom tool.
  • The screen is very nice, and while not as nice as the iPad’s retina display, is a very close second.
  • It’s only been a few hours, so it’s hard to judge the Android OS, but my early impressions are favorable. However, stability in this short time has proven to be less than ideal; is been less than 24 hours and this thing has crashed half-a-dozen times
  • The back button thing mystifies me. Sometimes it takes me back a level in the current app; Sometimes it takes me back to a different app; Sometimes it takes me to the home screen. Is there a method to this madness?
  • Home screen widgets can be really cool (inbox and keep are great), but most of them are useless, gimmicky, and terribly designed. Even the well designed ones seem to suffer from a lack of update; stale info makes them useless. And why are the Twitter and Facebook widgets so small?
  • The notification tray is nice to use, but visually stands out from the rest of the interface. Same goes for the controls panel.
  • I wish I could launch more from the”swipe up on the home icon” trick. I’m not sure Google Now will ever be useful for someone who rarely leaves their house, like me.
  • Having the home screen button be a touch screen icon directly under the keyboard is a recipe for disaster. While typing, I’ve hit the home button a number of times, taking me out of whatever I was doing.
  • Navigating inside and between apps is confusing. Sometimes the navigation controls are at the top, and sometimes you have to use the global controls at the bottom – often within the same app. For example, the Play store let’s you tap screenshots to view them at full size, but the only way to exit the full screen view is to tap the mysterious back button. Yet elsewhere in the app there is a back button at the top left of the screen. Another example is swipe gestures; Sometimes swiping left and right changes the view, and sometimes it opens a sidebar. Confusing. I’ve never felt confused with navigation in iOS 7.


Things I miss from iOS:

  • Taping the top of the screen to scroll to the top.
  • The (new in iOS 7) global back swipe gesture.
  • All of the multi finger gestures for switching between apps and the home screen.
  • The physical home button.
  • A power connector that can’t be plugged in wrong.
  • Better lock screen pass code options. (Why do I have to tap a button after typing my pass code?)
  • The App Store. The Google Play store is really terrible.
Design WordPress

Menus *heart* Pages

Menus love Pages

Spent some time today thinking about how we could merge Menu’s in to the Pages screen in WordPress to reinforce the connection between the two.

Design WordPress

A Tabbed UI for WordPress Widgets

I’ve been working on some design concepts for a redesign of widgets in WordPress, hopefully for release in 3.8 towards the end of this year. The latest concept I’ve been thinking about is a vertically tabbed UI for listing sidebars and widgets.


Design WordPress

Exploring Layouts for the WordPress Media Library

3.6 Media Menu with MP6WordPress 3.5 brought us the great media modal, which makes it super easy to upload and add images while writing a post. The modal features a grid-based layout, with large images that make browsing your library a breeze. Meanwhile, the main media page hasn’t changed much. It still lists your media library using a standard WordPress table view. Its not bad, and sometimes the table view is useful — but that grid-based layout from 3.5 would bring that easy, breezy browsing to the main media page.

I’ve worked up a few quick wireframes to run through the idea. I’m diggin’ it. There’s the standard table list view, a hybrid view, and a traditional grid view. Lots more ideas brewing in my head, but I wanted to get these “on paper.” What do you think?

Design WordPress

Rethinking Content Editing in WordPress, from Mel Choyce

Some really interesting concepts from Mel Choyce. Mel’s designs are exactly what I had in mind when Matt brought up the idea of “post-formats as blocks” in his State of the Word talk.

There’s some great discussion happening over on the Make UI blog, too.