Skip to main content

Design

Using type, color, space and symbols to communicate.

We’ve written 71 blog posts about Design. View all topics »

  1. Styleguide ypc

    The Scoop on Our Benjerry.com Style Guide

    Headshot of Alison Harshbarger

    3/5/14

    by Alison Harshbarger

    The web has been all about style guides lately. Everyone from the BBC to Code for America to Yelp released their guides to the public, and style-guide-automating tools like KSS and Hologram are becoming increasingly popular. At Happy Cog, we’ve been making our clients’ style guides more interactive. Our newer style guides go beyond documenting the design systems we’ve established; they take advantage of their living in the browser to dynamically show how a system’s pieces are built, how it responds at different viewport sizes, and how users can interact with those pieces.

    For the recently launched Ben & Jerry’s website redesign, we created one of these “interactive style guides.” It covers everything related to building out and maintaining the new website: design components, page layouts, and even content creation. I chatted with a few of the Cogs responsible for the Ben & Jerry’s style guide about how it came together.

  2. Codingbelieving big

    Coding is Believing

    Headshot of Katie Kovalcin

    12/12/13

    by Katie Kovalcin

    There’s something that’s hard for some of us web designers to just flat out admit: we stubbornly hate to code. I’m a designer, dammit. I live and breathe Creative Suite. Give me Photoshop or give me death. My former coding knowledge included two things: what a div is, and how to stylize my MySpace page (circa 2004).

    And without even realizing it, my attitude has changed, seemingly overnight.

    Within the past month, I have learned to build responsive, HTML wireframes using Foundation and Compass. The initial setup was enough to make me want to run away and join the circus. With the added confusion at first, it seemed like everything broke if I merely looked at my code the wrong way. But, with patience, coaching, and helpful documentation, it soon clicked—and with only a few tears shed along the way.

  3. Hcw seltzer

    From My Head to the Browser

    Headshot of Aura Seltzer

    10/31/13

    by Aura Seltzer

    As the web evolves, there will always be two ever-growing lists: one of all the pieces of content that will need to appear on any given site over time and another with all the ways we can access that content. Creating flexible, modular design systems makes both of these lists a little less daunting and a lot more manageable.

    At Happy Cog, we pride ourselves on empowering clients to take ownership of their content, and we provide a framework and all the building blocks to help them do so. These building blocks range depending on a project’s needs. One could be a video carousel; another a contact form. But, the most fundamental building block that’s on every site and we have to get right every time is typography.

  4. Hcw ypc

    Dear CSS3

    Headshot of Yesenia Perez-Cruz

    10/17/13

    by Yesenia Perez-Cruz

    When Dan Cederholm introduced us that spring afternoon at An Event Apart in 2010, I took one look at you and thought, “What a dreamboat.” I knew you were going to change my life. We took things pretty slow at first—I experimented with button and gradient generators while marveling at your features. “You mean, no more cutting gradient background images? And wait, I can just round those corners however I want?!” At the time, my exploration focused on replicating classic Photoshop effects. I had no idea that that was just a small part of what you could do. Since then, you’ve brought so much adventure into my life, creating effects that I could never dream up in Photoshop.

  5. For shame

    For Shame.

    Headshot of Michael Johnson

    8/8/13

    by Michael Johnson

    Our profession’s affection for public shaming is well-documented.

    Following morning exercises atop the Bauhaus, Johannes Itten lined his students at rooftop’s edge, held aloft their previous day’s work, and, before a gathered crowd, publicly humiliated each of his young students. While students showed significant improvement and other instructors adopted Itten’s pedagogy, the practice came to an official end in 1928. Tragically, a student stepped over the edge when Itten, still storming through a particularly scathing admonishment, thundered that the boy “lacked contrast of soul.”

  6. Maps should be crafted

    Maps Should Be Crafted, Not “Plugged In”

    Headshot of Brandon Rosage

    5/30/13

    by Brandon Rosage

    Web design would be dramatically different if HTML had been born with some foresight for storytelling devices like maps. We certainly can’t blame web pioneers for focusing on type and images instead of maps, video, or canvas. But, because maps found their place at the table through browser plugins and third-party APIs, I find that they’re too often dismissed in the design process as elements that are just “plugged in.”

  7. Better user testing

    Better User Testing

    Headshot of Patrick Marsceill

    5/23/13

    by Patrick Marsceill

    “We don’t have the budget or time for user testing,” is something I’ve heard all too often during planning and estimating meetings. Testing with real users has traditionally been an expensive and time-consuming line item in project plans—usually one of the first to be cut when budgets are tightened. It’s no mystery why: most testing methods have classically been stressful to set up, requiring a tremendous amount of scheduling, coordination, resources, and time.

  8. Pencil 2

    Quick, grab a pencil and paper!

    Headshot of Kevin Sharon

    4/4/13

    by Kevin Sharon

    If I had a nickel for every time someone has asked me, “what is your favorite tool for responsive web design,” I would have enough nickels to buy a cup of coffee… in 1941. I’ve realized, collecting nickels is a terrible way to get rich, so I’ll give you the answer for free. My favorite tool for any design project is: pencil and paper.

  9. Invention is slow

    Invention is slow.

    Headshot of Michael Johnson

    2/28/13

    by Michael Johnson

    By now you’ve probably seen Noah Stokes tweet assailing responsive web design’s command over aesthetic:

  10. Large

    One Size Fits None

    Headshot of Yesenia Perez-Cruz

    2/21/13

    by Yesenia Perez-Cruz

    Who doesn’t love to talk about process? Every week, it seems, someone has discovered “the new way to work that everyone should be doing.” While I love a healthy process debate, I find discussions that promote a one-size-fits-all design approach problematic.