Category Archive: iThemes

  1. First (Certainly Not Last) Experience Creating Custom Icon Fonts

    Leave a Comment

    I try to use the most flexible formats as I can in my work. That means spending a little more time up-front creating assets that are scalable and editable, so I don’t need to recreate the wheel every time a size changes or we need a hover state for something. Sometimes that means extra CSS. Sometimes it’s using an SVG instead of a rasterized image. And sometimes it means using icon fonts instead of image icons.

    WordPress 3.8 made some huge updates to the dashboard interface design. At first I was very skeptical of the changes, but by now I’ve grown to really like them. They’ve polished things up quite a bit. One of the things that has come a long way is the icon system WordPress uses. It’s not perfect, but it’s really improved and expanded recently from some of the initial icons that were proposed.

    With WordPress moving from image icons in the sidebar menu (and other places in the dashboard like the MCE editor), we’ve had to adapt our plugin icons as well. Our plugin icons were all pretty polished as images, and it was a real challenge to adapt them to 1-color while still retaining their personality. A lot of non-designers said this was a good change because everyone could just use the default set of new icons for all their post types. While this is great for people building simple plugins with no branding, we lose some serious branding in the dashboards of our customers if we start using the standard WordPress icons that any other plugins can use. So I designed some custom icons for our most popular plugins. I created a lot of versions of these at various weights to get the point of the icon across without losing all the personality of each logo, and without losing the clarity of the icon at 32px.

    Here’s what I’ve done for BackupBuddy, Exchange and iThemes Security so far. I also did one for Builder, but I’m still working out some kinks on that one. It might not look like much, but a lot of effort (maybe a little too much) went into making these stand out and still manage to communicate our brand effectively.

    I used the awesome icomoon.io to generate the icon font from SVGs. I’d like to eventually get some basic font creation software for using icon fonts more. But for this first use, icomoon.io was perfect. We use a single font for all our icons that we load as a git submodule in each of our plugins to keep them up to date and to not have to load 4 fonts if you run 4 of our plugins or themes at once (which many of our customers do).

     

    wp-icon-font

    It’s not the simplest solution, but it’s a really flexible one, since you can do a lot more with an icon font than an image. You can use CSS properties to style it just like text, so you can add text-shadows, change colors and use transitions easily. And all with less load than an image, especially if you use a lot of icons in a system. I’ve only used Symbolset as an actual icon font on the front-end of a site and I’ve liked it a lot. But I haven’t created any custom icon font sets yet for use on the front end of a project.

    I learned recently that you can use any Dashicons as your custom post type icon by referencing it instead of an image file in your post type code.

    This is the code that registers my portfolio post type “Work”. The menu_icon line shows I’m using the 'dashicons-images-alt2' icon for my projects. Super simple to implement for things that don’t need the level of branding consideration as our products at iThemes.

    The line you need to look at:
    'menu_icon' => 'dashicons-images-alt2'

    The code that registers my Work post type.

    function work_post_type() {
    register_post_type( 'work',
    array(
    'labels' => array(
    'name' => __( 'Work' ),
    'singular_name' => __( 'Work' ),
    'add_new_item' => __( 'Add new Work' ),
    'edit_item' => __( 'Edit Work' ),
    'new_item' => __( 'New Work' ),
    'all_items' => __( 'All Work' ),
    'view_item' => __( 'View Work' ),
    'search_items' => __( 'Search Work' ),
    'view_item' => __( 'View Work' ),
    'menu_name' => __( 'Work' ),
    ),
    'has_archive' => true,
    'hierarchical' => true,
    'public' => true,
    'menu_position' => 6,
    'rewrite' => array( 'slug' => 'work' ),
    'menu_icon' => 'dashicons-images-alt2',
    'supports' => array( 'title', 'thumbnail', 'editor', 'excerpt' ),
    )
    );
    }

  2. The Redesign of iThemes.com

    Leave a Comment

    I’ve worked for iThemes since January 2010. Since I started working here, I’ve been making updates to our site – designing sidebar ads, new sales pages, adding custom post types for our content and products, and making little tweaks everywhere. But after 2 years of piling more and more into the old theme, we knew we had to bite the bullet and do a full site overhaul and redesign.

    So a few months ago, Cory gave the green light for Ty and I to start working on what a redesigned iThemes would look like. After loads of revisions and decisions we started on the development in June, and since then, I’ve been Photoshopping every possible page layout and product sales page for the site and slowly passing them over to Ty for front-end development.

    This was my first design with responsiveness in mind from the start, so it was definitely a challenge. Interactions that you take for granted on desktop have to take on a whole new strategy for mobile – no more wide info-packed tables, no relying on image sizes or fixed font proportions. Every design decision has to pass through the “how will this work on a phone?” test. So I’m glad Ty was doing the dev on this one. He’s a lightning-fast coder and has done stuff on the site I would never have thought possible. It was fun to get to stretch the design beyond my own coding capabilities, and imagine what I would want, not what I think I could build.

    So go check out the site! We’re still making a lot of responsive adjustments, so if you’re on a phone or tablet, bear with us a couple days. But we hope this makes it easier and more pleasant for customers to use the site and understand our products better at iThemes.

    Thanks to Ty and Koop for the theme development. Thanks to Cory for trusting me to work on this enormous project. And thanks to the rest of the iThemes team for helping make the switch yesterday in the wee hours and building the awesome products that we used to build the site and that this new design will help sell.

    The new iThemes.com homepage

    New iThemes.com footer

    New plugin sales pages with all content created using the new Products custom post type.

  3. Go Far Together

    Leave a Comment

    My boss always quotes an ancient Chinese proverb:

    If you want to go fast, go alone.
    If you want to go far, go together.

    It’s been one of our core values at iThemes. We all do greater work together than any of us could do alone.

    Update: We made this our customer focus for 2014. Check out the full page with the updated design ithemes.com/go-far-together

    So because of this motto, he wanted me to make a poster for our office that said “Go far together.” When we had some new offices put it at iThemes (by new offices, we mean new walls that make offices out of the old warehouse space we’re in), we created a new long empty wall. We decided it could be much cooler to paint this idea 7 feet tall on the wall, instead of just printing a poster. So Kristen, Elise and I got to work painting last week, and we think it looks pretty awesome.

    Kristen and her husband helped put together this time lapse of us painting it.

    Here’s a clearer version of the design. I was particularly excited about the modified arrow forms along the bottom of “far.”

    Although after seeing this article, maybe I should have asked Cory for stock, instead of salary: http://dcurt.is/artist-will-make-200-million-in-facebook-ipo