• Websites
  • TPS
  • The making of the TPS Real Estate website

    Overview• Process

    We start by studying the structure of the current website. Looking at the links and interconnections.

    tps bazil process 01

    Searching for pieces of information that would allow us to make a start. For example, trying to emphasize the company’s investment business.

    tps bazil process 02

    Trying to make an attempt with visual elements on the main page.

    tps bazil process 03

    The art director suggests to go with the design featuring large letters and elaborate it further.

    Considering all aspects of showing the logo on the main page.

    tps bazil process 05

    As we search, we get the idea to show the company’s involvement in the full cycle of shopping center construction, from architectural sketches to the opening.

    tps bazil process 06

    Coming up with an approximate look of the Press Center section.

    Assembling a presentation of the prototype.

    Putting all the layouts in PDFs and showing to the client.

    tps bazil process 09

    The client doesn’t like the approach. We should change the emphases on the main page.

    We get the idea to pave the main page with banners made of shopping center floor plans with brief information for investors.

    tps bazil process 10

    The art director approves. Sketching a quick prototype to test the idea.

    Using the Press Center section to think through the behavior of the header on page scroll and tuning the behavior of various navigation elements.

    tps bazil process 12

    The main page with banners keeps evolving every day we work.

    Thinking of a way to show all shopping centers on a map.

    Placing floor plans onto banners and formulating typesetting rules.

    tps bazil process 15

    Preparing a video presentation for the client.

    Assembling all the mock-ups into a coherent story and presenting the idea.

    The client approves the concept. Moving on.

    Finalizing the main page style.

    Choosing the format of the map and the list.

    tps process 02

    Sending the main page for typesetting and moving on to the individual project page.

    Deciding to follow the style of the main page by using the floor plans again.

    Working on visualizing the design concept of each shopping center.

    tps process 03

    Preparing floor plans in all the required formats.

    tps process 04

    Collecting logos of all anchor tenants.

    tps process 05

    Creating internal pages.

    tps process 06

    Making sure we keep requirements of adaptive design as we go.

    tps process 07

    Typesetting and fixing bugs.

    tps process 08

    Done.