The making of TPS Real Estate shopping center websites

Overview• Process IProcess II

Studying the structure of the website.

tps trc process1 01

Realizing that the main page is used by anchor tenants as an advertising platform. We want it to show the shopping center’s façade to increase recognition.

tps trc process1 02

The art director is not convinced and asks to demonstrate scroll mechanics. Animating.

The result is too complex. Thinking of a way to make it simpler and keep the façade. We have an idea to have the façade go through the ads to the foreground.

tps trc process1 04

The art director approves the approach and advises to work on the banners. Coming up with grid design rules and searching for a presentation style.

tps trc process1 05

Assembling a prototype and showing to the client.

The client approves the approach overall but asks to adhere to a lighter color scheme. Taking the feedback into account and trying the style on the shopping centers’ websites.

tps trc process1 07

Working on banner styles.

Simultaneously studying façades of the shopping centers and choosing the best angles.

tps trc process1 09

We want to make the floor map interactive. Trying to add some life.

Another idea for map appearance is born during the discussion.

Simplifying the map style and working on animation.

tps trc process1 12

Roughly approximating map mechanics, making searching for a specific store easier.

tps trc process1 14

Assembling all the ideas into a single presentation for the client.

The concept is fully approved. Starting to work on the remaining pages.

tps trc process1 16

As we discuss the main page design, we decide to keep the façade image for five shopping centers and use a video for the sixth to highlight its interior features.

tps trc process1 17

Working on the façades.

Carefully choosing clouds for each façade.

Defining color schemes for websites based on shopping center logos.

tps trc process1 20

As we work on the interface, we create a draft of account pages for tenants and administrators. A tenant can change information about their store or submit a query related to their tenancy. They can also open stores in several shopping centers simultaneously. Almost each operation goes through an administrator.

tps trc process1 21

Saying hi to the TPS Real Estate corporate website on the 404 error page.

tps trc process1 22

Creating a set of SVG icons.

tps trc process1 23

Starting typesetting and tracking bugs.

tps trc process1 24

Developing a graphics upload guide to make sure tenants upload proper banners and store logos.

tps trc process1 25

In the process the main page goes through a tremendous number of transformations.