Looking to learn UI design or sharpen your design skills? Then you’re in the right place! While the fundamentals are a great place to start, the details are where your UI designs really start to feel complete. In this tutorial we’ll go over a whole bunch of tips, showing you examples to help you start working on those details to help you create professional and sharp designs.
When designing interfaces and UI components it can be easy to get overwhelmed by all of the design choices there are to make. Sometimes a UI design just doesn’t quite work until you tweak it over and over until it feels just right.
Just like how a painting is made of thousands of simple brush strokes, a good UI design is made up of countless small decisions which result in an effortless and enjoyable experience for the user.
Let’s go through a whole bunch of tips to work on our UI design skills!
21 UI Design Techniques (With Examples)
1. Fade the Background
When you have a modal window that you really want to command the user’s attention fade out the background. This will really make your window stand out the user, prompting them to focus on the action.
Take a look at the window and the darker background in the example below; the contrast really drives home the importance of the menu options.
2. Switch up Background Colors
Divide up content areas using different background colors. Just like headers and footers, a distinct change in background colors can help divide up different areas. This is a great way to drive focus to certain content and provide some visual variety. It can also help keep users engaged and encourage them to scroll.
3. Use Color to Your Advantage
Use color to your advantage! If there is something that’s singularly important for the user don’t be afraid to use a color that really stands out.
Try to use colors which aren’t used much throughout the rest of the design and try saturating the hue. You might be surprised with the visual appeal too!
4. Customize Those Social Buttons!
Social Media buttons are essential for many design projects. While it seems like a simple task at first, it can be tricky deciding where they go and how to display them. One of the things that often happens is that they can break up the unity of your UI design. They all come in different colors and this can end up feeling like they are competing against each other and your UI for visual real estate.
It’s worth taking some extra time to customize your own social buttons to match your UI design. This will provide the much provided visual unity you need for your project!
5. Add Shapes to Edges of Borders
Add some visual flair between the edges of background borders to help break up the grid. Adhering to the grid is great, but sometimes you want to break free of that blocky look. Adding an image that connects with the next section can really help make your page look more dynamic. You can even direct the users attention up or downwards using an arrow shape. Try to be creative and come up with your own ideas with this concept!
6. Customize Bulleted Lists
Bulleted lists are a helpful tool to help divide up content and make it easier for the user to read key points. A neat trick here is that you can customize bulleted lists to use custom images. This makes for a nice way to push your brand or even provide some informative information through iconography. Try to use unique colors or icons which drive home the message of the content!
7. Organize Categories into Blocks
There are many situations where you have a lot of information in a bulleted list, or you might be worried that the order of a list is emphasizing the top choices when they should be viewed as equal. In these cases try to divide up this content into blocks that sit along side each other.
With blocks all the content is presented as being of equal value. Another great benefit of this is that you can customize the design of the boxes and display far more visual information than a simple list can.
8. Use Color Blind Friendly Colors
Many users with color blindness or other types of visuzl impairment may have difficulty distinguishing between different colors. It’s always a good idea to check to ensure your high contrasting colors will also be distinctively different for everyone.
Photoshop Tip: There’s actually a cool trick you can use with Photoshop to check for this! View > Proof Setup then you can select different color blindness filters to check your contrasting colors.
9. Break Up Your Text
It can be really easy to fall into the trap of using big blobs of text. Sometimes this may be how the information was given to you as the designer. However, unless it’s an article you are expecting your user to sit down and read with a cup of coffee, it’s usually a good idea to start breaking up your information. Users are looking for specific things, so make it as easy as possible for them.
Ensure that headers are distinctive, use bullet points to drive home key information. Use color and bold text to emphasize important pieces. Most of all, make sure your written content is engaging and interesting to look at.
10. Use Blocks, Not Borders
Breaking up content with borders and lines can be a great way to differentiate between different sections. However, they can also add clutter to your designs and while individually may be fine can start to have an overall negative impact on your designs.
To combat this you can create borders by sectioning your areas with different background colors. This naturally creates a line between the different areas of content, making your designs less cluttered and claustrophobic. The less clutter, the more your content can stand out!
11. Space Your Text Wisely
Just as using blocks can help create a grid without borders, well thought out spacing can also have the same effect. When you space paragraphs of text from each other just right, you oftentimes don’t even need a separate background color.
Create large spaces between separate content and bring body text closer to its counterpart heading. This way you can adhere to a grid well with the minimum amount of design flair.
12. Be Consistent With Rounded Corners
It’s a common technique to round the corners of your UI elements to give them a softer appearance. The great thing about this is that this doesn’t break up the grid. Try to ensure that whichever size you use, you use it consistently on all your design elements.
You can even take this a step further and and round off other content to the same dimensions such as photos or icons. That kind of unity can really bring a design together!
13. Vary Button Designs by Importance
Sometimes buttons serve different purposes depending on your project and users goals. In these cases you can create emphasis for the more important choices by making bold use of color for one, while using less on buttons of lower importance.
For example, a login screen will need to accommodate both new and existing users, but you may want to emphasize one of these options depending on your goals.
Try creating two buttons which are the same dimensions, but give the more important button more contrast. In this case “Create an Account” is subdued as most users will be signing in and only need to create an account once.
14. Use Thick One Sided Lines
While it’s common to see hover effects on text hyperlinks use underlines, you can also use this on blocks too. Try putting a thick underline across a whole block on rollover to really drive home that the button is clickable. You can also add lines like this to add some visual flair to content boxes.
15. Make Your Buttons Stand Out
Flat designs with lots of negative space are becoming really popular. While keeping things simple is great, there is a risk of the user not understanding that navigation buttons are different from regular text. Make use of spacing and unique design elements to really make your buttons stand out from your body text.
16. Take Inspiration From Games (But Not Too Much!)
In the game development world there is a term a called juice which essentially means making the design of your games enjoyable to use. This usually includes bouncy animations which are initiated from button presses.
Try to add some fresh CSS animations to your buttons or loading screen icons, or creating a unique visual UI for certain features. Of course, web and app development isn’t a game and you don’t want to waste your users’ time, but an added pop or flair from a click can really add some enjoyment to your projects.
17. Add Icons to Your Buttons
While a small piece of text is sufficient there may be cases where an icon can really drive home what the button does! Place the icon next to your text in a similar way you would with a bullet point.
While I wouldn’t use this with every button, it can help the user quickly understand what the button will do. The possibilities are really limitless with an idea like this, for example you could have a cloud icon by a save button or a shopping bag on a buy button. Another great benefit to this is that it can help your design break down some language barriers.
18. Save Valuable Space By Utilizing Icons
As mobile Apps have become normalized so have many different icons. This provides us with a great opportunity to save some space and make our designs sleek. Have a settings page? Instead of having this as a main navigation item, create a Gear icon that’s easily accessible. Don’t have enough room for a search bar? Try out a magnifying glass icon that makes that bar accessible when the user needs it.
While this can’t replace every link in your navigation you can create a distinction between your content and the tools which are used to navigate that content.
19. Take Advantage of CSS Gradients
When you really absolutely need to gain attention for a button try out placing an ambient gradient. While I would advise against overusing gradients on navigation, this extra piece of visual flair can really put an edge on a visual component.
20. Overlap Content Over Edges
Another great idea when working with the edges of content areas is overlapping content. This really provides emphasis to the content itself and adds some interesting depth that can be hard to achieve over flat colors. It can do a great job of bridging the gap between one section to the next too!
21. Use Spacing Between Text
Sometimes text can feel a little lonely when it’s by itself. Something you can do to make it stand out is adjust the spacing of the letters! Try doing this with all upper case letters on titles to give your headers a sophisticated look.
It also works wonders on text that is out on its own without much else around it. This is a great way to provide some emphasis without making the font size larger.
Start Learning UI Design With These Tips
There you have it! A whole bunch of tips to help you learn UI design. Try out some of the tips listed here on your next UI design project (and remember to pay attention to the details when you are using any form of UI design). Look out for ideas that can work for you and keep notes.
Also, remember that these tips are not absolute rules. Every project you work on will have its own needs and goals. Some ideas will work your design and some won’t. Always remember the core goal for your user when you are creating your UI design!
Enjoyed these tips? Check out these other UI design tutorials and templates from Envato Tuts+.
Adobe XD15+ Adobe XD UI Kits for Your Next Project
Front-EndDesign and Code Your First Website in 9 Easy to Understand Steps
Bootstrap25+ Amazing Bootstrap Templates to Try in 2021
JavaScriptAn Introduction to JavaScript Event Listeners for Web Designers
Wireframing22 Must-Have Wireframe Templates and UI Kits for Your Design Library
No comments:
Post a Comment