Category Archive: my work

  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. Frank Chimero’s New Website and Owning Your Content

    Leave a Comment

    Before reading, go check out frankchimero.com. I won’t feel bad if you don’t come back.

    It doesn’t have his portfolio there yet. But it has so much else to explore that explains his process and influences.

    It’s got a few elements I’ve toyed with on this site, like links and quotes. But I love the idea of the library, the music stream and the clips photo feed.

    But all of those details aside, I love the idea of him building a place for himself. Frank referred to it as Internet Homesteading a few months ago when he mentioned working on a new website.

    I keep the links and quotes feeds on this site, not for other people to come and click the links or be inspired by the quotes, but more as an archive for myself of things I want to remember and store somewhere for myself to reference later.

    I have a Pinterest, a tumblr, a Twitter, a Facebook, an Instapaper, and countless other places to store the things I find online. But all of those are controlled and designed by other people. And anything I put in one of those places is not guaranteed to stay there or stay mine. If 90% of their users want to change the way something works, I have no say.

    I want to create a place where I can chronicle the things I find useful or inspirational, organize them however I want, add whatever details I want and design their output however I want.

    After seeing Frank’s take on the concept, it makes me really want to go back and work on this more. I’ve created simple custom post types to house each section – work projects, reading/links and quotes. I’d like to revisit these with more of a plan behind them. When I first created them, it was really an experiment to learn how to build custom post types with custom fields. They were cobbled together from the beginning, and I’m surprised they’ve worked for this long.

    So I’m going to rebuild those sections a little bit and make a solid foundation to safely contain those things I need to remember. And I might add a couple more rooms to keep more things I want to catalog on here, like music or food.

    So here’s to owning your content online (internet hoarding) and filling up your house with things you love.

  3. Oklahoma Rock

    Leave a Comment

    OklahomaRock.com just got a major upgrade thanks to Ty of iThemes Creative Services. Ty did all the site design and development, and I helped out with a new logo. I’ve kept up with OklahomaRock.com for a long time on their old site. So it’s awesome to see their new site with a lot of awesome new functionality built on our WordPress theme, Builder. And Ty did a great job of integrating the logo into the site.

    It’s kind of an abstract buffalo skull/record/locomotive. Didn’t want to just do another Oklahoma flag drawing or an obvious buffalo thing, so making it more of a rough shape with a couple possible ambiguous interpretations was fun. I was really excited to get to work on something like this for Ryan.

     

     

    okrock-logo1

     

     

     

    okrock-logo2

     

     

     

    okrock-logo3

     

  4. 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.

  5. 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

  6. Proverbs 11:2

    Leave a Comment

    Pride leads to disgrace,
    but with humility comes wisdom.

    Just a passage I’ve been reading lately. Watched the Rob Bell interview last night and began questioning how much I know for sure about what I say I believe with certainty. I’d rather be unsure and admit it than act like I know something that’s impossible to know.

    Not going to comment on this video one way or the other. But I love that it made me question myself. Makes me wish there was a TED talks site for theology. No, not a GodTube, segregated version to keep people from watching atheist TED talks. Just a site with worthwhile, intelligent discussions, debates and interviews about theology. Anyone know of something like that out there?

    Skip the first 8 or 9 minutes. It’s just the people sitting in the room before the live stream started.

    1920 × 1200

    iPhone4

  7. U-too: Union Annex

    Leave a Comment

    The OSU Student Union is getting a major remodel over the next year. Over the summer (and probably a while after that), the largest student union in the world  is going to be under construction. So while they work, the dining and retail part of the Union first floor will be moved into 18 temporary trailers set up north of the building. They’re calling it U-too. Not my naming, but I think they could have done a lot worse. So I was tasked with the identity. It’s going through the ranks now for approval, but my boss likes it and I do too. It’s got the iconic Union spire from the original Union logo and the shipping container/temporary building style box. The type is Alte Haas Grotesque and Chevin.

    I also did a little motion intro for it.  When I say little, I mean very little. Vimeo wouldn’t even let me upload it because it was too small. But it’s just a start for a video we’ll be making to introduce the students to U-too on the Union web site and social networks.

     

  8. Oklahoma iPhone Backgrounds

    Leave a Comment

    I’ve been working on another project recently (as in since last night) for Jake Sloan. Hopefully I’ll post some of the progress on here soon if we go this direction. It may involve using the Oklahoma flag re-illustration I did last year for an awesome local music project. No more details yet, but here are some somewhat associated iPhone backgrounds for your digital enjoyment. Colors are pulled from the Oklahoma flag. I have the blue on white on my phone right now. Click each image for the full size and resolution to download and they should fit quite nicely into your iPhone.

    If you want, try making your own Oklahoma flag background and adding your own ideas. Remember to save at 180ppi and make sure to let me see! Either post a comment with a link or e-mail me and maybe I’ll post it on here.

  9. Recent Work I Like

    Leave a Comment

    Working for the Student Union at OSU, I get a lot of projects I don’t particularly enjoy. But recently I’ve had a couple that have given me more freedom (and time) to work with.

    Here’s some recent work I’ve been doing for OSU University Dining Services. Sometimes I get to squeeze something cool past the client and onto the OSU campus.

    The organic fact table tents started out as an infographic project, but the data from the client dried up quickly and it turned into a general fact illustration. Either way, it was a lot of fun to do, since I haven’t done much illustration before. Some of the illustrations at the bottom didn’t make it through. Still working on the “lower health care costs through organic food” one.

  10. MLK

    Leave a Comment

    In honor of MLK day, I dug through my old blog archives. I made this iPhone background a little more than one year ago on my old blog. Put it on your iPhone for the day to remember this great leader.

    I made this early in the Obam-era, so I put CHANGE in the slider space. But it’s not just a hyperpolitically charged buzzword. It’s a reminder every time you unlock the phone to engage, change and improve the world around you.

    Enjoy.

    change31

  11. Healthy Union Branding

    2 Comments

    I designed a logo last semester for the new Healthy Union program at OSU, encouraging Student Union employees to live healthier lives by giving incentives for specific program participation. The program is still being developed and they asked me to work on an identity for it. My first attempt was sent back, looking for a happier, less-hospitalized look. They were right. It’s kinda of scary now that I look back at it.

    healthy-union

    It’s a cool look, but with the Helvetica and the syringe look of the Union spire, it was definitely too medical. So, for this round I tried to make it a happier, more participatory feel by using icons to denote certain (made-up for now) programs and options.

    These icons will be used to visually describe the options and can also be turned into badges as rewards and reminders of employee commitments. Kind of like flair. I used Chevin as the typeface, because it’s clean and modern, but much softer than Helvetica. After using Foursquare and Gowalla for the past couple weeks, I’ve been inspired by their icon design. Hopefully they like the idea so I can do more of that in the future.

    HU-branding

    HU-icons

  12. Anew

    Leave a Comment

    Here it is. The first AdBrad mix of 2010. As usual, some old, some new. This month’s theme is, obviously, new. It starts out slow and a bit sad, gets kinda dancy, then hopeful, then inspiring. At least that’s the progression of emotion I went through in making it. A little detached at first, but by the end it gets you going. I almost put some Sigur Ros on there, but I figured that’d be cheating. Maybe next month. Let’s hope 2010 turns out a bit like this mix.

    Hope you enjoy.

    anew-cover

    anew-back

    Download it here now.

  13. This is a test.

    Leave a Comment

    adbradhead-blog

    I’ve had this test site [now a dead link] up for a couple months, basically to test out themes and mess with ideas for this site. I’m working on a redesign right now. I like the clean look, but I think it’s getting a bit tired. I also want to get my portfolio incorporated into the same site. One of the sites that has really been inspiring in me trying to redesign this site is urbanears. I think I want to pattern my portfolio after this style and incorporate this type of slider presentation into the blog.

    Screen shot 2010-01-11 at 11.38.46 AM

    Right now, I’m using a super stripped down customized theme, but on the test site, I’ve been using iThemes Builder theme. It’s ultra-customizable and a really interesting way to build complete web sites with great features and ability for customization. When I got the theme, it was all text and blanks. I’ve done a lot of tweaking and Photoshopping. It’s definitely a work in progress for now, but sometime soon, expect an AdBrad redesign.

    So if you have any feedback or something you think would look awesome, let me know. Check out the test site and let me know any ideas you might have. It’s a constant work in progress. As I change as a designer and as a person, my site should change with me.

  14. Stout Coffee

    Leave a Comment

    I’ve been working on a 36×90 banner for Stout Coffee at OSU for a couple weeks off and on. It’s a large banner to fill up a ridiculously blank green wall. The lame part about the place is that the back half looks very late 90s youth group lounge and the front half has a very rustic wood and aluminum Starbucks feel. The green wall is in the back, but I felt it still needed to not totally ignore the newer, cooler front half.

    Here are a few versions I’ve gone through. The first one is the one in the lead with my boss and the one that goes best with the colors in the shop. I like the 3rd one because my inspiration for the effects was my favorite album art of all time: Rilo Kiley – Take-offs and Landings. I really just did that one for fun.

    coffee-art-1

    coffee-art-2

    coffee-art-3

    rilo_kiley_-_take-offs_and_landings

  15. Identity Work

    2 Comments

    I haven’t done any identity design in about a year, and this week I’ve done two. And another one a few weeks ago. These two are works in progress for the OSU Student Union health initiative and Poke Your Vote.

    The Healthy Union brand is a tentative name of the OSU Student Union health program. The Union is encouraging employees to stay healthy by giving incentives for things like losing weight or quitting smoking. I wanted to keep the look clean and medical. The Union dining already has a healthy eating program with a rough, organic style, so this needs to have a distinct feel. The Union tower (placed here on the cross) has been used in most of the building’s branding materials by itself for years, so it associates it specifically with the Student Union.

    PokeYourVote.com is a web site our internet communications class is working on. I’m designing the preliminary look of the site this week. This is the logo. It’s a combination of the iconic Cowboy fan finger gun and a check mark in a voting box. The site will be a blog dedicated to hearing the unbiased, collective voice of Cowboy fans, students, alumni, staff and faculty and promoting public discussion of campus issues.

    healthy-union

    pyv-logo

  16. A Glass Can Only Spill What It Contains

    Leave a Comment

    I need to start doing more work that I enjoy. My real job has become more and more of a chore (no rhyme initially intended) lately, so I need to start making things just for fun more often. Whenever I get excited about a design, it’s rare that the exciting part makes it through. So I’ll try to make more things that I like on my own and put them on here.

    Mewithoutyou has been playing all night as I’ve been reading The Tipping Point for class. This phrase stuck with me. From mewithoutyou, not Malcolm Gladwell. Maybe his words will make it into a design by the end of the night.

    “A glass can only spill what it contains.”

    It doesn’t matter what kind of face you show the world, or how perfectly your Facebook profile represents the ideal you. The real person you are has to be more important. When it comes down to it, a glass can only spill what it contains.

    glass

  17. Embracing Oklahoma

    5 Comments

    Instead of whining about how Oklahoma can be boring sometimes, I try to find the good in it. One of the bittersweet parts of our glorious state, is our flag. It’s a very interesting shield design, but is so poorly executed, and poorly represented online, that I think it may be time for a refresh.

    officialflag

    flag-progress

    newflag-bradulrich

    I’ve also been working on a couple shirt concepts lately. I have a long weekend in Edmond, so hopefully I can screen print a few shirts while I’m home. Drew the wolf a while ago for a block print that was never cut, so I figured I’d try him on a shirt. Tweeted the Oklahoma flag design tonight on this shirt and got two people wanting it, so I think I’ll try to make a few extras if I have time.

    ok-shirts

  18. Bookstore Buybacks

    Leave a Comment

    The OSU Student Union Bookstore has 3 problems at the end of the year:

    1. Competition for textbook buybacks from 100 other places in & out of town, including sororities, charities, eBay, and other private and corporate bookstores.
    2. Professors wait until 2 weeks after the deadline to get next year’s book lists in, keeping students from selling back their books for a decent price.
    3. People see the SU Bookstore as an evil empire, campus program, even though they do more for students than any other place that would buy their books.

    The Student Union Bookstore helps pay for a year’s worth of campus programs that everyone on campus benefits from: Finals Pancakes, Wi-Fi, Casino Night, Campus Life jobs and activities, Orange Peel, just to name a few. Our task was to communicate that message to the students, while still managing to sell a crapload of books. We used the O’Colly campus newspaper, Union-branded banners all over campus, posters, and e-mails. Michael did the banners & posters. I was assigned the newspaper campaign.

    We ran four half page ads and three full page ads with a cyan spot color in the two weeks leading up to finals. The daily ads promoted specific books with high prices and high buyback quantities. Our goal was not just to list book prices as usual, but to communicate to students the many benefits that students and OSU get from the Student Union Bookstore that they don’t even know about.

    This is my favorite ad (the MacBook Pro may or may not have played into that choice). Hit the jump to see the whole campaign. I’ll be adding it to my portfolio site this week when I get a chance.

    wifi_sm

    (more…)

  19. Back to the Drawing Board

    Leave a Comment

    This week, I picked up a few Star Wars comics from a local flea market, and yesterday, a couple Star Wars Tales comic-pilations from the Stillwater Public Library. I read half of the 1st book so far. Each story by different artists – interesting look. Apparently this set is the only set of Star Wars comics approved by Lucasfilm. Good place to start.

    So, after looking through these, I fell back in love with comic/superhero/sci-fi art. Not anime. I’m not an anime fan – unless you count Speed Racer. So I got out ye olde sketch pad and drew a few of the characters faces. I’ve never been good at faces, but it was fun trying to reproduce the characters.

    Here are a couple of sketches I did late last night of Qui-Gon Jinn and Raprice (an Imperial lieutenant). I only know Raprice’s name from the comic. Don’t feel bad if you don’t know who he is. Actually, to be realistic, you should feel bad if you knew that.

    Hit the jump for more pics of the books and a couple closer shots of the sketches.

    dscf2664_2

    (more…)

  20. AdBrad

    Leave a Comment

    I have been blogging on WordPress using traditional blog themes for a couple years now, but figured it was time for a change from the traditional blog look. I’ve decided to go with a minimal layout, like my portfolio site. Thanks to Upstart Blogger for the code to get started with a fresh theme.

    I’ll import my old blog over here and slowly, but surely figure out how to transfer everything to here without too many tweaks. I’ll be testing for a few days, so keep checking back as the site gets progressively less ugly, and more functional.