5 Mistakes made with UI & Design and how to fix them

As you may be aware, one of the biggest factors and challenges of reeling in new customers is creating a very eye-appealing UI and design which not only shows off your attention to detail, but also your brand. Whether you’re a web designer, or a business owner using a building service, it’s good to take note of some things which can help boost your visitor’s retention and keep them coming back.

Today, we’ll cover 5 mistakes that designers and business owners make when designing their websites.

1) Image Quality

Here’s a very unique issue that crops up far more often than you may think; but having nice, crisp images across your website also reflects positively on your brand and your services. If you’re struggling for images and can only find low quality ones, try to either leave them out entirely, or find something better to fill the spot. It’s true that visual indicators and images can greatly help your store. Show them your products and what you provide, but when you’re uploading a 200x200 image, watching it get stretched full-width can look unprofessional.

Take some time and go through all your product images - especially on the landing pages. If you invest the time on enhancing your images, you may gain a few customers who would have been deterred otherwise!

2) Aligning your Elements

A lot of people like to do fun little gimmicks with their text. For example, having the heading appear as center alignment, while the informational text below is shown as right alignment. While it may look nice to some, it is something that can break the continuity of visualization, and break up the text in a very messy way. If you’re going to make the heading align to the right, it’s best to keep it all to the right - allow continuity and visual flow.

Using grids can help you with alignment - especially if you’re unfamiliar with design. Grids won’t appear in the live site, but will help you on the backend to envision how everything's coming together. Don’t take these little things for granted, they’re used for a reason!

3) Keeping Mobile In Mind

It’s easy to forget about mobile view, even as a designer - and as the times progress, we constantly have to worry about more screen sizes with more variants. One of the bigger factors to keep in mind for design, especially for storefront, is touch target - or button sizes, in layman’s terms. When working with mobile, you want to make sure that someone is able to interact with a button without worrying about clicking the wrong spot, or being taken elsewhere. It can be frustrating, and not surprisingly, may cause some potential customers to click off of your business for that fact alone.

The general recommended size is is 48 x 48 dp / px for each touch target. This isn’t the minimum, but gives a comfortable buffer for those who are using your services. It’s also worth noting that if you do go under the minimum touch target, you may get an email from Google to check in and make sure everything gets fixed - this is something you don’t want to worry about after the fact!

4) Typographic Hierarchy Inconsistency

While this may be common knowledge to a lot accustomed to design, it’s a good reminder to show how important this is. When you normally visit a website or anywhere, for that matter, you’ll normally see things organized into 3 types of categories. You’ll have the heading, the sub-heading, and then the informational text. In design, it’s important to keep these consistent - you never want your sub-headings to be as big as your headings, or the informational text as large as the sub-headings.

Another big rule to follow is to look at a page - do you see a big block of text without a heading or sub-heading? It would be good to get those applied immediately. Not only will it look much cleaner, but the visitor’s eyes will be drawn to the important information first - the heading, and the subheading, which will gain their interest.

5) The Little Things

Even all the small things that you may see as irrelevant matter, especially in design. This is when taking a UI course would help, because even with these tips, there are so many small quirks and things to remember; I’ll try to go over some quickly here first, so you can get a bearing on what you’ll be looking for!

Always remember to distinguish the main button from the secondary button. Having the secondary button a lighter weight is a good design choice and seen in a lot of successful businesses. This will help even little things such as the sign-in form to look much more clean and professional.

One more small thing to bring to attention is the contrast. Having low contrast, with a significant difference between things such as the content, the header, and the footer, will help in your design goal. When things begin melding together, it’s not only displeasing for the eyes, but also a strong indicator of unprofessionalism. It may take some practice, but there’s some great tools online for you to identify if there’s enough contrast between your elements!

In Closing

Design is a form of art, and with any kind of art, it takes a lot of practice. It’s best not to jump into it without some form of assistance, whether it be auditing a free course, attending a full course, or getting a consultation from a professional designer. Once you learn the tricks of the trade, everything else will fall into place and you’ll be looking at all websites through the eyes of a designer!

Us at e-dimensionz Inc thrive on design, and have a lot of wonderful examples of just this, with over 20 years of experience, and a web designer who was one of the founders. If you need any help enhancing your website regardless of your platform - WordPress, Joomla, Shopify, HubSpot, and many more - we can help! Contact us for a consultation or a quote.