UI Design Theories: Frontend Development

UI development from scratch

Always Try to start UI from a feature

At the time of creating a Frontend or a new UI for a page of your website always try to start from a feature, not a layout.

Even don’t try to create a landing page or layout for your whole UI interface like a header or footer in starting of the development If you are trying these things you are doing a mistake.

Because an app is a collection of features because in starting you don’t know how the navigation should what type of information you will show that’s a little bit frustrating!

Instead, try to design an actual functionality if you are making an online restaurant table reservation try to make a reservation form or a table where occupied tables will show.

In starting, the development stage of a new feature doesn’t decide about things like typefaces, colors, icons, etc. these things don’t matter in starting even if it’s to better to start with paper and a pencil.

Don’t over-invest in starting and hold the necessary things like color

In starting your Frontend work, try to use making things in grayscale that may feel boring but that gives a better view and understanding related to spacing and other things. And try not to over-invest in color and other things in starting and try to make a low-fidelity version first. Never over-design things in a hurry like all the features in the app try to look at already designed features and things and think about how it will show your needed data like take how it will show thousand of data. And don’t imply functionality in your designs that you aren’t ready to build.

Try to start from small

When you’re designing a new feature, don’t expect it’s easy to build. If you are designing a small feature that reduces the risk considerably. Build the simpler version first and leave the complex one for more study.

Choose a targeted personality For UI

Every design represents a personality if you’re making a government website it should be simple, professional, and secure while if you are creating a food delivery app or cloth selling app then it should be joy-full and trendy.

Choose right font

Typography plays a major role in any UI. If you are giving an elegant and classy look, give a chance to the serif font is great.

While if you want to give a trendy and joyful experience try to use the rounded sans serif.

Color

While choosing a color there are some safe options present try to stick with them because colors are those things that a user can feel.

Like, blue is safe and familiar – nobody ever complains about it.

Pink is a little bit give joy and an experience of fun nobody ever takes it too seriously.

And about gold, we can say that it feels expensive and high-class.

Don’t stick to these only try to think about what color is a good fit for your targeted personality or that color is the right fit for you.

UI Language

That’s not a visual thing but still, the whole interface has a massive influence by the language that you used over your interface.

For a professional feel use a less personal one.

While joyful and friendlier experiences use more casual language.

While it’s up to you to choose the language according to what features your website or app has. But define Colors and font before starting things.

Border-radius

It sounds soo simple and a small thing but has an impact on the overall user interface and overall feel as well.

A smaller or even no border-radius target a more professional and impersonal user interface.

While a large radius or rounded feels more joyful.

Everything you choose tries to be consistent with them mixing all things always feels worse than sticking one or any other.

Defined your choices in advance

As millions of colors and thousands of fonts are present out there it’s good in theory but practically it’s a curse or worse thing. According to famous, “Hick’s Law (or the Hick-Hyman Law) states that the more stimuli (or choices) users face, the longer it will take them to make a decision.” For designers of all types.

But not only these there are many things other than colors that are hard to decide.

Always try to design with pre-defined constraints, without them designing things become torture.

Don’t reach out to color palettes or don’t peak at font sizes always define them in advance and stick to them throughout your design process. For font size make your own scale or for color make your own 8-9 color palette.

Working this way saves a lot of design fatigue and lots time of in designing a new feature.

Make everything systematize

The more system you have in advance, the faster you will be able to create UI without any problem.

You can define a system for things like:

• Font sizing and weights
• Line Height and indents
• Color (always use hex and rgb)
• Margin
• Padding
• Height
• Width
• Box shadows
• Radius
• Opacity, etc.

and anything else you run into where it feels like you’re laboring over a low-level design decision. You don’t have to define all of this stuff ahead of time, just make sure you’re approaching design with a system-focused mindset. Look for opportunities to introduce new systems as you make new decisions. Also, try to avoid having to make the same minor decision twice.

Create a hierarchy in your Ui

All elements are not equal in the UI

Visual hierarchy is the principle of arranging elements to show their order of importance in relation to one another, and it’s the most effective you have to design things that look good. 

When you think of user interface as “design things so they look nice”, it’s easy to see but it might feel hard to achieve without inner artistic talent. But it turns out that one of the biggest factors in making something “look nice and good” has nothing to do with too much styling at all.

When everything in an interface is competing for attention, it feels noisy and annoying, like a book without a title without that we won’t able to know what that book is actually for.

When Ui designs a feature deliberately creates a difference in various UI elements between primary, secondary, and tertiary information and tries to highlight only those elements that are most important.

Don’t over-invest in size

Never rely too much on font size to create a hierarchy or for maintaining a hierarchy.

Try to do all the heavy liftings by font-weight and colors they are able to do the same job as well in a systematic way.

Similarly, using a softer color for supporting text instead of a tiny font size makes it clear that the text is secondary while sacrificing less on readability.

Try and stick to a pre-defined color palette:

