The Root of All Design

The first and most important layer in the hierarchy of design needs is functionality. If functionality sends your mind to thoughts of scripting languages, databases, and programming I don’t blame you. The functionality of a site is often used to describe the tasks that will be performed by website developers, not designers. This is in part due to the common segmented process in which websites are created.

Typically, the marketing department comes up with the idea, the user experience designers decide how it will work, the design department decides what it will look like, and the developers make it function. Thus when people talk about function with respect to a website, they are usually referring to developers or implying the development process as laid out above.

In actuality the function of the website should be at the forefront of everyone’s mind during the creation of the site. As you learned in the last chapter every site is created for specific reasons. In design the function of the site is not what the site does, but the reason that it exists. This is the functionality layer, which deals with the purpose of the site and the outcomes it’s designed to generate.

Design without function isn’t design at all; it’s just creating. Most sites are created in response to business needs. Businesses need to market their goods, services, build awareness, or sell online, and a website is a strong vehicle for the purpose. In the case of non-profits, organizations may need to recruit supporters and get donations. Even personal sites are created with a specific function in mind, which is typically a means to share personal information with friends and family.

Functionality isn’t just programming and databases. Website functionality is actually a term that describes the sites purpose and desired outcomes.

For most projects the site function is cut and dry: get more leads, sell products, increase membership, etc. In other words, a design ultimately serves a given purpose. Almost all designers innately know this on some level. What I want to convince you is how integrated that purpose needs to be with your design. What’s important to avoid is the mindset of creating another portfolio piece rather than an effective site, targeted at specific needs and a target group of users.

In extreme cases I have seen instances where people are not really designing; they’re playing around in Photoshop as a form of creating self-gratifying aesthetics. There is nothing wrong with doing this for a hobby, but many businesses and organizations end up paying for this personal expression and miss out on the benefits of a great website because of it.

Understanding the importance and role of functionality in web design is best explained through the exploration of design as a general practice. Websites (and their inherent graphics) are not the only things in the world designed to fulfill a specific function or target a given user base. In fact, all industries — in one form or another — use the principles of design to produce an end-product.

What is “Design?”

If you were to ask ten people to describe what design is, I would wager you’d get ten very different answers. Given design literally shapes every aspect of how we live, it’s interesting to note that very few people really understand it. I describe myself as a designer, but from that statement people often assume I design anything from clothing to interiors. As fellow designers, I suspect you’ve experienced similar assumptions.

Design Defined

I find it best to start any discussion about what a concept really is by looking at the definition.

Websters dictionary defines design as [to]:

• “create, fashion, execute, or construct according to plan”
• “conceive and plan out in the mind”
• “have as a purpose”
• “devise for a specific function or end”

As a young designer these definitions always confused me. Like many other web designers I thought about design from a purely visual standpoint. I was sure my job was to make graphics that were visually impressive. Even more experienced and less naive designers than my former self get caught up in this misconception, as non-stylistic problems like usability and conversion rates are ultimately solved in a visual manor.

Interestingly enough, Websters dictionary doesn’t even mention visuals. Why is there nothing but talk of function, planning, and purpose? Does this mean that graphics are not important? Not at all, the graphic appeal of a site can play an integral role in the success of a site. What these definitions do tell you is that design isn’t just about visuals. Design is really about the purpose and intention of what you are creating. This doesn’t just apply to websites, but any design discipline from industrial to fashion, product to packaging.

The “Graphic Design” Misconception

There is a widespread misconception design is primarily concerned with creating pretty graphics. The web is a very visual medium, so really it isn’t surprising. Combine this with the fact that the web is extremely intangible and it’s hard to blame anyone for the misconception. By intangible I mean that you can’t hold, feel or possess the web. At times they barely feel like real entities. Not only are they are hard to conceptualize, when you think about a site your first reaction is likely a mental picture of some form. In fact the visuals tend to be the most concrete tangible element of an entire website (ignoring non-visual browsing such as screen readers). When someone describes a website they can only really do so based on visuals or it’s functionality.

