you've probably heard the term full stack developer. But what about full stack designer? Well, in this video, I'm going to explain exactly what a full stack designer is, along with the necessary skills and tools you will need to become one. Now, in short, a full stack designer is one who is able to 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 that user interface in the browser, along with the implementation of any interactivity. So, this requires a lot of tools and skills. So let's get started. Alright, let's go ahead and rock the hairs out in full force today. And I literally just woke up. I had to record this video. So anyhow, let's answer the question, the obvious one and a more specific context. What is a full stack developer? I mean, wait, full stack designer. Did I tell you I just woke up? So let's check this out. Alright. So, in my purview, I believe a full stack designer is first a UI/UX designer.

and to elaborate a little bit more on that specifically, I would say more so a UI designer, rather than a UX designer. There is overlap, and of course UI is a subset under the umbrella term of UX, or user experience, designer. But I don't think it's necessary that a full-stack designer really engage or have a really strong foundation in research and testing, which is another one of those pillars of UX design. So I'm going to say you don't necessarily have to have that, but you can still consider yourself a UI/UX designer, especially if you're a great UI designer, because you would understand UX patterns by default. So first, you start with that. I would say second, front-end development, as it pertains to HTML, CSS, and JavaScript, which you might wonder, Isn't that really what front-end development is already? Well, yes, but when we're talking about JavaScript specifically, you only have to concern yourself with a subset of JavaScript. You don't have to worry about understanding how to interact with databases.

wouldn't be in the purview of a full-stack designer, but you would have to worry about DOM manipulation and things like that, and we'll talk about that more. Basic Identity Design knowledge. All right, so are you able to design an identity guideline or a logo design and all that stuff and understand, you know, brand identities? I would say basic Identity Design knowledge. You wouldn't have to be an expert, and I say that this is part of a full-stack designer because a it is designed. It's Identity Design, but it's also something that accompanies basically every project that you work with that needs a user interface of some sort or a website. They're always going to have a logo design or an identity, a certain color palette. So I would say having that Identity Design knowledge is also part of a full-stack designer's toolkit, so to speak. And then also, and you'll notice this little asterisk right here, I'm saying this is optional. I would say if you want to be considered a full-stack designer extraordinaire, then you would need to

know, I WebGL slash 3JS slash shaders knowledge. And having that in your toolkit allows you to create some of those really crazy experiences in the browser that utilize your graphics cards. That can do all sorts of really cool things that otherwise these things, you know, these two things above front-end development, just regular HTML, CSS, JavaScript, wouldn't allow you to do otherwise. Alright, so we're going to talk about a lot of this in depth here. Okay, so let's first talk about that first point, which is the UX UI UX design. So I would say you need to first establish if you're interested in UI UX design. You have to establish a specifically UI design fundamental knowledge. So what are those fundamentals? Sometimes people call them principles, etc., etc. Well, you need to understand as it relates to UI or user interfaces, colors. Alright, so you have to understand color theory and how they work together in a UI and how you piece them together to create a nice cohesive layout. Essentially, you have to understand contrast, especially as it pertains to type, because you want to

make sure your type is readable. You also have to understand topography, which is a field in and of itself, but when it comes to UI design, you can get away with not knowing everything about topography. You also need to understand white space. Understanding how that empty space plays an important role, even though it's void and there's nothing there. Also alignment, how to line your things correctly along columns and also rows. Scale, you know how big should this be versus that. Proximity, you know how close should things be together, sometimes other people call this groupings. And then also visual hierarchy, which visual hierarchy is just placing importance over certain elements. We can see a visual hierarchy here in this little slide design. UI UX Design Fundamentals is a title. It's bigger, thus we've deemed to be more important. That's kind of a very simplified version of what visual hierarchy is. So understanding these fundamentals is what you need to understand first if you want to become a full-stack designer. And I don't need.

first, like, you could still dabble in front-end development knowledge. It's not like you have to do this certain path, but you certainly, if you want to understand UI design, you have to understand these. I would say first, it would really behoove you to understand these now UI design software. All right, what do you have at your expense in terms of what you want to learn? Well, you could learn Adobe Figma. Now, I know that might sound strange to some of you who haven't realized the news yet from a few months ago that Adobe bought Figma. But the Figma here is and has been for the last several years or four or five perhaps the most popular UI/UX design software, so you can't go wrong with that. Also, there's Penpot, which is a relatively new open-source alternative to Figma. All right, and they're adding features, and in fact, this month they're adding Auto layout. And so, you know, a lot of people switched over because they hate Adobe.

