Arche Design Type - FIFILO - A UI UX Design Studio

Striving to uncover the possibilities of design

  • Arche Design Type
  • UAE
  • Real Estate & Property
  • UI/UX Design

Creating a moving design for a modern construction management company

CLIENT

ARCHE DESIGN TYPE

BUSINESS TYPE

Real Estate & Property

SCREENS

30+

TIMELINE

2 Month

The Challenge

The challenge for this project was to provide the client with a website that would reflect the business brand and the work the business enterprise specialized in. In addition to designing the user interface that was modern, sleek with architectural finesse, the client also wanted their website for the purpose of generating leads. So the website needed to have a free flowing UI design that makes for an engaging and easy to navigate interface with responsive and easy to fill lead generation form.

WireFrame

The Solution

Discover - The client being a modern construction management company mainly specializing in the designing and construction of houses, we had to bear in mind the architectural significance of our UI design to provide the users with a more meaningful experience and which also aligned with the brand values. To understand the requirements of the project better we carried out a thorough analysis of the task both in terms of target audience and business requirements. Then for conceptual ideas on design and framework a competitive audit of other such websites was done.

Define - For this project the best approach would be to start with a basic concept of design framework that visually reflects the services offered by the client. Since, the website would also function as the landing page for generation of leads, it was important to incorporate eloquent value proposition verbiage in the form of simple and effective content. For user interface design, the website needed to have viable slots to showcase their work and projects that would add to a more engaging and visually engaging user experience. The CTA (call to action) feature had to be in the right location, easily visible and responsive without any latency issues. Since the site would have relatively a high volume of written content and the styling guide and the fonts used would have to be legible and easy to read. To ensure that the users did not strain their eyes while going through the written content, the color palette for the fonts needed to be mild with a contracting background

Design - With a clear and precise picture of what we wanted to achieve through our UI design, we proceeded with a few rudimentary sketches that would be most appropriate for the brand. We made sure that the feel of the user interface would have a modern and sophisticated feel about it by incorporating geometric design framework accentuating straight lines. For more visibility of the written content and for ease of reading we used white color for the content against a black background. We integrated SEO tools within the design framework to attract more traffic to the website which would increase the generation of leads. The slots to showcase client’s work were designed to garner maximum exposure without compromising the aesthetic appeal of the website. To realize this design, we started creating the wireframe for the website, and then moved on to the building of the prototype.

Deliver - Upon the successful completion of all the tests and validations in terms of the website functionality and features, the user interface design for an impactful user experience and performance analysis. We delivered an end product with visually stunning layout, motion mobile responsive designs with architecturally engaging and compelling layout with straight lines.

The Typeface

Titillium Web

The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography

Titillium Web Bold

Aa

1234567890

ABVDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Titillium Web Regular

Aa

1234567890

ABVDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Color Palette

Primary Colors

HEX

RGB

CMYK

#0A0A0A

10, 10, 10

0%, 0%, 0%, 96%

Secondary Colors

HEX

RGB

CMYK

#ABB8C3

171, 184, 195

12%, 6%, 0%, 24%


Other Secondary Colors

HEX

RGB

CMYK

#FFF

255, 255, 255

0%, 0%, 0%, 0%

HEX

RGB

CMYK

#100F0F

16, 15, 15

0%, 6%, 6%, 94%

Have A Design Idea

Let's create a better user experience
together!

icon
icon icon icon icon icon icon