Updated January 14, 2024
At Evolving Web, we love sharing knowledge and empowering professionals to do what they do better, faster, and with less resistance. Our design experts often publish useful resources to share their expertise, best practices, and insights from our projects. We’ve rounded up some of our best resources below. You'll find something for the whole team—from designers and content creators, to strategists and web editors.
Jump to the sections below:
- How to build a design system
- Use design tokens and Figma Variables
- Collaborate on design direction with stylescapes
- Leverage your site’s existing design
- Optimize images for your platform
- Make your images accessible
How to Build a Design System
Good if you want to:
- Improve consistency across assets
- Increase designers’ productivity
- Free up time for complex, high-value tasks
Share with:
- Designers
- UX strategists
- Project managers
Design systems go beyond asset collections and pattern libraries. They’re a set of standards, style guides, and components that increase efficiency and unify your brand experience. Think of it as combining a pantry with a cookbook: you don’t have to grow your food from scratch, nor do you need to experiment to make a meal. Instead, you have a collection of ready-to-go ingredients and tried-and-tested recipes.
With a good design system, there’s no need to create and implement digital components from scratch. This allows your designers to focus on hierarchy, flow, and more complicated features.
➡️ Read the guide: Building a Unified Design Language System.
Using Design Tokens and Figma Variables
Good if you want to:
- Minimize repetitive tasks and ensure consistency
- Speed up the design process and create complex prototyping flows
- Take a systematic approach to scaling your design systems
Share with:
- Designers
- UX strategists
- Project managers
This article explains how design tokens work and how to implement them in Figma using the Variables feature. It includes practical instruction for creating Collections, defining Categories, and choosing properties. You'll learn how to apply a change uniformly across your entire design project, saving you time and allowing you to focus on more complex problem-solving.
➡️ Read: Using Design Tokens and Figma Variables to Create Dynamic Workflows
Collaborate on Design Direction with Stylescapes
Good if you want to:
- Communicate abstract ideas for a visual aesthetic
- Ensure everyone is on the same page at the start of a design project
- Demonstrate how the end-product might look without locking yourself in
Share with:
- Designers
- Art Directors
- Project Managers
A stylescape is a collection of colors, typefaces, shapes, and other design elements that are carefully presented to communicate an overall aesthetic. It gives the viewer a more accurate idea of the final product than a moodboard would. But it's faster to create and offers more flexibility than mockups.
➡️ Stylescapes: a Better Way to Collaborate on Design Direction
Leverage Your Platform’s Existing Design
Good if you want to:
- Help colleagues leverage your platform’s design
- Promote UX best practices in your organization
- Reduce poor practices that break the design
Share with:
- Web editors
- Content creators
- Site admins
This guide is packed full of actionable tips to help you harness the full potential of your platform’s design and avoid common pitfalls that weaken the user experience. We explain how to create new pages using web components, develop compelling content, and use WYSIWYG for unique content needs. It’s a must-read for anyone who has admin permissions to update your site.
➡️ Read the guide: Maintaining and Growing Your Digital Platform: UX/UI Considerations.
Optimize Images for Your Platform
Good if you want to:
- Optimize images to create a more valuable user experience
- Discover the best tools for sourcing and editing images
- Fix common issues such as blurriness and slow load-times
Share with:
- Designers
- Web editors
- Content creators
Images are a powerful tool for enhancing the user experience, communicating your message, and connecting with audiences. The catch? They have to be spot-on. Done wrong, images can leave a poor impression, alienate users, and slow down your site.
Read and share our guides:
➡️ Picture Perfect: Selecting and Preparing Images for the Web
➡️ Troubleshooting Blurry SVG Icons With Sketch and Adobe Illustrator
Make Your Images and PDFs Accessible
Good if you want to:
- Comply with accessibility standards and regulations
- Improve the user experience for people with disabilities
- Reach a broader audience with your content
Share with:
- Designers
- Web editors
- Content creators
Your digital platform may have been designed to meet accessibility standards, but what about the content that you upload to it? The standards apply to images and PDFs too, but these assets often get overlooked.
Learn about common accessibility issues, such as using the wrong PDF rendering tools and hiding important information in images. Our guides offer tips, tools, and examples to help you provide a more inclusive digital experience to all.
Read and share our guides:
➡️ How to Improve Accessibility on Your PDFs
➡️ How to Use Alt Text and Accessible Images
Need Design Support on Your Next Project?
Evolving Web has spent more than 16 years empowering organizations to create deeper connections through valuable digital experiences. Our Design Team harnesses research, strategy, and innovation to unleash the creative potential in every project—no matter its size. We give you the confidence and support to take your digital platform to the next level.