Originally published at marcandrew.me
Creating beautiful, user-friendly, and efficient user interfaces takes time and many design revisions. You've to constantly tweak it to create something that your customers, users, and yourself are truly happy with. I know this. I've been through it many times myself.
But I've discovered over the years that with a few simple visual tweaks, you can quickly improve the visual results you're trying to create.
In this article, I've put together a small, easy-to-implement selection of tips that, with little effort, can't only help improve your designs today, but hopefully give you some practical advice for your next project.
Use Multiple Drop Shadows, or a very subtle border (just a shade darker than your actual shadow) around certain elements to make those elements appear a little sharper, more defined, and help avoid those muddy shadows.
It's perfectly fine to choose just one font when creating your design, and sometimes it can give you much stronger and more consistent results.
Ignore the "Always use 2 fonts. Minimum." You can still get perfectly acceptable results with a combination of font styles, sizes, and colours.
For long content (e.g. Blog Posts, Project Descriptions and so on), you should choose a font size of 20pt (or even a bit more) for the body of the text.
Of course, this depends on the font you choose, but most popular Body Typefaces are great for a 20pt font size, and give the user a better reading experience when faced with a wall of text. 18pt is sooo old fashioned.
Allow users to skip your Mobile App Onboarding sequence at any time, and place the skip link within reach of their thumbs. The thumb is still in charge in 2020, remember!
Make sure your shadows only e'er come from one light source. This is a simple and sometimes unnoticed mistake to make. We don't live in the land of a thousand suns, remember.
Depending on where you want to position the text over the image, you can either use a tried-and-true full-screen overlay or a more subtle (bottom-to-top or top-to-bottom) gradient overlay to create a simple contrast between the two elements.
Depending on where you want to position the text over the image, you can either use a tried-and-true full-screen overlay or a more subtle (bottom-to-top or top-to-bottom) gradient overlay to create a simple contrast between the two elements.
Try to use Centred Text only for headings and small passages of text. For pretty much everything else, you should left-align that bad boy (ahem, text content).
Ah, the good old space bar, Negative Space, you know, the space bar. Use it liberally, or in moderation, but use it well.
Even small amounts of the good white stuff can let your designs breathe and give them a better look. It's one of the quickest and easiest ways to improve your designs.
Ah, the good old space bar, Negative Space, you know, the space bar. Use it liberally, or in moderation, but use it well.
Don't make your text too light when it's against a light background. It can seem like all the cool kids are doing this (still), but you're smarter than that and want to create much more accessible interfaces, right?
There are critical mistakes that can compromise the effectiveness of the user experience. At a high level, design requires many resources to plan, customize, and implement, but the end result of UX is a product that users love...
Read More
White space is a very useful technique when creating design layouts. When designing a layout, it is important to let the elements on the page breathe. The best way to do this is to introduce what is known as white space.
In a Thinking Aloud test, you ask test takers to use the system while thinking aloud all the time - that is, they simply verbalise their thoughts as they move through the user interface...
