Frontend applications make first impression upon potential clients and very much sell the product.
Most frontend teams are lucky enough to have dedicated designer who is highly trained and experienced in creating beautiful and useful graphical interfaces. But what if we do not have mockups nor wireframes carefully prepared by UI designers?
Designing great UI/UX is important yet difficult task, but being at least competent as a frontend web developer is a crucial skill.
The fundamentals
When thinking of web design, we have to consider look and feel of the application and user experience (UX).
“Good Design is Obvious, Great Design is Transparent”
A great way to improve your understanding of web design is to realize that it is more science than art and deep down it is a very orderly and mathematical concept - sounds like something every programmer should handle.
Remember that web was created in the first place to share academic studies and documents, hence black letters on white background is the default. It has its roots in print, most modern design builds upon that idea metaphorically presenting data in form of layered papers, cards or sheets. A lot of abstractions from every day life are implemented in web design.
Spacing plays an important role of grouping or separating UI elements together. For example a good design would be to put all credit card info or address data closer together to form a group of inputs and visually connect each other.
Size and placement plays a key role in providing semantic information in UI. For example main heading should have bigger font than section heading and submit button should be bright and big next to a toned-down cancel button which should not shout “click me!“.
Consistency is a key to a great design. Not only it looks professional, but also eases the use of an application, as it becomes predictable and coherent. An example of consistency in web design is a submit button that looks and behaves the same way everywhere it occurs.
For composition my tip is to treat web design (especially in component-based framework era) as building with LEGOs. First, create atomic components and then lay them out aligned properly within design rules on your page.
A lot of layout patterns are available online. For example get familiar with twelve-span grid concept and its implications on responsive web design.
Design from the mobile up for responsive web applications.
Do not reinvent the wheel - look for commonly known solutions for given design problem. There are lots of resources like UX Collective, that precisely describe the DOs and DON’Ts of good UX and proven recipes.
Keep things simple and iterate over time.
Fonts and Typography
Typography can be a difference maker between dull and outstanding design.
As a rule of thumb serif fonts are used for text paragraphs for a better reading experience and sans-serif ones
should be used for headers.
Reach fonts could be used either for logotype or web title or to make a quote stand out.
Monospace fonts are useful to present some code examples.
Consider different levels of typography such as h1, h2, h3, p, button, caption etc. to build complete font palette.
Make sure that contrast between text and background colors is high enough to be easily readable. Modern browsers offer a measuring tool (under inspect element) that show contrast value and whether it’s high enough.
Colors
Applying colors does not require taste and artistic vision in common use cases. A great starting point is to learn what color wheel concept is and which colors go well together or which are complementary colors. There are lots of palettes on the net ready to be reused and great online tools to generate palette.
A good way to select a color scheme is to read upon cultural context of given color and learn its meaning e.g. red color is connected with danger, blue is often connected with trust and loyalty.
Most of the time all you will need to compose a complete palette is primary, secondary and text colors. Every other value will be a shade of selected colors.
Empty state
Keep in mind that tables, graphs, forms, paragraphs etc. rely on data to render proper and beautiful UI.
But what happens when response data is empty, or connection to server is lost?
Don’t forget to handle empty and other edge-case states in your UI. It’s very unprofessional to leave a user with strange behaviour of an app, simply because we designed only positive paths in UI flow.
Practical tips
Create a simple skeleton of a page (or app layout) and apply simple rules like margins, paddings, gutters and alignments. For starters focus on composition rather than complicated animations and dynamic background colors.
This may sound obvious, but differentiate which CSS property affects container’s children and which takes effect
on given element itself. And be very
precise about CSS rules applied, do not use rules that give you expected result, but in an unexpected manner.
Do not overcomplicate CSS rules, as it will increase technical dept of your design.
Tailwind can be a great hybrid between writing pure CSS and applying style system.
Applying global styles is always a good idea, because introducing changes become simple and DRY principle is applied. This approach can easily lead to creating (or applying) a style system and a theme with color palette, shapes etc.
When dealing with new components without a general idea of how they should look like, you can either use a wireframing tool like Figma, or AdobeXD. But my personal preference is to implement a React component very loosely and iterate over styles on the fly. After few iterations of coding and reviews I clean up implementation following thinking in React rules.
Don’t be afraid to use frameworks or seed projects at the beginning. This will definitely help bootstrap your application.
On the other hand taking time in building simple project from the ground up, will benefit as a great conceptual exercise.
Storybook is a great tool for sharing component UI/UX across the dev team.
Get inspired
“Great artists steal”
I don’t suggest copying styles one to one, but get inspired by watching great design and implement ideas that resonate with you. Look for inspirations on sites you use daily, or search Instagram, Dribbble, Pinterest etc. for design ideas. Don’t restrain yourself to the Internet - traditional press, music covers and booklets or game UI is a great place to look for inspiration too.
Study different complete UI systems, as MaterialUI from Google, Apple’s Human Interface and analyze why the apps you use on a daily basis feel good and approachable. Becoming knowledgeable in terms of design rules and principles may be an eye-opening experience.
Follow newest trends in web design.