UI Design Workshops

Functional user interfaces designed from the ground up

UI Design Workshops

Websites are one of the most important marketing tools to attract potential customers. Our client wanted us to take their outdated, underperforming and non-responsive website and transform it into a visually well-designed and user-friendly website targeting very non-tech savvy users, to help them grow in their market. In this article, we dive into the details of designing user interfaces and the before and after of this website redesign project.

Analyzing and researching market and competitors

As long as we analyze the market enough, we gather inspiration such as gathering imagery, colors, motions whatever inspires us based on the research and information from the client to define the concept of design style which we want to apply for the project. With all gathering inspirations, we hold several brainstorming sessions together for more creative ideas and narrow down our opinions to several common ones.

Set up the guidelines

When we narrow down our opinions on the design concept for the project, we start to design the landing page first to see the overall atmosphere of the design and when it’s done, we present it to clients. During this phase we set up the basic guidelines such as headings, color theme and style of design components such as buttons or menu, you name it. This process can either be done starting from the Desktop version design or actually Mobile First which means starting with the design of the mobile responsive depending on User Experience data, if users are more likely to use the platform on their mobile devices.

This Mobile first process helps to structure the information architecture better and also helps for the development to start with a lesser code base to adapt when the desktop version needs coding.

After we get the final approval on the landing page, we set up the further guideline of the rest of the design component. Style guideline helps designers and developers follow to ensure the every page of the website will be always consistent and maintain a cohesive experience. Based on the design components and guidelines we apply to the landing page, we design the rest of the sub pages.

Present the design to clients

When the design is completed, we present design to clients through the platform such as Invision or Adobe xd and we receive some feedback back and forth with the customer until we both are satisfied with the design. After this stage, our design is developed by professional developers at Outsourcify.

What is our solution?

Solution 1: Use consistent colors and themes

To make the website navigate easily through the contents and make it easy to read, we had to make the great choice for the font and colors. We chose the colors and fonts to generate a positive impact on users to the website.

We offered our client colors that stay trendy and friendly, accessible to everyone, something popping out for non-tech savvy users and something that still represents the “online” side of the digital product. Colors should also stand out from competitors. 

Solution 2: Use clearly readable typography

Choosing the right font is as important as choosing the right color scheme for the better user experience and brand identity. A guideline system for typography such as headings, subheadings and paragraphs is important to give a sense of cohesion to the digital product. We chose fonts styles which are relevant to the brand identity and reflect the brand personality with the readability.

Solution 3: Use UI elements and good images reflecting brand identity

An image is used as a good asset to convey the story of the brand to users. For successful branding imagery, we focus on using consistent and good qualified images throughout the website. Usually it is strongly advised to have unique, proprietary images of the client’s team, offices and whatever scenes they want to highlight.

In addition, we apply design techniques for imagery and texts to keep consistency with other UI materials such as fonts, colors and icons.

Have a project in mind?
Let's start your project today

Contact Us
Have a project in mind?
Let's start your project today