Full stack design

Since we now understand what UX stands for, it's time to dive deeper into a trending topic that is getting a lot public attention, the full stack design.

As an example, let's look at designing a new logo. Usually, a graphic designer will create a bundle of graphical elements to give a better presentation to their client. For example, they will include the good and bad practices of logo use, negative logos, how it can be used in horizontal, and vertical space, favicons, and so on.

The idea of web frameworks, such as Bootstrap, Foundation even Google's Material Design guidelines, is similar; just like a graphic designer who has to provide all the rules, guides, and best practices of use for a logo that they created, the full stack designer provides web style guides, animations, graphical assets, interactions, and UI elements that will be used across the platform.

Today, a lot of companies, even larger ones, have built their own custom design frameworks to keep track of their product's UI.

So, creating this kind of framework, from A to Z, from the UX Research process to the final UI components that represent the core of your product concepts on many areas, I call this the full stack design process.

Who is a full stack designer?

It is important to clarify that the word full stack doesn't mean to do it all from designing, coding, database or management; it means that a person has developed multiple skills, which allow them to complete a design or a development project on their own. A full stack designer is someone who can work through the entire life cycle/process of the design phase, starting from conception, research, and wireframes to UI design and Visual Design. They will be involved in the prototyping process using specific tools, such as Marvel, InVision, or Sympli, and will finalize the process by providing frontend style guides and UI Prototypes and animations using HTML/CSS, WebFlow, Framer.js, SVG Animation, and so on.

By involving the frontend code, I don't mean that you have to be a great coder like you are on design side, but you should understand how the frontend code works and what technologies are behind it; in the following diagram, I have added the frontend code on both areas, that is, Design and Development:

A good designer does not focus only on the UI or on the Design itself, but also on other things that are connected to it. A designer needs to realize the influence of different factors that can affect the product result. So, the more you are involved in these connected or related areas, the better a full stack designer you will become. And one of the biggest benefits is to involve developers from the beginning stage of UX.

The difference between a regular designer and a full stack designer is the ability to think of the bigger picture, because a full stack designer will be involved in the UX Process, design patterns, critical thinking, coding techniques, and a lot of other tools that will help them to finish the project, while a regular designer is involved in a specific area of design only.

A roadmap to becoming a successful full stack designer

There are tons of things that you can do to become a full stack designer, but I would suggest these five points as a roadmap to becoming successful in a full stack designer career: 

• Learn the right skills
• Learn the right tools
• Show your work and gain some experience
• Learn how to network and get connected with people
• Build trust

We also should have the ability to receive different input from informations data, content, product requirements, feature requests, and so on, and develop different series of sketches and wireframes that will follow the best practices of UX design, solve problems, and, more importantly, create user-friendly experiences.

We need to be able to understand wireframes and design and every other UI component around them because this needs to be aligned with our client branding, that is, solving visual problems by providing a complete visual view and presentation of the product. Finally, we will need to be able to take these finalized UI designs and convert them into working prototypes, frontend code, or at least pieces of interactions just to show clearly our thinking for interactivity, functionality, and product look (UI).

Another thing that confuses people a lot about the full stack design field is the separation of frontend tasks. Usually, I prefer to clarify to the full stack developer that their task is to get the product to come to life by filling it with real data and add its interactivity to the backend and database by following the framework that was provided to them by the design team.

Usually, I see a lot of blogs written about the full stack designer as a designer who can code, but the central idea is not coding, but combining the framework, the toolset, and the assets of all the research that has happened on UX process phases into one complete bundle for the full stack developer to follow. Also web frameworks such as Material Design Guidelines, Bootstrap Framework, Animation showcases, and clear actions and functionalities can be also included in this bundle.

The word stack usually refers to the layers of technology in an application. So you can think of this as if you were to stack all design technologies on an application, starting from UX. It would look something like this:

• UX design (Research, Wireframing, and Prototype): Using tools such as Balsamiq, Pen and Paper, and sketching
• UI design (Visual Design, mockups, icons, and assets): Using tools such as Photoshop, Illustrator, SketchApp, and Adobe XD Design
• Interaction Design (prototype of UI, animation, human interaction): Using tools such as Principle, Adobe After Effect, InVision, and FramerJS
• Frontend side: This includes the following two areas:
  • HTML and CSS for User Interface Design
  • JavaScript + Advanced CSS features for Interface Interaction and Animations

So, putting this simply, you can see that a full stack designer is someone who can research, design, implement, prototype, mock up, and code or slice (HTML/CSS). They are knowledgeable about all types of designs starting with graphics, web, mobile, software, or more specific areas of a new product design.

A full stack designer is a designer who has a multi-set of different design skills, and who is able to understand, design, and maintain an awareness for the entire product structure. Also, this kind of designer can customize their list of skills for a specific project.

For example, one project might require their skill on visual design and create interaction examples to solve a specific problem, whereas the other challenge for them might be to think through information data and develop clear UX design flows and solutions. So, this kind of designer will have all the necessary skills for solving both challenges and they choose the right ones for a specific task.