This visual focus naturally attracts people who have an appreciation for pleasing imagery. Many people who choose to design on the web do so because they are creative, visual people. This certainly was the case for me.

Many mistake web design as an extension of graphic design. In reality it is probably closer to industrial and interface design.
Another likely contributor is that web design is sometimes considered to be an evolution of print based design. Many traditional graphic designers have transitioned from print based work to the web. In many ways this is a very natural transition, as print designers are highly skilled in the elements of visual design.

Why Web Design isn’t Graphic Design

Web design requires the designing many aspects of a users experience with your creation than just the visual components. This is the overarching reason that web and graphic design are different practices.

If we examine print materials through our definitions of design, we can extrapolate that the purpose of graphic design is communicating information. This has many parallels to web design but it deviates in a key way: information is typically communicated in small amounts and sequentially. Meaning that with a brochure for example, you are likely to read each page in order of presentation. Other print collateral tends to be even simpler; you typically read the content top to bottom, left to right, and that’s the extent of it’s functionality. The functionality of print materials is very simple, well known, and consistent. Most of the time, layout combined with convention makes it self evident — just looking at the printed object is enough to understand how it works.

Web Design is its Own Practice

Websites differ; you are designing more than just a message. You design the behavior, interaction, function, and purpose in addition to the communication. A brochure has a single purpose and use; communicate information, turn the page to continue. Websites are creations people use for a wide range of specific outcomes and interact with in different ways.

When industrial designers are challenged with creating a new object they must evaluate all aspects of that object, including:

• What people want to get out of it
• How are they going to use it / interact with it
• Technical and budget constraints
• How will it be manufactured
• What material will it be made from
• What it should look like for aesthetic, structural, and functional reasons

While designing on the web is a bit simpler than industrial design, you have many of the same considerations, including:

• Site goals
• Interaction points (and abilities)
• Reliability
• Platform
• User base
• Usefulness
• Messaging & branding

The “products” that come out of web design are completely virtual, imposing a whole new set of requirements neither print nor industrial design face. Web design is truly it’s own practice and must be considered as such, and not just the evolution of graphic design.

Designing to Solve Problems

By definition design is the creation of something for a specific desired outcome or purpose. To expand that definition, the outcome is the desired solution that justifies designing in the first place. Thus your job is to create solutions to the problems that warrant them. Unfortunately, this job is often assigned to the marketing or user experience department. The designer is then left to “pretty up” everyone else’s ideas. Yet this isn’t the role of a designer; You can’t design a solution through visuals alone, you must do so by designing the “function” of the site, start to finish.

A designer’s job is to solve complex problems. This is done by through creating something that has specific functions intended to cause specific desired outcomes.

The function of the site is your solution to that need and desire. Everything the site can do, every element the site contains, should be a part of that solution. Any decision you make that doesn’t speak to the solution is either decoration or feature creep, adding to user confusion, maintenance costs, and page load times.

Functionality is the reason you design, there is a specific outcome you hope to create. Thus design starts through understanding functional needs. By defining the function of a website you’ve created a roadmap, marking the destination and pathways of how to get there. Designing with out a roadmap leads to random destinations. The final design may have redeeming qualities, but it won’t be as effective had you planned.

All design exists to perform a specific function. That function is based on the needs of the website stakeholders and those who will actually use the design. Because function is the core of all design every element of a site should support that intended function. Doing so addresses the functional needs of design.

Additionally, a roadmap is invaluable when working with larger teams or clients. With the goals in agreement, you can justify your design decisions based on them. In particular helping combat objections due to personal preference. The roadmap doesn’t just clarify your vision, but everyone involved in the design.

By designing the functionality first, all decisions can be qualified by end goals. Deciding to add a slideshow is simple if you know it will help achieve the site goals. For this reason, all aspects of a site tie back to functionality; Including content, graphics, layout, photos, etc… everything influences success or failure. Only by making decisions based on functionality, can you create the most effective site possible.

Now that you know the functionality layer needs, you are better equipped to explore the principles used to address them. More importantly, how to integrate functionality into your design process.