A better web design process

The web is not print.

I’m definitely not the first person to write about this. Just google that phrase and you’ll find pages of articles that revolve around this topic dated more than a decade ago. But even today, more than 15 years after the web went mainstream, we still see a large number of web design projects following a modified version of the print design process.

Print and web are different mediums

Considering that the earliest forms of printing came about more than 2000 years ago, it’s safe to say that print design is a very established field. Print is a static, visual medium. Aesthetically-designed visuals are required to capture viewers’ attention in order for a message to be delivered.

The web is an informational medium. It is not a visual medium.
— Colin Lieberman

The web is an interactive medium, dynamic and responsive to user input. And it is relatively young. ARPAnet (which was the basis for the internet we know today) was developed in 1969, but the internet really went mainstream around 1999. So we’re really talking about a medium that’s less than 20 years old.

People use the web primarily to find information and perform specific tasks. The best web designs allow users to find what they need and do what they want with as little friction as possible. Well-thought visual elements can enhance this experience.

In print design, visual elements are the main course, but for web design, visual elements are a garnish. The design must work even without visual elements present. Web design cannot just involve the creation of visually appealing digital assets. Digital print design is not web design. We cannot treat the web as a static digital canvas.

Each design field is distinct because of the medium its designers work in. Interior designers work with spaces, fashion designers work with fabrics and so on. Web design is its own distinct field and should have its own unique set of processes and deliverables.

You can’t control the web

Print designers have full control over the appearance of their designs and how the final output is rendered. The phrase pixel-perfect embodies this obsession with control. But for print design, this is how the best designs are produced. An attention to the most minute of details, ensuring the perfect placement of every character down to the last pixel.

As a print designer, you can be assured that once your design is finalised and sent for print, the world will view it exactly as you envisioned. The only way you can modify the design is by drawing over it, and we call that vandalism.

The web is completely different. Whatever you produce for the web is viewed on screen rendered by web browsers. A web browser is a piece of software that gives users control over how they want to view its content. That’s right, users have control, not the designer.

And we’re not dealing with one browser on one screen, we’re dealing with at least 5 major browsers across countless different screens and devices. Control, in this case, is a pipe dream.

Designing for the web is a process not an event.
—Thomas Umstattd Jr.

Designing for print is an event. It can be completed. Once the design is sent to the printer, the designer’s job is done. You can never finish a web design. The web is technology, and it is the nature of technology to keep evolving and changing.

When we design for the web, we are designing for the unknown. Smart people have already considered this back in 2003, and came up with the concept of progressive enhancement. It is a simple rule, content first.

A print design that looked great 50 years ago, we now call vintage. A web design that looked great 10 years ago, now just looks out of place. Visual elements on the web are fleeting, because how a website looks will change depending on the browser rendering it.

The real value of the web is the wealth of information we can access. An informational medium. Putting content first means regardless of the technology being used, content has to be accessible.

It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
—John Allsopp

Understanding the web and user behaviour

How many times have you heard designers complain that their beautiful designs were not coded to look exactly like the Photoshop files they so painstakingly created? And how many times have you heard developers rant about the designs that are impossible to code without a myriad of hacks? And how many times have you, as an user, complain that a website is hard to use and doesn’t give you the information you’re looking for?

The waterfall approach to web design simply does not work. Developers cannot just be tacked onto the end of the print design process like printers. An ideal web design process involves close collaboration between the users, designers and developers.

Web design is the creation of digital environments that facilitate and encourage human activity reflect or adapt to individual voices and content and change gracefully over time while always retaining their identity.
—Jeffrey Zeldman

Web designers should have a clear understanding of the nature of the web, and understand both its strengths and limitations. Web developers need to understand visual design principles, typography and colour theory in the context of the web.

And both sides must understand how users interact with the web. There is no way around it, to create the best work for the web, we need to fully understand the web and design principles as they relate to the web. We don’t design websites. We design content.

Most of the time we get clients saying, “Build me a website. Make it look pretty.” In their minds, they have already come up with a solution and just need execution. The problem is, most clients do not understand the web. Translating all your print designs into digital files and uploading it to the web is NOT going digital.

It is necessary to tease out the real problem behind why they feel a website is necessary. On some occasions, you may find that a website is not the best solution to their problem at all. The design process needs to start with the question why.

Why do we even want to build a website? What is the purpose of this website and what is it trying to achieve? Every website must have a clear objective. And every design decision, from content and information architecture, to visuals and functionality, must contribute to the achievement of said objective.

User research and style-guide driven development

An effective web design successfully marries the motives of the stakeholders with the needs of the users. User research should be a default for all web projects. Web professionals and clients often butt heads over design decisions and the best way to resolve this problem is with objective data from user research.

We all need to recognise that none of us are the user and creating something that does not take into account the perspective of the user almost always results in failure.

Business priorities often lack the reality of user needs and decisions are made based on what we “think” is awesome rather than what is “truly” awesome.
—Hoa Loranger, UX Without User Research Is Not UX

It is no longer feasible for designers to work in isolation, creating stunning visuals in static photoshop files that require megabytes of code to implement. It becomes even more tragic when the functionality doesn’t fit with the visual design. There is a much better way to do things.

During the earliest phases of the project, stakeholders, target users, designers and developers should get in the same room to throw ideas around. This ensures all parties are on the same page. Paper prototyping is one of the best ways to test out ideas.

It’s cheap and fast, and people tend to feel more at ease pointing out issues on paper prototypes than on something that took weeks to craft. This exercise can help guide the process of prioritising content, planning the layout and figuring out key functionalities and business logic.

The roles of designer and developer are increasingly blurred, yet all too often we work in isolation.
—Anna Debenham

Developers can quickly translate the paper prototypes to low-fidelity wireframes in the browser with HTML and CSS. This helps designers visualise how elements are displayed in the browser, and the different components that need to be taken care of.

Things like hover states, how content is positioned when the screen is resized, transition effects and so on. Designers and developers can agree on which elements can be coded with CSS and which elements require images.

From here, a style guide can be developed. The concept of style guides is not a new thing. Consistency has always been an aspect of good design, and style guides help achieve that.

The difference here is instead of having a static style guide PDF document, or a photoshop file with dozens of red annotations and hex codes, we code the style guide in HTML and CSS. Style-guide driven development can and should become our industry standard.

We won’t know what the future holds

The internet will continue to evolve and change. In a few short years, we’ve gone from designing for a single computer monitor display to a multitude of mobile phones, tablets, and now even watches.

Our processes must facilitate our ability to be agile and respond to rapid changes without breaking stride. It won’t be easy, but all of us, as web professionals, have the responsibility of making the web experience better.

Chen Hui Jing