May 5, 2017 What is a Full Stack Designer? How Do I Become One?

Many people in the tech community have heard of a full stack developer, but what about a full stack designer? Does that simply mean a versatile designer? In the not-so-distant past, designers had clearly defined roles and titles: UI designer, UX designer, IA, IxD, etc. These were all described as unique jobs with unique talent requirements, and all performed by different people. But those days are coming to an end — fast.

What’s a full stack designer?

“Full stack” does not mean “do it all.” It means that a person has developed multiple skills that allow them to complete a design or development project independently. To that end, a full stack designer is someone who can move a project through an entire life cycle of the design phase. This means moving a project through initial conception, wireframes, UI and visual designs, low-fidelity prototypes (e.g., Marvel/Invision), and front-end prototypes (e.g., HTML/CSS, Webflow, Framer.js, etc.).
The idea of front-end code is a gray area for a full stack designer. We’re not suggesting that you be an equally great designer and front-end developer. But you should understand how front-end code works and the technologies behind it. Designer-friendly tools such as Webflow, Framer.js, and Proto.io can all help you translate your static designs into something interactive. The goal is to be able to successfully articulate how you envision a design functioning in its completed state.

“Regular” designers vs. full stack designers

Full stack designers are multi-skilled designers, able to understand and maintain an awareness of the entire product structure. And they can customize their own skills list for a particular project. For instance, one challenge might require you to use skills in UI design and thinking through interactions to solve problems, while another challenge might require you to think through the data and develop clear UX flows and solutions. Full stack designers have all of the necessary skills for both, and can pick and choose the right ones for a given project. This makes the process more seamless, allows for higher expectations when it comes to finished products, and saves time and money.
The biggest difference between a “regular” designer and full stack designer is the ability to focus on the big picture. Full stack designers can employ UX design, design patterns, critical thinking, unique techniques, and tools to complete a project. The result then is a systematic, cohesive product.

How do I become a full stack designer?

Here a few pieces of advice on becoming a successful full stack designer:

• Learn everything you can.
• Don’t get stuck thinking, I’m a UI designer, so I don’t need to care about the wireframes, the IA, or the prototype… or even the finished launched product. You do.
• Become very knowledgeable about sorting through data, content, and structuring an IA document. This in turn helps you understand wireframes, navigation mechanics, and page layouts.

You should also have the ability to take inputs, data, content, feature requests, etc. and develop a series of wireframes that follow UX best practices, solves problems, and creates a user-friendly experience. You have to be able to interpret wireframes and design a UI around them — one that aligns with a client’s branding, solves problems visually, and expertly crafts a complete visual representation of a product. Finally, you should be able to take those complete designs and translate them into working front-end code — or least a series of interactions — to show your thinking for interactivity, responsive breakpoints, functionality, various UI states, etc.

How does a full stack designer fit into Topcoder?

The main benefit that we have as designers is that we’re the first step of most projects at Topcoder. That means we have the challenge, responsibility, and power to influence the entire project. As such, we should be thinking about the finished product while we’re planning and designing at the beginning of a project.
That said, a full stack designer within Topcoder is someone who completely understands the development process — knows how websites and apps are built, knows the limitations of the development process, and how to design around those limitations; that means the ability to understand when a layout or feature won’t work and, better yet, the knowledge and experience to design a solution that does.

Using different design skills simultaneously

For a specific challenge, you may only be submitting UI designs. And if that’s the case, you should have a clear picture of how the UI elements should function, and what the interactions look like. These are not only all great things to include in your submission, but it also shows us (and more importantly, the client), that you’re truly thinking through the problem and can see the end results clearly.
Within each of these areas of expertise, there is more to learn and discuss. But at a high level, these are all the traits of a great full stack designer — a mix of complementary design skills for projects at Topcoder and beyond.