The making of TPS Real Estate shopping center websites
Studying the structure of the website.
![tps trc process1 01](tps-trc-process1-01.jpg)
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](tps-trc-process1-02.jpg)
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](tps-trc-process1-04.jpg)
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](tps-trc-process1-05.jpg)
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](tps-trc-process1-07.jpg)
Working on banner styles.
Simultaneously studying façades of the shopping centers and choosing the best angles.
![tps trc process1 09](tps-trc-process1-09.jpg)
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](tps-trc-process1-12.jpg)
Roughly approximating map mechanics, making searching for a specific store easier.
![tps trc process1 14](tps-trc-process1-14.jpg)
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](tps-trc-process1-16.jpg)
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](tps-trc-process1-17.jpg)
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](tps-trc-process1-20.jpg)
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](tps-trc-process1-21.jpg)
Saying hi to the TPS Real Estate corporate website on the 404 error page.
![tps trc process1 22](tps-trc-process1-22.jpg)
Creating a set of SVG icons.
![tps trc process1 23](tps-trc-process1-23.jpg)
Starting typesetting and tracking bugs.
![tps trc process1 24](tps-trc-process1-24.jpg)
Developing a graphics upload guide to make sure tenants upload proper banners and store logos.
![tps trc process1 25](tps-trc-process1-25.jpg)
In the process the main page goes through a tremendous number of transformations.