I’ve written about the QA process ’round these parts before, sure. A while back I penned a piece on how to streamline and focus your QA process to ensure that you didn’t miss any of those finer details which can sometimes fall between the cracks. This time? We’re taking a step back from the actual QA process and we’re starting at the start of it all.
In the beginning, there was man
Okay, so maybe not THAT far back.
In the beginning, there were mockups
That’s better.
We’re all familiar with the concept of mockups. We (or one of our more-talented designers with awesome skills) provide a PSD mockup of one, or several, pages to the client. It’s a representation of what the website will look like, and the client is free to pick at and scrutinize the smallest (and largest) details of said mockup. “Move this over a pixel!” or “Bump the font size one point up!” may sound like simple changes, but what if you’ve got ten different PSDs and the client wants to see the change reflected in all of them? Well, I’ll tell you what: you get a lot of wasted time.
To me, that just doesn’t fly. I’m all about efficiency when I work. I sit down, I get in the zone, and I start working away with as few distractions as possible. But the mundanity of updating several mockups for a simple change just to sate the client just lacks appeal.
So, what do we do? Instead of telling the client to shove it or to tell them to imagine the shifted pixel or font size, maybe we should just get out of the habit of providing full-blown, full-page, or sometimes several-page mockups.
It’s a Small, Small, Small, Small World
What blog post about modular design would be complete without referencing this article by Daniel Mall about the grace and ease of element collages. Of course, that post and line of thinking may not have even come to fruition without Samantha Warren’s article about Style Tiles in 2012.
These two heroes of the design process got us thinking outside of the mock and in a more focused way. Not only have they introduced processes by which we can give the proper amount of attention to detail necessary, but they’ve also increased our productivity by cutting down the amount of time we spend (waste?) on creating full-blown mockups for clients. In this game, saving time means saving money and I think we’re all on board with that.
This does mean, however, a radical shift in the way we present our ideas to the client. I fully understand that some clients may be a bit apprehensive to accept element collages over a full-page mockup. After all, the latter is something they’re used to. It’s a comfort food. It’s what they know and it’s what they expect, and if it’s not done just right they’re going to be left with a bad taste in their mouths.
On the flip side of that argument, though, the clients who come to us for a project aren’t the experts in design and development. After all, that’s why they’re coming to us. I’m not going to write a letter to Sony or Microsoft and give them my personal feedback on how to improve the features or looks of the PS4 or Xbox One. I’m just a consumer and they’re the pros; they’ve done all of the testing to ensure that the final product I receive is the best it possibly can be (for the most part).
By the same token, shouldn’t we be taking that kind of responsibility with our work? If we know that something new is on the horizon, or even here already, shouldn’t we be the ones presenting those new ideas to our clients? We should be on the front lines of innovation and education! They trust our knowledge and our skills enough to hire us, so they’re going to trust us enough to at least listen to the new processes and workflows that we’re ready to propose.
Yes, it could be a bit of a shock to the senses for client to receive an element collage instead of a full-page mockup. They would see all of the elements of a website, but they may not actually make sense as far as placement, positioning, or even structure. Again, though, that’s where we come in; it’s OUR job to explain what they’re seeing on the screen in a way that they will understand to ensure they’re not confused or freaked out at receiving what appears to be a bunch of random elements crammed together. We’ll have to explain to them that these are the elements that will make up their website and that these styles and elements will be used throughout the site to retain uniformity, cleanliness, and ease of use.
Taking The First Big Small Step
Think of it this way: if you make a list of things to do over the weekend, you’re going to want to be as granular as possible. If your weekend task is to clean the house, your checklist is going to be a lot longer than “Clean the house.” You’re going to separate your tasks into smaller, more specific tasks. You’ve got to vacuum the living room, sweep and mop the floor in the kitchen, clean the toilet, clean the tub, etc. You’re going to make sure you nail every item on that list, and you’re going to know you’ve completed everything you set out to do once you’ve crossed off every one of those tasks, otherwise you’re going to forget to dust the ceiling fans or clean that weird crevice between the fridge and the wall.
This is the way we need to work as designers. We shouldn’t take a mockup for a single post or the home page and begin a task called “Create Home Page Template.” We need to break that down because without doing so our focus would be all over the place. We’ll go from looking at the header and navigation to the sidebar, over to the content then down to the footer, back up to the header because we may have missed something the first time around, and so on and so on.
With a full-page mockup, we can also get lost in the sections or individual elements because, now that we have a thing which LOOKS like a webpage, we’re also looking at it as a webpage instead of handful of separate elements. With element collages, though, that kind of foresight is built right in from the very beginning. We take a look at the collage and see JUST the header. We see what a widget in the sidebar should look like. We see what buttons and links should look like. We’re seeing everything for what it is: a single piece of the puzzle rather than looking at the entire puzzle and trying to pick out the pieces we feel hold the most importance.
In addition to the specificity with which we’re able to see our elements, we also get to eliminate a major headache from our design process–pixel perfection. I know that phrase probably sent shivers down your spine, but please just bear with me for a moment. PSD mockups are not perfect, okay? They’re never perfect. They’re never going to be perfect. Maybe you want fifteen pixels of space below a widget, but for whatever reason you accidentally leave an extra five or ten pixels below a single widget in the mockup. Should that actually be fifteen pixels, or should it be twenty-five pixels? Why do some posts have ten pixels beneath them and others have thirteen? What does it all mean?!
In short, it means that full-blown PSD mockups are dumb and that we should move on from them. We’re wasting our time counting pixels in mockups, and the client is wasting time doing the same thing and then following up with questions about why the spacing is different in the browser than in the mockup. We know what we’re doing here. We’ve established that. So rather than worrying about the space created in Photoshop, which may be off a few pixels here and there, why not worry about the space of the elements where it actually matters most–in the browser.
If we’ve moved on to element collages, the client and team will already know what each element should look like and this is where the worrying should stop. Once the element collage is given the okay, we should be on our way to creating beauty in the browser where these items come to life and things like spacing, interactivity, and usability are much more tangible.
I Thought This Was About QA?
If you’re still with me, you may be wondering where the talk of actual QA comes into the game. I’m about to give you a Shyamalan twist–we’ve been QA’ing the entire time!
I know that right now you’re shouting loudly at your screen, “But I thought the QA process began with a really cool spreadsheet to track all of the potential bugs and issues!” and I just want to tell you to relax because you’re gonna freak out your neighbors and pets. Don’t start acting like a crazy person now; we’re almost done!
It is true that my formal QA process begins with a spreadsheet where I can track the woes of a project. That’s the formal QA process, though. We can really be QA’ing the entire length of the project, and with a modular design process like element collages we’re going to be that much closer to a clean, complete deliverable once the project wraps up.
Think back to my example about your house cleaning list. If you don’t track every task meticulously, then you run the risk of missing something. The same goes for the design process. If we get a blanket task of “Create Single Post Template,” then there is a huge chance that we can overlook some smaller element on that page. So, why not start small instead of big? Why not create fifteen or twenty tasks for a page template? A task for the sharing elements; a task for comments; a task for pagination…and so on and so forth. If you’re focused on these smaller items, then these smaller items are going to receive more of your attention. You’re going to be locked into making the pagination kick as much tail as it possibly can rather than it becoming an afterthought which can absolutely happen at times.
When you’re working in as granular a process as is possible, then you’re going to be the first one to scrutinize the items you’re designing and developing long before they even make it to the QA table. This means that, once we get to the QA process, we’re going to spend less time fixing bugs. In turn, this means that we can eventually eliminate a lot of time from the project that may have otherwise been spent on cleanup and fixes which, finally, means a faster turnaround and a cleaner overall presentation for the client.
We live in a world built for weirdos. Phones are getting larger and tablets are getting smaller. Screen dimensions are ever-changing and we can now access from our watches, refrigerators, and televisions. Everything around us is constantly changing and the way we access our information is perhaps changing the most rapidly of all. Why, then, should our design process be stuck in the mud, unshifting and unrelenting in a world that continues to grow and move around it? Clients and consumers didn’t clamor for smart watches or a million different sizes of telephones–the experts made it so and the public responded. It’s time for us, as the experts in web design, to do the same.
Comments