Top 2 User Interface Design Elements for Your Website | How to Use a UI Kit
Reading Time: 7 minutes
Want to know the UI framework that’ll help you make a UI kit that suits your website needs? Learn more about the two UI components that will jumpstart your user experience journey.
This post is part 2 of 4 in our How to Use a UI Kit for the Best User Experience | Web Design Principles ultimate guide.
But why exactly is a UI kit so important?
As we mentioned in the previous article in this short series, a great web design UI Kit can actually save you time and money in the long-run.
That’s because as you systemize your web design via UI kit, your front-end developers can better take the wheel.
Table Of Content
Ultimately, a great UI kit can give you more room to focus your energies on the clients and customers who seek you out.
Don’t know what is a UI kit? Find out in Part One of this article series: Your UI Kit: The Building Blocks for All Website Designs
UI Kit First Steps | How to Use a UI Design Kit
How do business owners use their design kits? How do they create them in the first place?
These are the questions we see business owners get stuck on all the time. They know they need good design, but aren’t sure the best way to start managing the design process.
This is especially troublesome for solo business owners who are trying to do the whole thing on their own.
That’s why we wanted to start simple, with what we believe are the top two most important design elements to develop for your UI Design Kit: fonts and buttons.
Top Two Important Elements for UI Websites | Starting Your UI Kit
1. FONT
“Why is it important to choose the right font for my website?”
Don’t be mistaken: fonts can have a huge impact on site performance and speed. This article does a great job of explaining how these impacts occur–but it is basically through the slow rendering of third-party text files.
For example, say you want to use the free Google Fonts, or commercial paid fonts for your website design.
To do so, you can either add code to your website to pull the font from the vendor or free provider each time a user loads the page, or you can install it (save it) to your Child Theme in WordPress to have your server send the font file instead.
With Google Fonts however (as with others), a lot of plugins, themes, and apps DO NOT download the font from your server, and will connect directly to Google for font file access.
While this process is not uncommon, it is somewhat slower in the sense that user interactions must connect to an external server to ‘see’ the font.
The same is true for paid fonts as well.
“If you opt for paid fonts, remember that some require your visitor to download the font each time from their site to count the number of impressions–ideally to see if you are meeting their license terms. If their server is slow, your font’s load time will decline, so make sure you check the refund policy of your paid font seller before you buy!”
– Pol Cousineau, The Digital Navigator
“Is there a way to get around the speed issue when I choose my font?”
Absolutely. One way is to keep reading articles like this one so you can understand how fonts work apart from just ‘looking good’ on your site.
Find a locally deployable font, and work with the provider to manage your usage. We use the “Mont” font, purchased from Linotype.
Your other option is to hire expert web designers like The Digital Navigator, who can offset speed issues with special tools and website management plans that load chosen fonts locally.
The latter option is great since, for example, locally deployed fonts more closely align with GDPR privacy laws.
As well, since many paid font providers require you to manage tracking technology – since data isn’t going to their server – web managers like us can help you set up automated reporting and tracking through our integrated analytics solution, which meets the tracking requirements of most font resellers.
That way, you don’t have to worry about moving outside the bounds of the font’s contract.
“What’s the difference between paid fonts and free fonts?”
Paid fonts mean that you have to purchase a license for use of that font on your website, whereas free fonts like Google Fonts do not require you to pay a licensing fee for commercial use.
Remember to be careful when trying out any font type, since many sites do not have the authority to be ‘selling’ fonts–which can result in legal implications for copyright infringement.
Many fonts are advertised as free, but contain fine print in the licensing terms to indicate they cannot be utilized in a commercial project, such as a business website.
When buying or choosing fonts, it is also important to save all your documentation as well. Read terms carefully, since some fonts limit access to a certain number of page views before you have to renew your license.
Others have restrictions on where you can use the font–so be sure to check before putting fonts in logos and other marketing material.
“With our MONT font for example, if we make a PDF with that font that is selectable by users, we need to buy a license for EACH VERSION of the PDF we make.”
– Pol Cousineau, The Digital Navigator
“Well then…which fonts should I use for my website?
We really recommend you use Google Fonts, hosted locally for your website.
Google Fonts enables you to sidestep the font licensing issue entirely.
Local fonts have very fast hosting links that take advantage of faster server speed. They switch gears at the right time to give you maximum font loading speed.
Fonts of this type can be cached as well, which saves the font file, and refers users to this saved file when they visit–no more waiting for downloading fonts for every page!
Importantly, we recommend you use a Content Delivery Network – like the one available through our managed service plans – to deliver fonts through a global network of servers.
In doing so, you’ll ensure that font load times are similar no matter where users are around the world–whether from New York, Paris, or Brisbane!
The Best Font Styles for Website Design | How to Build UI Elements
While you’re choosing your locally-deployed font, we recommend choosing fonts that are accessible and easy to read, which appeal to our subconscious through natural shapes, and which – if another font family was added – would work with new additions without being overwhelmed.
In fact, that’s why we use the Mont Geometrical Font Family for both our header AND our body text. We feel the font aligns with the feel of our business, as well as our target market–key indicators you should keep in mind when choosing your font as well.
For example our client Gonzo Parenting is all about finding the hilarious in parenting, and is geared towards the comical, so they’ve chosen a more playful (but legible) font.
With Legacy Psychology (for psychological services) and GFM Rockwall (for financial services), we instead opted for authoritative font styles with straighter lines and simplistic effects.
Two other font styles we recommend to clients who are looking for straightforward fonts would be Serif and Sans Serif. You can even choose Serif for body text, and Sans Serif for your headers.
That’s because Serif, for example, helps when you have a lot of text to read, or you have a wide text area on your web pages. It allows users to visually anchor text for faster reader, and greater ease of comprehension.
Sans Serif on the other hand works great for headers or short bodies of text, where there isn’t as much text to read. Letter spacing is optimized with this type-font–just make sure it aligns with the other font choices you make.
“Font pairs need to work together. I recommend using two fonts–with all headers in one family, and body text in another family. We’ll go up to three fonts if the client insists, but two is the bread and butter of our clients.”
– Pol Cousineau, The Digital Navigator
Our final recommendations?
Google Fonts and Linotype are our two favorite places for fonts–one free, and one paid. Still, we also think it’s important to shop around for fonts. Sometimes you can get drastically better deals on similar font styles through other font providers!
2. BUTTONS
“Why is it important to choose the right button style for my website?”
Button shapes and styles are what train a user to interact with your website. With simple color contrasts you can show users what’s clickable, and what’s not.
When you choose a button style, you also ensure that the buttons on your site are consistent between pages.
Consistency in clickable buttons – all UI elements, really – is deeply important to improving how often users click. Each click creates a pattern in the mind of prospective buyers when all buttons look similar.
If buttons are inconsistent, then users are less primed to know ‘where to go’. If users are forced to work hard to find your CTA, it will result in friction, and you may lose visitors, leads, and even sales.
“What do I need to know about button design?”
First things first: button colors! When you think of buttons, you want to think of creating high-contrast points of interaction on your site, often by choosing red, green, or blue buttons.
And hey, if none of these are part of your design aesthetic, then the best advice is to choose a color that highly contrasts with your dominant page color. Experts recommend colors that oppose one-another on the color wheel.
We also recommend you use similar buttons for similar actions, with the most important clickable item on each page remaining consistent in shape and color–just don’t make your buttons too big or they’ll overwhelm other important text on the page.
Use shadow-drop effects on your buttons to ramp up the ‘clickable factor’ even more, and always make sure buttons aren’t mixed up in text.
And while it may seem like a no-brainer, always add text to your buttons! Make it extremely clear what the user will be doing if they click by using phrases like “enroll now” or “send me an invite”.
“How many buttons should be in my UI Kit?”
We recommend choosing five button designs on a hierarchy. All five buttons do not have to appear on each page you or your developers design, but should give clear indicators for the relative importance of each button.
Why five? Because there are that many button types we recommend using throughout your website to motivate specific user actions, and to improve user experience overall.
Five Button Types to Include in Your UI Kit:
- Call to Action (CTA): This is the most important button, should be the most dramatic and eye-catching, and should give a clear action message such as “buy”, “sign up” or “get free”. Keep it short and simple for best results.
- Primary: While a CTA should lead directly to the sale process for your services or products, primary style buttons should lead to consultation-type actions that lead users to another lead magnet–whether that be a consultation or video recording.
- Secondary: This is the button you’ll design that exists around the site for third-tier actions such as getting details about a program, or downloading a brochure. More often than not, these buttons lead to systemized actions that you don’t have to follow-up with directly. These buttons often contrast less with your dominant color than CTA and Primary buttons, and blends more with those existing color elements.
- Tertiary: You don’t want to distract visitors with tons of loud buttons, so when you’re asking users to, say, ‘read more’, you would choose this button style. It blends with the dominant colors of your UI kit, and speaks to close-readers who are looking for answers to their problems.
- Accent: Accent buttons are of a different color, and are often used when themed background colors don’t allow for good-looking design. If you have a white background, and a white tertiary button, you might want to replace it with an accent button instead.
Think five is too much? Small sites can get away with just three button options: CTA, primary/secondary, and tertiary. Still, picking all five button styles is a good idea for those who plan to grow their small site in the future.
If you’re interested in learning more about this topic, we recommend checking out this article from Just in Mind.
Keep Building Your UI Kit | More UI Elements for Your Website
Buttons and fonts are the cornerstone UI elements that will guide the rest of your UI journey. They are essential to any web user interface kit, and can be a fun and simple way to enter into the world of web design for your business.
With those UI elements cemented, you’ll also be ready to add other sales-centric UI features at this stage that will ultimately help you sell content, services, or products.
That is, with the addition of fillable forms, sliders, and great logo placement, your UI design kit will have everything you need to launch (or relaunch) your highest performing landing pages.
Read the next article in this series to learn how!
This post is part 2 of 4 in our guide on How to Use a UI Kit for the Best User Experience | Web Design Principles. Click here to read Part 1: Your UI Kit: The Building Blocks for All Website Designs, Part 3: UI Elements: Logo Placement, Sliders, and Forms | How to Use a UI Kit, or here to read Part 4: UI Mockups & Implementation to Decrease Design Costs.
0 Comments