Designing From Scratch
In the age of web 2.0, life for the web designer has never been better. The once-curious “web log” (remember that word?) is now a robust CMS concept powering the architecture of entire communities. Web-savvy individuals previously kept together by guestbook comments and handmade forums can now seal the relationship with a mutual follow on Twitter. An explanation for that neat CSS fading trick can be found only a few clicks away on a StackOverflow thread, where someone miraculously asked your exact question. All in all, wheel-reinventing has been all but eliminated from the developer’s to-do list.
Since so little from-scratch work is needed anymore, the way we execute websites has changed, in many ways for the better. But the changing execution also changed the design process that comes before it – the phase responsible for answering questions such as “What is this website supposed to do?” “What do we most want the visitor to click on once they’re on the main page?” “How will our brand be embodied in the website, outside the About page?”
Think of it like a chef. A chef must first know the menu, the occasion, the size of the group, what tastes to satisfy and food allergies to consider, and so on. Only then can she go on the hunt for the needed meats, vegetables, spices, and utensils needed to create the dish.
This decision-making process demands a significant time investment, sometimes even more so than the execution. But, especially with the race towards resources-minimizing and compatibility that agencies must strive to win, the question “What does the design need? can easily be stunted to “What do I have to work with?”
***
The ready availability of prepackaged design patterns that are too easy – and too indispensable – not to use are often traps to thinking with the execution first and the purpose second. To go back to our chef, she has an abundance of recipes, cookbooks, and not-too-shabby frozen meals out there she can grab to whip something up pronto. And you too no longer have to use your inner chef to have some (and often a pretty darn edible and quite tasty) web design dish ready to go.
So what are these “frozen meals”? Downloadable PSD templates for a popular texture, vector packs for popular icons, JQuery plugins or new CSS3 tricks for a popular visual effect, and platforms like WordPress to auto-generate popular kinds of websites, to name a few. For most lightweight purposes, you might not have to build a site at all: simply sign up with Tumblr for your own ready-to-go corner of the internet.
You say that like it’s a bad thing, Natalie! Nah. All these tools and resources have since sprung forth from an entrepreneurial spirit, as the days that we would be stuck coding everything from scratch are thankfully long behind us. As emerging trends quickly become popular design problems, soon thereafter resources are created to expedite their implementation. And why not? They are free, attractively robust, and – even more importantly – they are the most reliable solution for cross-browser compliance and forward-compatibility of your creations.
It is wise to take advantage of the community-powered turbo boost and to be aware of trends and usability expectations, but it’s equally important not to put your design’s cart in front of the horse. The more you cobble together your website’s experience from existing modules (or simply start with a common archetype), the more you risk creatively hindering yourself by reducing your design work to customizing colors, filling in templates, and connecting pieces together. Creating a feast with frozen meals, so to speak.
For example, you might already have plans to mimic that neat scalable fullscreen product-browsing feature you saw on three beautiful websites. You might have easily decided to siphon your site into buckets of “About”, “Portfolio”, and “Contact” – the way online portfolio services such as CargoCollective suggest is clean and usable. You might have already decided to add a blog to post new content from here on out, like WordPress is so ready to do right out of the box.
But try a sobering design exercise. Imagine there’s no WordPress, no JQuery, competitors’ websites, trends, no anything. A website like yours does not exist yet, and you will create the first of its kind entirely from scratch. Every option is open, gradients and rounded corners aren’t popular yet, and CMSs are unheard of.
Welcome to your website!
Perhaps you’ll find you don’t have many 140-character updates to post. If, hypothetically, there was a service called Twitter that facilitated that, you wouldn’t have very much use for it.
Perhaps you’ll happen upon a design that evokes the experience of traveling around a city, and find that it delivers the intended messages much more poignantly than a “header-navigation-content” arrangement you may have defaulted to if, hypothetically, a software called WordPress was greatly optimized for that.
Maybe your “process and sketches” section fit very poetically alongside your portfolio (heck, incorporated into it), and dedicating it space throughout a blog’s journal-esque structure would have divorced it from all the context that made it meaningful. (But how tempting it would have been, having started with the notion of a blog, to find some use for it!)
And the retro print-inspired layout you chose feels appropriate for the conservative professionalism of your brand, much more than the slick slideshow with flyout thumbnails you might have otherwise been tempted to pick off the shelf.
Tada! At the end of this process, you will receive your official design gods’ blessing to take your shopping list and head out to the grocery store. And therein lies the moral: while these tools, plugins and design trends are great helpers for execution, don’t let them hijack your visionary process. Designing from scratch means thinking from scratch – even if you’d be crazy to code that way.
