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
- How to become a full stack designer
- Conclusion
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 fundamental development mistakes 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… we could 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.
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!
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 is a must have traits.
Your main goal is to look for solutions 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.
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 products.
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<a href=”http://airbnb.design/painting-with-code/"> new react library</a> 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.
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.
