Throughout my 14 years in the design industry, I’ve used countless tools to work on my design projects. One of the first tools I used was the venerable design workhorse Adobe Photoshop, and it became my favorite tool for web and print design back in 2004. In the early days of my career, I considered Photoshop to be the most complete tool in terms of web design and mobile application design. Challenging Adobe’s dominance, Sketch arrived in 2010 and in my opinion revolutionized the UI/UX design process for Mac users. I loved Sketch and used it whenever I could for my web projects, but its lack of compatibility with PCs proved to be an inconvenient limitation in mixed-platform environments.
Second to content, the source of every bad, ineffective website design in history has resulted from trying to squish words and pictures into the wrong type of container.
For 20 years, since the web became a thing, web design worked one of two ways: by either designing and developing every single page of a website — which was costly and time-consuming — or designing and developing a finite number of templates that sacrificed some creativity and uniqueness for speed and cost-savings. Either way was a trade-off, whether in cost or creativity.
Thankfully, mobile devices came along and changed not only the way we do, well, everything in our daily lives, but a pleasant side-effect of their emergence was the introduction of Responsive Web Design (building one website with the same content regardless of browsing device). When we started building responsive websites, we faced the same cost vs. creativity trade-off — but, like we always do, we found a way to combat the problem.
Design systems — collections of cohesive components for creating websites — have been ushered in as a new way to approach web design.
This means that instead of designing page templates — how it’s been done since the beginning of time (well, since like, 1994) — we can build a design system, crafting dozens of smaller, modular pieces that are coupled together to create an unlimited number of unique pages purpose-built for the content at hand — website LEGO bricks, if you will.
On content-heavy websites, design systems help us minimize the cost vs. creativity trade-off. Instead of demolishing a website budget by building unique, one-off pages dozens of times over, the “pick-choose-assemble-and-go” nature of design systems enable designing for the content, quickly. We can think in terms of pages instead of templates.
While the traditional approach will always have value on highly-custom, “white glove” websites, design systems are particularly good at saving time on projects where content abounds.
Not only do design systems help save time, they can make the experience better for readers and customers. Instead of shoehorning content into two or three global page templates, content can live in the shape that suits it best. That means you don’t force a blog post into a copy of an About Us page. Everyone wins when you get your message across more clearly and efficiently.
This also means reducing post-launch website maintenance headaches. When you need a new page, you can assemble it using existing components instead of inventing a whole new wheel (or worse, copying an existing template and dropping in page content for which it wasn’t built). Your new page will look unique — and more importantly, fit the new page content in the best possible way. This usually means you can get more mileage out of a website that uses a design system than a website built in a previous era of the web.
Resulting from the need for more elegant mobile websites, design systems make us build small pieces (components) into larger pieces (pages). This means each component — created on a micro scale — is built as an effective piece of design for that type of message. We design at the content-level instead of the page- or template-level.
So far, we’ve found design systems the most helpful in multi-editor, content-heavy worlds like healthcare and finance, where there are tons of necessary, regulated pages (despite our content team’s best efforts to minimize page count and streamline content).
The traditional approach of building specially-designed, non-modular pages still certainly has value — and we still follow this process daily — but in many cases, design systems help save cost and spare the end-user experience when there’s more content than a simple “brochure” website.
Our expertise is only as good as our ability to share it with you. Here are the latest thoughts and ideas from our team.
When I tell people that I’m a user experience (UX) designer, most people nod politely as their eyes glaze over for a second, and they try to move the conversation along. Early in my career I thought they were completely uninterested, but over time, I came to realize that many people simply don’t know what UX is and might feel awkward about asking. On behalf of misunderstood UX designers everywhere, please allow me to introduce you to the wonders of quality UX and why you should care about it.
What is a visual brand identity, you ask? It’s only one of the most important things about your business. Branding is far more in depth than aesthetics. It delves into the core of why you exist as a business. It requires hours of research and analysis to ultimately cultivate something visually appealing that communicates your message: your visual identity. A visual identity is comprised of a system of external expressions such as a logo, color palette and texture, typography, iconography, illustration, photography, motion principles, and composition.
I went fishing the other day and all I caught was a good UX lesson for you. Here’s the deal: my daughter entered the neighborhood annual fishing derby. For a decent UX guy, I’m a terrible fisherman. But I do know how to bait a squirming worm and unhook the slimiest of fish.