User Experience (UX) and User Interface (UI) are generally considered to be the domain of designers. This quickly runs into challenges when cost-effectiveness comes into play. In general, it is recommended that all front-end developers know how to organize HTML and CSS by having a basic understanding of UI/UX. However, developers have decreased their attention on these topics for several reasons:
- The generalization of theme design (by material design)
- JavaScript framework demand in the market
- Over-reliance on predetermined framework components
These scenarios have led to a dual classification of developers. The first category focuses on designing static HTML pages with responsiveness, whereas the second category focuses on the logical implementation of UI elements using the JavaScript framework. I believe a front-end developer earns more merit when they are able to work on both fronts. Therefore, if you are a developer, this article will try to impart some insight into approaching any website’s UX and UI concepts. From a designer’s perspective UI and UX are a form of art. However, from the developer’s perspective, there should be a clear bifurcation between CSS for UI and HTML/JavaScript for UX.
A Designer’s Perspective
A Developer’s Perspective
From a developer’s perspective, HTML and JavaScript translate UX in the following ways:
- Interaction Design — Controlled by JavaScript
- Wireframes — Built on HTML
- Information Architect — Built on HTML
- Scenarios — Are created over logical implementation using JavaScript
- Experience flow — It is stimulated by JavaScript. For Example, Single Page Applications (SPA) and Progressive Web Apps (PWA).
UI requirements are addressed by CSS in the following ways:
- Visual Design — is controlled by CSS background, margin, and padding properties
- Colors — for a site they are translated by the CSS framework by using a design language of primary color, a secondary color, grey shade scale for fonts and regions, and contextual colors for highlights
- Graphic Design — contribution to a design can be easily teleported by various CSS3 features
- Layouts — are built by the CSS framework’s grid system, flex, and containers
- Typography — is another feature where font files can be imported into design using CSS imports
We will dive deeper into the UX part in this article, while the UI perspective will be shared in a future blog.
Working with Components
Designers provide their best creative work in the form of PSDs and images. However, bringing the design to life is something a developer needs to focus on. In most scenarios, the management invests a lot in adopting a precise design skew but the end result turns up as a lifeless UI due to lack of interactivity. The missing interactivity for actions like scrolling, clicking, hovering, and touching creates an unsatisfactory experience. This is where components come into action.
For web development, a component is an element or group of elements that is/are interactive in nature and provide a comprehensive feel towards a defined function.
A decade ago, HTML elements like h1-h6, p, table, ul-li -li were just seen as elements when designing a page. This perspective has changed with the introduction of the component system by JavaScript frameworks. As per mockups and wireframes, each block should be looked upon as a component rather than an element.
Whenever you visit a web page, please regard everything as components except headings (h1-h6) and paragraphs (p). You must be wondering why this mindset. A component mindset not only helps elevate functionality but also makes you think about its lifecycle, from its creation to destruction.
Despite tables, forms, list, cards, inline list, anchor tag and buttons being elements; the due process of interactivity and rendering make them components.
Pre-Build Your UI
A glance at the mockup design gives you the aesthetic sense of the brand. The design’s unique sense is built by its spacing, colors, animations, shapes, fonts, and shadows. It is expected for the UI to be cohesive across the entire website and won’t diverge much from its base aesthetics. So why not build the entire CSS base using the framework before implementing it?
Frameworks like Bootstrap and Foundation help buildany variant from its core preprocessors like SASS and LESS. An SCSS variable files from Bootstrap can narrate the entire design language of the site from its variables. So why not use it to build the theme and make all components UI-ready before implementing?
I believe 95% of developers in the market use Bootstrap CDN and add CSS overrides on the fly. The output of the theme is conclusive, but it drastically increases the CSS bulk, and becomes repetitive & unmanageable. Moreover, the design gets hardcoded and the scope of redesigning the site becomes limited.
I suggest that the mock-up be analyzed thoroughly:
- Pick up the spacing constants, font types, font sizing, shadows, and radii parameters initially.
- Understand the grey shade base, primary color, secondary color, and contextual colors.
- Determine the components used in the mock-up and correlate them to available components in your selected CSS framework.
- Most importantly, understand the container sizing and grid layout and breakpoints to be used for a given mock-up. (I highly suggest keeping grid breakpoints intact and requesting designers to adapt accordingly.)
- Once the preliminary information is collected, adapt _variables.scss files to values that best fit the mockup design and compile it.
- Finally, DO NOT forget to compare the mockup with the result using HTML structures defined by the CSS framework for components.
Entertain Users with a Precise Header
Headers are the most important identity factor throughout the experience for the user on mobile, tablet, and desktop form factors. The header is not something to support the navigation of the site and is a complete simulation of user experience as it contains the most prominent components like the search bar, cart items, notifications, quick links, the branding logo, login, and profile accessibility. All these components just have had 12 different layouts since the dawn of the internet. The UI factors like spacing, colors, and fonts may be modified but the structural integrity and user experience must remain identifiable in the given implementation.
Pay Attention to Forms
The elements of a form initially remained the same with a label and a simple input text box but had a fundamental evolution in autocomplete or autosuggestions. The form validation is usually triggered after the submission, as JavaScript was not that evolved to handle the validation.
Then came the frameworks like Bootstrap and Foundation with their generic UI design. Those frameworks placed logical relative validation indicators like success, error, and warning; significantly contributing to the interactive nature via the front-end.
Inputs were modified by jQuery plugins to such an extent that browsers began to provide native support for date pickers and sliders. Browsers also patched up the validation of form elements from JavaScript and back-end to just HTML via pattern attribute on the form element itself. The most viral phenomenon on form elements was the floating labels by Google’s material designs which were quickly adopted by the major websites to breathe life into the site.
A front-end developer should always complete the logical flow of form elements, from search suggestions to error validation labels. Whether it is a mobile app or a large website, the form element confers to the UX of the site.
About Encora
At Encora, we’re interested in learning more about your software testing projects.
Encora offers fast-growing tech companies tangible business value by setting you up for growth with experienced software testing processes, tools, metrics, talent, and communication.
Contact us to schedule a consultation.
