Articles By:
Sophie Shepherd
-
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.
-
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.
-
Behold, the Fold
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.
-
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.
-
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.
-
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.
-
What I Wish I Had Known When I Graduated College
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:
-
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.
-
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?!