The button is probably the most common UI design pattern so we can find buttons In pretty much every website web Application or user interface out there And When it comes to designing a button you Might say that oh it's very simple you Have a piece of text with a solid color Background behind it and you're good to Go but honestly it's a bit more Complicated than that there are some Best practices for button design and Also some things to avoid and this Course will tell you all about those but Hey for just meeting my name is Adi I'm A web designer and developer and here's What you'll learn in this course first We'll talk about using the correct shape And size for a button then we'll briefly Discuss wording or what the button text Should be We'll also explore the various padding Options for buttons and see why that's Important now one thing that a lot of Designers Overlook is the color contrast So you'll learn how to design a button That's accessible to everyone Uh finally we'll talk about alignment And why that's important and also about Staying flexible and designing a various Button variants now before we get Started I would like to briefly tell you About an amazing resource called envato Elements here you can find tons of
Useful resources like fonts icons UI Kits WordPress themes music stock photos And much more for creatives like me this Is an awesome resource because all the Assets have simple commercial licensing And you're not bound to any contract Therefore you can cancel whenever you Want so if you're interested check out The link in the video description Alright so with that out of the way Let's kick things off by talking about The button shape Before we get started here's a quick Reminder that you can check out the Video description for links to any Resource I used in this video and while You're there don't forget to also Subscribe to Enviro touch Plus for more Free courses and tutorials just like This one All right let's talk about button shapes Because this is a very important topic Here's the thing Technically You can Make a button any shape you'd like so if We're strictly talking about a website Design You can make any Image or shape act like a button however You should not do that for example let's Consider these two buttons which one do You think people are most likely to Click on the answer is obviously the
Button on the right because it's a more Recognizable shape people are used to Buttons being either rectangular or Circular and here I'm talking about the Real life think about the buttons in an Elevator right they're usually a square Or a circle and even if we're talking About the digital medium our buttons are Still mostly rectangular or circular Which makes them instantly recognizable Right people know that button and they Can click on it so for example all the Elements you see here will be recognized As buttons as clickable elements as you Can see we have square circular and a Rectangular shapes now when it comes to Picking the right shape It really depends on the rest of the Interface and the overall Aesthetics Right if your design is more boxy then You might use buttons with square Corners if your design is more let's say Playful then you might add some Roundness here and there there isn't Just one perfect way of of doing it it Really depends on the rest of your Design so then let's take a look at a Few key takeaways uh buttons should be Easy to click on therefore they must Have a shape that's recognizable based On a real life people are used to Buttons being either rectangular or Circular you should avoid using fancy Exotic shapes for buttons these will
Only create confusion the correct button Shape depends on the overall style and Content of the user interface so that That's the first step to designing Better buttons and that is to use the Proper or the correct shape Uh the next one is to use the proper Size so let's explore that in more Detail The size of a button is just as Important as its shape and uh it should Be determined by the medium in which the Button is displayed for example if You're displaying a button on a large Let's say desktop screen then it should Be a little bit bigger Just to make it more visible and easier To click however if you're displaying The same button in a smaller screen Let's say like a smartphone screen then The button should be smaller because we Have Less real estate to work with but it Should still be visible and easy to Tap I think we all remember those Annoying ads that have a tiny close Button which you can never click on a Mobile screen and you actually end up Clicking on the ad itself well that's a Bad practice and as a responsible web Designers and overall nice human beings We're not gonna do that are we So the buttons shouldn't be too small But not too big either right but how big
Is big enough There is no correct answer for this as It depends on various factors but it's Recommended that on a mobile you should Make your buttons at least 44 by 44 Points on iOS and 48 by 48 DP were Display independent pixels on Android This will allow anyone to comfortably See the button but also tap it with Their finger as far as desktop goes the Button size should be dictated primarily By the text size and as a good practice You should make the button text just About as large as the body text so for Example if your paragraphs are 18 pixels In font size then make the button text 16 pixels or 18 pixels however all of This depends on the context in which the Button is displayed for example in a Hero area you would make the button Bigger than in the rest of the website Uh the reason for that is simple you Want that button to be visible and to be Easily clicked it's the hero area right It's uh usually the first thing a Visitor sees so it contains very Important information that's why you Often hear clients say oh make that Button bigger make it pop right We don't like it when clients tell us How to do our jobs but they understand That certain things In a design must be immediately visible And clickable with that said buttons can
Also be smaller than the default Consider this table element making the Download button too big would not look Very good so to keep things balanced we Made it a touch smaller it's all a Balance act really you have to make sure That the buttons are aesthetically Pleasing But also usable and using the right size Is very important ultimately the best Way to determine the correct size for Your buttons is to do user testing or or To perform user testing to see how People interact with the buttons and Adjust the size and placement Accordingly so then a few key takeaways The size of a button is just as Important as its shape and it should be Determined by the medium in which it's Displayed on a mobile screen a button Should be at least 44 by 44 points on IOS and 48 by 48 DP on Android on Desktop screens the text of the button Should have roughly the same size as the Body text the size of a button also Depends on the context in which the Button is this plate the best way to Determine the correct size for buttons Is to perform user testing so that's the Second way of making sure you're Designing better buttons and that is by Using the proper size now Let's talk about wording next because Uh what a button says or what it shows
As text is super important it might have The right size it might have the right Shape but if it doesn't say the right Thing then it's kind of pointless so Let's have a look at that next The wording of a button is very Important as it sets the expectations For the user uh issued clearly indicate What will happen when the user clicks That button uh the wording or the words Should be concise and easy to understand So for example if the button is used to Purchase an item then it should say buy Now or purchase as this will be Immediately understood by the user So it's really important to use the Right words as this will lead to more Successful conversions for example Let's take a look at this register or a Sign up form uh the button just says Okay it doesn't accurately reflect the Action that will occur when the button Is clicked which is to create an account With the information we provided a much Better option for wording would be Create account or sign up here's another Example a sign in form this time the Button just says go which offers no Indication on the result of the action But if we change that to sign in it Makes a lot more sense because you'll Know exactly what will happen when you Click it and the examples can go on and On if you're for example in a shopping
Cart the button that takes you forward In the buying process should say proceed To checkout or place order Uh if you're in a settings page don't Just use buttons that say OK or apply Instead the buttons can say save changes Or update settings and I think you get The idea now a few key takeaways uh the Wording of a button is very important as It sets the expectations for the user The wording should clearly indicate what The user will get or what will happen if They click it the words should be Concise and easy to understand Using the right button wording will lead To more successful conversions now Previously we talked about button size But the size is dictated by a lot of Factors one of which is padding so let's Talk about that next So what exactly is padding well in Simple terms it's the white space Between the content of a button and its Borders for example the buttons on the Left have no padding so their contents Are basically touching the borders The buttons on the right however have 96 Pixels of padding on top right bottom And left and as you can see just by Adding the white space the distance Between content and Border we get much Better looking buttons so right away we Can see that the padding is a must have In button design but now the question is
How much padding right well whenever I Design buttons I use a very simple Formula And that is uh whatever padding I use on The top and bottom I double On the sides in this example I use 48 Pixels of padding on top and bottom and 96 pixels of padding on left and right This produces very balanced looking Buttons and it's worked great for me so Far now that doesn't mean that you Should always use this formula for Example when creating an icon button I Usually keep it Square so the same Amount of padding on all sides and you Can do this with a text button as well But in my opinion this looks more like a Badge than a button also please avoid Doing this which is using different Padding values on the same axis so the Padding for the top should be the same As the bottom the one for the left Should be the same as the one for the Right otherwise you'll create a visually Imbalanced buttons so to keep it simple Use the one two rule I just showed you So 1X padding for top and bottom and 2x For left and right Now One Last Thing Before we wrap up This lesson and that has to do with Buttons that have icons plus text Whenever you create something like this Please make sure you have sufficient White space between the text and the
Icon what I usually do is have the 1X Padding value as spacing between the Text and the icon so in this example the Button has 48 pixels on top and bottom And 96 pixels on the sides and here I'm Talking about padding of course the Space between icon and text is 48 pixels Now let's take a look at a few key Takeaways padding is the white space Between the content of a button and its Borders to create a visually balanced Button always add padding as a general Rule use 1X padding on top and bottom And 2x padding on left and right for Example 16 pixels vertically and 32 Pixels horizontally buttons that just Have an icon can use the same amount of Padding all around avoid using different Padding values on the same axis this Leads to visually imbalanced buttons When creating buttons with both text and Icon make sure you have sufficient space Between the two as a general rule use The 1X padding value as spacing and That's why padding is your best friend When designing buttons now time to move On and the next thing on our button Design checklist is color contrast First of all what is color contrast well In simple terms is the different in Light intensity between two colors and It basically tells us how much they Stand out From each other
If two colors have great contrast then It makes it much easier for the human Eye to distinguish between them take for Example a black and white they have the Highest possible color contrast so it's Very easy to distinguish between these Two this becomes even more obvious when Text is involved if we look at the light Gray text on the left it has very little Contrast against the white background of The page The text on the right however is a much Darker shade of gray so it's infinitely More readable now the widely accepted Color contrast standard in web design is Uh the wcag which stands for web content Accessibility guidelines This basically recommends a minimum Contrast ratio of 4.5 to 1 between text And background color And the goal here is to ensure that text Is legible And easily distinguishable for all users Including those with visual impairments To give you an idea of what this means In practice uh look at the following Example we have the same piece of text On the same background Except the text is much darker on the Left side resulting in a much lower Contrast the text on the right is Lighter so it contrasts much more with The background see how much more legible The text on the right is and if you're
Wondering how I got those contrast Values between the two colors there are Numerous tools online that help you do This you can check out the links in the Video description to a tool just like That Now all the things that I just said Apply to button design because first of All the button text needs a good Contrast compared to the to the Background color of the button So that people can actually read that Text in this example we can clearly see That the button On the right is more readable the one on The left almost looks like a disabled Button or I should say a button in a Disabled State however a button needs to Also contrast well with the background It's sitting on for example the button On the left is kind of washed out it's Getting lost in the white background and It's difficult to tell that there's Actually a button there Add some color and increase the contrast And all of a sudden the form design is Massively improved and now the button Stands out and immediately draws our Attention now why is this so important You might ask why should we care about The button contrasting with its Surroundings well a couple of reasons And the first is accessibility color Contrast helps users with visual
Impairments such as color blindness Uh to distinguish buttons from their Background So having a high contrast between the Button and the background ensures that All users can easily use and find the Buttons regardless of their visual Abilities the next reason is usability Yeah you see a high color contrast Makes it easier for users to see and Locate buttons therefore reducing the Chances of them missing on important Interactions It also makes it easier to understand The purpose of a button next up is Visibility Color contrast affects the visibility of Buttons on different devices and under Different lighting conditions therefore High contrasting buttons are easier to See and interact with even on you know Smaller handheld devices or in bright Sunlight finally there is branding color Contrast can also be used to reinforce Branding or a certain visual style for Example using a Brand's primary color as The button background can create a Consistent and a recognizable look and Feel so then uh let's take a look at a Few key takeaways in simple terms color Contrast is the difference in light Intensity between two colors if two Colors have great contrast it makes it Easy for the human eye to distinguish
Between them the widely accepted Standard for color contrast in a web Design is the wcag or web content Accessibility guidelines which Recommends a minimum contrast ratio of 4.5 to 1 between text and background Color the goal is to ensure that text is Illegible and easily distinguishable for All users including those with visual Impairments when it comes to button Design it's important that the button Text or icon contrasts well against the Button background but also the button Itself needs to contrast well against The background it's sitting on color Contrast is a critical aspect of button Design as it helps to improve Accessibility usability visibility and Branding so there you have it the Importance of color contrast in a button Design now let's move on and talk about Alignment Okay this is a really simple one but so Many people get it wrong because it Seems like such a tiny detail I'm talking about alignments more Specifically alignment inside a button Now please take a look at this picture And tell me what's wrong with it I'll Give you a few seconds It's the button text right it doesn't Sit in the middle of the button and I Mean vertically this button has more Padding on the top and a less on the
Bottom so to me personally it looks Weird What about this one same problem except Now there's more padding on the left Side but the result is the same it Doesn't look right So how do we fix it well we make sure we Use the same padding on each individual Axis remember we talked about this in The lesson about padding now granted Sometimes you might want to do something Funky in your design and have the Buttons look a bit different than the Norm that's fine you can experiment but Don't take it too far Uh if you're just starting out in design Remember the simple rule the text or the Button text should sit right in the Middle of the button Also if you have an icon Always but always Vertically align that with the text in This example you can see a before and After or an incorrect and then a correct Way of doing it do I need to say Anything more about this I think you get The picture now some key takeaways when Designing buttons make sure the text is Aligned to the center of the button in Both directions if you're using an icon Next to the text the icon always needs To be vertically aligned to the text and That's it for alignment now the final Thing on our checklist is about variance
So let's talk about those next Let's start by defining button variance And it's very simple A buttoning variant is just a different Version of a button that is used in a Specific situation for example you might Have a button or a type of button for Save And another type of button for delete These two are similar yet different in Some regards well these different Buttons are called variants now each Variant is designed differently to match Its purpose and the situation it will be Used in for example the delete button Might be red and have a warning symbol To make it clear that it will delete Something The save button might be green and have A check mark symbol or some other icon To show that it will save changes but Variants can go a lot further than this They can also relate to the importance Of a button in this example the primary Button has a solid background and much Greater contrast it immediately stands Out as the primary call to action The second button is more subdued it's a Variant of the first one but it's there To provide an alternative action so it Doesn't stand out as much and finally When designing buttons remember to Always create variants for the different States and by States I mean hover
Focused pressed disabled and so on the Button is an interactive element right So it needs to change its appearance in Relation to the state it's in How it changes its appearance is really Up to you but I would suggest you make Tiny changes like I did here and finally Let's see some key takeaways a button Variant is just a different version of a Button that is used in a specific Situation each variant is designed Differently to match its purpose and the Situation it will be used in when Designing buttons remember to always Create variants for the different states Like hover pressed disabled and so on And that's about it hopefully this Course will help you design better Buttons so let us know if you enjoyed it And if you have any questions please Leave a comment down below as always Don't forget to check out the envato Test plus YouTube channel for more Content like this but also how to learn About web design and web development and Much more it's all free so make sure Sure to also hit that subscribe button And give this video a thumbs up if you Liked it I'm ADI thanks for watching and I'll see you next time take care Foreign [Music]
