When your website is small, you can use design tools like sketches, sitemap and color schemes to create a consistent and cohesive look and feel. What happens as your team and website grows? How do you keep your website design and functionality from being a mess? You may start out by creating a design style guide or building a pattern library. Eventually, you’ll need something more. A tool like a design system.
What is a design system?
A Design System is a documented library of colors, fonts, buttons, components, visual elements and other design features that helps to create a consistent user experience. It is more than a style guide or a pattern library. A style guide focuses on the design or look and feel. Pattern libraries focus on building and providing a consistent code base. Your design system pulls both the style guide and pattern library into a single, documented system for your entire team to use.
Start with the tools that you know. You can build your own using a CMS that you are familiar with. To get started, you can look at Brad Frost’s Design System Boilerplate. You can use the boilerplate as a starting guide for building your own system. Next, review and document your visual elements, design features and other components that make your user experience unique.
When you build your own, start small and build as you go. Remember, the best solution is the one that you and your team uses. Refer to these tools and resources to learn more about how to build a design system:
When I build a prototype, I start with pen and paper. A paper prototype (blog Post) helps me to develop my ideas better. What if your drawings don’t get the ideas across to your team or client? What do you do then?
Building Your Prototype in a Browser
When you create your prototype in the browser, use the basic tools for building the web–HTML and CSS. HTML and CSS let your build and make changes to your prototype quickly. You and your designers can focus on designing and testing finicky UI components like tables and drop downs.
What if HTML and CSS isn’t enough to get you started quickly? You want to build a prototype not focus on the layout. A framework like Bootstrap or CSS Grid can help you get started quickly.
Why CSS Grid?
You can build your prototype using other frameworks like Bootstrap. CSS Grid gives you more flexibility, simpler markup and no 12 column limitation. When you use a framework like Bootstrap, it can look as though it was built using that framework. If you need more flexibility in your branding and design, then Bootstrap won’t work for you. CSS Grid gives you more creative control.
Build a CSS Grid website by creating the markup yourself. Grid By Example is a good resource for learning how to build what you need with CSS Grid.
CSS Grid is another tool that you can use to build prototypes quickly. Layout templates, grid builders and online examples all can help you to create your prototype quickly so you can focus on the user experience and not the tools to build it. When building a prototype, the best tools are the ones that you use.