it's a suitable alternative. I don't think it has all the features yet. It's not quite there, but they're working on it. You also have Sketch. If you have a Mac, you can perfectly use Sketch. Sketch has been around for a long, long time. And then there's also Lunacy, and there's a few others as well. So let's talk about prototyping software. Well, first, you might want to wonder what is prototyping. Basically, it's just adding interactivity to your UI designs that you create. And there are some services and SaaS startups that really take the prototyping abilities and put it on steroids. So for instance, Figma has prototyping built in, and it's actually pretty good. But if you want to go more so and actually add logic and conditionals and really get close to what the final idea of the layout will look like in a browser without actually doing code, then ProtoPie is probably the best one out there.

specific to that purpose I and also proto.io as well so you can import your figma prototypes eye into these apps and then just like add really cool interactivity to them. Now load a no-code software this is optional um but they're becoming really popular I I'm like again you can completely skip this route if you don't want to deal with low to no-code software but it's it's it would be stupid for me not to include a slide about these so framer webflow very popular I would say webflow is probably the most popular at the moment um basically you can import your figma designs and you can essentially structure them so that you don't have to touch any type of front-end development there's no HTML CSS JavaScript they have to worry about I and you can pretty much create a responsive website that's ready to go in the browser without touching code all right for the most part so these are basically the the two big options at the moment now also ux usability testing software I thought I would put this as

well, I don't think I think this is another optional as well. You don't have to understand this, but I figured I'd put a slide here on. And there's a lot of these, basically a lot of them allow you to import, for instance, something like a Figma prototype, and they'll throw users at it, and they'll get their feedback so that you can get that feedback stage going so that you can improve your design. So now let's switch gears. We're going to switch gears from UI/UX design, and now we're going to talk about front-end development. All right, so you should simply possess a solid understanding of how to translate UIs, your user interfaces that you or others have created, to working projects in the browser. So that's what I mean specifically by front-end development. That's why I feel if you're a full-stack designer, you can touch code as well. It's necessary for you to have that title because you're taking your thing that you created, and then you're also

having the ability to translate it in the browser, if that makes sense. So, the skills that you would need are going to be HTML and CSS, of course, and then also JavaScript because JavaScript adds the interactivity, and these three work hand in hand. So, front-end development, of course, if we're going to talk a bit about that, we need to talk about HTML. So, understanding elements and tags, understanding the concept of closing for self-closing tags, attributes, there's so many different attributes and how they work, understanding that accessibility using the area I or Aria accessibility attributes, and to make sure that your HTML is accessible, and then also layout structure, understanding how to structure your HTML document and the node tree so that you are able to accurately translate with a few lines of code possible your UI design structurally. Remember, HTML is like the skeleton, and CSS is kind of like the skin and the aesthetics, everything you see. So, CSS, understanding basic rule set structure, you know what is a CSS rule set, what is sizing translation.

and units. So, sizing translation, for instance, is really important when you have a design that you created in an app like Sketch or Figma or Pen Pot. And understanding how to accurately translate that design to the browser with CSS. And you do that through the correct usage of units and also translations. And these are things that I've covered in my recent just a week ago, my crash courses on design and code. So, make sure to check those out. Responsive design, understanding how to, you know, make your designs responsive. Typically, people opt for mobile first. And you do that with media queries. Container queries are coming as well. We have CSS transitions, understanding how to do those and implement those. That's pretty easy. And then CSS animations, not just understanding how to do them technically and how to implement them, but also how to do them in a good way in which your motion animation is on point. So, I would say that that's important as well. And then also, Sass. Understanding Sass. Sass, there's so many different features of Sass. You don't have to be an expert, but

understanding and utilizing some of the great features, such as nesting your rule sets, is also very handy. I would say that's worth learning as well. Now, front-end development JavaScript. Now, this is going to be one of those things where some people are like, If I'm a full-stack designer, why do I need to know code, especially code that's like JavaScript, like a scripting language? Like, I'm saying, it's looking at the full picture. If you want to be a full-stack designer, okay, if you can design a great product, but then your hands are tied when it comes to taking that product and realizing it in the full life cycle, then you're not a full-stack designer. So, that's why I say a full-stack designer can also code as well so that they can realize the end result, the end vision, in the browser, which requires JavaScript sometimes if it has interactivity. So, vanilla JavaScript basics, I would say, start with there first. It would definitely not make sense to

