Website   Booklet  

1.0   2.0  

The making of The Higher School of Economics website templates 2.0

Overview   Process   Award  

It’s not the first time we work on the templates for The Higher School of Economics website. The templates we developed in 2007 have never seen the light of day: the University dumped them into trash and criticized the work of the studio.

hse site2 process 01

Six years later we are making the second attempt to create templates for the main sections of the website. We meet a number of University representatives at a round table and discuss the problems that appeared in these years. What’s the difficulty here, anyway?

1. The website of the HSE is a chaotic system of smaller websites residing on individual subdomains, each with its own navigation and structure, presentation and design. There are no routes from one website to another, there is no way to predict where a click will take you.

2. The websites are populated by hundreds of people without any control. In the University they call this a distributed content management system. It means that getting rid of tons of accumulated content is impossible and any suggestions to reorganize or throw away some of it will be met with hostility by website administrators.

3. The websites also function as an intranet. Department websites, for example, were created primarily for their staff and students. The information for prospective students is provided elsewhere.

Formulating the basic tasks for the future templates.

hse site2 process 02

Looking at statistics, navigating the existing website and finding more interesting examples and cases.

hse site2 process 03

To match the reality, we’ll have to draw the website “diagonally.”

hse site2 process 04

Designer: Here’s an idea! Modern objects rendered in plaster: an iPad, a book, a coffee cup—modern classics. We can create a set of such objects and combine them in different ways. Plaster looks really nice with bright colors.

hse site2 process 05

Developing it further.

Art director: I like it.

hse site2 process 06

The presentation of the concept starts a heated debate in the University community. At the same time, all possible design problems are discussed collectively: what to do with sixth-level navigation, whether to use gray color or not, how to show not five but twenty events on the main page, whether to display materials chronologically or have editorial staff pick them, where to put private messages, etc. In order to write down strategic tasks and reach a new level of abstraction in the discussion with the maximum possible number of participants, we assemble a detailed presentation.

hse site2 process 07

While the faculty adapts to the radical changes, we refresh the layouts once more: whitewashing them and considering responsive design.

hse site2 process 08

The idea with modern plaster classics takes root. Drawing first plaster illustrations for the new University calendar for 2014.

hse site2 process 09

Moving on. Experimenting with navigation. Trying to use drop-down breadcrumbs with a large click area.

hse site2 process 10

Art director: I like it. And if we use an elastic pull-down effect we can turn this sexy bar into a porn star.

Client: So we gave it a look, all of us. We liked the appearance but couldn’t understand how to use this thing (even though we knew what to look for). I mean, Mac lovers will surely enjoy it, but us mere mortals can’t really wade through it. You have to employ traditional breadcrumbs or at least hint at them.

Skipping several evolution stages is revolution. Reverting to classic solutions: breadcrumbs and static navigation blocks.

hse site2 process 11

Each template has to endure an impressive number of borderline states. Flexibility should be at the core of all templates. Choosing the traditional media layout: important, secondary and supplementary sections. Website administrators will place accents based on their own needs.

hse site2 process 12

Thinking about departments and subdivisions. They all need to be able to self-identify. The most simple and easily controlled solution is color; specially formatted photographs can be used for additional identification.

hse site2 process 13

Working on news and events.

hse site2 process 14

Implementing metaphors and rendering objects in plaster.

hse site2 process 15

Now the faculty and support staff directory.

hse site2 process 16

Getting acquainted with educational programs, studying the course schedule and working on a notice board.

hse site2 process 17

Creating graph style for the static “Facts and Numbers” section.

hse site2 process 18

News ribbons get new specialized formats for news items.

hse site2 process 19

Finalizing templates: from the promo page and the employee account page to search and the official documents database.

hse site2 process 20

While the studio’s and the client’s technologists typeset and implement new templates, we go to the HSE to present the work to the rector and the faculty.

hse site2 process 21

Order a design...