Having this kind of skill makes their process really seamless and allows them to have higher expectations when it comes to finalizing the product. Plus, it can save them a lot of time and money.

If we talk about the difference between a full stack designer and a full stack developer, it is really simple, because full stack developers are more focused on understanding a different range and wide spectrum of technologies so that they can improve on the engineering side. On the other hand, full stack designers are more focused on understanding the process for creating the product so that they will be able to deliver a better design, better UX, and a better product.

So, in being a full stack designer for creating a digital or physical product, it is important to concentrate on the following core aspects:

• Usability: We have to create and provide a clear and really easy-to-use product
• Utility: The product itself needs to provide useful content and solve a user problem
• Accessibility: The product needs to be accessible to different user categories
• Desirability: The product is attractive and creates a good UX

The advantage that you will have by becoming a full stack designer is not about how to make things look beautiful; instead, you will be able to research human behaviors and needs. You will also understand how to structure the information collected by the research so that it makes sense when your team reads it, and you will be involved in prototyping and getting validation from whether real people find value in your product before you build it.

A lot of companies are starting to realize the value of these skills and what they mean to their business, so no matter your job title, if you have these skill in your toolbox, you are highly desired in the market.

However, on the other hand, if you choose not to expand your overall skill set, the end result will be really disappointing for your overall growth potential, which means you are essentially setting yourself up to fail in the long run, as nowadays, in the tech world, designers are expected to do rather more than just design things.

If you really want to become a better designer, you have to stop caring only for the design itself and start checking out the other parts that are connected to it, such as users, technologies, and the product itself.

When you start improving yourself on the other design-related parts, you will realize just how much of the big picture you were missing before, and you will even start understanding the key part of the development process that depends on the design itself.

By this, your work and your product design will become much better because of your overall realization that you've got around different processes that are related to design. This is how the mindset of a full stack designer actually works. Also, in the last few years, full stack designers essentially started to become extremely cross-disciplinary and increased in number at an astounding pace.

The moment that you choose to become a full stack designer is the moment that you decided to help everyone on your team, as well as the users, in creating a specific product.

Besides financial rewards, the biggest benefit of being a full stack designer is the opportunity to expand your skills.

Let me tell you a true story, something that happened to a really amazing Visual Designer that I knew and worked with. When I say amazing, I mean it. This guy's portfolio on the visual side was incredible, and it was a pleasure to work with him; however, even though everything that he designed looked really good, almost none of his designs ever came to life simply because they were without sense when you wanted to code or animate them based on your requirements. Why? Because he never cared for the other side of the process and design-related stuff design, such as research, user testing, user feedback, and coding. When we tried to implement his design on the coding side, most of the time it was so messy. Even after we brought it to life, it simply would not work for the users when we put that app or web service online. We just got a bunch of bad feedback because of its usability. We tried to convince him to make an effort to understand the other parts of the process, but it wasn't working so we had to let him go; we didn't have a choice.

He joined another reputable company; they were so happy to have him on board, but a few months later, other team members–mainly developers–started leaving the company. It was simply because it didn't work for them to work with someone who cared only for the product to be amazing and beautiful on the visual side when its real-life implementation wasn't working at all, and wasn't making sense.

 

Why am I am telling you this? Because, if you want to stick just with the design side, OK, that is your choice, but you will not achieve anything with that; without understanding the other parts connected to design, you will just fade away.In the worst scenario, few years back, these guys would last longer in the big companies because people were taking into consideration their amazing portfolios without checking their general knowledge on the implementation side or understanding what process they use for designing or developing a product.

Lately, a lot of blog posts have been written; too much confusion has been added by saying that a full stack design is not making sense, and they are mixing up this discipline by comparing people who only code, or who only design, with people which can do both of them. Actually, this discipline has nothing to do with this comparison; in the end, a new bunch of skills added to your toolbox will not hurt you. It is not about being a generalist, but about understanding the complete design process and all the parts connected to it. So, if you are feeling too lazy to learn how to write some lines of codes or a new prototyping tool, such as Principle, framer.js, or any other tool that will make your design process easier and better, then this is your call.

Keep in mind that knowledge is one of the most valuable things you can have. Happiness and usefulness depend upon it. Knowledge is the acquisition of facts and the application of them to life.

As a full stack designer, you will be able to recognize the limitations and expectations of the project during the plan of the UX Process or UI design itself. You will be able to know what will and will not work on your project in its early phase because you'll develop more realistic expectations of outcomes before you start to push the code or any visual design.

So, by this, you can see that having a full stack designer in your company does not only benefit the design team, but also all the other teams inside the company, even the employer. Apart from increased knowledge and an expanded set of skills, another benefit of a full stack designer is that they know exactly what to expect from visual designs that they have come up with in the coding stage because they are aware of what is possible and what is not in the coding phase itself, whether it is a bad or good approach, whether it will work for that specific UI or not, and much more.