Skip to main content

Cognition

Design

Using type, color, space and symbols to communicate.

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

  1. 7 Alternatives to Popular Web Typefaces for Better Performance

    It’s no secret designers love typefaces. Web design is 95% typography, and it’s hailed as the most important aspect of a design. So, it’s imperative to find typefaces that accurately convey the voice of our words. Designers may not be always thinking about it, but how a site performs can be as important as choosing the right typeface. The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page. And, after all, if a site loads too slowly, users won’t view the typography as you’ve intended!

  2. Presenting Design with Confidence

    When it comes to conducting a well-orchestrated design presentation, having prior presentation experience is a false measuring stick for success. Preparedness, not experience, actually breeds the confidence needed.

    “Are you ready?” Klaus asked finally.
    “No,” Sunny answered.
    “Me neither,” Violet said, “but if we wait until we’re ready we’ll be waiting for the rest of our lives, Let’s go.”
    – Lemony Snicket, The Ersatz Elevator

    Like Violet states, you can’t wait for the perfect moment or the deserving job title to feel comfortable presenting work to clients. To help nudge you out of the nest, I’ve culled these personal tips for anyone who has to stand up in front of an audience and talk about design fluently and with confidence.

  3. Designing with a (Performance) Budget

    Lately, the web industry has been focusing on ways to improve performance—specifically, by applying the idea of a “performance budget.” A performance budget involves establishing a target page weight (usually in kilobytes), and then making sure no single page exceeds that value. While sticking to this number may seem like a developer’s burden to bear, as Mark Perkins puts it, “performance is everyone’s problem.” As a designer, it’s important to keep your budget in mind throughout your entire process—all the way from discovery through implementation. When both designers and developers work closely to set and stick to a budget, a sweet spot will emerge where neither performance or design will be compromised.

  4. Hover-crafting

    As a designer, my involvement in projects’ front-end development varies. Sometimes, I spend most of my time in code; other times, I work solely in Photoshop. But, there is one part of every front-end engagement that I always love to jump into the browser for: to create hover animations.

    Hover animations are a site design element just like typography and color, so it’s important that designers take ownership of this step. Not only do hovers add to the look and feel of a site, but they also add an extra layer of usability for users with a mouse. A finished site may “work” without them, but these nuanced touches add polish and really reinforce a site’s personality. I like to think of their addition as “bonus design”—it’s an opportunity to better what’s being built.

  5. Why Developers Need to Learn Design

    A couple of years ago at Happy Cog, I transitioned from my position as a designer to a developer full-time. Up to that point, I had been a hybrid designer and developer, splitting my time between the two responsibilities. The truth is that it was a long-overdue transition. My passion lies in the development side of the spectrum, so I am glad to be in a role where I get to express that passion full-time.

    I no longer design all day every day, but my experience as a designer taught me that developers should learn and practice design. The trope is often that designers need to learn to write code, but in working as a developer on the web, I’ve learned that the value of a design education pays dividends beyond being able to mock up a page in Photoshop.

  6. And They All Look Just the Same

    The article’s title is borrowed from Malvina Reynolds’ song, “Little Boxes.” No doubt, many of you have heard the lyrics, though sung by a different artist than the original songwriter. Malvina wrote the song to protest the mass conformity of home development taking place in a suburb of San Francisco in the early 1960s. If you have ever driven through the area, you can still see all the ticky-tacky, little boxes dotting the hillsides and throughout the area. Though Daly City provided the inspiration for the song, Suburbs of Sameness are prevalent throughout the country.

  7. A Healthy and Balanced Website

    Do you ever overcompensate? Maybe you’ve gone on an “unplugged vacation” to combat device addiction or embarked on a juice cleanse after an indulgent weekend. I’ve been there often.

    I’ll spare you the details of my “10-Day Sugar Detox,” but I can share a little about how I’ve overcompensated in my design work. You see, my early designs were chock-full of inconsistencies—every style I created had a unique embellishment. One day, I became fearful that I had become one of “those clueless designers” that frustrated developers write scathing articles about.

  8. The Scoop on Our Benjerry.com Style Guide

    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.

  9. Coding is Believing

    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.

  10. From My Head to the Browser

    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.

  11. Dear CSS3

    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.

  12. For Shame.

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

  13. Maps Should Be Crafted, Not “Plugged In”

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

  14. Better User Testing

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

  15. Quick, grab a pencil and paper!

    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.

  16. Invention is slow.

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

  17. One Size Fits None

    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.

  18. Sketching a Story Arc

    Every project at Happy Cog starts with a kickoff meeting where our project team gets together with our client partners to meet, discuss, and collaborate on ideas for their project. We moderate a variety of exercises, surveys, workshops, and discussions. One of our favorites is the “Design Studio”—where we ask the team to sketch solutions to design problems for its redesigned site.

  19. All Systems Are Go!(ing to Come Apart)

    Bless her soul, Bessie stunk at jigsaw puzzles. She seemed less interested in recreating the dissected bucolic scene she’d purchased at Rose’s pharmacy decades ago than she was in hurriedly rearranging and redefining the jumbled mess splashed onto the modest kitchen table in front of her. There was no right way, just her way—and the multiple arrangements that lay ahead were every bit as valid to her as the ordered state its designer printed on the box. She just can’t see well, I figured. I never asked.

  20. One Hand Washes the Other

    I once believed that great design was created inside of a secret creativity chamber. Armed with a knapsack full of snacks, I’d lock myself inside, and work long, hard, tedious hours until I emerged with a “masterpiece.”

  21. Total Design

    In the 1960s and 70s Ajax, a Dutch soccer team, captivated people with long stringy hair, scruffy sideburns, and a legendary tactical system known as ‘Total Football.’ Don’t worry, non-sports-loving nerds, I’ll get to my point soon. What was remarkable about Total Football was the ability of everyone on the team to change position and tactics with fluidity and speed. Anyone, it was thought, could play anywhere on the pitch. Attackers converted to defenders. Defenders converted to attackers. Back and forth in the blink of an eye.

  22. The Four Stages of Giving Up Photoshop

    On one of my first projects at Happy Cog, my coworker, Kevin, suggested that we experiment with how we create responsive layouts of a site redesign. Seemed reasonable enough, until I heard him say, “and we’re going to use Keynote.” Say whaaat?!

  23. Thank you, Hillman Curtis.

    When I learned of Hillman Curtis’ passing last week I tried to impart to someone unfamiliar with his work why, having never met him, he meant so much to my development as a designer and (former) animator. He taught me how to respect the audience, I told her. He taught me how to justify, how to edit.

  24. Rut-Roh! I’m in a Design Rut

    Last week, while plugging away in Photoshop—tunes blazing through my headphones, pixels flying from my fingertips—it hit me. I was in a design rut. I’d grown complacent with my pagination arrows. Countless times, for vastly different sites, I’d relied on the DIN Bold arrow character. It’s a sturdy, hard-angled, utilitarian arrow, perfectly suitable if I quit web design to design highway signs in Germany, but not the quick-fix solution for all my arrow needs.

  25. Attack of the Horrible Presentation

    When I was an undergrad student, I studied film. One valuable lesson I picked up in school was how to prepare for a presentation. My instructors taught us to run a projector correctly; or, they let us know in no uncertain terms, you were wasting everyone’s time. Here’s what was expected of you: arrive early, clean your film, clean the projector, check the bulb, set the focus, set the sound levels, and cue up your reel. Do anything wrong and you would be on the receiving end of glower, ridicule, and not a word of critique about the film you were presenting.

  26. Redesign Week

    What do they say about the cobbler’s son? The dude is always barefoot? Or the carpenter’s house has no roof? Stupid carpenter.

    Yeah. That’s kind of us right now with happycog.com. Granted, we have shoes, and we have a roof. But the shoes have some holes in the soles and the roof leaks just enough to make your hair wet.

  27. Stepping Out of Line

    Years ago, I was presenting comps on a scheduled call to a key stakeholder of my then-agency’s flagship account. It was my first call with him in months. He was unfortunately on vacation and without his laptop. That should have been the end of it.

    Instead, he asked me to paint him a picture.

  28. Q&A: Design Through the Lens of a Project Manager

    Hello. Thanks for coming back to part two of the conversation between Brett Harned and me. Please help yourself to some tea, a pastry, and a comfortable chair. Brett and I have worked together for nearly 5 years, so we thought it would be interesting to discuss the collaboration between our two disciplines that occurs somewhat invisibly. Working with a project manager allows designers to focus on being creative and doing good work. I’m loathe to think of going back to working without one.

    I hope you enjoy the second part of the conversation. We’d both love to hear how your process has changed working in collaboration with other disciplines in your organization.

  29. Q&A: Project Management Through the Lens of a Designer

    As a project manager, I’m constantly wondering how I can better support my team. I’ve always been a believer in the fact that project managers must have the ability to build relationships to understand how their team members work. It’s never as easy as “hand over the wireframe to the designer and make it pretty.” If you’re a project manager and you think that way, you’ve got a lot to learn. I urge you to sit down with your coworkers and chat about what works for them. That’s exactly what I’ve done for my article this week: a chat with Kevin Sharon, a Happy Cog Creative Director, to view project management through the eyes of a designer.

  30. Jared Spool: The Cognition Interview

    Jared Spool is one of the most influential design research professionals working in the field of user experience design today. I first saw Jared speak about his work at the SXSW Interactive conference five years ago, and I haven’t thought about my work the same way since. I’ve seen him speak at dozens of events and I find myself rapt with attention every single time. His brilliant insights have transformed the way many think about designing digital experiences and his ideas always seem to occupy a jovial environment that balances sound research with a sharp wit. He is a one of a kind mix of entertainer, academic, and pragmatist. I’m incredibly grateful for his contributions to the field and consider myself very fortunate to enjoy his company from time to time.

  31. Attack of the Client Services Zombies

    Khoi Vinh recently shared some inspiring insights on the evolution of opportunities for design professionals in the digital realm in a post entitled The End of Client Services. He has, as of the time of this publishing, since revisited and revised his thoughts. If you haven’t read these posts, you should, because it’s good stuff. I’ll wait.

  32. Sweet Systems

    To most, it’s just the sugary centerpiece to a child’s birthday party—but to me, the Cupcake Cake is systematic genius. A balance of consistency and variety, each cupcake is decorated with the same delicate piping technique, from a carefully selected color palette, with no drop of icing wasted. The result is surprising, delightful, and the highlight of the party.

  33. Illustration by Yesenia Perez-Cruz

    What’s the ROI on Cool?

    Industry creative folks I’m friends with personally and respect professionally have uttered the following to me on multiple occasions:

    “I want to make cool shit.”

    I’ll be honest, I just don’t get it. To be fair, it’s safe to say I don’t get “cool” in general. I routinely dress like I’m headed to a corporate team-building ropes course, and I’m still waiting for Firefly to be picked up for season 2. So maybe it’s no surprise that the quest for cool escapes me. I don’t get the allure of making something cool for the sake of it being cool. Further, I don’t understand how you sell that to clients, or more importantly, why they would pay for it.

  34. Illustration by Kevin Sharon

    Designers are From Mars

    Prior to my days at Happy Cog, I worked on a team tasked with creating an online promotion for our client’s new high-end candy. The candy was delicious, but each small box sold for approximately $4, so conveying its quality was important. The product’s target market was women in their 20’s and 30’s, so my team decided to take the high-maintenance diva approach to the design. When all was said and done, we launched a microsite full of glamour and glitz, sparkles, stilettos, and lipstick tips. Users could take a quiz to determine just how “fabulous” they were. At the time, I was in my twenties, and I’ve always liked candy, so I considered myself a member of the target audience. But there was a problem: I couldn’t relate to this content at all. I liked to be girly from time to time, but sparkles and stilettos were not my thing and they never will be. I also couldn’t see any of my female friends connecting with this. To be fair, the tone of the site was tongue-in-cheek and it wasn’t taking itself too seriously, but I just didn’t feel right about it. It didn’t feel right to reduce our target audience to stereotypes. Had I known then what I know now, I probably would have spoken up and advocated for a better understanding of our audience. Were these women really into makeup and expensive clothes and nights out in Manhattan? Or were we completely off the mark?

  35. Sustainable design

    Sustainable, Not Pixel Perfect

    Last week, Happy Cog was nominated for two Webby awards for our work with Zappos.com. I know some people don’t like awards, but as someone who didn’t grow up in an era when “everyone gets a trophy,” I still think they’re pretty rad. Seriously though, I think of a nomination like this as a recognition of doing great collaborative work with our clients. When I heard about the nominations, I was chatting with one of my coworkers who wondered, “can we really take the credit for this work?” As I typed the words, “shut your stupid face hole,” and considered whether to press enter, I thought about his question for a moment and the life of our work after we hand it over to our clients.

  36. One Man’s Ceiling

    Any mint can mask lunch breath, but only Certs has a golden drop of Retsyn. That drop and its golden hue, which no one but a copywriter has ever seen (the actual visual end-product is a trail of green flecks), may have made a powerful differentiator back when Tang was a breakfast drink, but it’s not enough to sway a modern consumer.

  37. Wish Upon a ★

    The year 2010 was a wild one for the web. It saw the release of the iPad and all of the subsequent great ideas and discussion about flexible design approaches. HTML was cool again (the cinco!). Twitter got a major overhaul and Facebook got between 35 and 268 small facelifts. It was as if millions of bookmarks cried out in terror and were suddenly silenced when rumor had it delicio.us was disappeari.ng. In fact, someone apparently took the web’s pulse and pronounced it DOA!

  38. The Mind of DeRuchie

    The Magic Number

    At the age of three I decided that three was the best number. This was based on sound science: my toddler-brain resolved that being 3 was the best age. This infatuation has stuck around for years, and now taken root in my design methodology. Ever since my first creative director demanded three different concepts, I’ve always subscribed to the Rule of Three (3): it’s my de facto way to structure process and unveil work to clients. Want Happy Cog to design your website? You’ll probably get three different solutions to choose from.