The Front End Design Conference kicked into high gear in its 11th year, and the Designzillas development team drove down to St. Petersburg, FL to check out the design and development-focused conference. Here are some of the highlights from our sessions:
Design Systems at Indeed
Amber Stickel and Andrew Fischler spoke about design systems, which are essentially a unified visual language and UX pattern library. They are composed of three main parts:
- Design - the visual aspects of the library
- Development - the code needed to create the visuals and make them function properly
- Documentation - the instructions that explain how to use the design and development components
(If you don’t display any instructions on how to use them, the proper intentions of the components can get lost or misused!)
Design systems benefit projects immensely because they help you build faster and more consistently. Salesforce, Uber, and Airbnb have great examples of design systems that can be viewed as documentation starting points for your own system.
But creating design systems wasn’t always so easy. The industry has changed immensely in just the past few years. Before, we were limited to just the Adobe Suite to create design systems. Now, we’re in the golden age of design system tools, with a myriad of tools to choose from that are specific to UI design and even animation, such as Sketch, Flinto, Principle, Figma and more.
With so many tools, Amber and Andrew narrowed down the presentation’s focus to the tools necessary for each main part of the design system process:
There are many design tools that can help create the visuals for your system. Once you decide on one, be sure to explore the community for tips, such as Sketch’s plugin community, which is full of great tools and documentation.
Here are some design tools you should consider:
Here are some development tools you should consider:
Also, note there are two possible ways to create your styles in the development phase. You can use either:
- CSS/SCSS with pre- or post-processors and CSS modules: a more traditional approach where styles are separate from other code files
When you develop your design system, make sure it works properly under different conditions. Ask yourself:
- Do the components work responsively?
- Are they cross-browser compatible?
- Do they work when it has more content added?
Create documentation for your system to explain to its users how to use it. If your design system just displays a group of styled components, but no instructions on how to actually use them, the proper intentions of the components can get lost or misused.
Here are some documentation tools you should consider:
- Pattern Lab
- David Hund’s Github overview of library generators per technology stack
Designing Design Systems
By Jared Ponchot @jponch, Lullabot
In his session, Jared explained a design system as a set of principles, constraints, patterns and documentation that empower teams to create, maintain and extend a design efficiently and consistently. In his take, a design system is made of four main parts:
Depending on the needs of the project, you may or may not need all four parts of the system.
Redesigns are usually done because of pain with the current design.
- Jared Ponchot
If used correctly, he also mentioned that design systems are great for defeating design problem “villains” such as inefficiency, inconsistency and scale. You use these parts not only to design, but to solve the problems you’re designing for.
Jared also stressed the importance of creating a design inventory for your design system. A design inventory is a snapshot of the current design system at the start of the project, which can include one-off pages and design patterns, and the many ways buttons and navigation (including subnavigation) are handled. At the start of a project, capture the current design inventory of the website to decrease time in creating one later on.
Always Designing: From Designer To Design Leader
By Andy Vitale @andyvitale, SunTrust
Andy Vitale spoke about the process of transforming from a design student to a design leader, and all the steps in between. He talked about the many phases and changes happening in a development/design career. More specifically, he covered the process of learning to let go of creating the work and becoming more comfortable leading teams who create the work.
Here are some recaps of suggestions he made for becoming a design leader:
- Empathize - Let the ego go. It’s not about titles, it’s about driving discussions and influencing design conversations. Furthermore, it’s not about solving a problem it’s about solving the right problem.
- Communicate effectively - Don’t speak in technical terms. Explain design terms to clients in an understandable way that shows you can meet expectations and goals. Make boring technical things exciting.
- Collaborate - Work well with others, and also ask them how they’re doing outside of work. Make the extra effort to build relationships as they’re the keys to the team's success.
- Empower others - Stand on a pedestal and soapbox to tell people the work your team is doing. Celebrate the little things and good work.
- Be engaged - Listen to what people are saying. Don’t correct people on the spot every single time, but try to explain other ways of achieving results in an easier manner.
- Trust - Be open, honest and vulnerable. Ask for feedback and admit when you’re wrong. Be accountable and authentic because that’s what gains trust.
- Have a vision - Don’t just have a vision, also be able to speak on it and communicate it—and get others excited about it.
- Be persuasive - Leaders can’t just tell people what to do if they want the best results. They have to make them want to do great things.
Andy also spoke about the why and how of becoming a design leader. It’s not glamorous—it’s all about the work ethic, as paraphrased here:
At the end of the day, titles don’t mean anything. You can be a leader despite a title. Being a leader is a way of being and acting, not a title. People don’t just give you titles. You get it for doing the work you weren’t told to do or didn’t have to do, but you did the work anyway. That’s what leaders do.
Making Sure the Juice is Worth the Squeeze
By Rob Harr @robertHarr, Sparkbox
Rob spoke about the intricacies of internal communication and culture both inside of a company, how it's perceived by clients and how to improve that perception.
Part of that shift is changing the terminology we use every day in front of clients. Words not to use include:
- Resources: Instead of resources, use the word talent. We work with people who have immense talent and they should be represented that way.
- Agency: We’re no longer in the old Don Draper era of agencies. We’ve evolved from that era and should be better represented. We are a team.
Another great tip for changing the client’s perception happens during initial collaboration with clients. When doing client collaboration it’s important to recognize that you’re working with the client, not for the client, and show that during collaborative brainstorming meetings. Promote cross collaboration and encourage all team members to contribute to the decision-making process (even the quietest ones!).
In consideration to improving internal processes, it’s important to remember that there’s a difference between talent producers and talent consumers. Talent producers breed good talent, consumers just use them. It’s important to build our talent up, including our local entry-level talent and recent graduates.
Apprenticeships are a great way to help people move up from traditional education settings and into the professional web design world. And the great part about apprenticeships is that they’re also a cost-neutral program. If you train them well enough (which you should), they can be hired after the program, essentially creating a cost-effective employee training program.
Also remember that when it comes to client and people in your company, seasons start and seasons end, but just make sure to end them well. The end usually colors the experience as a whole and how we view it. Don’t end client or employee relationships badly.
If you leave on a good note, this helps create a healthy culture of alumni, where people move on from working with you, yet they still serve as ambassadors for your work. Their stories were and still will be part of your company’s story and culture. Let them continue to be advocates for your brand.
Designing Better Features by Solving Better Problems
By Wren Lanier @heywren, Highrise
Wren spoke about figuring out how to solve problems, by first figuring out what the problem actually is. One way was during the discovery phase, ask the client questions to create empathy and validate your previous assumptions about the company. Identify pain points by asking questions about:
- Things that are difficult
- Things that are slow
- Things that are too expensive
- Things that are too complicated
Note big opportunities for wins with the client. Provide alternatives to solving the client’s current complex problems and especially problems that they are currently solving with subpar solutions.
A great tip for selling features to clients that you know are absolutely necessary: make connections between user problems and business problems to sell the value of the solutions you want to build.
Until Next Time...
Our development team had such a great time at the Front End Design Conference. Here’s a quick video recap of our weekend in St.Petersburg. Until next time, FEDC!
Hearing about growth-driven design for the first time? Learn more about the three pillars of GDD and how this methodology can help you solve your greatest marketing challenges.