Google “holistic web design” and you’ll see a lot of results that encompass health and wellness. But that’s not really what designers and developers usually mean when they mention holistic web design.
In the most simple of explanations – we’ll dig deeper after this – holistic web design is a process of thinking about all the parts of a project, and understanding and accounting for how they connect. Great content will fall apart if the visuals are poor. And equally, the best-looking website in the world doesn’t do anything if it isn’t highly usable. These are the issues that holistic web design solves before they even become problems.
Here’s how it works (and can work for you), with examples from the Design Shack Gallery.
Holistic Design Philosophy
When it comes down to it, holistic web design is about a process. The steps and planning can be a little different for every design/dev team, but they do have a lot of commonalities.
Design, technology, performance and business impacts are major considerations from the designer standpoint. Other phases such as planning and research are often conducted by someone else, although if you are a one-person shop, you might perform these roles as well. These elements can be further broken into other procedural steps as well: content and messaging, UI design, UX design, visual design, development, testing, training, and feedback.
All these steps can look different depending on who is planning the project. One of the best checklists to help you make sure you fully understand the idea behind holistic web design is from Webdesigner Depot. The article includes six questions to ask before you make anything:
In web design and development, cause and effect can usually be seen almost immediately. Things happen fast, and everything you do will affect your users, yourself, any employees you have, your shareholders, and some people you might not even consider in the equation. It will affect all of your lives whether for good or ill.
Planning and Research
In the planning and research phase of a web design project you should really do three major things:
- Identify goals for the project
- Define the scope of the project
- Define an audience or user persona for the project
These elements will shape how the project comes together and should be the foundation for everything else moving forward. If a project doesn’t meet project goals or fall within scope, it should be re-evaluated.
The design phases are often the most fun parts of a website design project (for creatives, anyway). This is when the wireframes, content, and visuals all start to come together.
Tasks in this part of the process include:
- Drawing a sitemap and wireframes (based on the scope of the project)
- Creating and gathering all the content – photos, text, video, animations, etc.
- Crafting visual elements that include anything from mood boards to actual palettes for the project
- Developing a strong layout and hierarchy with an efficient information architecture
Technology and Performance
One of the greatest functions (and limitations) of a website design can relate to technology. Will the website that you’ve designed actually work? And does it work efficiently and understandably for all users?
There are too many technological concerns to list from website speed to tools that you might incorporate and integrate to meet goals. The takeaway is this: They need to work for the website owner (collecting the right data in a manner they understand) and the user (the site has to be fast and easy to use).
When it comes to performance, there are the technical considerations plus one more – search. A solid segment of most website traffic is directed to a website because of search. Make sure to incorporate an SEO strategy into the design. (Something as simple as uploading images into the content management system relates to search, so plan for it before you get too far along.)
You can weigh the pros and cons of what tools to use, CMS to install, and plugins to offer based on the scope of individual projects. But know that technology and performance are not a one-size-fits-all solution.
Once you have a great design, the work isn’t done. A good holistic website strategy looks at how the design and the function help a company meet business goals as well. (That’s probably why a website is part of the overall strategy in the first place.)
How will the website design actually impact the business? Is it to help people find information and learn about a company? Is it made for sales or e-commerce?
This is where other considerations come into play as well: Who will be using the website (or maintaining it) on the client side? What feedback, return on investment or analytics data shows that the project is working or is successful?
You probably want to have an idea of the answers from the start. You might design a wholly different interface for an e-commerce design than a website that is purely informational. You might connect the design to other brand channels differently based on the overall goals.
What might be most important though is the circle of feedback. When a user interacts with the website design, they tell you something with every click. You can use that information to ensure that users are performing the desired actions and interacting with the “right” content. You can also use this information to make necessary adjustments. (And that’s the feedback you return to users by making the design even easier for them to use.)
But don’t forget loyal users. This is great advice from the Webdesigner Depot article:
The thing is, those small changes can completely throw existing users, especially if you don’t show them where their old favorite feature went. If you have users who use your site or app every day, it’s important to consider how changes you make will affect their daily lives.
So when approaching a website design project holistically, you are actually thinking about all these things at the same time. The previous and next steps, as well as goals and scope, should always be part of the conversation.
Everything about the design is interrelated. And understanding that is at the root of making a beautiful website that just works.