5 ideas to help you build great application UI

Check these 5 online tools next time before starting to design your new app.

Β·

5 min read

Play this article

Intro

The application User Interface is crucial. If someone opens your app, their initial impression may impact whether they decide to stay or leave forever. In the context of an APEX-created application, we benefit from the already well-thought design, colours and functionality. In the cases when we'd like to go with something different, however, the design principles must be followed, the right colours that match each other should be selected, and the layout should be created in a convenient and pleasant to the user way.

Having said that, I understand that not everyone, including me, is a UI expert. Most of the APEX developers are people with a database background, so UI is probably not the strongest topic for us. That's why I've always tried to look for help when building a new app. Here are some of the tools that I've used. Hope they are as useful to you, as they've been to me.

1. Colours

Online Colours Palette generator

I'm starting with colours, as this is probably the first thing we start changing in the Theme Roller when designing a new Theme Style. It's easy, it's quick, but the results could be very unpleasant if we don't choose the right colours. Combining colours is a whole science so I often use a special website to get inspiration and colour palettes that have been selected by people who know what they're doing.

πŸ”— https://coolors.co/palettes/trending

A list of trending colour palettes at Coolors

Benefits of using this website:

  • Gives you pre-made colour palettes, together with their HEX codes when you hover over

  • Generates colour palettes from photos, so you can simply upload a screenshot from a website or any design you like and Coolors will generate the palette for you

  • Can check your custom-made palette for bad contrast

  • Can adjust your custom-made palette for people with colour blindness if needed

  • Suggests the text colour that should be used for certain colours from the palette

Chrome Dev Tools

Another very useful tool when speaking about colours is the Chrome browser and especially the Dev Tools. What's interesting is an experimental feature called CSS Overview. To enable it, select the three dots in the top right corner of Dev Tools. Then select More Tools/CSS Overview.

Now open a website with a nice UI and colours you like. Once on the CSS Overview tab in Dev Tools, click on Capture overview button. It will generate a full CSS report of the website, including colours used, fonts used, as well as the CSS media queries used on the site. Having all that information, you can try to replicate the colour scheme and fonts in your application.

The colour palette of oracle.com captured using CSS Overview feature

2. Fonts

No doubt that the font is one of the components that we notice immediately when opening a website or an application. Choosing the right fonts could also be a tricky job as some could be good for titles and headings, but not as good for paragraphs and other blocks of text. We need to pick readable, legible and web-safe ones. A font should also correspond with our brand's identity and audience. We can not put a cartoon font on a business application for example. Luckily again there are plenty of places online to help us pick the best ones, as well as download and use them.

Here are some serious portals that are focused on UI and can help you build a better one, including helping you pick the right fonts:

Having an idea of the type of fonts you need, Google Fonts is a great place to get one. They provide you with the option to select multiple font styles, group them and add them to your web app. There is a sample CSS code that you should just copy/paste. Here is an example of how you can set the Roboto font as a default one for your APEX application:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,100&family=Roboto:wght@100&display=swap');

:root {
    --a-base-font-family: Roboto;
}

3. Components

And if new colours and fonts are not enough as a change for your application, take a look at the Component Gallery website. It has a huge library of all major brands' Design Systems and Components. You can select from buttons, cards, checkboxes, inputs, dropdowns and file uploads... Every component you can think of - it's there. Select the one you'd like to check and the site will redirect you to the documentation with examples included.

4. Inspiration

Here I have selected some websites that maintain a library with some of the most beautiful and interesting designs. If you struggle to come up with your own idea, you can always take inspiration from elsewhere.

  • πŸ”— UX Crush - it is built around Figma - one of the most popular design tools, recently acquired by Adobe. You can find numerous templates, play around with them in Figma and get the CSS to replicate them in a web app.

  • πŸ”— Behance UI/UX - a space where the best designers share their work. An excellent opportunity to get inspired for your next app.

  • πŸ”— Screenlane - this website has compiled screenshots of all possible screens from the most popular apps, grouped by categories and types of components included in the app - cards, timelines, calendars and so on.

  • πŸ”— Godly - another compilation of beautiful web interfaces you can inspire by. Could filter on type, style, libraries used, etc.

5. Books, Articles, Courses

And what better tool for creating good UIs than good books, an articles or a course on the subject? I don't say I've read them all, but it's a good idea to try to educate ourselves with some good reads. Here is a list of some places where such materials are available.

  • πŸ”— Coursera - UI / UX Design Specialization

  • πŸ”— freeCodeCamp - UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

  • πŸ”— AdobeXD - User Experience Design Course with Adobe XD Course

  • πŸ”— Skillshare - Popular UI/UX Design Classes

  • πŸ”— Hackdesign - Curated and structured lessons in the form of a course. They cover all sorts of UI/UX topics, including best design practices for Mobile Web applications, Desktop applications, etc.

Follow me

Like that post? Follow me on Twitter and LinkedIn!

πŸ”· @plamen_9 on Twitter
πŸ”· Plamen Mushkov on LinkedIn

Β