• A dark color for primary content.
• A grey for secondary content.
• A lighter grey for tertiary content.

Similarly, two font weights are usually enough for UI work:

• A normal font weight (400 or 500 depending on the font) for most text
• A heavier font-weight (600 or 700) for the text you want to emphasize Stay away from font weights under 400 for UI work — they can work for large headings but are too hard to read at smaller sizes. If you’re considering de-emphasize anything try to use low-contrast color instead of font-weight for small-size fonts.

Avoid grey text and background colors like text color in the UI

Some best ways to choose the right text color;

• Grey text looks good over but avoid it on a colored background.
• Try to make the text looks closer to the background color, not using light gray.
• Choose the color according to the background with the same hue, and its contrast, lightness, and other things until it looks right.
• And while emphasizing and de-emphasizing give the inactive items a softer color.

Using these ways, text or font not looks faded or washed and also it helps in creating a hierarchy and helps in creating an interesting UI as well.

Labels are a last resort

Labeling cause problem sometimes it makes it difficult to present the data with any sort of hierarchy, and every group of data becomes equally empathetic in this way.

Even maybe you don’t need a label in the UI

In situations like, when defining the working position of a person or their personality type you even don’t need a label for defining connections

Because when you are able to present data without labels, you can easily emphasize primary and secondary things. As well as feels more designed.

You can also combine values and labels if the label is needed If you want to define a person’s name. You can create like Username is ABC by highlighting values and de-emphasizing labels or you can even add a bullet between them if you don’t want to sacrifice label style and value style.

Where need to emphasize a label

When you think you are designing a thing where the user needs a label for the difference between various things then make sense to emphasize it. Like as dimensions, features of any product, etc.

Avoid to de-emphasize data too much they are still important and still provide the necessary info. While using simply a dark color for the label and slightly lighter for value. You can also give a difference by font weights as well.

Separate semantics of UI and visual design

As it’s important because of the accessibility reasons and for creating meaningful layouts.

Like predefined h tags separated size according to need but it can cause some bad effects on application UI.

You always don’t need to make the h1 text bigger or the h4 smaller. Try to provide sizing according to the need of the importance of that heading.

Don’t let the elements you are using influence how you choose to style it. Prefer to semantic structure first and style it according to your need to create a better visual hierarchy.

Create a balance between Weight and contrast

The reason bold text feels more emphasized than lighter or normal one is that bold covers more surface area. In the same amount of space, more pixels are used for text.

Using contrast in UI to reduce emphasizing by weights

While working with icons, there’s no way to change the “weight” of an icon.

So to create balance it needs to be de-emphasized in some other way. A simple and effective way to do this is to lower the contrast of the icon by giving it a softer color.

This thing works everywhere you need the elements that have different weights. Reducing the contrast works like a counterbalance. In this way, heavier elements feel lighter without changing their weight.

Similarly, you can also use weight to compensate for contrast. As like contrast is used to

de-emphasize increasing weight you can emphasize things as well to low a contrasting element

This thing is useful when darkening the color makes the design feels too much noisy and harsh.

If you want to give something a softer look as well as wants to emphasize as well without losing the softer look try increasing its weight to emphasize it.

In good UI semantics are secondary

It’s easy to get easily confused in good UI and semantics which needs more preference while creating UIs.

Semantics is an important part of the design, but that doesn’t mean you can forget about the hierarchy.

Like let the case of actions of form buttons how they look:

• Primary actions: Solid, high-contrast background colors work great here. In case of a destructive button try the red background.
• Secondary actions: Outline styles of lower contrast background colors are great options. To make it clear but not prominent. In case of a destructive button try the red bold text
• Tertiary actions: Styling these links is the best approach to make them discoverable but unobtrusive. In case of a destructive button try the text to be gray but give a red on hover.

Like these many other things also out there which can improve your UI designs some necessary things are these: All the necessary Spacings in Layout, Designing Text by defining your font scale, Working with colors, Creating Depth In your design, Working with images, Responsiveness Is necessary to check their best practices as well before setting your guidelines. Every time while setting your guidelines think out of the box and from a user’s usage way of perspective. Establish a scale for everything don’t rely on any single thing itself, Avoid ambiguous spacing though-out the UI start with too much white space, and remember that you don’t need to fill the whole screen.

Conclusion

Don’t stick to these things only these are only some design theories or guidelines which can be helpful in Frontend development and may be helpful to create UI in an easy and hierarchal way make guidelines according to your own preference but the main thing any UI you create should be aesthetically correct and hierarchical and try to make UI as much as user friendly as much possible because at the end only users matters who use the website.

Source:- The book Refactoring UI by Adam Wathan & Steve Schoger: https://www.refactoringui.com/

Some other related blogs:

Tailwind usage in next.js https://webkul.com/blog/how-to-use-tailwind-css-in-next-js/

Working with TailwindCss in Hyva themes: https://webkul.com/blog/working-with-tailwindcss-in-hyva-theme/