jump to something like react without understanding vanilla JavaScript. After that, and by the way, Vanilla JavaScript Basics. If I go back here, that would mean, of course, going through a lot of the basic courses. There's a ton of them, a ton of interactive services. Codecademy has one that I even personally watched recently as a refresher. Understanding console.log(hello world). You start there, understanding how to define properties and variables with let, const, and var, and all that good stuff. Understanding functions, understanding objects and classes, for while loops, all that good basic stuff. And then after that, understanding how to use Vanilla JavaScript in order to manipulate the DOM, alright, which is the Document Object Model to your HTML. It's called a node tree. It basically, in short, it means being able to interact and integrate interactivity into the website UI, essentially. After that, GreenSock Animation Platform, or GSAP, which is a common acronym that's referred to. I have several GreenSock tutorials and also crash courses, but basically, it makes your animating life easier.

it's basically a library, and you use JavaScript with it in order to implement a more complex animation sequences that some UIs may warrant. After that, Frameworks react, view, svelte. I have an asterisk here because I'm saying you don't necessarily have to have that knowledge. Um, for instance, barba.js is not part of reactive view or svelte, uh, but it's one of those things that allows you to do smooth page transition animations easily, and a lot of the sites that awards actually use barba.js over options like react, view, or svelte. All right, after that, this here, notice the big asterisk, WebGL, and 3js. This is entirely optional, but if you really want to have the ultimate toolset, you know, the toolkit, rather, I'm as a full-stack designer, I'm saying that it would be nice to have. You need to have an understanding of WebGL or at least 3js. So we'll talk about these two in a second. So understanding the canvas and

webgl, so essentially webgl, it'll it's it's it'll utilize your uh, your graphics card for rendering, and it uses the HTML canvas element essentially. And you're you're basically a lot of people use this for gaming in the browser. If you've seen those crazy 3D games, that's webgl for sure. Um, and I it's been essentially, you don't use HTML to piece together a layout. Some of those really crazy complex looking layouts with all the fancy sort of fabric images and stuff, those aren't created with HTML markup, they were created with webgl, and probably with a library called 3GS. When you write straight up webgl, which I know pretty much nothing about, I know it's a very complex code. 3js is a library that sort of bridges that gap for you, it makes it easier for you to interact with webgl essentially. So, 3js in in and of itself though has a pretty big steep learning curve, uh, just because webgl itself is so complex. So, 3js build on top of that it's

not going to be a cinch to really understand. There's a great course I by Bruno. I forget his. I think it's Bruno Simon is it. I might be wrong. I of I 3js journey. I think that's what it's called. I and it's an excellent course on learning3js essentially. I'll try to remember Link in the YouTube description and um understanding how to use that framework. Uh to build these more immersive experiences in the browser which will allow you to do games and crazy stuff. Uh really just unlocks your your. Uh your ultimate creativity. I can I I I liken it to the the days of flash. Uh which was prevalent in the late 90s to early 2000s. I it just allows you just to do crazy effects particle effects just. Uh just really cool stuff if it's done in a good manner and you execute it well and then there's also shaders so you can work with shaders inside of 3js and shaders. I it's one of the most complex

topics I would say and I like a full stack designer's toolkit. It's its own little language and it's basically working with uh how to like if you've ever seen those pictures or photographs on some of the awards sites and how they have like really cool fabric or they erode and or they change colors and you're wondering how the heck did they do that. Well, it's probably through shaders. And so shaders are one of those things. It's tough to get your mind around and it's something that I'm actively working myself towards but once you understand it, it really will unlock a lot of creativity that you might have that wouldn't be achievable achievable through HTML, CSS, and JavaScript alone. And that, my friends, is essentially it as a full stack designer. If you understand UI, some UX as well, if you understand um basic identity design knowledge and you can design a pretty solid simple logo and and for a company and also establish you know the brand colors and all that good stuff, the topography and then also you have an

Understanding of HTML, CSS, and JavaScript. You're very comfortable with translating your designs and making them a working reality in the browser. Then I would say for certain that you are a full-stack designer. All right, so these are all things that I'm going to be covering here, especially the WebGL 3JS stuff here sometime this year. And yeah, um, I will be having a course as well at designcourse.com. And I haven't collected emails yet for it, but I will shortly. And I'll pray I'll create an announcement video about the upcoming course where we kind of cover more of these immersive experiences in the browser with 3JS and such. All right, everybody, make sure to subscribe if you haven't. Check out designcourse.com, and I'll see you soon. Goodbye.

What is a Full Stack Designer? 2023 Roadmap

What is a Full Stack Designer? 2023 Roadmap