Ben Dunkle

Blog

  • A standard for user interface icon design

    A standard for user interface icon design

    Editing this article to discuss general icon design standards, which I believe are needed. Icons should down-rez gracefully to small sizes, with vertical and horizontal edges aligning to the pixel grid at sizes as small as 9 pixels. A 3×3 sub grid should be adhered to when designing icons.

    [codepen_embed height=”265″ theme_id=”1″ slug_hash=”EvqZQZ” default_tab=”html,result” user=”empireoflight”]See the Pen <a href=’https://codepen.io/empireoflight/pen/EvqZQZ/’>base-8 grid icons</a> by Ben Dunkle (<a href=’https://codepen.io/empireoflight’>@empireoflight</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

    As you can see in the last icon, the 3×3 subgrid isn’t honored and some edges get blurry:

  • Work

    Work is good when it’s used as an agent of self improvement.

  • Narrow focus

    Responsive design means narrowing your viewport to see if you can still understand the content.

     

  • The BBPress icons

    The BBPress icons

    Here’s some recent icons done for BBPress:

    bbpress_icons_32

  • WP Icon font

    WP Icon font

    I made a font out of the icons I’m proposing for future versions of WordPress. Here’s how I did it:

    Designed them in AI CS6. Preferences set like this:

    File handling preferences in AI
    Note the copy as settings; apparently you need this so you can copy/paste into fontlab…
    AI preferences
    Gridline every 10px, w/10 subdivisions. Icons are based on a 10×10 grid. I made the color black so they’re easy to see.

     

    snap settings
    Make sure snap to grid and snap to point are turned on, and that you can see the grid.
    Close up of a couple icons
    Note the extra strokeless/fill-less 20x20px box around the icons. You need this to copy/paste into fontlab and not have them get scaled up.

     

    Then I created a new font in Fontlab 5, with metrics set like this:

    fontlab metrics Screen Shot 2013-02-06 at 9.02.30 AM

    I copy/pasted each icon-the shape and the invisible bounding box- into a separate  glyph in fontlab. I tried to make it intuitive; “a” is appearance, “d” for dashboard. “p” was problematic; posts, pages both have p.

    After I generated the otf file, I used @font-face to embed it on a test page. I set a base size to 62.5% and set the icons to 2.0em; effectively rendering them at their native 20×20 pixels. The key thing is the -webkit-font-smoothing:antialiased property in the css. Without it, they look like garbage. They pretty much look like garbage anyway in firefox/opera, and I have no clue how to get them in IE. But in webkit it’s gold.

    I’m trying to get the whole thing on github since I guess that’s what you’re supposed to do, so stay tuned…

     

     

  • Nancy's drawing

    Nancy's drawing

    nancy

  • Software and Experience

    The longer you’ve been using an application, the less value you hold to the app developer as a user. Take Facebook. Once upon a time, it was a linear, flowing post stream. If you missed something, you missed it. Now, I have no idea where my posts go or who sees them or in what context. Facebook doesn’t give a dang about me; it’s catering to new users, trying to hook them. It doesn’t want new users to be confused. So it abandons behaviors and functionality that experienced users have become accustomed to, and absorbs whatever stuff the latest shiny hot flavor of the day social media platform might have.

    It’s not just Facebook. I love Adobe products, but I feel like they’re trying harder and harder to compete with Sketch and the like. The reason Adobe software is so great is because it’s extremely powerful, and it takes a long, dedicated time to get good at. Lately though, Adobe products seem to be stripping away functionality that may seem daunting to new users, afraid that those users will head to more familiar territory.

    Software should reward experienced users, not ostracize them.