Making your Layouts More UNIQUE - Rapid ReDesigns

today we're gonna make these designs a lot better and more unique [Music] what's up everyone gary simon here so today we're gonna be doing a ui ux workshop video it's been a while since i did one of these and basically i just take three user-submitted designs from discord and i improve them in terms of the ui and or the ux all right so for the theme of this workshop it's going to be you know really reworking and coming up with more unique ways to tackle common ui design layout patterns all right so if you agree or disagree with any of my choices for any one of the three submissions let me know in the comments give me a like give me a subscribe and let's get started now before we begin some of you may not know but earlier in the year i released a ui design bootcamp on scrimba now scribble.com is one of the hottest new ways to learn coding as well as design at scrimba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so visit the very first line in the description this youtube video to access my course along with many others for a very low monthly fee here's a submission that features a section that's commonly found beneath the hero section on a landing page in about a section with a few features describing their business now outside of some obvious ui design issues it's pretty boring so i'm going to try and remedy that situation the most so the first thing i wanted to do is to take the what we do text and stick that on a left column aligning it to the center all alone doesn't make any sense on a larger viewport that's something that only makes sense when you don't have enough space and as you can see here i'm just experimenting with a unique way to feature the headline now for the areas where we have five different features with an associated icon we can tackle this many different ways i'm choosing to situate them in a right column and within that column having two columns with three rows for each of the features and it will fill up this single 50 width column on a larger viewport [Music] i also choose to slightly change up the background color for each of the features which will help distinguish the features in a subtle manner from each [Music] other [Music] finally i decide to replicate the artboard so that i can experiment with a light color scheme and then to make it a bit more unique you will see in a bit that i decide to slightly rotate the features section which i think makes it look really cool overall i'm pretty happy with this particular refactor let me know what you think if you agree or disagree in the comments here's a skills and about me section that's lacking a lot of structure and white space the four bits of information such as being a google code in winner and other accolades are something that's worth emphasizing more so i'm going to create a sort of slideshow or like a horizontal navigating ui where each of these sections has a dedicated screen so i'm thinking about creating sort of a horizontal navigation for each of the four sections this could be realized in many different ways during the front end development process if it were a slideshow it could pause on one slide for a few seconds and transition to the next if it were a horizontal scrolling page it could transition to each section based on scroll now it's just a matter of creating two columns where on the right a relevant photograph could be placed and on the left more information about this specific page now after this step i prototype a very rough animation of what it could look like but due to limitations of adobe xd the result is nowhere near as good as what it could be if it were fully realized in the browser especially with something like green stock animation platform here's another really common pattern for illustrating features of a given service but i want to offer up a different full page approach for these three specific sections [Music] so we have three sections and being that i want this to be full screen i want to partition the layout into three of these sections now you could go with three equally length columns but you could also do what i'm doing which is a 50 width single column on the left and then split the right column into two rows next up i want to use photograph based backgrounds that are somehow relevant based on the content that will sit on top now for two of these sections i use a photograph technique where the photograph seamlessly overlays into the background and the third i use a more traditional approach of using a photograph watermark background [Music] so notice the amount of white space and just how much easier it is to read and follow [Music] all right hopefully you enjoyed that let me know again if you agreed or disagreed with any of the decisions that i made here in the comments as always if you haven't subscribed yet please just hit that subscribe button with the notification bell and i'll see you guys soon goodbye [Music] you

Channel: DesignCourse

Views: 59,178

Keywords: ui ux workshop, workshop, ui/ux, ui design, ux design, gary simon, designcourse

Id: rh6KtCKRP8U

Length: 7min 24sec (444 seconds)

Published: Tue Oct 20 2020