How we work with Startups – User Interface Development – Part 3

In this third part of this seven-part series, we look at the development of the User Interface (UI) product screens, which takes place once the scoping, wireframing and design processes have finished.

PRODUCT DEVELOPMENT BROKEN DOWN

The development process is broken down into various phases and deliverables. Typically the development comprises of three main areas: the interface development, the front-end functionality and the back-end functionality.

Interface Development

Interface development is also known as slicing or cutting. This step takes the designs that have been created in the previous step and converting these into a web-based format without any functionality. In order words we convert the designs into HTML, CSS and Javascript (typically AngularJS), meaning that these designs are then able to be viewed in a web browser, on a desktop, tablet and mobile device.

Typically all mobile, web apps and digital products are designed and built for desktop, tablet and mobile devices. This is known as responsive design and development. Meaning that we develop these interfaces once but apply clever technology and features to allow the page or screen to respond to the screen size that it is viewed upon and display all the on-screen/page elements accordingly.

During this phase it is possible to add animation to the project, giving it a slick and user-friendly feeling, allowing content and sections to show or hide quickly without navigating to other screens/pages. Animation can include how menus open and close, how users are guided from one section to another or how content is visually displayed and expanded, in order to make maximum use of the screen “real estate” while still providing a pleasant user experience.

Some of the tools we use are:

  • TinyPNG, to optimise images so that they are smaller in size but still retain their quality.
  • Google Chrome and Firefox web browsers also have built-in development tools which allow developers to debug Javascript code and also finetune the CSS, to enhance and adapt the styling of the web applications in real-time.
  • JQuery is a Javascript library that we use from time to time where necessary (we mostly write custom Javascript code), we try to keep plugins at an absolute minimum as these plugins may conflict with each other or the styling of the site. The use of plugins also severely slows down the performance of the website/web apps because they’re so bloated to suit every scenario.
  • Another point worth mentioning is that we will rather use CSS for animations instead of Javascript because it’s way faster – unless it’s something really complex which CSS is not able to handle (again following best practices to ensure websites are as fast and lightweight as possible)

 

Front End Functionality Development

The front end development comprises of the development of all the functional elements that the users of the mobile app/web app / digital product will make use of. This not only includes functionality that the general public will interact with but also the functionality of all the different user types that would use the system.

A simple example to illustrate this would be Airbnb. The general public would be able to browse and search for properties based on their personal requirements, however, once this user then books a property they would then have access to an additional set of functionality, where they can view their bookings, interact with the property owner, etc. Likewise, the property owner would also login to their profile and then have access to all their property information, bookings, etc…

Another functionality that can be developed for the front end is endless. Here are some common pieces of functionality that are often developed as part of projects: forms, galleries, BLOGs, multi-language implementation, currency conversion, ratings and reviews, etc.

In fact, any interaction with data and management of records as well as any other interactivity that the user performs on the product is generally considered functionality.

The development of the front end functionality is specific to the product, which is based on the project scope and the wireframes produced and therefore custom for the product at hand and the client’s unique requirements.

Watch this space for our next article in this series where we delve into the intricacies of Back End Functionality and API development.

Don't forget to share this post!