Skip to main content

Cognition

Articles By:

Sophie Shepherd

  1. Switch Design

    Posted on 11/20/14

    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.

  1. Rethinking Our Prototypical Process

    Posted on 10/9/14

    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.

  1. Behold, the Fold

    Posted on 7/10/14

    If you’re in the web industry and reading this article, you’re probably thinking, “Over halfway through 2014 and she’s writing about the fold on the web! I thought we settled this!” But, the existence of the fold is still something that gets debated on many of our projects.

    Below is an imagined conversation between myself and a Defender of The Fold, in which I successfully explain why we shouldn’t worry about the fold on the web.

  1. Hover-crafting

    Posted on 5/15/14

    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.

  1. Do it once. Do it right.

    Posted on 1/16/14

    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.

  1. Why We Prototype

    Posted on 9/26/13

    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.

  1. What I Wish I Had Known When I Graduated College

    Posted on 5/16/13

    Last week, Greg Storey and I attended the Senior Exit Review at Texas State University. We were both blown away by the quality of work and were incredibly jealous that these students got to learn so much about the web in college. It made me think back to when I graduated and how confused I felt about, well, everything. Looking back at what I’ve learned since then, I came up with the following list of what I wish someone had told me at the time:

  1. Times, They Are A-changin’

    Posted on 12/6/12

    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.

  1. The Four Stages of Giving Up Photoshop

    Posted on 8/2/12

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

  1. Kevin Sharon Browse all of Kevin’s articles »
  2. Jeffrey Zeldman Browse all of Jeffrey’s articles »
  3. Greg Hoy Browse all of Greg’s articles »
  4. Greg Storey Browse all of Greg’s articles »
  5. Chris Cashdollar Browse all of Chris’s articles »
  6. Dave DeRuchie Browse all of Dave’s articles »
  7. Kevin Hoffman Browse all of Kevin’s articles »
  8. Mark Huot Browse all of Mark’s articles »
  9. Ryan Irelan Browse all of Ryan’s articles »
  10. Robert Jolly Browse all of Robert’s articles »
  11. Jenn Lukas Browse all of Jenn’s articles »
  12. Keyboard Man Browse all of Keyboard Man’s articles »
  13. S. Gif Browse all of Spacer’s articles »
  14. Joe Rinaldi Browse all of Joe’s articles »
  15. Brian Warren Browse all of Brian’s articles »
  16. Jessica Ivins Browse all of Jessica’s articles »
  17. Rawle Anders Browse all of Rawle’s articles »
  18. Brett Harned Browse all of Brett’s articles »
  19. Yesenia Perez-Cruz Browse all of Yesenia’s articles »
  20. Anthony Colangelo Browse all of Anthony’s articles »
  21. Aura Seltzer Browse all of Aura’s articles »
  22. Allison Wagner Browse all of Allison’s articles »
  23. Helenita Frounfelkner Browse all of Helenita’s articles »
  24. Patrick Marsceill Browse all of Patrick’s articles »
  25. Michael Johnson Browse all of Michael’s articles »
  26. Stephen Caver Browse all of Stephen’s articles »
  27. Alison Harshbarger Browse all of Alison’s articles »
  28. Drew Warkentin Browse all of Drew’s articles »
  29. Katie High Browse all of Katie’s articles »
  30. Brandon Rosage Browse all of Brandon’s articles »
  31. Katie Kovalcin Browse all of Katie’s articles »
  32. Cat Farman Browse all of Cat’s articles »
  33. Sam Hernandez Browse all of Sam’s articles »
  34. Brenna Heaps Browse all of Brenna’s articles »
  35. Courtney Sabo Browse all of Courtney’s articles »
  36. Mica McPheeters Browse all of Mica’s articles »
  37. Abby Fretz Browse all of Abby’s articles »
  38. Jason Dziak Browse all of Jason’s articles »