What is a Full Stack Designer? 2023 Roadmap

Key Takeaways

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 um 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 all right 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'm I would say more so a UI designer rather than a ux designer there is overlap and of course UI is a subset on 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 you're a great UI designer so you because you would understand ux patterns by default so first you start with that I would say second front-end development as a 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 I you only have to concern yourself with a subset of JavaScript you don't have to worry about understanding how to interact with databases that 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 I 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 all right 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 um you also need to understand white space I'm understanding you know 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 I 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 uh in 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 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 I 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 I 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 pen pot which is a relatively new open source alternative to figma all right I and they're they're adding features and in fact this month they're they're adding Auto layout and so you know a lot of people switched over because they hate Adobe I and so 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 uh if you have a Mac you can perfectly use sketch sketch that's 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 you might wonder what is prototyping well basically it's just adding interactivity to your UI designs that you create and there are some Services um and SAS startups that really take the prototyping abilities in put it on steroids so for instance since figma has prototyping built in and it's actually pretty good um but if you want to go more so and actually add logic and conditionals and really get close to what the what the final you know uh idea of the layout will look like in a browser without actually doing code then protopi is a is probably the best one out there that's 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 uh but I figured I'd put a slide here on and there's a lot of these uh 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 uh 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 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 your age HTML is accessible and then also layout structure understanding how to structure your HTML document and the node tree so that you I 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 skinned uh in the Aesthetics everything you see so uh 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 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 a CSS transitions understanding how to do those and Implement those that's pretty easy and then CSS animations not and not just understanding how to do them technically and how to implement them but also how the 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 SAS understanding SAS SAS uh there's so many different features of SAS 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 uh like I'm saying it it's it's it's looking at the full picture I if you want to be a full stack designer okay if you can 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 uh in the browser which requires JavaScript sometimes if it has interactivity so vanilla JavaScript Basics I would say 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 code academy has one that I even personally watched recently as a refresher um understanding console log hello world you know you start there understanding how to define properties and variables with let const I invar and all that good stuff understanding functions understanding objects and classes uh four while Loops uh all that good basic stuff and then after that understanding how to use vanilla JavaScript in order to manipulate the Dom all right 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 green sock animation platform or gsap which is a common acronym that's referred to as I have several green sock tutorials and also crash courses but basically it it makes your animating life easier and it 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 svelt uh but it's it's one of those things that I allows you to do smooth page transition animations easily and a lot of the sites at awards actually use barba.js over options like react viewers felt all right after that this here notice the big asterisk webgl and 3js the this is this is entirely optional but if you really want to have the ultimate toll set you know the toolkit rather I'm as a full stack designer I'm saying that it would be nice to have you that you need to have an understanding of webjl 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 I 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 lock 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 you can design a pretty solid simple logo and and for a company and also establish you know the 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 webgl3js 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 uh more of these immersive experiences in in the browser I with 3js and such alright everybody make sure to subscribe if you haven't check out designcores.com and I'll see you soon goodbye