WINSTON & VARGAS PROTOTYPE

GOAL | DESIGN A HIGH-FIDELITY iPad PROTOTYPE, USING ADOBE XD

WINSTON & VARGAS ADOBE XD PROTOTYPE

YEAR
2022

DISCIPLINES
UI & Graphic Design

PROJECT TYPE
Academic: BCIT | MDIA 2330
UI/UX Prototyping Tools: Adobe XD

APPS
Adobe Creative Cloud

ROLE
UI & Graphic Designer

CONTRIBUTION
Layout & Branding

01. DESCRIPTION

The project consisted in creating a tablet application, applying Adobe XD functions learned in class, such as sound and video.

I chose to work on an iPad application for a fictitious architecture studio, called Winston & Vargas.

02. BRAINSTORMING

Background

Winston & Vargas is an Architecture Studio located in Vancouver, BC. They have rented a booth in an upcoming trade show to promote the business. Being concerned about staff availability to help potential clients, they decided to have several iPads available, where they showcase their recent work, so customers can browse the properties and get information on the studio, while waiting to be helped.

User Story

A person visiting an Architecture & Designing Trade Show, wants to know the work done by Winston & Vargas, an Architecture & Interiors studio. While waiting to be helped at their stand, he grabs an iPad where he can browse the featured properties, get to know the studio's professionals, and the businesses W&V collaborates with.

03. VISUAL IDENTITY

Winston & Vargas is a well established architecture and interiors studio, so I thought a minimalist & sophisticated look, in a symmetrical layout, was appropriate.

Designing the logo, I wanted to highlight the established and prolific situation of the business and the multicultural work environment, distinct to the studio's philosophy.

The elegant Serif font used for the logo and studio name, New York regular, combined with a modern light Sans Serif, SF Compact thin, reflects the combination of different styles that blend together harmoniously.
The letters W and V interconnect graciously, blending together as a unit, inside an outlined circle.
The use of two colours, black and gold, interact effectively on the white background.

04. PROTOTYPE

For the prototype, I decided to accentuate the symmetric balance placing the logo in the center, both in the horizontal axis, and the vertical axis in relation to the black header.

I also added a shadow to the header, that elevates it from the background.

The images used to showcase the properties are displayed within a clear grid, interacting with the text, in a playful variety of options.

I used thin lines in gray to fractionate and organize the information, adding to the clean and minimalist look.

The splash screen has a CTA (call to action) button to start the application, so the prototype is not looping permanently, and users can start it from the beginning whenever they are ready.