There is more to web development than programming, and having UI/UX design skills can give YOU a competitive advantage. In this article, expert Gary Simon tells us how to become Full Stack Designers!
As a programmer, you are most likely familiar with the term full-stack developer and what it entails to become one. But are you familiar with the term full-stack designer and what it entails to become one?
In this article, Gary Simon will explain what a full-stack designer is, along with the necessary skills and tools to become one.
Gary Simon is a professional UI/UX Designer & Frontend Developer with over 20 years of experience.
Gary has helped countless individuals establish careers through his content, consisting of his articles, courses, and DesignCourse YouTube channel, which currently has over 1 million subscribers.
Gary defines a Full Stack Designer as one who can handle the entire process of designing a brand identity for a company, along with their associated user interfaces such as their websites and apps, and also be able to implement the user interfaces in the browser along with the implementation of any interactivity.
Tools and skills include:
- UI/UX Designer
- Frontend Developer (HTML/CSS/JS)
- Basic Identity Design Knowlege
- WebGL / Threejs / Shaders Knowledge
Gary tells us a full stack designer is first a UI/UX designer, with more focus on the UI design.
Although UI (User Interface) is a subset under the umbrella term of UX (user experience), Gary thinks a full-stack designer doesn't need to have a solid foundation in research and testing, which is another pillar of UX design; you can still consider yourself a UI/UX designer if you understand UX design patterns.
Can you design an identity guideline? Can you create a logo and also understand brand identities? Although you would not have to be an expert, you will need a solid understanding of these principles as a full-stack designer.
Gary tells us the following are optional full-stack designer skills:
- Shaders Knowledge
To be considered a full-stack designer extraordinaire, you must have WebGL, Threejs, and Shaders Knowledge.
Before becoming a full-stack designer, you must first learn the design fundamentals, also called design principles.
UI/UX Design Fundamentals
- White Space
- Visual Hierarchy
To create a cohesive layout, you must learn color theory, including how colors work in a user interface.
You must understand contrast, especially regarding the type, to ensure it is readable.
Typography is a field in and of itself. Nevertheless, you will need a basic understanding of the main principles.
When it comes to white space, you will need to understand how empty space plays an important role, even though it's a void!
You must learn how to align content correctly along columns and rows.
Understanding scale involves knowing how big pieces of content should be in a shared space.
Understanding proximity involves knowing how close content should be in a shared space, also referred to as groupings.
Visual hierarchy involves placing importance on certain elements. Visual hierarchy can be achieved with size, color, and contrast, to name a few techniques.
Gary created the fantastic YouTube tutorial "The 2020 UI Design Fundamentals Crash Course" to help us with learning the UI Design Fundamentals.
To become a full-stack designer, you must learn how to use design software.
Gary provides us with the following popular design software options:
Gary creates excellent annual Figma crash courses on YouTube. If you are interested in learning this design software, check out the "Ultimate Figma Crash Course 2023 "YouTube tutorial!
What is prototyping software? Gary tells us prototyping software adds interactivity to the UI designs we create.
Figma has prototyping built-in, and Gary thinks that it is pretty good. However, if you want more advanced features, such as logic and conditionals, without the need for coding, he advises ProtoPie and Proto.io.
Gary informs us that we can import our Figma prototypes into these apps to add really cool interactivity!
UI Prototyping Software
If you would like to learn more, check out Gary's YouTube videos on these topics:
As a full-stack designer, Gary tells us that using low to no-code software is optional.
Low to no-code software includes:
Gary explains that you can import your Figma designs and use this software to create functional websites without coding (for the most part).
If you would like to learn more, check out Gary's YouTube videos on these topics:
- Framer Crash Course - From UI/UX to Frontend with No Code
- Webflow Crash Course - Responsive Web Design without Code?
As a full-stack designer, Gary tells us that testing software is also optional.
UX usability testing software allows us to import our designs, such as Figma prototypes, for users to evaluate and provide feedback.
Gary provides us with several UX usability testing software options:
To be a full-stack designer, you must have a solid understanding and skill in translating user interfaces that you or others create into working projects in the browser.
The skills needed to translate user interfaces include
HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages.
As becoming a full-stack designer, Gary brings the following HTML concepts to our attention.
- Elements / Tags
- Closing vs. Self Closing
- Layout Structure
We define HTML elements with a start and end tag and put our content between the tags.
<p>This paragraph is surrounded by an opening paragraph tag and an ending paragraph tag.</p>
Some HTML elements, such as the break
<br>, are self-closing, which only has one tag (no closing tag).
Attributes provide additional information about elements. We specify attributes in the start tag or the self-closing tag, respectively.
For example, an anchor tag
<a> has a hypertext reference attribute (href), which specifies the URL (Uniform Resource Locator).
<a href="https://selftaughttxg.com/">Link to my website</a>
Gary created this informative YouTube tutorial on the topic: ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!
We must learn to take our UI design and translate the layout structure with as few lines of code as possible (succinctly).
CSS is the language used to style a Web page, including the colors, layout, fonts, and more.
Gary advises us to focus on the following aspects of CSS:
- Ruleset Structure
- Sizing Translation & Units
- Responsive Design (Media Queries)
We must learn the basic ruleset structure and syntax.
Understanding sizing translation is essential. When working with a design created from software, such as Figma, you must accurately translate the unit sizes when writing the code for a webpage.
Responsive design is an approach that considers how the layout displays on multiple platforms, such as desktops, laptops, tablets, cell phones, and others.
We use media queries to determine the dimensions of the user's viewport so that we can display the appropriate corresponding layout.
We use transitions to change an element's value gradually, such as a submit button that changes size and color when hovered over.
Gary explains that in addition to the technical syntax aspects of animation, we need to learn the artistic aspects to ensure our results are on point.
Sass (Syntactically Awesome Stylesheet) is a CSS pre-processor. Sass has many features, and Gary advises we do not have to be an expert, but we will significantly benefit by utilizing some of its features, such as nesting rule sets.
- DOM Manipulation
- GreenSock Animation Platform (GSAP)
- Frameworks (React/Vue/Svelte, etc..)
- Barba.js (Optional)
- Define variables
- and more
You will also need to acquire the skill of DOM (Document Object Model) manipulation to integrate interactivity.
Gary has several tutorials and crash courses to learn GreenSock.
Now that we've covered UI/UX design and frontend web development fundamentals, Gary provides us with hands-on practice with these two YouTube tutorials!
Gary tells us that WebGL, Three.js, and Shaders are also optional.
Three.js is a library that makes interaction with WebGL easier.
Gary tells us there is a steep learning curve in mastering WebGL and Three.js. However, gaining this skill will unlock your ultimate creativity!
Shaders work inside Three.js, and Gary tells us there is also a steep learning curve in mastering it.
A shader is a small program that calculates the appropriate levels of light, darkness, and color while rendering a 3D scene.
First, you need to understand UI and some UX and acquire basic identity design knowledge to the point where you can design a simple logo, including the branding colors and typography.
Then when you develop the programming skills to translate your designs for viewing and interacting within a web browser, Gary tells us we can consider ourselves full-stack designers!
Gary informs us that he is creating more content in 2023, including WebGL and Three.js, to teach us these immersive technologies!
- 🔗 Website - Designcourse
- 🔗 YouTube - DesignCourse
- 🔗 Twich
- 🔗 Twitter - DesignCourse
- 🔗 Udemy - Gary Simon
- 🔗 Lynda - Gary Simon
- 🔗 Pluralsight - Gary Simon
- 🔗 Skillshare - Gary Simon
Being a full-stack designer includes knowledge and skills in UI/UX design, Frontend web development, and identity design. You can also learn WebGL, Three.js, and shaders to add to your designer tool kit to really stand out.
Becoming a full-stack designer will give YOU a competitive advantage in the job market as a web developer. Even if you do not possess artistic design skills, having a solid foundation in its concepts will inherently make you a better developer.
Learning and understanding the responsibilities of a full-stack designer will also make you a better team candidate for positions where you are responsible for translating a designer's work into web applications, ultimately providing YOU a better chance when pursuing new employment opportunities!