Plaid — Think Responsively

Introducing Plaid, the fastest and most intuitive way to create responsive web layouts.

Do RWD with a postmodern grid and HTML5 semantics. Learn More

The Myth of Web Design Complexity

A myth has developed among the web design community. The myth says that the better the design, the more complex it is. From the front-end of development, to the back-end, our technologies continue to become more and more complex as we strive to keep up with these so-called "more advanced" designs.

What has changed? Have designs truly become more complex? Has the web's use become more advanced? No. Truth be told, not much has changed since the web's inception. Websites have become bigger; that is true. But few ask why this is so. It isn't because of the times. It isn't because of a vast change in tech.

Things have become more complex because we've made it so. On the back-end, we saw that software systems were becoming bigger, so we developed Object Oriented Programming (OOP). That got out of hand, so we quickly progressed to Object Oriented Analysis and Design (OOAD). That escalated quickly, so we moved on to creating meta-tools and meta-languages, things that produced things that produced things.

On the front-end, we saw that the backend was rapidly becoming more complex, so we developed complex GUI systems that produced more GUIs. We harnessed XML to do our user interfaces. We built tools that would nicely integrate with the backend. We constructed tools to manage all of our tools. Soon, the complexity of the front-end matched the complexity of the backend.

All of this without proof. Have any of these things, any of the tools you currently use, truly simplified, truly helped with the design of the system? Or have we been searching for the "magic bullet" instead of refining our designs? We have spent so much time designing the implementation of the system, that the design of the system itself has often been merely a byproduct. These methodologies and technologies can be helpful, but count the cost. Don't fall for what is just a trend.

These things can be forgiven if the resulting web design is innovative. However, with the resulting complexity of doing the implementation, web designers (ranging from the lone freelancer the agency) have relegated to the use of templates or prebuilt systems, creating the overall feeling of web design "sameness."

The web isn't complex. It's your content, served to users. Never forget that. Don't get lost in the slew of technologies. Design is all about information flow, which is your content; this is true both on the front and back-end. And if your design reflects this fact, you may end up innovating.

Rapid Iteration

The whiteboard is erasable. It's erasable because it's designed for rapid iteration. If ideas sit, they stick and become difficult to remove.

Your ideas deserve to be tested. Most will fail, but the only way to find the best ideas is to bring your ideas to life and test them. Ideas are a dime a dozen. The faster you filter out the bad ones, the faster you'll discover the good ones. There's no shortcut to a good design.

When working with a web design team, it's even more critical to push for rapid iteration. To do this, the team needs a proper workflow. Call it whatever you'd like: prototype-driven, Minimum Viable Product, bootstrapping. But the result of a design needs to produce a working product, not just visuals or design comps.

Honestly, communication complicates the workflow the most. But this is why rapid iteration is so important and why the resulting product must be functional: There is no confusion as to what is being said. And this is crucial for good communication between the designers and the developers. A short time lapse between the design and the construction of it will lessen any confusion. It allows the designer to be more involved with what is happening and involves them in the construction process.

Nothing is worse than a design handoff to a team of developers where the designers then appear to leave the process. Developers are not a "black box" which receives a visual comp and produces a working product. Not only is that poor communication and teamwork, but neither is it rapid; the whole process becomes murky, and iteration is slowed. Creating one website design isn't good enough; the design process should allow the creation of hundreds of fully-functional products within a short time span.

Current web design tools haven't helped. They put more involvement on the developers' side instead of equally considering the designers and developers. The current tools are not team-centric. Rather, they are focused on a team of one; the freelance web designer. There's nothing wrong with that. Let's be honest, when working by yourself, it matters little what tool is used; only you deal with the resulting product. But in a team, even if it's two persons, tools can make or break the workflow, hindering the iterative design process.

