Stockholm Guide

Hej, habr - welcome to you in Swedish! In the crisis year of 2009, a little free time appeared, which we decided to use to “make beautiful” for ourselves. The result was an interesting, in our opinion, example of an approach to creating a city guide that we would like to share - stockholmania.ru . Perhaps our ideas will be useful to someone in other projects.

Why is Stockholm? This is the maniacally beloved city of our designer (who visits it regularly), and I, as a traveler, was interested in “arouse appetite”. Our weblog is an attempt to get away from the usual tourist approach and show Stockholm from a slightly different angle. Both in form and in content.

Visual navigation

A peculiar “feature” of the site is the navigation grid. Guidebooks sin with an abundance of text, and it’s still easier for a person to see once. It is logical that the picture with the train is identified with transport and movement, and the blonde with the local girls. So it turned out to be concise and functional, like the Scandinavian design itself, the grid. And when the cursor moves, everything opens up so appetizingly that I personally could stick it into the resulting dynamic mosaic for minutes. However, filling out the site, it became clear that I want to take a look at the entire section. We got out and made more familiar “consolidated” navigation sections. Cons of visual navigation:

1. You cannot read the article title without moving the cursor.
2. It works poorly on tablets, where in fact there is no onMouseOver event.
3. Not suitable for articles of the same type (for ski resorts it is difficult to select pictures - everything is the same: white snow, blue sky and a skier in a red hat).

But there is an undeniable plus - a large number of pictures quickly form a visual image of the city.

Magazine layout

We are really tired of the monotonous web pages: headline, picture, text-text-text ... well, and a few more pictures at the bottom of the article. All sorts of embellishments in the caps of the site do not count. And we spent a lot of time to fundamentally do the “wrong”. This is important because, after all, it is not the “juicy title” that is important to the visitor, but information. Here we decided to arrange it so that it was not boring to read, and the eye rejoiced. As a result, the magazine’s layout became a feature of the site. The approach is simple: there is a grid of 3 columns (continuity from the photo mosaic). Any semantic block can / should place information within itself according to these very columns. For instance:

• Picture in 2 columns and text on the right;
• Subheading and 2 columns with text;
• Gallery of pictures in full width.

We use about 15 blocks. Some blocks combine well with each other, some are less successful, but the main thing is that it was possible to dilute dry text with offsets, alternating columns, juicy pictures in rotation and all sorts of lists.

By the way, in the process it turned out that a large number of galleries with photo captions slightly change the reading principle: you can quickly run through the article from top to bottom,
and if something “hooks”, scrolling from left to right, you can familiarize yourself with the information in more detail on the principle photo comic book.



If I worked on the Discovery channel and had a low and slightly hoarse voice, I said: "How it works." Briefly: the site is spinning on django, blocks are attached to the articles, which are collected in the final text of the article. Some blocks are “glued together” and processed like a gallery. I will not go into technical details - this is still the topic of a separate article, if interested - I will write.

Instead of conclusions

We spent more than a year to make the site: most of the time was spent on writing texts, editing them and posting. Magazine layout requires a lot of design work - you have to adjust the texts and pictures “to the format”. Visual navigation is unusual, but has limited use.

The site is not yet fully completed and is in beta. But according to the first reviews, it is clear to us that he fulfills his task: after a quick look, many people wake up with a desire to visit Stockholm. In the warm season, it is especially nice there.