Resonate

User Interface Design

Project Overview

Background

Resonate is an innovation centric and futuristic pan India online hackathon organized by the Microsoft Learn Student Ambassadors Club of SRMIST. The goal was to create a website for it that matched the theme of the hackathon and contained all the important information that a participant might need.

My tasks

Define the sitemap for the Resonate website.
Determine a visual identity for the website.
Design a responsive website that is easy to use and allows users to browse through all the information needed for the hackathon.

Project Scope

Responsive website, Visual Design

My Role

UI Designer

Duration

4 Weeks

Design Toolkit

Figma

Illustrator

InVision

Zeplin

Sitemap

The first step was to create a sitemap for the website so as to have a clear idea of the structure and layout. I decided to create a one-page site, so that all the information related to the hackathon could be found on a single page in sequential order for the ease of the users.

Wireframes

The sitemap gave me a clear idea of the structure to be followed and I proceeded with creating the wireframes for the website. I used simple structures and focused on hierarchy.
I created wireframes for the desktop and the mobile site to maintain responsiveness and consistency across devices.

Style Guide

To create a visual identity I kept in mind the following characteristics of resonate: innovative, futuristic, inviting, and modern. While determining the color palette, I took inspiration from the Vapourwave art style. Gradients were used for icons and logos to give a modern look to the website.
The font used for the heading is Good Times. It is a techno headliner font that gives a futuristic feel. The font used for the body text is Gotham. It is a sans serif geometric font that gives a modern and inviting appeal to the website.

Final design

The final UI design for the website was created based on the wireframes and the style guide. Various revisions and iterations were made based on peer feedback.

See Prototype