Design teams can fix this by using a web design tool that is built with teams in mind and produces a functional product. There can be many tools in the process, but the most vital tool will concentrate on the foundation of the web design process, that is, the web layouts. The web layouts represent the pivotal part of the final product, and so they must be fully functional, taking into account the tenets of Responsive Web Design. From there, each section of the layouts can be designed.

Because the layouts have been finished and are already fully-functional (it is a website), the designers can then involve the developers in the design and creation of the individual sections. Immediately, this brings user-experience to the fore-front of the design, instead of a second-class peripheral. JavaScript, a now universal and core part of a website, which had previously been left for a later date, can suddenly be brought into the design upfront. Content can be created and filled in as well, since the layout is done. The creation of visual assets (images) has now been given a secondary role (although still very necessary) and has been moved to a later design process and earlier into the creation process.

Erase that whiteboard. It's time for more iterations.

Let the Designer Design

The web designer hands over a static comp to the developer. The developer says, "That won't work." Now there's a conundrum. There's no way for the designer to discern if that means "It's too hard." or "It's a bad design."

Constraint cultivates creativity. A set of well-defined rules can guide and help focus the designer. But when the set of rules conflicts with the boundaries of the product, creativity—and, ultimately, design—will be stifled.

A static comp contains one simple constraint: a fixed page. Yet the end product has no such constraint. In fact, the end product (the website) has many restrictions where a static comp does not. For instance: A website should not have everything absolutely positioned; complex background elements (including even, to some extent, drop-shadows) must be special images; fonts have many restrictions; kerning is limited; complex effects often require JavaScript. And the list goes on.

If the designer is working with the wrong boundaries, then they are not really designing. Design has little to do with how things look. Aesthetics play a major role, of course, but they are a (desired) byproduct of proper design and discovery. Should the design process not be focused on how things work, the resulting product will not have a good design. Form follows function, as they say.

Many designers have seen this, and so they learn to code; they design "in the browser." But then, the design process becomes mixed in with the creation process. It is true these processes are closely related, but the first act of design ought to be just that: design. Creation can come later, after an initial design has been construed. In fact, if the thing is properly designed, the creation of it will be very simple, as the hard part has been done. The design process has already solved any initial problems; the design has fulfilled its purpose.

We believe there's a better way to go about web design. We created Plaid, which uses a postmodern grid, a new type of grid system built directly for the problem-scope of the web, so that designers can focus on the task at hand. We think that web layouts are the crux of web design; that the problems to overcome are not inherently visual but deal with information flow. Design is at the core of everything, so let the designer design.

Where the Designer Meets the Developer

Other web design tools attempt to remove the need for the developer or the designer. They do this because there's a communication problem.

Building a static comp is not really building. It is the barrier between the designer and the developer. When the comp is finished, the designer thinks they have "built" the website, as far as designing it goes. Truthfully, the comp is the byproduct of the fundamental misunderstanding of the web design workflow, responsive or otherwise.

The developer, upon being handed the comp, must then reverse-engineer and even (to some extent) re-design it. "Design comps" provide no working base; they are by definition non-functional. But design is not how it looks or feels—it's how it works. And when a developer receives a non-working byproduct, they must start from scratch. After all, the design specified in the comp might not even work once implemented.

This is not necessarily the designer's (or developer's) fault. Building a website requires knowledge of both design and code, and it is unlikely to find someone who does both very well. The process of web design, then, necessitates that the designer and developer be in constant communication. This calls for better tools.

Some ignore what tools they use, saying that a tool is just a tool. To a degree, this is true. A great photographer can capture a great photo with a crummy camera. But, it must be a camera; nothing else will do.

If static comps don't cut it, then the designer needs a new tool. Not just any tool, but a tool for the modern web in which the devices and screens and needs of users are ever changing. The designer needs a tool that lets him design, and that means producing a product that is worthy of a good web developer.

