Frontend design for a web application

WEB PLATFORM and CUSTOMIZED ICON SET

Client request

Design and development of the frontend involves as a final result the creation of HTML, CSS and JS code which constitutes the user interface. The customer’s request was to design the entire frontend of this web application: starting from the previously created logo brand identity design, and then to the icons design and graphics for the front-end. Then move on to the homepage design, to the company card, and later to the pages and search lists of companies, comments and user reviews, up to more particular elements such as bottom toolbar, popup design, badges and guarantee seals always starting from a mobile first approach.

design idea

Before proceeding with the development of the frontend design you need to put a lot of time and attention on the design of all the graphic elements. When designing I tried to give a lot of white to everything and to make it as modern, clean and easy to use as possible.
I have extrapolated the main colors from the logo brand identity and the shades of gray and blue play an important role.

For the icons, a custom set was created in harmony with everything, and gave a clear and modern character to the various features of the platform. The check symbol (logo brand identity) is used extensively, both to define work areas, as well as on bulleted lists and checkboxes, for security symbol with padlock, and for all the badges.

I choose to use the same font used  for the logo and all the brand identity. The whole site at the moment presents only this font in 2-3 variations which is not bad to compress the loading time of the site also from a seo perspective.

design frontend web app

Activities

Frontend design and development. Set of custom icons and graphic elements for web platform.

Locality

Mendrisio, Ticino – Switzerland.

Website

bautrust.ch

WEB
colors
DA291C275CA8A8B7C5
sviluppo frontend design

custom icon set

For the development of the frontend a set of many custom icons was created to each functionality. The icon set was transformed into a font to be loaded quickly from the frontend, always maintaining a retina-ready support.

sviluppo front end design

frontend design company card

The company card represents the identity card of the company on the platform and must express the strengths, the works carried out, the reviews and the main data relating to the company.

front-end design
frontend design
design frontend app reviews
design frontend app mobile first

front-end design search list

The list of companies must be easy to use, provide two types of responsive visualization (column or row) and summarize the company sheet.

design front-end search list
application frontend design
application frontend design mobile first

frontend design popup

Popups will have to encourage interaction with the user and will be responsive and with different specifications from desktop and mobile.

design frontend popup app web
design frontend popup applicazione web

frontend design additional elements

In addition to the various pages, the toolbar (for mobile and desktop) and a set of customized badges and recognitions were also designed.

frontend design elements css html

Do you need a front-end design and ux design for your applications?

The design of the frontend and the ux design are fundamental elements for app and website! Fill out the design request form today to receive an offer tailored to your needs!