Skip to main content

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.

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

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

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

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

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

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

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

  9. 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. Headshot of Rawle Anders Rawle Anders Browse all of Rawle’s articles »
  2. Headshot of Amanda Buck Amanda Buck Browse all of Amanda’s articles »
  3. Headshot of Sarah Carr Sarah Carr Browse all of Sarah’s articles »
  4. Headshot of Ben Carr Ben Carr Browse all of Ben’s articles »
  5. Headshot of Chris Cashdollar Chris Cashdollar Browse all of Chris’s articles »
  6. Headshot of Stephen Caver Stephen Caver Browse all of Stephen’s articles »
  7. Headshot of Anthony Colangelo Anthony Colangelo Browse all of Anthony’s articles »
  8. Headshot of Kyle Cotter Kyle Cotter Browse all of Kyle’s articles »
  9. Headshot of Courtney & Chelsea Courtney & Chelsea Courtney & Chelsea Courtney & Chelsea Browse all of Courtney & Chelsea’s articles »
  10. Headshot of Taylor Daughtry Taylor Daughtry Browse all of Taylor’s articles »
  11. Headshot of Dan Delauro Dan Delauro Browse all of Dan’s articles »
  12. Headshot of Dave DeRuchie Dave DeRuchie Browse all of Dave’s articles »
  13. Headshot of Jason Dziak Jason Dziak Browse all of Jason’s articles »
  14. Headshot of Cat Farman Cat Farman Browse all of Cat’s articles »
  15. Headshot of Abby Fretz Abby Fretz Browse all of Abby’s articles »
  16. Headshot of Helenita Frounfelkner Helenita Frounfelkner Browse all of Helenita’s articles »
  17. Headshot of Jeremy Gimbel Jeremy Gimbel Browse all of Jeremy’s articles »
  18. Headshot of Lee Goldberg Lee Goldberg Browse all of Lee’s articles »
  19. Headshot of Brett Harned Brett Harned Browse all of Brett’s articles »
  20. Headshot of Lauren Harris Lauren Harris Browse all of Lauren’s articles »
  21. Headshot of Alison Harshbarger Alison Harshbarger Browse all of Alison’s articles »
  22. Headshot of Brenna Heaps Brenna Heaps Browse all of Brenna’s articles »
  23. Headshot of Stuart Henry Stuart Henry Browse all of Stuart’s articles »
  24. Headshot of Sam Hernandez Sam Hernandez Browse all of Sam’s articles »
  25. Headshot of Katie High Katie High Browse all of Katie’s articles »
  26. Headshot of Kevin Hoffman Kevin Hoffman Browse all of Kevin’s articles »
  27. Headshot of Greg Hoy Greg Hoy Browse all of Greg’s articles »
  28. Headshot of Mark Huot Mark Huot Browse all of Mark’s articles »
  29. Headshot of Ryan Irelan Ryan Irelan Browse all of Ryan’s articles »
  30. Headshot of Jessica Ivins Jessica Ivins Browse all of Jessica’s articles »
  31. Headshot of Michael Johnson Michael Johnson Browse all of Michael’s articles »
  32. Headshot of Robert Jolly Robert Jolly Browse all of Robert’s articles »
  33. Headshot of Andrew Kaslick Andrew Kaslick Browse all of Andrew’s articles »
  34. Headshot of Alex Kendrick Alex Kendrick Browse all of Alex’s articles »
  35. Headshot of Keyboard Man Keyboard Man Keyboard Man Keyboard Man Browse all of Keyboard Man’s articles »
  36. Headshot of Saima Khan Saima Khan Browse all of Saima’s articles »
  37. Headshot of Katie Kovalcin Katie Kovalcin Browse all of Katie’s articles »
  38. Headshot of Kate Lechleiter Kate Lechleiter Browse all of Kate’s articles »
  39. Headshot of Alyse Lorber Alyse Lorber Browse all of Alyse’s articles »
  40. Headshot of Jenn Lukas Jenn Lukas Browse all of Jenn’s articles »
  41. Headshot of Sue Malomo Sue Malomo Browse all of Sue’s articles »
  42. Headshot of Patrick Marsceill Patrick Marsceill Browse all of Patrick’s articles »
  43. Headshot of Maria Martinez Maria Martinez Browse all of Maria’s articles »
  44. Headshot of Rob McFadden Rob McFadden Browse all of Rob’s articles »
  45. Headshot of Mica McPheeters Mica McPheeters Browse all of Mica’s articles »
  46. Headshot of Tom McQuaid Tom McQuaid Browse all of Tom’s articles »
  47. Headshot of Rene Merino Rene Merino Browse all of Rene’s articles »
  48. Headshot of Leigh Nash Leigh Nash Browse all of Leigh’s articles »
  49. Headshot of Amelia Pardieu Amelia Pardieu Browse all of Amelia’s articles »
  50. Headshot of Sabrina Patrizio Sabrina Patrizio Browse all of Sabrina’s articles »
  51. Headshot of Dana Pavlichko Dana Pavlichko Browse all of Dana’s articles »
  52. Headshot of Yesenia Perez-Cruz Yesenia Perez-Cruz Browse all of Yesenia’s articles »
  53. Headshot of Paul Phan Paul Phan Browse all of Paul’s articles »
  54. Headshot of Emaan Riaz Emaan Riaz Browse all of Emaan’s articles »
  55. Headshot of Joe Rinaldi Joe Rinaldi Browse all of Joe’s articles »
  56. Headshot of Brandon Rosage Brandon Rosage Browse all of Brandon’s articles »
  57. Headshot of Dre Ryan Dre Ryan Browse all of Dre’s articles »
  58. Headshot of Courtney Sabo Courtney Sabo Browse all of Courtney’s articles »
  59. Headshot of Rob Sanchez Rob Sanchez Browse all of Rob’s articles »
  60. Headshot of Aura Seltzer Aura Seltzer Browse all of Aura’s articles »
  61. Headshot of Kevin Sharon Kevin Sharon Browse all of Kevin’s articles »
  62. Headshot of Sophie Shepherd Sophie Shepherd Browse all of Sophie’s articles »
  63. Headshot of Zach Smith Zach Smith Browse all of Zach’s articles »
  64. Headshot of Ben Smith Ben Smith Browse all of Ben’s articles »
  65. Headshot of Greg Storey Greg Storey Browse all of Greg’s articles »
  66. Headshot of Jason Studstill Jason Studstill Browse all of Jason’s articles »
  67. Headshot of Oka Tai-Lee Oka Tai-Lee Browse all of Oka’s articles »
  68. Headshot of Russ Unger Russ Unger Browse all of Russ’s articles »
  69. Headshot of Eli Van Zoeren Eli Van Zoeren Browse all of Eli’s articles »
  70. Headshot of Allison Wagner Allison Wagner Browse all of Allison’s articles »
  71. Headshot of Drew Warkentin Drew Warkentin Browse all of Drew’s articles »
  72. Headshot of Brian Warren Brian Warren Browse all of Brian’s articles »
  73. Headshot of Faith Zaki Faith Zaki Browse all of Faith’s articles »
  74. Headshot of Jeffrey Zeldman Jeffrey Zeldman Browse all of Jeffrey’s articles »