Meet Plaid. Plaid lets the designer meet the developer. With a focus on the fundamentals of good web design (layouts) and using a postmodern grid, the resulting product is HTML/CSS/JS, i.e. a website. The resulting code is clean and semantic. We believe that HTML should be so simple a secretary could write it; HTML ought to just reflect your content. The CSS uses a technique called the "Isolation Method" which removes any float rounding issues. The result is a true What-You-See-Is-What-You-Get (WYSIWYG) without the bloat or mess.

In other words, Plaid produces a website foundation that is truly designed, from the inside-out; a functional product.

The Postmodern Grid

A musical instrument is more than a tool. It breeds creativity. It takes on the personality of the person using it. It produces music, sounds that transcend the physical and meld our experience and trigger our emotions.

What is the product of a web design? Is it a website? A website borders on the physical and virtual realm. It can be seen, touched, interacted with; but what it is, a series of bits of 1s and 0s, cannot be seen. What we see, much like when we read, must be translated into something that relates to the physical world around us, and this based on our experiences and beliefs. A website, then, must be interpreted like a work of art. A painting is hung on the walls, the canvas emoting the work of the painter. By itself, it does nothing. It relies on the coming of a viewer to interpret and imbibe its meaning. A musical act has more power, filling the room and even affecting our surroundings. But it too must rely on a listener to feel, to act upon it.

Really, the website embodies several works of art: it contains words, images, music, even video. All this considered, it is a high task to undertake a web design. It is a meta-art, a design for something that is already a work of art. Much like a frame for a painting, or the cover of a music record, a web site design can add, subtract or otherwise embellish the works of art that it contains.

A frame or music cover, however, has a physical goal. A website on the other hand, has no such goal. Yet, there must be something to guide its purpose and to provide order among the chaos. Simply, it it this: The layout. A newspaper or magazine understands this. Their mediums physically guide their purpose and even their layouts, which must point to the art within as best as possible without distraction.

Notably, a web design has no such obvious physical limitation, as it can be manipulated at any time by the viewer. The browser window can change; the font size can change; the device can change. In today's marketplace, we struggle with the juxtaposition of the ever-changing worlds of art and technology, as we seek to bring them together.

The art of web design needs to match its technology. No longer can fixed layouts be acceptable. No longer should other devices such as phones be considered second-class. The world of the web is universal, and the web design should reflect this. To do this, layouts must be designed without regards to any fixed size. Proportions should reign. The Fold should be of limited concern.

The create these layouts, a traditional grid will not do. If the layouts are based on proportions, then the layouts will have to change when the proportions no longer work. The grid needs to be malleable. And it cannot just use the simplistic notion of columns. The focus ought to be the content. The content and the grid need to be closely related, if not identical.

To this end, we have discovered the postmodern grid. While it is an abstraction, it is a distillation of the fundamental understanding of web design as an art and not just a means to an end.

Introducing Plaid

Design is not how it looks. It's how it works. And right now, it doesn't work. Sites everywhere have continued to ignore the mobile and tablet front. Occasionally, they present sub-par, difficult to manage custom mobile sites, or they request the user to download an app. But neither of these have solved the problem.

The solution is Responsive Web Design. It solves the problem by going back to the core of design: how things work. The web is not a static thing; it never has been. People have different screen sizes, different browsers, different devices. This has always been the case. By starting from this point, we develop the foundations of web design. The web page should be responsive to the ever changing conditions of the user. It is the designer's job to look at information flow.

If the mobile market is ever expanding, and Responsive Web Design presents itself as a solution, why do we still see an abundance of fixed layouts, even for new sites? Why are mobile devices treated as second-class citizens? At Lory & Ludlow, we think this is due to a lack of proper design tools.

Building in Photoshop is not really building. It is the byproduct of the fundamental misunderstanding of the web design workflow, responsive or otherwise. It is the barrier between the designer and the developer.

We think there's a better way to do web design. So we built Plaid.

Plaid lets the designer meet the developer. For the designer, a malleable, postmodern grid that is fully responsive. For the developer, a working product that is fully semantic and has clean, simple code.