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!
Intro
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.
About Gary Simon
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.
What is a Full Stack Designer?
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
UI/UX Designer
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.
Frontend Developer (HTML/CSS/JS)
Although HTML, CSS, and JavaScript are the foundation of Frontend web development, to consider yourself a UI/UX designer, you only have to concern yourself with a subset of JavaScript, such as DOM manipulation; interacting with databases would be out of a full-stack designer's scope.
Basic Identity Design Knowlege
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.
WebGL / Threejs / Shaders Knowledge
Gary tells us the following are optional full-stack designer skills:
- WebGL
- Threejs
- Shaders Knowledge
To be considered a full-stack designer extraordinaire, you must have WebGL, Threejs, and Shaders Knowledge.
Having these skills in your toolkit allows you to create impressive graphical experiences that exceed the capability of just HTML, CSS, and JavaScript.
UI/UX Design Fundamentals
Before becoming a full-stack designer, you must first learn the design fundamentals, also called design principles.
UI/UX Design Fundamentals
- Colors
- Contrast
- Typography
- White Space
- Alignment
- Scale
- Proximity
- Visual Hierarchy
Colors
To create a cohesive layout, you must learn color theory, including how colors work in a user interface.
Contrast
You must understand contrast, especially regarding the type, to ensure it is readable.
Typography
Typography is a field in and of itself. Nevertheless, you will need a basic understanding of the main principles.
White Space
When it comes to white space, you will need to understand how empty space plays an important role, even though it's a void!
Alignment
You must learn how to align content correctly along columns and rows.
Scale
Understanding scale involves knowing how big pieces of content should be in a shared space.
Proximity
Understanding proximity involves knowing how close content should be in a shared space, also referred to as groupings.
Visual Hierarchy
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.
The 2020 UI Design Fundamentals Crash Course (INTERACTIVE)
UI Design Software
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!
UI Prototyping Software
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:
Low to No Code Software
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?
UX Usability Testing Software
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:
What is a Full Stack Designer? 2023 Roadmap
Frontend Development
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
- CSS
- JavaScript
HTML
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.
HTML
- Elements / Tags
- Closing vs. Self Closing
- Attributes
- Accessibility
- Layout Structure
Elements / Tags
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>
Closing vs. Self Closing
Some HTML elements, such as the break <br>, are self-closing, which only has one tag (no closing tag).
Attributes
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>
Accessibility
According to MDN web docs, ARIA (Accessible Rich Internet Applications) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
Gary created this informative YouTube tutorial on the topic: ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!
Layout Structure
We must learn to take our UI design and translate the layout structure with as few lines of code as possible (succinctly).
CSS
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)
- Transitions
- Animations
- Sass
Ruleset Structure
We must learn the basic ruleset structure and syntax.
Sizing Translation & Units
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 (Media Queries)
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.
Transitions
We use transitions to change an element's value gradually, such as a submit button that changes size and color when hovered over.
Animations
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
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.
JavaScript
Regarding JavaScript, Gary tells us to be considered a full-stack designer, you will also need to know how to code; not only will you need to design a product, but you will also need to acquire the skill of fully translating the design to the web browser.
JavaScript
- Vanilla JavaScript Basics
- DOM Manipulation
- GreenSock Animation Platform (GSAP)
- Frameworks (React/Vue/Svelte, etc..)
- Barba.js (Optional)
Vanilla JavaScript Basics
Vanilla JavaScript is plain JavaScript without frameworks, such as React or Vue.
JavaScript Basics includes:
- Define variables
- Functions
- Objects
- Classes
- Loops
- and more
You can learn JavaScript and earn a certification for free with freeCodeCamp: "JavaScript Algorithms and Data Structures"
DOM Manipulation
You will also need to acquire the skill of DOM (Document Object Model) manipulation to integrate interactivity.
GreenSock Animation Platform (GSAP)
The GreenSock animation platform allows you to create complicated animations with ease. GreenSock is a JavaScript library.
Gary has several tutorials and crash courses to learn GreenSock.
Frameworks (React/Vue/Svelte, etc..)
Gary tells us that learning JavaScript frameworks is optional for full-stack designers.
Barba.js (Optional)
Learning Barba.js is also optional for full-stack designers. Barba.js is a JavaScript library that helps create fluid and smooth transitions between your website's pages.
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!
The UI/UX Crash Course for 2023 - Learn UI/UX Design
The 2023 Frontend Development Crash Course - Learn HTML & CSS
WebGL / Three.js / Shaders
Gary tells us that WebGL, Three.js, and Shaders are also optional.
WebGL (Web Graphics Library) is a JavaScript API that utilizes your graphics card for rendering using the HTML canvas element, typically used for 3D games.
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.
Gary explains that utilizing shaders can create effects that are not possible with HTML, CSS, and JavaScript alone.
Gary's final thoughts
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!
Gary has several excellent courses to help you become a better developer!
Kickstart your UI/UX Design Career
Our Interactive UI/UX Course will help you design better & earn more.
You're going to rock at making layouts.
Learn how to build beautiful layouts with CSS in our new Interactive Course taught by Gary Simon.
Mentor
The fastest way to level up as a UI/UX designer.
Freelancing doesn't have to be smoke & mirrors.
Gary Simon Links
- 🔗 Website - Designcourse
- 🔗 YouTube - DesignCourse
- 🔗 Twich
- 🔗 Twitter - DesignCourse
- 🔗 Udemy - Gary Simon
- 🔗 Lynda - Gary Simon
- 🔗 Pluralsight - Gary Simon
- 🔗 Skillshare - Gary Simon
My other Gary Simon articles
Conclusion
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!
Let's connect! I'm active on LinkedIn and Twitter.