Developer's insight into UI and UX

User Experience (UX) and User Interface (UI) concepts comes into designers turf. The turf becomes grey when cost effectiveness comes in play for a project. In general, it is recommended for all front-end developers to know how to organize HTML and CSS by getting a basic understanding on UI/UX. However, developers have decreased their concentration on them for several reason: generalization of theme design (by material design), JavaScript Framework demand in market, Over relying on predetermined Framework components and more. Such scenario has led to classification to two types of developer. The first Class only deal with designing of Static HTML page with responsiveness whereas the other class deals with logical implementation UI elements using JavaScript Framework. I believe a Front End Developer earn more merit when he/she is able to work in both classes. Therefore if you are a developer, this article will give you a better insight in approaching any website's UX and UI concepts.

As per designer's eye the UI and UX is an art for them. However, with developer's eye it should be a clear bifurcation between CSS for UI and HTML/JavaScript for UX

Designer's Perspective

Image Credit

Developer's Perspective

The definition here is very simple, HTML and JavaScript translate the UX in 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 - is stimulated by JavaScript For Example: Single Page Application (SPA)  and Progress Web App (PWA)

While UI requirements are fortified by CSS in given ways:

• Visual Design - are controlled by CSS background, margin and padding properties
• Colors - for the site are translated by CSS framework by using a design language of primary color, secondary color, gray shade scale for fonts and regions and contextual colors for highlights
• Graphic Designer - contribution to a design can be easily teleported by various CSS3 features
• Layouts - are built by CSS framework's grid system, flex and containers
• Typography - is another feature where font files can be imported on to a design using CSS imports 

We will look further into the UX part in this article while the UI perspective would be given with future SCSS practice and learning.

See no element but as component

Designers provide their best creative work in form of PSD's and images. However, bringing the design to life is something a developer should understand and take over. In most scenario's the management invest a lot in adopting a precise design skews but end result turn up as a lifeless UI due to lack of interactivness. Although, the UI is adapted with precision the missing interactiveness on actions like scroll, click, hover, touch makes it hollow shell site. This is where the components come in 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 were just standard elements like h1-h6, p, table, ul-li were just seen as elements while designing a page. This perspective is tremendously changed with an introduction of component system by JavaScript frameworks. As per mockups and wireframes, each block should be looked upon as component rather than a element. Whenever you visit a web page, please regard everything as components except headings (h1-h6) and paragraphs (p). You must be wondering why keep such mindset? For obvious reason, knowing the fundamental that it a component, your mind will initiate the logic of interactiveness. A component mindset will not only probe you to complete it's functionality but will also make you think about it's lifecycle from its creation to destruction.

Despite of tables, forms, list, cards, inline list, anchor tag, buttons being elements, the due process of interactiveness and rendering make them a component.

Pre-build your UI

Design once unveiled by the designers can't be revert from mind. A glance on the mockup design give you the aesthetic sense of the brand. The design's peculiar sense is built by its spacing, colors, animations, shapes, fonts and shadows. It is understood this UI will be unanimous on entire website and won't diverge much in its aesthetics. So why not build the entire CSS base using framework before Implementing it?

Frameworks like bootstrap and foundation has developed a mastery in building any variant from it's core preprocessors like SASS and LESS. An SCSS variable file 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.

The technique is very simple of building a theme before hand. Regardless of such accessibility, I believe 95% developers in market use the CDN of bootstrap and add a CSS overrides on the fly. The output of theme is conclusive but it drastically increase the CSS bulk, becomes repetitive and unmanaged. Moreover, the design gets hardcoded and scope of redesigning of site becomes limited. 

It is suggested to analyse the mockup thoroughly: 

1. Pick up the spacing constants, font types, font sizing, shadows and radii parameters initially. 
2. Then understand the gray shade base, primary color, secondary color and contextual colors.
3. Determine the components used in mockup and relate them to available components in your selected CSS framework
4. Most importantly, understand the container sizing and grid layout and breakpoints to be used for a given mockup. (I highly suggest to keep grid breakpoints intact and request designer to adapt accordingly)
5. Once the preliminary information is collected, adapt _variables.scss file to values that best fit the mockup design and compile it.
6. Finally, DO NOT forget to compare the mockup with end result using HTML structures defined by CSS framework for components.

Entertain visitors with a precise header

Headers after the shift to responsiveness, has been the most important identity factor and throughout experience for user in mobile, tablet and desktop. Header is not something to support the navigation of site and rather a complete simulation of user experience as it contains the most prominent components like search bar, cart items, notifications, quick links, the branding logo, login and profile accessibility. All these components just have 12 different layout forms since the beginning of internet. The UI factors like spacing, colors and fonts may be modified but the structural integrity and user experience remains identifiable in the given implementation Please visit link to know more: http://themes.bootstrapessentials.com/headers/

Concentrate on forms

Forms have evolved significantly throughout the age of internet. While, the internet was booming, the form elements remained almost the same with label and simple input text box but had fundamental evolution in autocomplete or auto suggestions. The form validation usually triggered after the submit as the JavaScript wasn't that evolved to handle the validation. Then came in the frameworks like bootstrap and foundation with their generic UI design. Those framework placed a logical relative validation indicators like success, error, warning, significantly contributing the interactive nature via front end. Inputs were modified by jQuery plugins to such extent that browsers began to provide a native support for date pickers and sliders. Browsers also patched up the validation of form element from JavaScript and back-end to just HTML via required and pattern attribute on form element itself. The most viral phenomenon on form elements were the floating labels by google material designs which was quickly adopted by major website to breathe life to the site.

In general, a front end developer should always complete the logical flow of element from search suggestion to error validation labels. Whether it is a mobile app or large website, the form element greatly confer to UX of the site.