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)
- Over-reliance on predetermined framework components
A Designer’s Perspective
A Developer’s Perspective
- Wireframes — Built on HTML
- Information Architect — Built on HTML
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.
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
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.
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.
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.