Going from UI design to working user interface

Going from UI design to working user interface

User interface design for web and mobile applications, is increasingly becoming easier for app designers, due to the availability of numerous creative utilities with enhanced features as well as the plethora of free online UI design resources. A simple online search will yield plenty of results for inspiration and ideas on UI design. The explosion of free icons and vector image providers on the web has also simplified the process of creating a UI design. So how then do we convert that beautiful UI design into an actual working user interface.

The Process

Traditionally, user interface designers, post interaction and experience design, would normally ship their designs off to the front end developers who would be tasked with developing the front end code required to create a functioning user interface. In some instance the front end developers will create the functional template of the interface and the designers will then step into provide the stylistic inputs which will be incorporated into the user interface design. A desired state however, would be if both of these processes could be merged into one task from start to finish, preferably going from a researched, completed and approved design to a working user interface.

Pure CSS

So coming back to the question of how to convert a UI design into a working user interface is simply, Cascading Style Sheets (CSS). The single most important language an app designer cum front end developer must learn. CSS, which has an easy to understand syntax, will be used for stylistic inputs such as color and fonts as well as for defining grid systems and layout styling. Images and icons which will be created in the PNG or SVG format, can also be linked to and called from within the CSS file.

Why JavaScript

JavaScript, on the other hand is required for smoother interactivity based on user behavior, such as interacting with a navigation menu, a carousel, accordion or image slider as well as other app interface enhancements or advanced app animations triggered via user input. Yes CSS can do a lot of this stuff too, but take note of the word smoother, JavaScript just feels right and more often than not it is the only option for advanced user interface interactivity and animation.

CSS is however numero uno when it comes to UI designing, and it is also faster than JavaScript when it comes to animation and effects, CSS is also much easier to learn as well. So the workflow should be to create much of the UI design’s style layout, effects and animations in CSS code and only use JavaScript for that wow factor or if the CSS only solutions to a design problem just does not cut it.

Use Libraries

Finally, we have CSS and JavaScript libraries that have been created and made open source by talented people to make our life as UI designers easier. Using these libraries to power up our own UI designs, means we do not have to reinvent the wheel, that being said, these libraries come in large file sizes, so it’s better to only grab the bits of code from within the libraries that are required for a particular UI design. Again JavaScript libraries are less desirable than CSS as it would be a requirement to link and load the entire file in order to use it within a UI design.

any questions ?

All Rights Reserved,
Cookie data collection helps refine user experience, continued use implies consent, Learn how to disable