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:

FEDC 2019 - Amber Strickel and Andrew Fischler

Design Systems at Indeed

By Amber Stickel @ambling_amber and Andrew Fischler @ajfischler, 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:

  1. Design - the visual aspects of the library
  2. Development - the code needed to create the visuals and make them function properly
  3. 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.

FEDC 2019 audience

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:

Design Tools

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:

Development Tools

There are currently hundreds of JavaScript libraries capable of creating a design system. With so many options of tech tools on the development side to build with, choose the one that allows you to create both reusable components and modular styling.

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

    OR
     
  • CSS in JS (as done in JS libraries such as React): This is another approach where the styles are done in JavaScript, which renders the styles in real time, only loading the styles and classes needed for that page. Styled Components and Styled-System are great examples of this method.

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?

Documentation Tools

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:

FEDC 2019 - Jared Ponchot

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:

  1. Principles
  2. Constraints
  3. Patterns
  4. Documentation

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.

FEDC 2019 - Andy Vitale

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.

FEDC 2019 - Robert Harr

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:

  1. Resources: Instead of resources, use the word talent. We work with people who have immense talent and they should be represented that way.
  2. 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.

FEDC 2019 - Wren Lanier

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.

Download FREE E-book

blog author

Author

Leisy Vidal

Digital Designer at Designzillas, Leisy excels at creating designs that are not only beautiful and up to date, but user-focused and strategic—all in record time.

You May Also Like