Category Archive: graphic design

  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. Home Office

    Leave a Comment

    Finally got around to putting up some a couple prints and letters in my home office. Desk and chair from IKEA. Chalkboard is from a garage sale and is 90 years old. Letters are from an antique dealer in OKC. I also have an L, but you can’t see it in this picture. Sorry the photo is so crappy. Still getting used to the 360 panorama app.

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

  8. September Mix

    3 Comments

    No fancy, existential title this time. No mystical underpinnings. Just a mix full of music I’ve been enjoying this summer and in the past few weeks. I was afraid that if I didn’t actually sit down and make a mix, some of the more summery songs on this one would never make it onto a mix. So listen to it fast. Like today, to get it in before summer’s over.

    I’ve been wanting to use this fence on something for a while. I bought a house at the beginning of the summer and this picket fence has shown up in my sketches a lot. Usually it’s a sarcastic reference to the quintessential American Dream. Here’s my first use of the fence.

    I made it a bit less patriotic for the mix.

    Click the CD to download.

    [download id=”2″] downloads so far.


  9. April? Mix

    Leave a Comment

    Thanks to the whining of Matt Danner, here’s another monthly mix.

    This month’s theme is uncertainty and questions. Specifically about God. I am a Christian. I have been in a Christian family my entire life. But I never want to pretend I have things figured out. The more I learn, the less I know. So, I have questions. And that’s healthy. No one should ever stop questioning things, especially those things you profess to be guiding truths in life. So, these songs are about people asking questions about God, country, Christianity and life.

    Enjoy. Because of the lateness of this mix, you might get another one in the coming weeks before May. It may or may not be inspired by a CD I found at my house in Edmond from the summer of 2006. And the cover may include a pair of cargo shorts, as did most of my clothing choices in that period of my life.


    Click this link or any of these images to download.

    [download id=”1″]

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

     

  11. March Is About Success!

    Leave a Comment

    Ok this month’s mix is meant to have more of a sarcastic, irreverent tone. With graduation looming a couple months away and Oklahoma’s everlasting winter the past few months, it hasn’t really been prime for a happy music mix. But with job opportunities and new projects coming up, and the first day of the year over 60 degrees, it’s time for a change. So this mix is about the idea of success and expectations, countered by just wanting to have fun and relax. It’s really just music I felt like listening to when the sun came out this week.

    The album cover is made from ladders. You know, the ones you’re supposed to climb.

    Enjoy!

    Track list:

    Super Pipe House / Videogame Orchestra
    Giving Up The Gun / Vampire Weekend
    Lessons Learned / Matt & Kim
    Re: stacks (Tomas Barfod Remix)/ Bon Iver
    Boy Lilikoi / Jonsi
    Re: stacks (Tomas Barfod Remix)/ Bon Iver
    Your Hand In Mine / Expolosions in the Sky
    Pictures of Success / Rilo Kiley
    The Golden Age / Beck
    Billie Holiday / Miike Snow
    Orange Shirt / Discovery
    The W.A.N.D. / The Flaming Lips
    2080 / Yeasayer
    Walking On A Dream / Empire of the Sun
    The 59th Street Bridge Song / Simon & Garfunkel
  12. Blogrolling

    Leave a Comment

    Recently, my friend Michael Biddy came to me asking for some cool blogs with cool things on them to add to his RSS feed. He’s a hobbyist photographer and appreciates good design, so I sent him a list of the best of my blogroll. I think it’s up to 155 now in my reader and I manage to keep up with it pretty good. But this list is the best design blogs and a few other random ones thrown in for good measure. Enjoy. Sorry for all the text. Too many to make feature pics for each one. You’ll have to go on the descriptions and cleverness of the blog titles to judge which ones to click on.

    I’ve made my favorites a bit bigger.

    [design] Space Invaders

    [design] Dirty Mouse

    [everything] Kitsune Noir

    [art/stories] Missed Connections

    [religion/movies] The Search

    [music] OSU On

    [graffiti] Wooster Collective

    [design] Aisle One

    [design/culture] The Apache House

    [identity design] Brand New

    [beauty] Design Is Mine

    [design] Design Porn

    [architecture & furniture] Dezeen

    [package design] The Dieline

    [design portfolios] Form55

    [print design] For Print Only

    [design/electronic music] ISO50

    [package design] Lovely Package

    [interior design/furniture] Nook

    [fashion/photo] Sartorialist

    [typography] Typography Served

    [typography] We Love Typography

    [fashion/photo] Wear Palettes

    [photo] Sarah Rhoads

    [design] Wanken Blog

    [tech] Wired: Gadget Lab

    [tech business] Wired: Epicenter

    [ampersands/daily] Ampersand Ampersand

    [stories/hell] Clients From Hell

    [photo/design/daily] Destroy Every Day

    [design/lomography] Emmadimes

    [design/local] Foundry Collective

    [typography] Friends of Type

    [design/photo/local] Okie Creative

    [photo] Zach Gray

    [design] Reform Revolution

    [funny/architecture] Unhappy Hipsters

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

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

  15. Loves me/not

    2 Comments

    love--web

    love--back-web

    February’s mix is here just in time for Valentine’s Day. Whether you love it or hate it, this mix should work for you. The songs alternate one-sad, one-happy all the way through. So if you hate your life, feel free to delete every other song. And vice versa if you’re way too happy.

    I was very close to starting the mix off this with the opening lines of 500 Days of Summer, but I decided against it. So if you think that was a good idea, listen to it here while you download the rest of the mix.

    A Story Of Boy Meets Girl

    Enjoy.

    Track List:

    Love of the Loveless – Eels
    Think I’m In Love – Beck
    Bruised – Ben Folds
    Baby, I Grew You A Beard – Neil Halstead
    Ain’t Gonna Lose You – Brett Dennen
    All My Days – Alexi Murdoch
    This God Damn House – The Low Anthem
    Inspiration Information – Sharon Jones & The Dap Kings
    Why Do They Leave? – Ryan Adams
    Whole Wide World – Wreckless Eric
    Everybody’s Gotta Learn Sometime – Beck
    At Last – Etta James

    Click here to download:

    love--link

    [download id=”2″]

    Love of the Loveless
    Think I’m In Love
    Bruised
    Baby, I Grew You A Beard
    Ain’t Gonna Lose You
    All My Days
    This God Damn House
    Inspiration Information
    Why Do They Leave?
    Whole Wide World
    Everybody’s Gotta Learn Sometime
    At Last
  16. 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

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

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

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

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