Adobe XD Tutorials

UI/UX Workshop #1 – Cards, Information Architecture & More!

welcome everybody to the very first UI UX design workshop before we begin though 'la note the sponsor of this video makes it easy to host your site

your app or service on whatever technology stack you use with one-click apps like wordpress drupal getting up and running is easy with back-end access to your server customization options are

all but limitless a fully configurable dns manager allows for you to easily switch or to name over to your new server and ssl certificates can be installed for free using open-source

tools so sign up using the link below to get $20 in credit on your new Lunada count hey everyone what's up Gary Simon of course tetra com so today I'm excited because I'm releasing the UI UX design

workshop and it's the very first episode we'll see if you guys like it if you do make sure to hit like and let me know in the comments so I'll keep doing them but basically every other Friday I've been

doing a live design show where I really go through the design entries quickly I don't really change I just give verbal suggestions this time it's different I'm just taking three submissions and

it's obviously not live either I and I'm going to improve the user interface of them and also the user experience alright so I think this is going to be a little interesting we'll see if you guys

like it again let me know make sure to subscribe let's get started alright so here is the very first entry from discord user Aussie adapt and that's Aussie as an Australian I would assume

and yeah there's a number of things that we're going to do to make this a lot better so let's go ahead and get started with that alright so I'm just gonna get started by having an actual nav bar at

the top and I'm gonna take the name of the project and put it right here as a logo cuz it's more of just an afterthought and it doesn't really help people really understand exactly what's

happening also no more hamburger menu because it doesn't make sense on a desktop yeah that's bad for UX you want people to be able to access things with just one click when you have the space

also I write here in their about page they just had that text that you see right here and it just makes sense to help people know where at what what the site's about so I put that right

they're at the top and the header next I have the card design and I just have a very soft eye shadow that's coming from it so that you can see the container itself even though the background is

white and the container is white as well here he actually did a pretty good job and on the card like the inner structure of the cards but I'm changing up slightly to make the button blue first

of all instead of black just to give it a little bit more color and also dual button because the end point or that button that you clicked was just showing JSON data so you can view it and in my

case you can also copy it to the clipboard next up I'm just going to use Adobe XD s grid tool right here to get them all lined up and then I just make some slight adjustments here on the

positioning and the size of everything alright and then coming up here I also do a secondary version just to show you how this would look in a dark mode format and so almost everything's just

inverted although I did change up the button instead of a border I just kind of made it gray like that alright and so this is the before and here is the after hopefully you think it's quite an

improvement alright and the next entry up is from my co admin JVs and the discord server and obviously jbs is initials his name there's a couple things happen here there's a lot that's

happening correct a lot of white space I like that a lot simplistic elements here something sort of abstract the colors work well but there's a couple issues here the first I

would say is prioritizing the information when it when it comes to people who you know might be potential clients or employers that visit your site they're not so much interested in

your name as they are about what you can do for them so I'm gonna be making changes to this drastically and also the call to action is scrolled down for more information information that's way too

hidden you want something that stands out a lot more JVs kind of knows since I did this but I'm just getting to kind of drastically changed this up

quite a bit all right so basically I get the same background color here I'm taking the name instead of putting in the center and a focal point I'm gonna put it at the top kind of like in a nav

bar because is it's really not that important and I'll just explain why in a second and also I had a navigation of projects and hiring me I think that's important as well to have a good call to

action now next up this part is very important and it's an element I decided to add by to differ from him so I'm gonna pause so as you can see in his example for his ad copy he just has his

name which is the emphasis and are the most important element that people see and then also his role or his job title which is a UI designer slash full stack developer these two pieces of

information aren't the most important pieces of information that you can emphasize people are interested in what you can do for them so it's really a good idea to have some sort of unique

concise you want it concise because you want it to be large enough to really be able to stick out so you can a few words I kind of eye a descriptor ad copy something that's unique that that tells

them what they eat what you can do for them what are the benefits you always want to describe the benefits over the features the feature is your name the feature is what you do but what can you

do for them how can you benefit them so that's why I decided to add this part as well it's very crucial to understand that so next up I do the actual is role which is UI designer full stack

developer making it a lot smaller it's a lot less important also he had no scroll indicator so I'm going ahead and putting that that should party animate as well and then next up I'm just recreating

that bahlika element a sort of abstract design element right here and I'm making it bigger to fill out the space a little bit more so at least on this desktop resolution and I'm just replicating

artboard to show that you can do something way different even like that so here's the before and here are the after variations let me know what you think

all right now next up is this little section this wasn't the top of a landing page it was actually kind of in the middle and I decided that will work on this part right here this number of

issues in terms of the lack of white space we have an issue with contrast and also the form is not what is considered to be an accessible form so I'll be changing that up and I just making it go

quite a bit better so let's get started all right so for this one I'm just going to recreate the top and bottom containers that you see there just for a reference in terms of how the whites age

should be handled also for the headline I decided to left the line that in the left column instead of just centering it and it will be right above where the form will eventually go so here I'm just

getting a text situated with good visual hierarchy and all set up and next up we have the form so his form was not accessible because it didn't have any labels and just relied on placeholder

values you don't want to do that it's a big no-no and in terms of accessibility there's a lot of issues with that people with screen readers and such there's just a lot of issues with it so instead

instead of using a placeholder value definitely have a label like I did but if there's also additional information like oh in terms of instructions like it did just put it on next to the label or

underneath there's that various you know ways to go ahead and do that I just chose to put it to the right and also do emphasize the importance just by making a little bit my gray so just a

call to action button down here and then I take the illustration and just position it all right so basically this is the before and this is the after alright so for just one final look at

three projects that we did I got rid of the hamburger menu as you can see we changed up the background got rid of this line right here we also provided some descriptor tax about you know what

the purpose of this actual site or this page is and one thing we could also do by the way I find it a little bit too hard to see the cards we can increase the

contrast by taking the background from white and just bringing it down slightly I think I might even like that better even with the added text shadows here we could leave those as well and then

finally a black and white version as well next up we had this one again just a ton of white space a little bit empty I think the biggest issue was I the information architecture or ia that was

lacking a bit so we instead decided to emphasize other things such as having a headline here d emphasize this and also his name also he had to scroll down for more info just tucked way down there or

no one would see this would probably animate I would have this in the actual front-end development process up and down perhaps and then finally we have this right here which you could see

everything's just really I tightly scrunched in it locks white space especially vertically and also the other big issue was the inaccessible form so what did you guys think did you like

that or not let me know in the comments if you did of course like it leave a comment and also share it around hey I'll see you guys next time hang out in the discord server as well because I may

feature to your design next [Applause] [Music]

http://www.linode.com/designcourse – Use code ‘DESIGNC19’ to get $20 credit on your new Linode account!
— Today is the first episode of a new series “UI/UX Workshop”, where I pick out a few submissions from discord and redesign them for improved UI/UX. Let me know what you think about this new format and if there’s anything you think I could improve!

The theme of this episode includes:
– Card design
– Information Architecture
– Light vs. Dark UI
– White Space
– Visual Hierarchy

I may start doing these weekly. Join my Discord! https://discord.gg/a27CKAF and submit your designs in feedback and I just might cover it next time!

Let’s get started!

#ui #ux #design

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!