The Zeda Labs Living Style Guide and Pattern Library is a byproduct of our move to a more responsive, nimble, consistent & intuitive website design workflow.
We’ve worked to distill most of the Zeda Labs interface into a set of modular pieces, forming the style guide and pattern library you see here. By documenting and assembling a reference site of our brand assets, illustrations, and UX patterns, we are able to speed up our build process, solve communication issues, and keep the brand and design consistent across all mediums.
A common lexicon of code and UI elements benefits us in a few ways:
We want to build websites that create amazing experiences for users and are fast, friendly and work well on any device. What follows are our principles of thinking, which allow us to execute consistent quality. These are the things you should consider and think about when working for Zeda Labs and building something online with us.
Something goes here to describe this section.
Good design is easy to digest—the brain shouldn’t have to expend a ton of energy to figure out what the heck it’s looking at. With any luck, people will just “get it” without needing a 6-section explanation.
This goes beyond clear, easy-to-read copy. People sometimes need guidance to make decisions, so a menu with a list of 12 inline items may seem daunting. Organizing with some hierarchy (size, color, icons) can help highlight the more common choices, which allows someone to find what they’re looking for faster.
Another good example of digestible design is the new user guide, often presented as staggered tips that a person can process one at a time. But imagine the opposite, hitting a brand-new user with a whole stack of instructions, removed from the context of the product. No one likes a confusing surprise.
Consider all the decisions you’re asking someone to make with your product to get to the bottom of the funnel. The brain has a limited amount of cognitive resources during the day—using them up needlessly is rude.
Good design is honest. Aside from understanding the words in your value prop, you need the user to understand the actual value. Being coy or unclear about your product isn’t going to win any fans.
Related to value, pricing is an area where clarity is everything. Users aren’t going to click “Buy now” if they can’t figure out what you’re asking them to pay. While shady “free trials” that switch to auto-billing might be the norm, I doubt they’re winning any popularity contests.
This may sound cheesy, but a good plan is to simply follow the Golden Rule. Explain things like you’d want them explained to you. Make things as clear as you can. You know what you’d expect out of the products you choose to use, so don’t you dare build something less.
Good design is easy to trust. Before asking someone to complete an action, make every effort to help them understand why the task is needed. Being honest and clear in explanations builds trust at each step, leading to increasingly easier conversions down the funnel.
Consider Uber (and Lyft, depending on which way you swing). They’ve made catching a ride so easy that a 100-year-old industry is now in chaos. The app saves your payment info, which you might not feel comfortable exchanging with a stranger, and facilitates a trustworthy, painless transaction.
Removing doubt will create a growingly invisible experience. As decisions require less and less resources, using the product becomes easier and more enjoyable.
Ground-breaking design is awesome, but design that converts is better. New frameworks and flashy plugins might look nice on Dribbble, but if no one is clicking the “buy” buttons, you’ve got a problem.
Platform guidelines exist for a reason. While it might seem that making your product look exactly the same from platform to platform is the main goal, be careful to pay respect to the sticky details of each OS. Using familiar patterns, icons, and presentational styles is a great way to look native, even if you’re not.
Testing your solutions on actual devices goes a long way to ensuring things feel at home in each environment, which is where a tool like InVision shines. Pretending to be a user is easier when you’re not also having to pretend to use a device.
It’s been said that an idea isn’t enough anymore, that execution is what wins the war. Ironically, the more the team executes, the less the user has to. The more simplicity you can bring to a complex problem, the more delighted the user will be with your solution.
The ultimate delight is when someone forgets your product is a “product”—where it’s so useful that it doesn’t even read as a product anymore, just simply as some useful thing in a person’s life.
The Zeda Labs website has many different components to it and we want to ensure that we don’t create a lot of technical debt. To reduce debt and increase consistency we make decisions based on the following principles:
When we design for the web, we are always thinking about speed costs. Before you add an image, a bloated code feature, or something that weighs a lot of kbs ask how it’s going to affect the speed of the site and if it’s worth it. Does it add value to the user that it makes it worth the cost? Are there ways to reduce the speed cost? The websites we build must continue to be speedy and fast. Google loves fast sites and ranks them higher in search engines and mobile users need to conserve data so we keep speed a top priority.
Our visual style is clean and understated. We only use as many elements as it takes to get the message across and we prioritize the words. As we reduce the number of styles we rely on, margins, type scale, color, and icons become more important. We carefully think about how we place these elements so we are guiding the reader to the right places. We make sure the site is simple, clean, and easy to navigate. Users can easily find their way around and we can subtly lead them towards funnels to convert them.
What is the simplest thing that could possibly work? Simplicity (and avoiding complexity) should always be a key goal. Simple code takes less time to write, has fewer bugs, and is easier to modify. The code we develop should also be easy to understand by another person and well documented. The future you who has to maintain code often remembers as much of the code, as a complete stranger, so you might as well always write for someone else. A memorable way to remember this is “Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.”
Modularity gives structure to our design. A structure that ultimately helps us create more flexibly and efficiently. Modules lead to a consistent visual vocabulary and voice. Reusing code improves code reliability and decrease development time.
Reinventing the wheel can be slow. Before building something new we first consider the design solutions we’ve already created in the pattern library. It doesn’t have to lead to the same design again and again. Modules can and should be built to allow and encourage variety. Variety within the module itself and variety in how they’re combined to form a greater whole. By designing and creating reusable (and easy to update and maintain) “building blocks” of design patterns it makes it easier to construct and build pages that work seamlessly with each other.
Our audience, needs to be able to design a lot of different types of pages and content, easily, for a variety of uses. Keep the system as simple as possible.
We build future friendly websites so that as things change the website can evolve with it, without requiring an expensive rebuild. By anticipating what’s next, we can react to today’s concerns but also build long-term value for people and businesses. We structure our content and mark up. We style things in a fluid nature so they work on any size or device. We understand the user context changes from device to device and adjust accordingly. We take advantage of the technologies available to us, if it enhances the experience.
Future-friendly thinking encompasses lots of ideas: web standards, content strategy, progressive enhancement, responsive design, and more. However, it’s far bigger than any one approach, technology or technique. It’s here to help us think beyond our current project scopes and help us prepare for a future filled with innovation and constant change.
We build from a content-first approach. The words are the most important thing on the page, it’s what motivates people to take action and buy. The designs job is to amplify the impact of those words. Think about where you are leading people.
How does this kind of content support the overall site goals?
Why would a user want it?
What is the organization accomplishing by publishing it?
What does the organization want the user to do with it?
Just as it’s critical to establish site goals before launching into design decisions, you have to know what each type of content is intended to accomplish before you can make decisions about how you need to treat it in different contexts. Otherwise, how can you ensure that content keeps doing its job as it flexes and twists to meet the needs of each device it’s displayed on?
Design Matters, but Copy matters first. It’s okay to shorten copy when needed to make the design better, but not if it takes away from the mission. In that case, the design can suffer a little bit. 🙁