Wireframes Low fidelity
How can we create a site that educates as well as engages people about Urban infrastructures around Melbourne and Ho Chi Minh City? How can we talk about both cities whilst merging the information into one interactive medium for both desktop and mobile?
WEB WIREFRAMES
MOBILE
WIREFRAMES
2. Research
We researched the two cities, finding connections and relationships that could be used to educate other people. I researched:
-
The layout of the cities
-
Architectural styles of the buildings (early and modern)
-
Transport systems (operation and transit sustainability)
-
The different areas of each city (how it’s divided into suburbs or districts)
-
Particular landmarks and buildings
-
Green spaces and laneways (To support different ecosystems)
3. Audience
-
Students
-
Community leaders
-
Architects and design managers
-
Urban planners and engineers
-
Locals or non-locals who are interested in Urban planning and design, though this is very broad and only applicable if they stumble across the site.
-
​
To assist students by giving ideas of what both cities have already established, and perhaps spark a few ideas in their creativity for their work.
​
Community leaders analyse issues within their space to improve operational efficiency and infrastructure. This aligns with architects, urban planners, and engineers, who work together to improve their cities.
Sister cities
Creating an interactive website that reflects the relationship between the ‘sister cities’ Melbourne and Ho Chi Minh City.
​
This project was created by a group of four people. Along with other students, I researched the infrastructure of the two cities, their layout and transport systems as well as the way they operate around particular areas. I used this information to pinpoint my target audience and explore different designs and themes that are appropriate for particular age groups
​​
1. Objective
How can we create a site that educates as well as engages people about Urban infrastructures around Melbourne and Ho Chi Minh City? How can we talk about both cities whilst merging the information into one interactive medium for both desktop and mobile?
4. Case studies (interactions)
We also explored different sites that had unique styles or interactions, as well as the pros and cons of their UI. This acted as a guide on which interactions we wanted to incorporate into our site, whilst maximising user efficiency and experience for the kind of audience we’re trying to target
In the end, we went with four interactions:
-
Interactive map (main interaction)
-
Layout puzzle (showcases the layout of cities)
-
Revealing landmarks (on hover)
-
Travel back in time (comparing old and modern architecture)
​
​
Style Guide
We decided to use the Montserrat font.
We reason that, since we are designing an Urban design website, a modern topic, we want to use a modern Sans-serif font to communicate the modern design we have for our website. We do not want to use a wider font, as, visually, it takes up a lot of space, and a slimmer font will interfere with the readability of the content.
​
Especially since our website will feature a great amount of content, using an easy-to-read and clean font allows readability on both large and small screens. Montserrat also has high versatility and is suitable for a wide range of design styles and purposes, while maintaining a modern, professional and polished look.
