Responsive Website Design | Live Design Stream

[Music] [Music] [Laughter] [Music] [Applause] well hello everybody and welcome to the channel i'm jesse showalter welcome to the live stream we got people jumping in the live chat already it's really really exciting daniel king's in the house ac9231 is in the house we got mandeep and ray han and john marshall ralph steve saying hello hi everybody and i asked the question are you a figma user because we're using figma today i know a lot of my streams i do i use adobe xd but i like them all i like adobe xd i like figma i kind of like sketch i don't know if i'm going to do any sketch live streams so if you're a sketch user out there it's fading a little bit for me but today we're using figma it's gonna be great everybody's waving tell me where you're coming from and throw in your favorite emoji what it what just tell me those two things because i know right now that edward tofon is coming from romania and i know that edmure likes the little wavy emoji that's good i like that i dig that a lot here is the plan of the day while you're putting in that location and that emoji i'm going to be doing about 35 to 40 minutes of design work inside of figma and then i'm going to be doing about 10 minutes or 15 minutes of design reviews and today i'm not taking submissions because i got so many submissions from the last live stream that i have to honor some of those i have four submissions queued up in my browser ready and waiting to go so i'm gonna be reviewing their work but we can all learn something from watching people's work get reviewed it's gonna be really really fun people are coming from turkey from india i love rob steve says india bro yeah that's good i love it um hey uh people coming from delaware more people from india from indonesia all over the world joining on this amazing saturday or possibly sunday just depending on the hemisphere from which you are coming from people from ireland and indianapolis indiana all right hello from london hey hello alexander and nick and uh bence and yusuf and and pankaj if i said that name right if i didn't i'm so sorry i'm really excited you guys are here hey let's jump over to my screen let's take a look at figma i have a design file here on figma and i also have a little subscribe animation going on over there in the left-hand corner of the screen if you're not subscribed to the channel please do i'd appreciate and give a little thumbs up and hit that bell notification that way you know when live streams like this go live but um i do have a little design file right here and uh this design file was created in figma it's just a single page website with some illustrations on it it's a fake community building tool of some kind a nice long page for us to work with and the plan today is to hit a for artboard and say hey how would we make this thing look in a tablet and how would we make this thing look in a phone that's really the plan for the day is how do we convert this desktop experience over to something that would fit some of these more mobile or device specific breakpoints that's the plan of attack for today hey we got more people coming in the live chat uh uh vaisakh is from india and he likes this little kind of squishy uh emoji anime kind of dude i like him a lot alexander is coming from london lots of wavies i like that and uh we got guillerma is coming and he just likes a little wave emoji i'm into it amber's from texas i'm from texas too so hook em um and ozan says most of the programmers are from india hey right on i'm so thankful that you guys are here and we are just gonna get going let's take a look um so i put some artboards on on the screen and i literally just hit a for artboard and i came over here and i chose either because you know you have like uh you have watches you have desktop you have tablets and um so we could work with either a tablet and when i chose a tablet i'm just choosing a random size now here's the first thing i feel like everybody should know about doing responsive design you might already know this excuse me you might not but my personal kind of way of doing responsive design is i actually wouldn't start with a desktop experience i would usually start with the mobile or i would start with a really really small desktop screen this is like a nice big kind of like 19 by 20 excuse me it's a 1600 and that's okay but what do we do about these massive illustrations what do we do about these two column layouts what do we do about these cards when we dive down to a smaller kind of phone experience like something like this what do we do so i like to start there and it helps us to kind of shed off a lot of the excess weight the things that maybe aren't needed the things that are fluff it makes us rethink as user experience designers hey what's the primary action i want a user to take and if it is to register why am i putting so much emphasis and effort on this blog post down here so that's what a mobile first design approach might do for some people and while we're doing this hey please ask any questions you'd like i'll try to answer them as i go for instance ozone just answered the question will you do this design for coding web through any library like react i think this is just a 35 minute design tutorial today a live design walkthrough so i won't be doing any live coding today but that's a good idea i should put i'm gonna write that down somewhere um and or just mentally that we need to do some live coding as well so thank you for that question i appreciate it um so we we wanna and here here's the term that i learned a long time ago from brad frost who is kind of one of the experts on responsive and uh web design is make it till you break it it's kind of like what we're talking about today make it till you break what does that mean it means make your designs work they should just work we shouldn't necessarily be thinking like this in desktop tablet mobile because there's so many sizes of devices nowadays there people could be viewing your website on an xbox or a phone or a watch or any number of different phone sizes or tablet sizes so there's no specific sizes anymore there is just responsive web design okay so we need to make it work as much as possible until it starts breaking and then we need to fix it okay for instance let's talk about the first thing that we could we could see going on here so i'm going to group these together and i'm going to call that nav okay that's my navigation it's all tucked away in my header layer that i have over here okay let's first before we do anything else let's turn on our 12 column layout that's not actually doing much of anything i i was not being very good with my 12 column layout so we should fix this and yeah we should fix this let's keep let's just spread our 12 column layout there we go now our 12 column layout is on par okay and for me personally it's okay if illustrations hang over the sides of your layout that's fine for me but why did i turn that 12 column layout on because i'm going to want to turn on some kind of um watch out i'm going to want to turn on some kind of layout over here as well okay so i'm going to want to come over here and not do grid but i'm going to want to do columns and for something like when you drop down to smaller screen screen devices excuse me devices or screen sizes you're going to want to be figuring out what type of of new kind of like layout you're using for me when i drop down to something like tablet for instance i'm going to make this desktop work as much as possible by shrinking using responsive imagery and shrinking it as the the screen shrinks and then when it hits right around here at this size of 786 i'm going to have to flip it and do something else by using some media queries inside of my css but right there i'll probably drop down to doing something like a six column grid i'm gonna leave a little bit of padding on the side and i'm gonna do something like that okay see how we're doing that sounds pretty good right so far so good now what's cool about this is instead of doing a new screen over there we could we could just use the same six column layout here and duplicate our artboard and figma is going to smartly resize our layouts to adjust we could do that if we want to okay but let's start talking really quickly about uh moving a few of these elements over okay so for instance um and and we're not even using any of figma's really smart like a resizing or anything like that today we're just thinking in breakpoints that's a whole nother stream we should be doing and thinking about how things actually ebb and flow and squish responsibly okay um let's see edward tofin says can you tell us the color of your desktop grid columns sure i could surely do that we're using uh this nice kind of like blue color it's a 5 8b efb and it's at 10 it's really really light so let's actually make sure that all of ours match because i'm just i don't like it when things don't match okay so we're using the same same thing there okay and quick question from jagdish says should we change the entire layout representation for mobile from from the desktop version yes to a certain extent and we're going to get there that's a great question that is where we're going in this design walkthrough so let's start with something really really easy let's start with the navigation shall we actually you know what let's bring the whole thing and here's here's again i would never start desktop and then try to make things fit but you're going to see me doing this wonky workflow right now because a lot of us might get a client who has a desktop website who needs to make it responsive and this is the way that you're going to have to work so i'm going to stretch my artboard out knowing that i have lots of content and i'm also knowing it's probably going to be longer than my desktop website because the amount of information that's going to go from being in two columns to having to jump to a single column layout it's going to stretch out the space most likely so i'm going to grab my information and i'm literally just going to paste it in okay see now the question becomes what do we do with all this information i'm going to drag it up above my r port and let's start working let's start peeling this layout apart um i'm gonna start taking for instance this whole little lock up over here i'm gonna drag these down whoa i need to grab that as well i'm gonna drag these down i'm gonna give the whole thing a little bit more space what i love about a canvas based kind of layout and artboard kind of program is that i just have like all of this work it feels very much like adobe illustrator where i can just work right so that's a good feeling so the first things first is i'm just going to stretch those out and i'm going to figure out what we need to do with this information on a tablet okay so i'm now going to bring it down again into my and onto my artboard let's bring it down everything's on the artboard now now we can see that with my navigation there's just no chance really of getting this navigation in and so we can get our logo in right that's good news but we're not going to be able to fit this navigation in with all of this like extra like all these buttons and these navigation items this is the time when you're going to want to flip to something like a hamburger menu or like a mobile navigation menu of some some kind it can be a button that says menu it could be a hamburger it could be anything but it's just at this size we no longer can fit this see it's it's just gonna be really really wonky you could to try to do something like this and maybe even center align things if you wanted to but that becomes a waste of vertical space right we want to be really really wise people are still okay with scrolling i think we're all used to scrolling on a mobile website now but the less scrolling the better and there is no necessarily no such thing as above the fold on digital design or on phones but kind of isn't there still kind of like we want to be able to see the primary actions quote-unquote above the fold okay so um we know this right like so we we chose an ipad mini let's look at another ipad mini tablet i like to do this actually too i like to bring another version of that same artboard if there was such a things above the fold this is the fold for an ipad mini an ipad mini is pretty small it's one of the smaller types of tablets that's why i like to choose it okay so we know we want the main content to be here and we're looking at it and exploring and registering because of the way we've used color here that's the primary action we want to take place okay so here's what i'm going to do i'm going to open up a little program i have on my computer called icon jar and i'm going to look for a menu something like that and this is these are not the end-all be-alls of navigation uh icons but we're just gonna grab one let's zoom in a little bit and get closer to our design so we can see it i'm gonna hit k and that's gonna bring up our scale tool inside of figma and i'm just to align it with my logo and i'm going to bring it and push it all the way over to the side i don't like how like how chunky it is so i'm just going to do a little bit of editing on it all right so i'm just going to one two three kind of space respace these and i don't like how wide they are also so i'm going to take these down to a height of two maybe 2.5 this is all preference what i'm doing right now there's no hard fast rule about what i'm doing okay a lot of times people see things that i'm doing and they're going why are you doing that is that the rule must i follow it sometimes it is a rule and sometimes it's not okay so with that being said i'm now ditching this entire navigation and i'm oh i'm substituting it for a hamburger navigation now this can be cool um as long as the menu that we design has the ability right has the ability to have all of these elements inside of it so we're gonna want to we're gonna want to take our ipad here let's just do a duplicate of this guy right here and get it over and we're going to want to do an overlay of some kind okay so i'm going to do an overlay here and this is going to be when i click my hamburger navigation i'm going to see this thing come out and kind of move its way in or animate its way in okay you could do this and i can drop down from the top it could there's all sorts of good stuff you could do here but this is what i'm gonna do okay so now what i'm gonna do is i'm gonna take all of these nav items and i'm going to just stack them vertically like this really simple stuff not not crazy nothing crazy let's bring our navigation our registration button over here okay then i'm gonna take all of them and i'm sorry i'm not answering your questions right now but i'm really really fixated on this i'm gonna i'm gonna use figma has this really great tidy up feature and it's just gonna put all of them perfectly vertically aligned and distributed that's a really nice deal and then because i'm going mobile i want these to stand out i want there to be bigger touch points we have fat thumbs issues we got to think about on mobile so i'm going to use my scale button i'm gonna scale this thing up okay i'm gonna bring my whole navigation up and i don't like how my registration button is off the menu so what are we gonna do we're gonna grab that move this up and we're gonna grab all the elements again and we are yet again going to whoa we're going to tidy i thought but that didn't work for some reason i'll tell you what let's just stretch this thing down really quick whoa something's going on yeah let's move this back up again and we'll just use our distribution tool this time i don't know why our tidy button did not work maybe somebody out there is like a super duper figma master and they're going to tell me here in a second let's just distribute horizontally just like that cool okay now we have our little navigation here okay and what we could do is if we wanted to we could prototype this right now okay we can go up to the prototype tab and we can drag a little little arrow out here we could say on click we want to open the overlay with this guy that we're going to call let's rename this overlay menu okay something like that and uh on tap yeah on click overlay menu no scrolling okay good let's just try it really quick shall we let's press play and let's open up our figma prototype and just see what it does we should be able to hit this and it's going to open it up it's just going to dissolve it right into place okay so that's the start of something and then what's great about that design wise is we don't have to have anything here clouding it we know our menu is sitting there and it becomes a constant for us okay um miriam we're not gonna be working with css and html today it's a shorter live stream and it's non-code it's just designed today but we will be doing some coding uh live streams pretty soon august or excuse me augustine i am using figma today which is a great design tool you check it out it's free to download free to use to a certain extent um you can have a free version of it and you can get a lot done i'm actually using the free version of it so i'm not like lying to you guys at all look how much i'm doing with the free version and i'm drinking a delicious drink called legend which is my nootropic spicy ginger performance drink it's really really good it's really tasty excuse me okay take a little sip of that let's get back to work we've just we just cleared up look look how much space we cleared up vertically we kept things really really tight up here okay if you want to you could keep the registration button out here but for us this works now we have these other areas that we need to bring up into view so let's start messing with these we're going to bring these up into place and we have this massive illustrations vector illustration that we want to figure out where it can go as well now remember this is the size kind of right here of our above the fold okay and ac9231 is saying i thought for a tablet it was eight column or does it not matter i really do think it's it's personal preference i don't think there's a hard and fast rule about how many columns you should use when i don't even think you need to use columns if you don't want to if you just want to create gutters on the side fine you do you if you want to use an eight point you know google material design grid do that that's your choice i'm just i'm throwing out i'm throwing out what i'm doing right now this is what i'm doing all right here we go i'm gonna grab my community connection thing now here is kind of a rule of thumb that inside uh of a mobile kind of design right you should uh make the text bigger okay and touch points should get a little bit bigger then when you get small all the way down to mobile like down to a phone then you can reshrink the text down okay so that's kind of like a basic rule of thumb but i think this is actually kind of big enough that we don't have to do that so this is interesting though we might want to actually center align this and then we might actually want to bump up the size of the text a little bit and that's literally just to keep the keep the everything just kind of balanced a little bit okay so i'm bumping that up and i'm centering a center aligning that okay and then i'm going to take all of these elements and i'm going to center align those and i'm going to center align everything so i've made the choice to go center aligned here on my little community finder now actually as soon as i did it i hated it center lining it's a tricky one you really got to be careful with it because it can just it throws off your it throws off your design so instead what i'm choosing to do i have a better idea i'm literally working all this out as i'm thinking it through okay so don't think like why aren't you following your own plan i don't have a plan i'm just working it out and trying to figure out what works i want you to see what it looks like to to figure things like this out as we go so let's why don't we stack these up and then we can bring our illustration back in and just make that guy a little bit smaller we're saying the illustration is there it helps but it's not the most important thing what's the most important thing is to see the big title of community connection and be able to start using the community finder whatever this little kind of widget or tool is that's really really important okay and so let's why don't we really quickly just take that off and we could do the trick where we lead our illustration off to the side that's fine with me i like that i like seeing a little bit of dimensionality and like and things overlapping the edge of an artboard there for some reason our illustration isn't showing up in our preview that's a wonky little figma thing that's happening but we'll just keep going we'll just keep flowing with it okay all right so that is looking good everything's looking good you know why it's flowing off the artboard because it's not on the artboard technically see how we have our ipad mini let's just call this ipad mini like that and our header is not on there so when we drag it inside now it's going to cut off now when we preview it it should actually have our design all together okay this uh this information is a little bit close for me so i'm going to come over here and just grab all these things our little community finder tool and i'm going to bring it down just give it a little bit of breathing room and i also want to give this a little bit of breathing room from the top i'm kind of thinking almost in viewport heights if you're into css when we think about a viewport a viewport is the actual port or the window in which you're viewing the device it could be a desktop it could be the viewport is the size of your screen and so i'm thinking that this entire lockup of our header should take up 100 vh or 100 viewport height i'm thinking like a front-end developer because i am a front-end developer if you're not a front-end developer i would suggest playing with webflow a little bit or a tool like that you can see viewport heights spacing percentages all of those things and you can start to think like that as well so a little little suggestion for you so i'm going to bring this down leaving a little bit of space at the bottom let's go back over and so now we can see our 100 viewport height how that works and this is literally at this point it's now it's just about tweaking right it's about finding what works and what doesn't work so we take something like this and just move whoa move these down we got to make sure we're moving our finder okay and our header image like that okay we want to boop boop just kind of playing with things and getting the right spacing something like that could work this thing looks a little cramped our community finder so i'm actually going to size my illustration down and you know what i'm already thinking too that when it comes to my illustration the illustration might not even be there in the mobile i know it's sad but it may just not be necessary all right we have our header kind of taken care of we have the information there that we wanted all we had to do was restack a few of our selectors and just kind of retweak that massive two-column layout okay now i think we could probably do a similar thing we could leave the illustrations off the page and we can start implementing these other these other assets right so i'm thinking the most important thing here is let's make sure this is on the ipad mini artboard the most important thing here is actually the text right so i mean we don't even have to change much of anything all we have to do is shrink our illustration and kind of lead it here like this and give our typography just a little bit of space and now we're just sharing the space okay but again we it's it's a much smaller setup but we're still honoring we're still honoring like the original layout okay so i seeing that i've done this i know that i have some card stuff happening i'm just going to bring this one over really quickly because i know i can just do the same thing i can size it down i can bring it in okay kind of honoring we should probably really quickly let's bring our our layout and guide back up let's get this over and make sure that this section is inside of our ipad mini so we are honoring that and just bringing a piece of our illustration in if we come back up here we should be honoring the layout or and then just manipulating our illustrations to kind of fit in there right i think that looks pretty good so now we have to just worry about this card area and we're just kind of cruising we're kind of cranking through it okay yeah ralph says figma bruh i know i hear you if you want this figma file by the way if you're interested in using this file that i have i actually give access to all of my design files to my channel members and so you can hit that little join button if you're interested become a supporter or an insider and you get access to all sorts of stuff behind the scenes you get videos before they come out and you get all my design files the both before and after versions of my design files which is pretty cool okay so let's take this featured communities section here and here's a fun one it's now we start thinking of like really thinking about columns okay so for instance i know in css how easy this would be to do if i had if i was using something like css grid or flexbox for this it would be very very simple to do okay i'm gonna grab my two other ones right there like that i'm going to bring them down and then i'm going to use the scale tool or actually maybe not even the scale tool i might i might just grab the elements like this and then resize them inside of figma and they almost line up perfectly i'm getting a little bit of funkiness almost there right we just see they're not quite on the column layout so i'm going to move this over left-hand edge right here of my column layout i want that to fit and then i want to keep stretching until i see that first one here on the left hand side till it fits perfectly then i know all i have to do is come in here and just kick these over and boom i went from a i went from a one column to a two column layout um really really fast oh what happened there something something broke down a little bit let's just restretch it over something like that boom so i have this nice like excuse me i went from a four column layout i didn't have to change much of anything really really pretty and i went to this awesome two up or two column layout um here we go uh let's see any other questions jack deich says at what extent a designer should take care of technical implementation aspects if you if you're just a designer i'm i there's a little bit of questions about your question to which extent do we take responsibility over the technical aspect of the uh the design couple answers to that number one as much as you want to that's the first one number two as much as the company or the client that you're working with will allow you to um number three as much as your knowledge and your ability will allow you to so for instance a perfect scenario would be i was working for a startup let's say um and i was working for a startup for a couple of years and we were doing a mobile application ios and android i would design things and i would hand them off to the engineering team but i would work with the engineering team to make sure the implementation was right on i have some knowledge of front-end development i don't have knowledge though of swift ios or android studio so there's only so much that i could kind of like lend my my skill level to but i was willing to learn so as i was working with them they were working with me and teaching me things i started to learn what was more capable what was more possible and it became a really really nice symbiotic relationship between the design team and the engineering team but there's other people who might work for other companies and say designer just pass it off and shut up and you don't really have a lot to say about that and that stinks and that goes back to the first point how much do you want to you might want to work for people clients or companies that allow you to have more hands-on if that's what you want so those are my answers to that that's a great question though let me see edward tofen says how can we take care of the visibility of the menu when you start scrolling and it eliminates overlapping you can fix it in place right so we can take these items here this is the navigation drawer where where do we put that we have a logo there boop okay let's just close up some of these layers so we can see things a little clearer shall we okay now let's go back and find our logo and we have navigation let's grab both of them they become our mobile nav right and we can uh when we're in prototype mode we should be able to fix this sucker in place i believe so i know you can do it in some other programs i'm i'm oh there it is fixed position when scrolling so with that being said why don't we think ahead of that and let's draw a box here okay and let's align our navigation to our box let's make our box white okay and uh why don't we include that rectangle inside the layer of the mobile now okay now the whole thing is fixed position while scrolling so that when we do this we we scroll and we fix that navigation up to the top if you want to if you want to you could make a little stroke here uh actually not a stroke we could do an effect ah of a drop shadow or an inner shadow and we can mess with that inner shadow and go we want the y axis just to be a one we want to have zero blur we don't want to be a one we want to be a negative one so we just get like a little bit of a line there and we can bring the opacity down so it's real chill um and if you're doing this in a development kind of implementation you could say on scroll i want this to pop up i don't want to be able to see that line until i'm scrolling but now look it's a nice clean look and we'd probably want to just do a little bit of tweaking of our text now that we have a little bit of a bigger kind of thing there that works out just fine look at that we can click here and open up our menu that didn't really quite work very good but because we haven't we haven't set it up the way that it should be but it's nice it's a nice look right as we scroll down we just get that navigation staying on top that's a good practice it's a good pattern or ui design pattern to do okay i hope that answers your question um let me see from where can i buy a website template for clients this one you can't buy you could just become a member but other ones um i'm sure you can buy templates out there i don't know where you buy templates out i'm sorry um let's see blastp says jesse don't you have some rule to resize typography when we jump from desktop to mobile oh uh how do we resize um i would say okay that's a great question um four massive headlines or things that people need to interact with and buttons tablet it for me is kind of an in-between i would start thinking about resizing here but i'm definitely going to resize when i get down to mobile so stay with me when i get down to the phone version or really really small i'm definitely going to think about there okay we're almost done though with our implementation why don't we uh drag over a version of this testimonial right here and i mean i think i think our the way we're doing things is working okay um we're just gonna line certain things up on left-hand edges right-hand edges and we can just resize things that don't need to be massive but are massive see what i'm saying so i'm just resizing a little bit there there's a testimonial is it the most spectacular thing you've ever seen maybe maybe not this is the start i want you guys also to be thinking iteratively as you are designing responsively okay um i want you to be responsible as you are responsive that's the cheesiest thing i might have ever said okay let's move that up see how i had this like i was using nice big white space between the word testimonial there i just shrunk that up a little bit because you know why white space is beautiful but when we only have so much real estate on a tablet or a phone boy oh boy it becomes a little bit more important you have to stop playing with things as much and you have to stop start getting a little bit more serious okay we could leave this off the page but we have some controls here so you could take your controls and just move those over and i'm going to just flip this guy that way actually i don't even think we need to do that and i can lead it off that way instead you get the point i'm running out of time so i don't have a lot of time to do stuff like this but i could then lead my image off the page and i could leave my controls down to the bottom and i could absolutely swap this around swap it again something like that and i'm forgetting where my oh you know what let's just do let's do 16 on this corner we'll do zero on that corner and now we can just tuck it in like that and now we have our controls right so you could do something like that where you make it bigger it's still leading off the page that looks real real nice again we're going to do a similar thing we did before we're going to bring over a copy of our community stories left hand align it and we're going to go to that two up kind of layout so we're going to grab these blog posts move them down here more of the same make sure we have good vertical space grab all of them stretch them out until the fir that left column really really works as we stretch we get different little variations and then we just tuck it over boom it's working like that and then we have the footer footers are always fun to play with especially when you have a massive footer like this and look at this i stretch my artboard way too big that's nice it's good to know so we didn't need as much space as we previously thought so first things first we're going to grab our dark rectangle and just bring it in we're going to take these elements and drag them over and left hand align them we're probably going to just constrain a little bit yeah the uh yeah we're gonna constrain a little bit of the um the text blocks over here why because we're probably gonna make our footer if you don't have that horizontal space you're going to need more vertical space for some reason my social media links all were done in black and they should not have been we don't want that but we do want to keep our line there nice and now we're just gonna start bringing in we could probably left hand align these like so and we're gonna find our shop ones put them here and what else do we have we had boom boom boom is there other ones interest there we go last one was interest and you can line interests up either here or you can keep going there i actually don't mind kind of spreading these out a little bit more and being a little bit interesting i might be different than other designers footers are one of those things where when they become insanely long they start to get a little bit ridiculous in my opinion so you don't want a footer like this long it just becomes really really silly right so this one could this interest one could go down here or you could start a new line you could have ignored all together up there this is now just becoming all personal preference i don't think it's a right or wrong answer to this one so no quick hard fast rule there either so we could have done it like that um and then we could select our ipad mini let's take our six column kind of layout off and let's look here uh our stories and our footers a little far away so we have to worry about that vertical space and that looks pretty good let's check it out in the tablet mode right so uh we got the majority of the point kind of here like it makes sense it's above the fold people can see it it's a little bit low for me i'd probably come back and tweak that a little bit and then we created a pattern as soon as we went down to mobile we shrunk the illustrations they're not as important we tucked them off to the side and we let the content actually just stand out right feature communities we did this in this section and another section where we went from a four column layout to a two column layout and then we reused the same pattern that we did above shooting it off to the side or the edge we did a similar thing imagery off to the side focusing on the content and this is good for a tablet mode i think this works right when we would move over to a from here we would move over to a mobile phone mode right we would do something really really similar we'd come in we would take our our navigation okay and now here's to answer the question that was asked earlier how do we start manipulating text and buttons and imagery on mobile because mobile's where it really matters majority of people are actually going to view things on a mobile a mobile device not necessarily a tablet tablets are still kind of a weird in between although they're there we should design for them so my opinion is the tablet should be in the in between of a mobile and a desktop right so we don't really change a lot of the text size and everything over here on tablet quote unquote tablet sizes but we do start changing them quite a bit over here on mobile so first thing i'm going to do is i'm going to grab my rectangle i'm going to bring it over i'm going to grab my navigation i'm going to bring it over and this is massive this this top navigation bar is absolutely massive so we're going to want to bring it up because we really have to think about vertical space right vertical space is very important to us um when we get to the these true blue like mobile sizes so we're going to do that we're going to push things over to the side just like so and i'm not going to do the whole thing but i will just do this top section okay i'm going to grab some of these elements and i might do this bottom section here too or this next section up here so we cannot fit text on the page at this big so now comes the time when we're going to have to think about scaling down our headlines we're gonna have to think about that but we don't want to scale down our body copy for instance our body copy over here is 30. that's really big we i forgot that the text was so big there so the body copy should never get smaller than 16 pixels in my opinion it just becomes really really hard to read okay so with this community finder i'm going to come over here and this is going to become this is going to become the big deal right no longer is uh the illustration even considered to be important but the text that's there is and this piece of action is and this is actually where we might this is where we might actually consider going center aligned on everything so when we go to mobile or a single column layout becomes really really common for people to boo-boo i'm going to take that get rid of these little accent pieces because they're kind of just getting in my way for the demonstration purposes let's grab all the elements inside here boom like that and we're going to horizontally align them and and because we want things to be like the touch points or the tap points on these to be like really really easy we might also here think about expanding anything like this like a button and keeping them all the same size maybe even doing something like this like expanding some well we probably wouldn't have to do that but expanding anything that needs to be tapped or manipulated becomes like a real consideration because of the fat thumbs issue okay this is a lot of this is a very common practice you'll see this happen let's center align the text of this button make sure everything's lined up okay and why don't we just really quickly grab all the elements that are here and keep them constrained to the top so they don't stretch figma has this really interesting stretching and resizing thing okay so something i might think about doing for the illustration is making a little bit smaller bringing it up and then bringing it behind the button why so that uh from just my above the fold view prototype let's go here to this prototype and we really want to see oh how do i get to oh there's no prototype happening there that's okay we can skip that for now yikes let's go back okay so for the above the fold and i can i can demonstrate this really really easily like this let's bring another uh phone iphone 11 right our above the fold is here this is kind of all we're seeing is that's the view of our phone it's nice it's a visual it can help lead you down the page but it no longer becomes distracting and it's definitely not the focus of anything right just playing with things bringing things up so i have time to do one more little piece of this and we got to get to portfolios because i promised everyone i would review some portfolios and i'll try to answer some more questions as we're going okay uh i would actually consider ditching the ditching the uh the illustrations here or you could bottom anchor them but they just ceased to become important at this point right we have a visual it did its job that's really really great but now we need to really focus on the content itself okay so um you do have to i will say you should really really be careful of center aligned text when they're big blocks of text like this you can still say stay left aligned if you want to or you could try center lining but see how funky and ugly that looks it just looks a little wonky in my opinion so yeah it's just too it's just too much text so you got to stay left aligned and with that being said then you could drop this down a little bit excuse me it was oh the line height was 30. that's why i was like wow there's no way that was 30. so you could drop this down a little bit to something like 16 you could drop these down a little bit maybe to 34. and for all of you coders out there people who are in front of development it's a really really easy way to do that in using uh using css you just create scalable text on using like well i don't have time to explain the whole thing but it's very very easy to do okay so with that being said now we've gone down from our illustration right into a piece of text that's really really important and we could keep stretching this down grabbing our elements and make sure they're top anchored so they don't move keep stretching this down and bringing elements in and dropping them to this could get me you could just already see exactly what this is supposed to be can't you this has got to be one column layout so we take those and we move them down to one column layout like so and we have to bring in the size of this text okay something like that we're going to grab all these and make sure that they are distributed nicely we may not like how much space they're taking up so we might want to reassign a little bit of space like this right when i do that it messes up some of the the sizing of the text and all that but i could come back in really really easily and just push that up and again all this is done very easily inside of css so you do something like that look how much vertical space we saved by re by manipulating the like the height and the width of them but definitely dropping them down to one column and look how nice that looks let's get rid of this look how nice that looks for our vertical or excuse me for our mobile uh view of it a little bit of white space don't be afraid of white space inside of uh of mobile versions okay with that being said we have run out of time for the design portion of this we gotta i repeat have to move on because we're already 45 minutes i'm i'm gonna answer one or two more questions though um okay uh jack deich says uh what are your thoughts on those who are still using adobe photoshop for web and app layout design instead of dedicated tools such as xd or figma i think it's stupid sorry that's a little harsh to say it's just it's just way more work even if you're a photoshop master i love photoshop i still use photoshop for tons of other things i make assets for websites and for mobile applications inside of photoshop but the amount of time it would take you to make a for instance a simple application that has 40 screens 40 screens 40 screens in photoshop would take you weeks whereas if you make it in figma or xd or something like that it has this design system focused like like momentum to it where you're creating artboards it's an artboard system you're prototyping in between them you don't get prototypes in photoshop so that's the thing but you can prototype in between them simple animations or transitions or things like smart animate here in figma or auto animate over in xd you're not going to get the preview and the share abilities you're not going to be able to view it on like a mobile device using like the xd or the figma viewer you're not going to get components or easy access to components and make things really scalable and easy it's just not this is not meant for that type of design and so i would encourage you to use a dedicated tool like one of the ones we're using um let's see let's see uh question what's your thoughts on oh sorry the one last question the name of the background song i don't i don't know i'm sorry i apologize i could probably find it for you hold on uh it's called um it's called it's by joe corfield and it's called wildflower and i get um all of my music assets from musicbed.com that's my thing hey let's jump over right now to uh my my uh my browser here and i got a couple of portfolios to review so this is uh seminar oh design.com dom seminario okay seminario sorry he's a designer creating usable digital products they're enjoyable and easy to use he submitted his portfolio to me on instagram follow me on instagram you can submit stuff to me ask me questions i'll try to answer them nice picture of him smiling face prod products okay i right off the bat and i always kind of harp on this i'd like something that has a little bit more personality you know for dom i'd like to hear i'm dom i'm a designer who likes making this type of design so i focus on well i see a lot of mobile just from the hints of what i'm seeing there i don't see any web design so i'd want to see i'm dumb i like doing ux and ui design for mobile applications and startups and then i want to see something about your personality and i like pizza like this makes it matches your your uh like the photo of you it's like oh he's happy he has character and personality he knows what he likes to do when i come to here i go okay you like making digital products are enjoyable and easy to use i was going to do an e-commerce like a website is that you i don't know right so the more niche and specific you can be the better without niching yourself out of everything that people that happens okay 2020 run shoes app ui and ux design is it a concept project we don't know you're missing out on a lot when i get the product project page this is not a good money shot right here i want elaborate beautiful themed presentational design at the top and yes we're going to do a case study i can already tell it's a case study it's going to give me the problem the solution the outcome i love it but at the same time let me just say it boring everybody does case studies like this i need something different i need something more snazzy i need something that really captures my eye visually boom i want to see it secondly though if this is a real project which it might not be if it's a concept project what i'm about to say is a little harder but if it's a real project i want to see you say i want to hear what your design services did for this client or for this product did it grow red like increase revenue did it get more traffic or leads like speak the language of business and beauty at the top of your case study let that be the thing because honestly tldr too long don't read this case study oh it's actually not very long i can read more though where is it going to take me it's going to take me to medium where you haven't posted okay so that is kind of the tldr which again is kind of cool but a little bit upsetting because for a too long don't read i get almost no visual and i get no understanding of the project it's just it's lackluster a little bit i think it could be a little bit more spicy let's be a little bit more spicy here's running stronger okay uh again not a great not a great shot not a great like money shot there i'm gonna read more i'm gonna go over to medium and it's a it's a case study it's just like it's not themed very nice right it's just i i like it i like your work dom i just think like we need a little bit more right um so just all in all everything's just a little bit lackluster and i think we as designers we spend so much time you probably just work your butt off for your clients and you're amazing at doing work for your clients but then when it comes to doing design work for yourself you're like the rest of us as designers we just don't do the best job at it we just don't take the time because we're tired and we already spent a lot of creative juice and energy on our clients but you do have to spend it on yourself if you want to be successful okay let's move over this is ui.harish uh and uh this is an instagram profile dude i'll review an instagram profile no problem he submitted it to me on instagram to instagram and he's got lots of ui work going on here so let's take a look at it i will say instagram pages are great i have an instagram page i put some of my work up there sometimes but you know it's like a dribble account there's not gonna be a lot of information right i'm you're gonna i'm gonna get one shot out of this and go hmm it looks nice and the problem with i think everyone every designer or creative should have an instagram profile but you gotta have more because there's so many people making beautiful dribble and instagram shots out there that there has to be more and the visuals cannot be your value is that man that's a good tag line visuals cannot be your value like because there's so many designers who are doing visuals so it has to be it has to be your focus on the work it has to be the value that you bring which is always for business is going to be revenue it's going to be revenue traffic leads quality that's that's what really really matters and so the visuals are good post your visuals but i hope that there's somewhere else where you're featuring this stuff that tells me a little bit more okay i mean i'll tell you right now the ui design is lovely it's nice use of color just in general as a creative is really really nice the art direction usage of imagery the ui design dimensionality it's very mature it's not like you're definitely not a new ui designer you've definitely been around the block you know you might want to work a little bit on just from like this shot specifically you might want to work a little bit on contrast and then maybe sizing like these are kind of competing right with like the thing above that's why a lot of uh websites will make these grayed out or like kind of monochromatic so think about that um who doesn't love cute cats i don't i like dogs that's just to be really really honest not a big fan but the ui design spot on really really modern really really nice i just don't have a lot more to say and you know what i wish i had more to say because um i would have more to say if there was more to this more meat on the bone and not just the visuals but you know as far as looking at somebody's ui shots really really well done and also the presentational abilities of this is really really nice um you know super super nice so i think we should all work on having a thorough amount of work and presenting it well this is a good start to that let's move on this is ma jid he's a designer from algiers algeria and let's see doing some ui and ux design one year experience okay so a younger designer a junior designer i like that tell me your experience you tell me you're a senior designer and i look at this work i go you tell me you've been designing for a year you're a junior designer i look at it and i might go oh we might have a role for this guy here because we could grow him and mature him as a if i was somebody who is hiring right so let's look at a little bit of your design okay i think this is really cool uh it's fun to look at people who are confessing that they are newer designers he is going to grow like exponentially in the next few years when he hones his craft and he puts more hours into it but for now the things that i'll say will be beneficial towards that next few years so let's break some of these designs down a little bit um the photoshop work of cutting out this basketball and this tennis ball is a little rugged the shadows behind it are a bit intense right i like to keep my drop shadows below 10 for the most part um i think the usage of typography it's it's a little junior right like it could be a little bit better it could be a better typography chosen and then you i feel like you're trying to get differentiation between this top line this bottom line but there's not enough contrasting weight or size so play with size play with weight i like the fact that you're keeping the typography the same you're using one font selection or running with it you should do that but some of these controls are a bit cartoony so we want to calm things down a little bit like i'm this is presentational let's look at the real version here it irks me that the corners here are different than the corners here that's the thing you have to think about okay and those corners here are different than these corners here so try consolidate and make consistent your use of border radiuses and corners and shapes everything should be really really consistent okay um also it's i'm not a big fan of this darker gray here it's just losing it could pop a lot more if it was pure white right i think using one like one typography like piece of typography and using white and lots of white space it can be intimidating you're like i feel like i need to design this thing up a little bit but you're thinking that i used to think that too i need to add more on this page it looks really dull it looks dull because i wasn't using the design basic design foundational principles well and so i was trying to jazz it up with other stuff it's like when i started playing guitar when i was like 15 i didn't know how to play guitar well so i just played guitar loud right that's this is a great example of this and this isn't bad don't take this as a negative thing this is great you're going to learn and grow this designer is going to be amazing in a few years but for right now he's playing with a little bit more volume than he is with technique right we can kind of see that so uh let's look at another one of these projects here on behance okay behance by the way great place for you to start your portfolio lots of lots of like possibilities there um okay so we got a little this is a website design and i again i like your use of colors you're exploring shapes here and angles really really fun i'm just the the usage of iconography and layout it's just a little bit immature right so i mean i think this is a really nice product shot but there's just not a lot of space you see how cramped this feels we need to spread this out a little bit and that's just a little bit art direction bringing down the sizes a little bit right playing with typography giving a little separation of white space um okay and then down below good again really thick on the drop shadow a little bit better than the last one so i'm wondering if this one is actually done after the last project but really really nice the cards are nice um you know i'm it it's bumming me out a little bit if this is a website like we have this hard line down the left-hand edge here um and then when i come down we've stepped in a little bit and then i come down we've stepped in a little bit and i come down we've stepped in a little bit we come down i've stepped in a little bit and then i stepped back out a little bit so you can play with some of it but that's some of those basic design principles that we learn and they're foundational right as you grow on them it's consistency through alignment and the vertical access of your website you can break that a little bit but if you're doing nothing but breaking it it looks broken so if you if you just control yourself to to kind of keep on alignment that one time that you do break it'll be like it'll be amazing it makes so much sense right but here it seems just like you were throwing stuff all over the place and so you might actually benefit from using kind of our layouts or grid structures we were using in our project right so but really good work i think for the most part this is exactly where you're supposed to be don't feel weird about this you just have to look just learn a little bit more about kind of basics and some of those foundational design principles and then also if you're going to go down the path of web design and ui design what are some of the basics of ui design like for instance this is a form field these look like floating buttons right we make form fields look like form fields there's some there's some generic basic things that we always do it's because they work and people know them they're well known user kind of like user basics right okay last one is from dyson stocks dysonstocks.squarespace.com and says she's a senior ux designer with a passion for strategy creativity design and technology okay it could be a little bit more this is a good point all of these that we've looked at so far we all need to as designers learn about copywriting copywriting is the hidden skill of a designer if you're a good copywriter boom takes you above and beyond if you can write good copy you just amplified your value and you're worth in a company or to a client like ten fold i'm not even like exaggerating ten-fold so if we can learn to just speak the language a little bit more i think would be better she says she's a senior designer we're gonna look and check it out uh att atlas platform researched and designed a new version of atlas att field operations so this is a real project okay and i always have to keep in mind when i think of a real project it means how much influence did she have and how much control was taken away from her because again horrible top section of this horrible presentation of the work it's and maybe you're geared more towards corporate america but i think corporate america can still give us a little bit more wow factor at the top of this okay um again this is just re-breaking down the same things we saw in the outset of this so i see i'm already like getting a little bored i need to get to the action right project summary the problem the the problem with this is the nothing is is branded right nothing is on brand to at t atlas everything should be using their brand colors everything should like just be a little bit more interesting and there needs to be a better mixture of visuals and information there needs to be the too long don't read section in my opinion um you know the typography is a little small a little cramped it's not very exciting the pictures aren't very exciting i don't know how this relates to your project you know what i mean like it's got to be contextual it's got to relate there's a picture of a guy he's a nice looking guy i don't know okay i mean this shows a lot of your process and it's great but could all of this be branded yes it can it could all be branded to the atlas brand so it makes you look like a beast mode when you're putting this stuff up here but it's it's the presentational stuff like this and i i say this with all honesty this is great information but it's been late it's lazily presented in my opinion so you know the information is great again it's just a it's just there it's a it's a book that that is packed jam-packed with valuable information but it's like reading encyclopedia do i really want to i need something that captures my attention a little bit more so let's let's try one more it's probably going to be the same it's a lot of the same it's just not interesting to me i i would say dyson i would really encourage you to spice up your work uh even this shot it's nice but it doesn't say a lot about you the copy doesn't say a lot about you so it seems like you are a wealth of knowledge and experience and you could probably crush any job that's given to you wherever you're working but the presentation aspect of it doesn't make me feel really passionate about pursuing you if i'm looking to hire you right that's all i would say and that's though that's my feedback those are my thoughts everybody so again if you're not subscribed the channel please do that thank you guys so much for joining me on the live stream we have gone for about an hour and that's about as long as a live stream as we should do if you were watching my instagram story i had a little mustache and it was not real it was just a very realistic looking uh filter on instagram so i really really enjoy that one it's good times uh thank you guys so much for joining the live stream again if you want to get this design file that i was working on you could become a channel member you can hit that little join button make sure you subscribe and maybe maybe think about sharing this hey i watched a great live stream today lots of value if you got value out of it if you didn't that's fine you just you just pass on doing that but i appreciate you guys being here thank you for all your amazing questions um i am going to be right back here next saturday well actually there will be no live stream next saturday i'll be on vacation so don't expect a live stream next week but the following week after that we will be back and there'll be plenty of content posting on my channel next week pre-recorded stuff so stay tuned for that and uh thank you guys so much for your support we'll see you next time you

Channel: Jesse Showalter

Views: 9,058

Keywords: jesse showalter figma, jesse showalter notion, jesse showalter affinity, jesse showalter, jesse showalter ui design, ui design, ui design principles, ux design tutorial for beginners, ux designer career, design live stream, design tutorial, adobe xd tutorial, adobe xd web design, adobe xd app design

Id: 9Da-8jdcJ1Q

Length: 63min 0sec (3780 seconds)

Published: Sat Sep 12 2020