{"id":8331,"date":"2023-04-14T11:20:02","date_gmt":"2023-04-14T11:20:02","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=8331"},"modified":"2024-01-16T12:39:12","modified_gmt":"2024-01-16T12:39:12","slug":"hacks-to-transform-your-ui-designs","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/hacks-to-transform-your-ui-designs\/","title":{"rendered":"How to take your UI from good to great: 5 simple hacks for creating beautiful user interfaces"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">If you\u2019re involved in designing apps and websites\u2014be it in a professional capacity or as a hobby\u2014you\u2019ll want to learn as many tricks as you can to achieve optimal results.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Beyond the fundamental rules of user interface (UI) design, there are certain tweaks you can make to really take things up a notch.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this guide, we share our <\/span><b>5 golden rules for creating beautiful user interfaces:<\/b><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#follow-the-60-30-10-colour-rule\"><span style=\"font-weight: 400;\">Follow the 60-30-10 colour rule<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#leverage-the-power-of-contrast\"><span style=\"font-weight: 400;\">Leverage the power of contrast<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#get-your-shadows-right\"><span style=\"font-weight: 400;\">Get your shadows right\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#use-plenty-of-whitespace\"><span style=\"font-weight: 400;\">Use plenty of whitespace<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#tweak-your-text-alignment\"><span style=\"font-weight: 400;\">Tweak your text alignment\u00a0<\/span><\/a><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Each of our hacks will instantly improve the aesthetics of your UI <\/span><i><span style=\"font-weight: 400;\">and <\/span><\/i><span style=\"font-weight: 400;\">enhance accessibility and usability. What are you waiting for?!\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong><a id=\"follow-the-60-30-10-colour-rule\"><\/a>1. Follow the 60-30-10 colour rule<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8338\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-14-at-12.10.35-1-1-1.png\" alt=\"60-30-10 rule\" width=\"1264\" height=\"842\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Photo by<\/span><a href=\"https:\/\/unsplash.com\/@hameddaram?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Hamed Daram<\/span><\/a><span style=\"font-weight: 400;\"> on<\/span><a href=\"https:\/\/unsplash.com\/photos\/-5fbmfaInwg?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Unsplash<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">The 60-30-10 rule is used by interior designers to create a balanced colour palette\u2014and you can use it to improve your UI designs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to the rule, your colour palette should comprise:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A dominant or primary colour (60%)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A secondary colour (30%)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">An accent colour (10%)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">60% of your UI design should be in your dominant colour, 30% in your secondary colour, and 10% in your accent colour. This should result in a cleaner, more balanced interface which is easy on the eye.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For an example of how the 60-30-10 rule can transform your UI designs from good to great, check out this case study written by designer Ayobami Adelugba on <\/span><a href=\"https:\/\/uxdesign.cc\/how-the-60-30-10-rule-saved-the-day-934e1ee3fdd8\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">How the 60-30-10 rule saved the day<\/span><\/i><\/a><span style=\"font-weight: 400;\"> when designing app screens.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-user-researchp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/user-research?utm_source=blog&amp;utm_medium=%20blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN USER RESEARCH]<\/p>\n                    <span>Take our Professional Certificate in User Research<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong><a id=\"leverage-the-power-of-contrast\"><\/a>2. Leverage the power of contrast<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8334 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-14-at-12.04.07.png\" alt=\"leverage the power of contrast\" width=\"1262\" height=\"864\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Photo by<\/span><a href=\"https:\/\/unsplash.com\/@tranmautritam?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Tran Mau Tri Tam \u272a<\/span><\/a><span style=\"font-weight: 400;\"> on<\/span><a href=\"https:\/\/unsplash.com\/photos\/g-pKprPg5yw?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\"> <span style=\"font-weight: 400;\">Unsplash<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Contrast is a fundamental principle of <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ui-design\/\"><span style=\"font-weight: 400;\">UI design<\/span><\/a><span style=\"font-weight: 400;\">. It helps the user to distinguish between different elements, and it\u2019s essential for ensuring that text is easily legible. As such, it greatly impacts usability and accessibility.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to create beautiful (and usable) user interfaces, make sure there\u2019s plenty of contrast:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Between images and text<\/b><span style=\"font-weight: 400;\">. You can use a simple overlay to improve the contrast between images and text. You\u2019ll find <\/span><a href=\"https:\/\/marketing.gettyimages.com\/7-tips-for-overlaying-text-on-imagery\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">7 tips for overlaying text on imagery here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Between text and the background<\/b><span style=\"font-weight: 400;\">. For example, if you\u2019re placing text on a light background, make the text darker.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Between different sections and elements on the page<\/b><span style=\"font-weight: 400;\">. You can use colour contrast and whitespace to emphasise where one section or element ends and another begins.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can create (or increase) contrast by using dark and light colour; by contrasting colour temperatures (for e.g. combining warm colours like red, orange, and yellow with cool colours like blue, green, and purple); and by contrasting textures (e.g. placing a textured image on top of a \u2018smooth\u2019 background).\u00a0<\/span><\/p>\n<h2><strong><a id=\"get-your-shadows-right\"><\/a>3. Get your shadows right<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8335\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-14-at-12.07.17.png\" alt=\"get your shadows right\" width=\"1322\" height=\"818\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Image taken from <\/span><a href=\"https:\/\/texts.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">texts.com<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Subtle shadows are a great way to add depth to your designs. But there\u2019s a common mistake designers make when using shadows\u2014and it can undermine an otherwise beautiful interface.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So what\u2019s the mistake? Inconsistency in terms of where the light source is situated.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When creating shadows, consider where the light is coming from\u2014and bear in mind that it should only be coming from one source, which is usually above the object it\u2019s casting a shadow on.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So: Rather than having some elements with shadows formed at the bottom (as if the light source is above them) and some elements with shadows to the left (as if the light is coming from the right), create your shadows consistently based on one light source position.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s a small yet significant detail, and worth paying attention to. For more shadow best practices, check out this post: <\/span><a href=\"https:\/\/www.thedesignerstoolbox.com\/design-system\/ui-design-shadows\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">How to use shadows in UI design<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><strong><a id=\"use-plenty-of-whitespace\"><\/a>4. Use plenty of whitespace<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8336\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-14-at-12.08.19.png\" alt=\"use plenty of whitespace\" width=\"1276\" height=\"800\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Image taken from <\/span><a href=\"https:\/\/www.omio.co.uk\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">omio.co.uk<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019re no doubt already familiar with whitespace and why it\u2019s so important. Also known as negative space, it\u2019s the \u2018empty\u2019 space around different elements on the page, and between different sections.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whitespace impacts both aesthetics and usability. It breaks up the different UI elements, reducing visual clutter and making it easier for the user to scan and digest the content in front of them. See the previous screenshot taken from the <\/span><a href=\"https:\/\/www.omio.co.uk\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Omio website<\/span><\/a><span style=\"font-weight: 400;\"> for a good example of whitespace in action.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re looking for a simple yet highly effective way to dramatically improve your UI designs, ask yourself: <\/span><i><span style=\"font-weight: 400;\">Am I using enough whitespace? Do the elements on each page\/screen have enough room to breathe?<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Adding more whitespace will instantly declutter your designs and ensure a more polished finish. Experiment with increasing your whitespace until you find the perfect balance.\u00a0<\/span><\/p>\n<h2><strong><a id=\"tweak-your-text-alignment\"><\/a>5. Follow text alignment best practices<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8337\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-14-at-12.09.29.png\" alt=\"follow text alignment best practices\" width=\"1268\" height=\"662\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Image taken from <\/span><a href=\"https:\/\/www.duolingo.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">duolingo.com<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Another simple yet transformative UI design hack is text alignment.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might be inclined to use centre alignment, thinking that it gives your designs more symmetry\u2014but, in doing so, you may be harming your website\u2019s readability and accessibility.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to level up your UI, follow these text alignment best practices:\u00a0<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Left is best for longer text<\/b><span style=\"font-weight: 400;\">. Any text longer than one or two sentences should be aligned left. This feeds into the way we naturally consume text (think of books and blog articles).\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Limit centre alignment to headlines<\/b><span style=\"font-weight: 400;\">. As a rule of thumb, save centre alignment for headlines and very short snippets of text (one or two sentences).\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Right alignment is for special cases only<\/b><span style=\"font-weight: 400;\">. You can use right alignment if you\u2019re presenting numbers\/data in a table, and for website navigation.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The <\/span><a href=\"https:\/\/www.duolingo.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">duolingo website<\/span><\/a><span style=\"font-weight: 400;\"> is a great example of how text alignment enhances UI\u2014in terms of both aesthetics and accessibility. Only the H1 uses centre alignment, with all subsequent text aligned left.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Scan through your designs to make sure you\u2019re not committing any text alignment <\/span><i><span style=\"font-weight: 400;\">faux pas<\/span><\/i><span style=\"font-weight: 400;\">, and adjust accordingly. Remember: Left is best.\u00a0<\/span><\/p>\n<h2><strong>Transforming your UI designs from good to great: The takeaway<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">With some small and simple tweaks, you can transform your UI designs\u2014taking them from modest to beautiful <\/span><i><span style=\"font-weight: 400;\">and <\/span><\/i><span style=\"font-weight: 400;\">enhancing their accessibility and usability. That\u2019s what great UI design is all about!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep our 5 golden rules in mind and create UI designs that truly excel:<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Follow the 60-30-10 colour rule<\/b><span style=\"font-weight: 400;\">. Base your UI designs on a primary\/dominant colour (60%), a secondary colour (30%) and an accent colour (10%) to create balance and harmony.\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Leverage the power of contrast<\/b><span style=\"font-weight: 400;\">. Ensure plenty of contrast between text and images, between text and background, and between different elements on the page. This helps the user to distinguish between different elements.\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Get your shadows right<\/b><span style=\"font-weight: 400;\">. Avoid the common mistake of creating shadows which appear to come from different light sources. In other words, all shadows should fall in the same position (e.g. under the object) to reflect the natural way that shadows are created in the real world.\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Use plenty of whitespace<\/b><span style=\"font-weight: 400;\">. For instant decluttering, add more whitespace. Try doubling up, or experiment until you find the right balance.\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Follow text alignment best practices<\/b><span style=\"font-weight: 400;\">. Keep the majority of your text left aligned to mimic our natural reading style. Save centre alignment for short headers only, and right alignment for special use cases (e.g. presenting data in a table).\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Want more UI design tips, best practices, and inspiration? Check out these guides:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/7-principles-of-icon-design\/\"><span style=\"font-weight: 400;\">7 Principles of Icon Design all UI Designers Should Follow<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/good-ui-design-9-examples\/\"><span style=\"font-weight: 400;\">What Does Good UI Design Look Like? 9 Examples to Delight and Inspire You<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/become-a-better-ui-designer\/\"><span style=\"font-weight: 400;\">How to Become a Better UI Designer: 9 Expert Tips<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to transform your user interface from OK to outstanding? Keep reading for 5 simple yet game-changing UI design hacks.<\/p>\n","protected":false},"author":22,"featured_media":8332,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[273,271],"tags":[300],"class_list":["post-8331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-guides","category-resources","tag-ui-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/8331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=8331"}],"version-history":[{"count":5,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/8331\/revisions"}],"predecessor-version":[{"id":9742,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/8331\/revisions\/9742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/8332"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=8331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=8331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=8331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}