Constraint Aids in Design
I am starting to see a pattern. It is approaching the end of the year, and as with many, hindsight is on the mind. Over the course of my blog, I think I’ve set a course and direction for what I write. The web has definitely changed since my first post in September of 2008; so too have we, as designers, developers, and avid fans of the internet. We have altered our methods, our tools, and our expectations for what a website should be. In all of this change, I have clung to one idea that holds me steady on this shaky ground: constraint.
Constraint is not a buzz word. You don’t sell design with promises of constraint. No, constraint is a discipline in design; it is an essential tool for success in the creative process. All designers begin the creative process in roughly the same fashion: you start with a blank area of two-dimensional space, and you apply your creative ideas in whatever way that suits the medium in which you work. Many designers begin with paper, drawing and sketching their ideas as they emerge. Others may choose to begin in an electronic format, using wireframes, graphic design applications, and the like. No matter the medium in which you choose to work, the process is essentially the same. The problem with this very early stage of creative development is that it lacks constraints of any kind. You can draw anything you can possibly imagine on a piece of paper. It can be a concise and well-planned idea, or it can be complete nonsense. Although the space in which you are now working lacks constraint, the medium in which you eventually implement your idea (the browser window) does not.
As many designers are, I am a detail-oriented person. Every errant pixel or unpolished element in a design can drive me mad. When I begin the creative process, it’s entirely too tempting to explore my ideas completely and thoroughly at the very inception of the thought. My mind wanders astray as I work out the details of color, functionality, even the HTML, CSS, or the JavaScript that will be needed to implement the idea. The problem is, these details don’t matter, at least not yet. My failure to focus on the Big Picture, the vision of what this should really be inside my head, can lead to the failure of the design on the whole. When you first begin the design process, you must remove the details from your mind.
Tools of Constraint
There are some fantastically simple ways to fight your urge to delve into the details of design at such an early stage of your idea. Use any or all of these methods to improve the quality of your design process.
- Constraints of Space — Although it seems amazingly elementary to consider, constraining the space in which you work can greatly hinder your ability to focus on the needless details in such an early stage of idea development. On paper, try dividing your space into smaller sections, forcing you to focus on the most important elements of design. If you are working in an electronic medium, try to avoid using the zoom tool for the same effect. Develop your ideas in a constrained space, and you’ll find that you spend less time thinking about the endless details of everything that you create.
- Constraints of Medium — Design your idea to the lowest possible standards for the medium(s) in which it will be implemented. For instance, if you are creating a website design, consider designing for mobile devices first. This forces a sense of simplicity in all that you create, which is something that cluttered and disorganized websites often lack. Ensure that your design will function on every possible platform in which it will live, and enhance the experience of your idea for users who can support it.
- Constraints of Expectation — Understand the expectations of your users, and recognize the established design patterns of the platform in which you work. Don’t try to reinvent the wheel unless it makes sense in the bigger context of your project. Don’t be afraid to use shared resources to accomplish a common goal, but know when to deviate from the rules in order to avoid a sense of mediocrity.
Gradation of Constraint
Brandon Schauer has created a fantastic multi-page sketchboard template, which can be used to begin the creative process. These templates are fantastic to work with, as they essentially divide a letter-sized area of paper into six divisions, forcing you to work within the spacial constraints of each individual division. Furthermore, Brandon has wisely chosen to include a very subtle suggestion of a browser window in the background of each division of the paper. This is a constant reminder of the constraints of the medium or platform in which you are designing. Brandon also includes a larger, single-sized sketchboard template that can be used to go into greater detail once the big ideas of your design have been explored and polished.
The wisdom of this larger template cannot be overlooked. There is a time in every design process where you must move beyond the constraints of the drawing board. Many designers may move from sketching directly into graphic design, or perhaps into wireframes and prototyping. It can be difficult to suddenly jump from such a well-defined, constrained medium of design into an area that lacks similar constraint. You’ll find that by creating a gradation of constraint, where you constantly “zoom in” to focus on an idea a little at a time, you can aid your mind in avoiding the needless details of implementation until they are necessarily significant.
Use the tools of constraint to explore your ideas a little at a time. Focus on the vision of the design that you have in your head, and elegantly correct your design’s course over the span of its development to ensure that the idea of the design, and the reality of the design are one and the same. Avoid detail-diving, however tempting it may be. Do these things, and you’ll find, as I have found, that the vision of clarity in your mind can gradually and surely become clarity within the browser window.