Skip to main content

Cognition

Process

How to succeed (and sometimes fail).

We’ve written 76 blog posts about Process. View all topics »

  1. Switch Design

    On almost all projects at Happy Cog, there is usually one design lead who oversees the work from the initial concept to the QA’d, browser-tested, final product. Other designers may step in to help with production or provide guidance, but for the most part, one designer owns it.

  2. Turn Signals

    For my first driving lesson my father took me to the empty elementary school parking lot across the street from my house on a Saturday afternoon. He drove over, parked the car, switched seats with me, then instructed me to drive.

  3. Rethinking Our Prototypical Process

    When I started working at Happy Cog three years ago, deliverables fell neatly into two categories: design or code. In the design category, there was another clear division: UX design (wireframes) or graphic design (page comps). But then RWD came in and threw a spoke in the wheel. Since JPEGs only show a fraction of a responsive website, we needed to figure out new ways to communicate the design to move the project forward. We introduced HTML prototyping to replace traditional wireframes, and the lines between UX, graphic design, and front-end development blurred.

  4. Plan for the Unplanned

    Leading up to the design phase of a project, we devote a lot of thinking to setting the project’s core goals and requirements, as well as establishing a basic plan for how the project will flow. During this time, on my team, we ask as many questions as possible and learn as much as we can before we present a strategy to the client. In the end, everyone agrees on what the goals are, but how those goals will be realized is yet to be determined.

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

  6. Cognition Roundtable

    On this edition of Cognition Roundtable, we ask: “Does every site need to be responsive?” This question has been an undercurrent topic for conversation in the web industry ever since RWD was introduced, but our own work as well as others’ continue to spark it again and again. Design Director Michael Johnson leads a discussion on the differences between adaptive, responsive, and dedicated sites with Senior Designer Yesenia Perez-Cruz and Developers Anthony Colangelo and Sam Hernandez. Tune in for this half-hour discussion that also covers:

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

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

  9. ’Tis but thy name that is my (fr)enemy

    “What’s in a name? that which we call a rose / By any other name would smell as sweet; / So Romeo would, were he not Romeo call’d” (Shakespeare, Romeo & Juliet, 2.2).

    In the world of project management, naming conventions are often the source of miscommunication. You have to call your work something, but if you assume everyone interprets a name the way you intended, you’re likely to stub your toe during the course of the project. As managers, minimizing risk and setting expectations is an everyday task, yet something as simple as a name or label can fly under our radar. We live and breathe our work, and we are passionate about it. It’s a good practice to never assume labels are understood out of the gate. Here’s a few tactics to help you make naming conventions work for you.

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

  11. Avoiding #RWD Limbo

    Almost four years ago, I wrote a Cognition post about my Rule of Threes. In it, I explained that pushing a design effort far enough often resulted in stronger, better-conceived, and more thoroughly vetted solutions. If you didn’t read the article, let me give you a quick recap:

    At the conclusion of the information architecture phase, multiple designers worked in unison to evolve three unique design concepts. Each effort was aimed at different, but agreed upon goals. By varying art direction, user-interface interpretation, and content prioritization, the Rule stressed designing a “range” of static mock-up solutions to present to a client. Whichever concept garnered the most attention became the “base model” that was iterated on and drove the overall look and feel moving forward.

  12. Fear and Fruitful Projects

    Off the top of my head, I can tell you that I’m afraid of flying, public speaking, and savory foods that contain hidden fruit. I’m also afraid of starting a new project. But, I dive into new projects just like I risk biting into mango every time I go for the summer roll, because I know that fear of the unknown isn’t a bad thing.

    Fear is a natural reaction to the unknown, but as a society, we don’t really like to talk about it. Not many people will openly admit they’re afraid, because, well, it’s uncomfortable. Admitting your fears makes you vulnerable. It also makes you human. When it comes to the world of digital projects, admitting fear is sometimes likened to admitting defeat. It’s not. It’s a normal reaction to the various unknowns that exist at the start of a project.

  13. Cognition Roundtable

    We’re back with another Cognition Roundtable—a casual conversation about process and the web industry recorded by Happy Cog folks. This time, CMO Greg Storey leads a discussion with designer Sophie Shepherd, developer Brandon Rosage, and VP of Technology Ryan Irelan about how and why we’ve started experimenting with a more development-focused project process. In under a half hour, they cover topics like:

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

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

  16. You Might Need jQuery

    2/27/14

    by Cat Farman

    0 Responses

    jQuery: Maybe you’ve heard of it. If not, may I welcome you to the internet and introduce you to some cool websites? jQuery is a hugely popular JavaScript library that gives you an API to manipulate DOM elements easily, handle events, AJAX your content, and create all the other cool features that make the web go ‘round. The scale of jQuery’s popularity is incredible; it’s used on over 80% of the most trafficked websites, and its CDN serves up over 500 million files a day.

  17. Audio: Cognition Roundtable

    Pop on your headphones (or why not be that coworker who “accidentally” plays over your office’s sound system). Welcome to the first installation of Cognition Roundtable, where we have a casual conversation with Happy Cog folks.

    In this 24-minute session, our VPs of Project Management, Design, and Technology sit down to discuss changes we made to our process in 2013 and how we’re going to apply what we learned to make improvements in the new year. During our conversation, we discuss how adding HTML wireframes to our arsenal has helped us illustrate responsive behavior and how more modular design systems, accompanied by the right documentation, are better future-proofing our work. Changes like these have fostered a stronger partnership between our own designers and developers, and they’ve enabled us to collaborate more effectively with our clients.

  18. Switch Programming

    1/23/14

    by Mark Huot

    0 Responses

    There are countless sayings about fresh perspective: “A little distance will give you a whole new perspective,” “You need to step away for a while,” etc. Unfortunately, we live in a culture where that’s not always possible—or practical. I have a very hard time getting up and walking away from my computer when I’m in the middle of a problem. My mind wants to sit and work right through it, no matter how long it takes.

    Luckily, I work at a company that encourages collaborative problem solving. Someone always walks by my desk, hears my mutter, and asks me what’s up. Typically, explaining the issue is enough to help solve it (or at least put me on the correct track).

  19. Do it once. Do it right.

    I am knee-deep in my first home renovation. My latest project was to replace all of the trim—around the doors, floors, and windows—which, while labor intensive, sounded to me like a simple enough project. After ripping out the old stuff, I found that my seemingly well-installed floors were anything but. The floor was inches away from the wall, and none of our doorjambs were actually connected to anything. I thought I had one big job ahead of me, but it turned out I had three. Whoever did the work the first time took the easy route, leaving me with extra work.

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

  21. Doing It Our Way

    11/21/13

    by Greg Hoy

    0 Responses

    Ever since Jeffrey Zeldman founded Happy Cog in 1999, educating our industry has been a cornerstone of the company. Taking Your Talent to the Web, Designing With Web Standards, and A List Apart started this heritage, and over the years, Jeffrey has continued it with An Event Apart and the A Book Apart series. Happy Cog practitioners have built upon this foundation by teaching, speaking, and writing about web design.

  22. Why We Prototype

    Making a website is more complicated than it used to be. We have to work around unanswerable questions, like at what dimensions the site will be viewed or how many pages it will have. As websites evolve and their list of variables and technical requirements grow, they become harder to define. Static wireframes and site maps can’t always capture this necessary level of detail without mountains of paper or endless annotations. Enter—stage left, waving like Miss America—the HTML prototype.

  23. Crossing the Threshold

    We’ve added a few new faces here at Happy Cog, and though I just recently celebrated my four-month Coggiversary, our rapid growth has me feeling a bit like a veteran rookie. Working without the “this is my first job!” crutch can be terrifying. So, I can’t help but wonder: Where’s the advice for us post-post-grads?

    There’s a slew of great industry articles aimed to help concerned college students or recent grads with how to “land that first big job” or “get your foot in the door,” but what happens once you’re already inside? Luckily, you are more prepared and confident this time around, and can apply the experience you’ve gained over the past few years.

  24. Release the Devs

    “At Happy Cog, process is not sacred.”

    I wrote that in my very first Cognition article way way back in 2011. Everything at Happy Cog is changing as we speak. Next week, our Philly location moves to a shiny new office. We’ve added lots of new hires, but our passion for process remains consistent. We’re constantly revisiting the best way to do things. Our business and the technologies that support it move at a lightning pace. To remain competitive and effective, our process evolves in tandem.

  25. Getting Real About Self-Confidence

    When I was a rookie designer, self-doubt ruled my life.

    On a typical day, harsh criticisms like: “You’re a terrible designer! So and so asks way better questions than you do. You’re using four button styles, and your subnav looks like a pack of hot dogs.” consumed my thoughts.

    Many people don’t like to admit their lack of confidence because it is perceived as weak. I’m four years into my career now, and I’m still working on taming that nagging voice inside my head. Luckily, I’ve learned that confidence is a skill, just like typography and CSS. It requires practice, time, and discipline.

  26. Sweat the Small Stuff

    Time and time again, we’re told “don’t sweat the small stuff” and focus on the things that really matter. Typically, we hear this when we’re obsessing over a pixel here and a pixel there instead of concentrating on the direction and concept first. Most of the time, this makes sense and is sage advice—except for when it isn’t. At some point in every project, you have to focus on the minutia and work through the small stuff. For me, this typically comes in the implementation phase (and that’s okay).

  27. Better Stakeholder Interviews

    Remember the childhood game of “Telephone”? One person whispers a message into the ear of their friend, and that action is repeated until everyone in attendance has heard and relayed the statement. The last person blurts out to the group what they heard, and, usually, laughter ensues.

    Everyone understands why this happens. Translation and less-than-pristine reinterpretation damage the fidelity of the message. There is no copy-and-paste equivalent for verbal storytelling. A photocopy of a photocopy of a photocopy of an image will always render that image indistinguishable from the original.

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

  29. The Beauty of the Blank Slate

    You dev? If so, ever popped open a fresh PSD and thought to yourself, “Oh man, I can’t WAIT to get this party started”? I have, and I do, with each new project. As a front-end developer, that specific, exciting moment is my fresh start.

  30. Making Front-end Development a Team Sport

    “All code in any code-base should look like a single person typed it, no matter how many people contributed,” is one of the many ideas behind documents such as Rick Waldon’s Idiomatic JS and Nicolas Gallagher’s Idiomatic CSS.

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

  32. Invisible or Inspired?

    While the rest of our coworkers are creating design and code, we PMs focus on the intangibles. Deadlines, documentation, resourcing—it’s not exactly sexy. When a website launches, the first reactions you hear aren’t “Amazing site—must have had a great PM.” PMs are often the last to get the glory and the first ones to get knocked down when something goes wrong. It can be easy to feel like Mr. Cellophane if you don’t have the right perspective.

  33. Defeating Busy

    We’re all busy at work. It’s a “good thing,” right? Well, it is, unless your to-do list is a mile long, you’re always stressed out, and you don’t know where to start. You see, there is an art to being busy, and it’s not easy to master. You have to stick to your obligations, do a good job, and enjoy yourself while working. Oh, and you totally need to protect your time off.

  34. The Design Cocoon

    Website redesign projects are not for the faint of heart. The path is filled with dangerous pitfalls and scary things—but also great wonders. Critical junctures in a project’s timeline can slow or even possibly derail. I’ve worked on small but smart ways to improve these periods from being abrupt stops and starts to being more seamless transitions.

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

  36. Re-cognition

    As we near the end of December, it’s pretty natural to begin to reflect on the past year. Cognition is the place where we share new processes and create a dialogue around new ideas. In the spirit of reflection and end-of-year lists, here are the top five trafficked Cognition posts of 2012 and some parting thoughts from an alternate point of view.

  37. Times, They Are A-changin’

    The process of making a website used to be like an assembly line. It was a series of hand-offs with each team member contributing his/her part before giving it up to the next person. Like a game of telephone, the same content was passed from person to person, and, at each step, it took a slightly new form. What started as a glimmer in a client’s eye became a sitemap, then a wireframe, then a Photoshop file, and eventually it became code that went to live in its final resting place, the browser.

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

  39. Anatomy of an Illustration

    Time flies by. Cognition recently crossed its one-hundred-article threshold. While there is nothing particularly newsworthy about this milestone, the interesting fact is that numerous hands cooperate each week to birth a new post. One unique part of this behind-the-scenes magic is the weekly pairing of our author with an in-house illustrator. Editorial illustration, when done well, helps to bring the essence of the article to life via a single, compelling image.

  40. DIY Process

    “Agile” is one of our industry’s favorite buzzwords. Everyone’s doing it! If you’re working Waterfall, you are so 2009. I understand why people love this buzzword— the name alone sounds like something we should be using in the web industry, because it seems to mean we’re working faster. You may be working faster with an altered Waterfall process, but if you’re a web development agency working with clients, chances are you’ve altered Agile to work for you. I am no Agilista, but if you’re not using true Agile, please stop calling it that.

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

  42. 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?!

  43. The Best Email in the World

    The Best Email in the World is the one that needs your attention. On any given day, the rules or definition of what that email is will change. Today, it’s an email from my car salesman with all of the numbers related to the lease buyout I’m about to do. Tomorrow, it might be an email from my wife with some photos she took of our daughter playing in her sandbox while I am away visiting a Happy Cog client.

  44. It’s Tech

    7/12/12

    by Mark Huot

    2 Responses

    If you’ve worked in the theater, you’re probably familiar with the term “tech week.” It’s that magical time when an entire production comes together in a matter of days. It’s a whirlwind week that culminates in a big opening night performance.

  45. A Mind Forever Designing

    The conference room. It’s a silly name, really, because these rooms never host a conference. It is a room for meetings, a place to duck into for a private conversation or an ad hoc boxing bout between the CFO and the top sales guy.

  46. Always

    For this week’s installment of Cognition, I thought I’d share some random thoughts as the president of a small company. Some I heed, some I need to heed.

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

  48. Clippers

    I recently went on the hunt for a new barber closer to home. You see, I’ve been fortunate enough to have my hair cut for the last six years from the same barber every time, a friendly man named Joe. Over that time Joe and I have gotten to know each other quite well. We both have dacshunds, we both enjoy the theater, and we both know exactly how I like my hair cut.

  49. Dear Branding Agencies,

    You’ve crafted the “big picture” view. The client loves the new branding direction; they can practically smell the future you’ve unveiled for them. Now it’s time to get to work. That means you likely have a bazillion different projects in play to bring this new brand to life: identity packages, brochures of all shapes and sizes, tickets, annual reports, bus wraps, on-site signage, and, yes, the website.

  50. Please Put Down the Device & Let’s Just Talk

    Warning, if you are reading this in a meeting STOP! Put down your mobile device or laptop and slowly lift your head and eyes upward until you see (and hear) the person speaking!

 1 2 >