logo-text

The Ultimate Guide To Full Stack Design

I get it.

It’s hard to be a web designer these days.

Trying to juggle between customers, product managers, developers and all the other people who just want us to make their product “pretty”.

There’s so many trends to follow, so many new tools to learn and so many problems to solve in the work we face.

And yes,

Web design isn’t about making things look better, but about understanding why we design the way we do and what should serve the product.

The good news is, the last years has been game changing for web designers with the rise of responsive design and rapid prototyping methods.

Now, with the tools we have in store, you don’t have to run through all this process of explaining why you did it, but to make it yourself – design to development.

So when you’re ready, use this guide to understand what is full-stack design and why you must learn it.

Let’s get to business.

 

Table Of Content

 

Why you should care about full stack design

Here’s a story for you.

We’ve got a UX guy called Jack.

Jack has just finished his UX research, left an office full of post-it notes and handed you forward his specifications while hoping for the best.

From there, you took the Axure file or Invision presentation he sent you and started to design a beautiful interface.

The problem is,

After working for hours (or maybe days) on the user interface, you’ve found out that developing wise, you’ve made a fundamental development mistake and now Jack or your boss is telling you to redesign the whole (damn) thing again.

Sounds familiar?

Well, I bet it’s not you. That’s because of our current design process. Where motivation ends – frustration begins.

But what if… Could we do things the other way around?

Instead of the old school linear process, we could have a new process that would tie up the product and the process together.

full stack design new process

Psst..Full Stack Designers

They were used to be called rare unicorns, but in fact, they’re right here, walking among us.

According to Vladimir Jovanović,  full stack designers simply mean – designers who are cross-disciplinary and have the ability to start and finish a project by themselves.

Does it mean they should do everything alone? Of course not.

In a world ruled by product teams, full stack designers don’t have to be the best designers nor the best developers.

Just think of them as the missing piece the product design need.

As a clear bridge between usability, design and development.

With the ability to deliver fully interactive prototypes, full stack designers can create prototypes that demonstrate not only functionality but also user experience and design through micro interactions.

Now,

The product team has the opportunity to decide whether they want to create a full version of its prototypes or go back to the drawing board.

That way, each person on the product team can work independently without relying on each other.

See? It’s much better to build products this way!

Full Stack Design Old Process

 

How to become a full stack designer?

Here’s what you should do as a designer in order to become one:
 

Learn UX design

It’s important to understand a human-centered approach to design.

Creativity and agility are must-have traits.

Your main goal is to look for a solution for the problems the team is having during the product establishment process.

Then,

Start with a simple pen and paper, express your ideas clearly by considering every detail you have collected from your team/clients.

In order to save time (a lot of time), design in Sketch.

In case the company uses a design system or pattern libraries it’s not more than building lego blocks on a canvas.

No need to use Balsamiq or Axure which would consume much more time from the process.

Then, you can deliver a simple block framed prototype.

This would give the rest of your team small tasks before you start with more detailed prototypes.

Full Stack Designer Definition
 

Learn How to Code

Now it is time to get into more detailed design.

You could possibly export your design from sketch to Flinto or Principle, but it won’t show the true essence of your prototype – which is interactivity.

Therefore, you should learn how to code Html5, CSS3 and Javascript/jQuery.

Using tools like Framer, Webflow and code editors,  you can create fully interactive prototypes that would simulate a full blown product.

As we mentioned earlier, your purpose in making interactive prototypes is to add micro interactions and functionality to your static design concepts.

Therefore, you can break the myth of the “right brain thinkers” and “left brain thinkers” since you deliver a combination of creativity and technical capabilities.

A little note:

Now that Sketch recently released version .43, you can export your designs to code straight from sketch so you’ll have a better starting point for creating interactions.

Furthermore, Airbnb recently announced their new react library that completely integrates with sketch. This game changing feature just proves us the need of the full stack designer in a team allowing him to Bring real data to the product designs — including traditional APIs and GraphQL endpoints.

Add this feature to the product system of design components and you got yourself a brand new efficient and fantastic workflow. I am thrilled.

full stack design thinking

Conclusion

As creatives,

We were taught to think in a certain way, to go in a more traditional path.

But not anymore,

We find ourselves in the middle of the most exciting time in history. Where technology and methodologies change in a fast pace.

All we ever wanted was to craft our ideas into a beautiful message.

And now in order to stay in the game, we have to be in constant learning mode, ready for tons of changes.

After years of being suppressed,

We have the opportunity to be on top of the food chain in our product teams.

Lead people and most importantly deliver valuable impact we always wanted to make.

Yes, I know it’s not going to be easy, but we actually have an opportunity to design our own career paths.

And I’m sure,

It’s going to be a magical journey.

Yuval Keshtcher

Head of Marketing at UX Salon
Product designer,Founder of the largest UX writing discussion group in the world “Talkin Microcopy: Writing UX”
Guacamole enthusiast.

8 Comments

  • Jerome Williams

    A designer that develop is not sustainable in large production environment, where the software architecture is so complex that requires years of practice to be mastered. I really think that designer must understand how software works, but the real skills are about a deep understanding in how to design product, service and business. This is the difference between a skilled artisan and a real designer.

    Another fundamental skill for a designer is to learn to SELL design. We are accountable for the product vision, and it is our job to let every project stakeholder to fully understand the design project. If we focus on production, we lose the big picture, and our projects will always be limited.

    • Yuval Keshtcher

      Hi Jerome Williams,
      I agree.

      Simply having an “idea” of how the product would be is worthless.
      you need to have proof of how the product actually going to work.
      That what full stack designers are all about.

      Thanks for the great insights,
      Yuval Keshtcher

  • Brian Miller

    As from my perspective; The full-stack designer is a professional who is well-versed in graphic design and web designer (HTML & CSS) with additional basic developer skills of JavaScript, PHP and MySQL and the one who can come up with rapid mockups of wireframes using html/css and jquery to present his UX concepts and also the person who has been responsible for a design project from start to finish.

  • Theodora Paluck

    Hello there! I could have sworn I’ve visited this website before but after going through some of the articles I realized it’s new to me. Anyhow, I’m certainly delighted I discovered it and I’ll be bookmarking it and checking back regularly!

  • Bret

    Thanks for one’s marvelous posting! I definitely enjoyed reading it, you’re a great author.I will make sure to bookmark your blog and may come back later in life. I want to encourage yourself to continue your great job, have a nice weekend!

Leave a Reply

Related

Sorry, there are no posts to display yet.

Newsletter

Never miss a thing! Sign up for our newsletter to stay updated.