310 Front
UX & UI Design | Visual Design
Tools: Sketch
2020-2021
In December 2020, I worked as the lead designer for the 310 Front website. I closely collaborated with a project manager and a developer and was responsible for developing the project branding, designing the overall layout of the site as well as the style of animations. I played a key role in the project throughout the entire agile process.
Overview
310 Front is not for the launch of a project that's going to market. The main purpose of this website was to create a condensed overview of the project which the client would use to submit a project proposal to the city of Toronto to go over the development plans of a new rental apartment. The client wanted one transparent website for whoever is interested in the vision and planning for the project to have one single truth on the information about this upcoming project that goes over the development plans, vision, what the design of the project will be like, and to answer any FAQ questions.
Objective
Design a full comprehensive one-pager website. Develop brand guidelines and select corresponding colours and fonts that fit the theme of the provided building exterior renderings. Come up with animations that flow with the overall look and feel of the site.
Ideation
I started by generating a variety of style guides to test how various colours and fonts would pair with the project renderings. This helped to come up with an overall theme and offered an idea of how the site could look and feel. The chosen colours were based on the tone of the building renderings. My team narrowed down the branding elements highlighted below but continued to play around with fonts throughout iterations.
Wireframes
I started to create some wireframes. Because this project is a one-pager, for the first draft, I focused more on organizing the content and layout. The remaining iterations were to polish the look and feel of each section. We were given three-building renderings which I styled to act as a parallax effect throughout the one-pager. Styling these renderings as a parallax helped to show how grand the building could look if the project is approved to move forward with development. Some early wireframes can be seen below.
Final Design
Through the iterations, I came up with an aesthetic that revolved around various line details being paired with moody colours and minimal fonts. These combinations created an elegant neutral site that flowed nicely with the client building renderings. The theme of incorporating line details was also intentionally used for the purpose of animating the lines as the user scrolls through the page. This was also applied to the sticky navbar which uses a line to highlight which section of the site the user is on.
