March 12, 2013 at 14:04Grid in the design of interfaces for Windows Phone: a strict teacher or a good assistant? (Part 1)
We continue to publish articles on the trail of Design Camp . Today, we are next in turn is the report of Yegor Gilev ( yegorg ), who at the time of the camp worked at Parksis, but in February 2013 went into free swimming and now, together with another co-founder of the studio, Turbomilk Denis Kortunov, is working on his own projects. The article is presented as is and displays the author’s point of view on the design of applications for Windows Phone.
I work as a User Experience designer at Parcsis. In the form in which it exists today, it was formed as a result of the merger of two companies: Parcsis and Turbomilk. Parcsis is a kind of incubator that launches its own Internet projects. Turbomilk is an interface design studio world-famous in narrow circles. I am a co-founder of Turbomilk. About a year and a half ago, we joined together, and the Turbomilk design team became the UX-design department of the combined company.
In the company I am known as an eccentric. It is believed that the designer should work on a large aluminum poppy and own an iPhone, preferably the latest generation. I work on a Windows 8 transformer laptop that I bought on the very first day of Windows 8 sales in Russia. My phone is a white Lumia 710 - still on Windows Phone 7.5. You are not mistaken if you assume that I love Windows. Especially the new Windows interface, which used to be called Metro. I love him dearly both as a user and as an interface designer.
Returning to our company. One of Parksis’s major projects is called Pravo.ru. This project includes a lot of interesting things, but for our conversation today, only one part is important to us - the one that is a legal reference system available both on the web and on mobile devices. Now on Windows Phone:
As you know, when we decided to make Pravo.ru mobile application for Windows Phone 7, the task of creating its interface naturally came to me, which I was very happy about. Firstly, because I was pleased to draw it, and secondly, because it gave me the opportunity to understand the interface design guide for Windows Phone in general, and the rules for working with the grid in particular.
“Draw on the grid!” - tells us the interface design guide from Microsoft. And it’s impossible to argue with that. In the Windows Phone world, the grid is the basis of everything, and the head of everything, without it, everything will fall apart and lose its meaning. Having established this, we turn to the question: what should it be?
In the official guide, we can only find this illustration:
Actually, it is not even part of the guide, but simply illustrates one of the design principles for Windows Phone on the Windows Phone Dev Center website . Since there are no numbers here, and there is no direct indication that such a grid should be used, we cannot accept this as a guide to action. Maybe it's just a picture on the topic of grids?
When there is not enough official information, it is necessary to expand the scope of the search with information that is less official, but nevertheless deserving all confidence.
Here, for example, is a picture from the site of Mike Gus - one of the creators of the unique visual language Windows Phone 7:
Here we see a grid of 6 columns, not 12, as in the previous picture. But, as you understand, it is easy to make 12 out of 6 - and vice versa. So we’re hardly much mistaken if we assume that the exact same grid is depicted here, only with the grooves missing.
Having paid tribute to Mike Gus, we will go to the blog of another insider - Arturo Toledo. As I understand it, Arturo worked for Microsoft as an evangelist designer. His site is simply a storehouse of useful information for the interface designer for Windows Phone. First of all, I want to draw your attention to the 24 Weeks of Windows Phone Metro Design article series . The eleventh article of this series is devoted to the topic that is of particular interest to us, that is, the grid in the design for Windows Phone.
Finally, here we see all the numerical parameters, and we can even download this grid in files of different formats:
If you put pictures next to Gus’s website and Toledo’s blog, it’s easy to make sure that this is essentially the same grid. If we put additional grooves 12 pixels wide through large squares in the Gus grid, just squares of 25 × 25 pixels in size are formed, as in the Toledo grid. Thus, we can be 100% sure that we found a description of the very grid that should be used to design Windows Phone interfaces, although for some reason it is not in the official manuals.
So, the square modules are 25 × 25 pixels in size, and the spaces between them are 12 pixels. Tell me, what can be found in common between these two numbers: 25 and 12? The correct answer is: nothing. The absence of a common denominator for these numbers actually promises us problems, which I will talk about a little later. Now let's try to figure out where such numbers came from, because they look really strange.
I can assume that it all started with the fact that Mike Gus, or one of his colleagues, decided to put in the basis of the grid the usual 12-column, tested for decades. As you know, 12 columns is the most convenient number of columns into which you can divide something. Because 12, in turn, is divided by 6, 3, 4, and 2. If we assume that the margin from the edges should be 2 times greater than the gap between the columns, the numerical parameters of this grid can be described by this formula :
Where w is the width of the screen, x is the width of the column, and y is the width of the gap between the columns.
Maybe at first Mike wanted to set the indentation size to 10 pixels. Personally, I would start with the number 10. But then I would get a fractional column width - 27 and a half pixels. This, of course, is unacceptable. No matter how small the pixels on current devices are, I think you need to treat them with due respect. The sizes of all elements in pixels must be integer. Therefore, the next step, we will try to make the gap between the columns 12 pixels wide, and magically this formula gives us the column width 25. Bingo! The number, although strange and incomprehensible in the neighborhood of 12, is at least an integer.
We figured out how the screen is divided horizontally. And what is the vertical? Vertically, everything is exactly the same. Square modules with the same horizontal and vertical spacing allow you to place square blocks of different sizes on the screen as you like. And not only square ones.
Here's how this grid works on the example of the main screens of Windows Phone 7 and 8:
The layout of the main screen is different, but the grid has not changed. Which well illustrates its flexibility and suitability for building a variety of solutions.
Inspired by the example of the work of the authors of the Metro style, I tried to apply this magic in the design of Pravo.ru application for Windows Phone. The main screen immediately turned out to be very beautiful:
I can’t say that it was difficult, because it almost completely repeats the main screen of the Windows Phone 7 system. It is not surprising that all the elements successfully fit the grid.
But there were difficulties with the news feed screen:
Text content on the grid stubbornly did not want to go. Separate coincidences of the base lines of the text with the grid lines here can be considered random, just as a broken clock shows the correct time twice a day.
The first conclusion that begs itself here sounds rather unflattering for me: the grid is in the way of a bad designer. By analogy with a bad dancer who is in the way, it’s known that. However, before plunging into depression from the realization of my own professional unsuitability, I tried to attach this grid to the official templates from Microsoft.
What do we see? Separate patterns are drawn on the grid:
Others completely ignore the grid:
Others follow the grid only partially:
Obviously, I inadvertently embodied the Russian proverb that if you make a fool pray to God, he can split his forehead.
In search of help, we will try to turn again to the help of our friend Arthur Toledo. There are three videos on the arrangement of elements on the screen:
If in the first two parts Arturo works with tiles, and, of course, he is quite clever at managing to place them on a grid, then in the third part Arturo parses a more complicated case with textual content. In this example, Arturo first sketches this composition:
As you can see, all the elements are subordinate to the grid. But Arturo quite rightly draws our attention to the too small distance between the blocks, and begins to push them apart, while maintaining binding to the grid:
See what Arturo does? All elements are on the grid, the distances between the blocks are increased, but now they are different! Because some blocks are stuck to the upper borders of the grid squares, and others to the lower ones. This, of course, is a disgrace. Therefore, the next step, Arturo completely turns off the grid and makes all the vertical intervals between elements divisible by 12 pixels, that is 12 and 24 pixels:
Now everything is beautiful, but the grid is no longer directly related to this beauty.
What can we conclude? The proposed grid works well for arranging rectangular blocks, but does not help with the placement of text content, and, by and large, is not intended for this. But you won’t be full of little squares. I don’t know how in your application, but in our text there are a lot more than squares, anyway. Of course, we can follow the Arturo path and turn on the grid when working with tiles and other rectangular elements, and also use it to align blocks of text horizontally, and turn off the grid when positioning text vertically. But I admit, I do not really like this approach. It’s not technological, inconvenient, and I’m too lazy to spend precious time living moving elements back and forth in search of harmony, as Arturo shows in his video.
To be continued...
I work as a User Experience designer at Parcsis. In the form in which it exists today, it was formed as a result of the merger of two companies: Parcsis and Turbomilk. Parcsis is a kind of incubator that launches its own Internet projects. Turbomilk is an interface design studio world-famous in narrow circles. I am a co-founder of Turbomilk. About a year and a half ago, we joined together, and the Turbomilk design team became the UX-design department of the combined company.
In the company I am known as an eccentric. It is believed that the designer should work on a large aluminum poppy and own an iPhone, preferably the latest generation. I work on a Windows 8 transformer laptop that I bought on the very first day of Windows 8 sales in Russia. My phone is a white Lumia 710 - still on Windows Phone 7.5. You are not mistaken if you assume that I love Windows. Especially the new Windows interface, which used to be called Metro. I love him dearly both as a user and as an interface designer.
Returning to our company. One of Parksis’s major projects is called Pravo.ru. This project includes a lot of interesting things, but for our conversation today, only one part is important to us - the one that is a legal reference system available both on the web and on mobile devices. Now on Windows Phone:
As you know, when we decided to make Pravo.ru mobile application for Windows Phone 7, the task of creating its interface naturally came to me, which I was very happy about. Firstly, because I was pleased to draw it, and secondly, because it gave me the opportunity to understand the interface design guide for Windows Phone in general, and the rules for working with the grid in particular.
What grid?
“Draw on the grid!” - tells us the interface design guide from Microsoft. And it’s impossible to argue with that. In the Windows Phone world, the grid is the basis of everything, and the head of everything, without it, everything will fall apart and lose its meaning. Having established this, we turn to the question: what should it be?
In the official guide, we can only find this illustration:
Actually, it is not even part of the guide, but simply illustrates one of the design principles for Windows Phone on the Windows Phone Dev Center website . Since there are no numbers here, and there is no direct indication that such a grid should be used, we cannot accept this as a guide to action. Maybe it's just a picture on the topic of grids?
When there is not enough official information, it is necessary to expand the scope of the search with information that is less official, but nevertheless deserving all confidence.
Here, for example, is a picture from the site of Mike Gus - one of the creators of the unique visual language Windows Phone 7:
Here we see a grid of 6 columns, not 12, as in the previous picture. But, as you understand, it is easy to make 12 out of 6 - and vice versa. So we’re hardly much mistaken if we assume that the exact same grid is depicted here, only with the grooves missing.
Having paid tribute to Mike Gus, we will go to the blog of another insider - Arturo Toledo. As I understand it, Arturo worked for Microsoft as an evangelist designer. His site is simply a storehouse of useful information for the interface designer for Windows Phone. First of all, I want to draw your attention to the 24 Weeks of Windows Phone Metro Design article series . The eleventh article of this series is devoted to the topic that is of particular interest to us, that is, the grid in the design for Windows Phone.
Finally, here we see all the numerical parameters, and we can even download this grid in files of different formats:
If you put pictures next to Gus’s website and Toledo’s blog, it’s easy to make sure that this is essentially the same grid. If we put additional grooves 12 pixels wide through large squares in the Gus grid, just squares of 25 × 25 pixels in size are formed, as in the Toledo grid. Thus, we can be 100% sure that we found a description of the very grid that should be used to design Windows Phone interfaces, although for some reason it is not in the official manuals.
Why such a grid?
So, the square modules are 25 × 25 pixels in size, and the spaces between them are 12 pixels. Tell me, what can be found in common between these two numbers: 25 and 12? The correct answer is: nothing. The absence of a common denominator for these numbers actually promises us problems, which I will talk about a little later. Now let's try to figure out where such numbers came from, because they look really strange.
I can assume that it all started with the fact that Mike Gus, or one of his colleagues, decided to put in the basis of the grid the usual 12-column, tested for decades. As you know, 12 columns is the most convenient number of columns into which you can divide something. Because 12, in turn, is divided by 6, 3, 4, and 2. If we assume that the margin from the edges should be 2 times greater than the gap between the columns, the numerical parameters of this grid can be described by this formula :
Where w is the width of the screen, x is the width of the column, and y is the width of the gap between the columns.
Maybe at first Mike wanted to set the indentation size to 10 pixels. Personally, I would start with the number 10. But then I would get a fractional column width - 27 and a half pixels. This, of course, is unacceptable. No matter how small the pixels on current devices are, I think you need to treat them with due respect. The sizes of all elements in pixels must be integer. Therefore, the next step, we will try to make the gap between the columns 12 pixels wide, and magically this formula gives us the column width 25. Bingo! The number, although strange and incomprehensible in the neighborhood of 12, is at least an integer.
We figured out how the screen is divided horizontally. And what is the vertical? Vertically, everything is exactly the same. Square modules with the same horizontal and vertical spacing allow you to place square blocks of different sizes on the screen as you like. And not only square ones.
Here's how this grid works on the example of the main screens of Windows Phone 7 and 8:
The layout of the main screen is different, but the grid has not changed. Which well illustrates its flexibility and suitability for building a variety of solutions.
Attempt to put into practice
Inspired by the example of the work of the authors of the Metro style, I tried to apply this magic in the design of Pravo.ru application for Windows Phone. The main screen immediately turned out to be very beautiful:
I can’t say that it was difficult, because it almost completely repeats the main screen of the Windows Phone 7 system. It is not surprising that all the elements successfully fit the grid.
But there were difficulties with the news feed screen:
Text content on the grid stubbornly did not want to go. Separate coincidences of the base lines of the text with the grid lines here can be considered random, just as a broken clock shows the correct time twice a day.
The first conclusion that begs itself here sounds rather unflattering for me: the grid is in the way of a bad designer. By analogy with a bad dancer who is in the way, it’s known that. However, before plunging into depression from the realization of my own professional unsuitability, I tried to attach this grid to the official templates from Microsoft.
What do we see? Separate patterns are drawn on the grid:
Others completely ignore the grid:
Others follow the grid only partially:
Obviously, I inadvertently embodied the Russian proverb that if you make a fool pray to God, he can split his forehead.
Arturo will help us
In search of help, we will try to turn again to the help of our friend Arthur Toledo. There are three videos on the arrangement of elements on the screen:
If in the first two parts Arturo works with tiles, and, of course, he is quite clever at managing to place them on a grid, then in the third part Arturo parses a more complicated case with textual content. In this example, Arturo first sketches this composition:
As you can see, all the elements are subordinate to the grid. But Arturo quite rightly draws our attention to the too small distance between the blocks, and begins to push them apart, while maintaining binding to the grid:
See what Arturo does? All elements are on the grid, the distances between the blocks are increased, but now they are different! Because some blocks are stuck to the upper borders of the grid squares, and others to the lower ones. This, of course, is a disgrace. Therefore, the next step, Arturo completely turns off the grid and makes all the vertical intervals between elements divisible by 12 pixels, that is 12 and 24 pixels:
Now everything is beautiful, but the grid is no longer directly related to this beauty.
What can we conclude? The proposed grid works well for arranging rectangular blocks, but does not help with the placement of text content, and, by and large, is not intended for this. But you won’t be full of little squares. I don’t know how in your application, but in our text there are a lot more than squares, anyway. Of course, we can follow the Arturo path and turn on the grid when working with tiles and other rectangular elements, and also use it to align blocks of text horizontally, and turn off the grid when positioning text vertically. But I admit, I do not really like this approach. It’s not technological, inconvenient, and I’m too lazy to spend precious time living moving elements back and forth in search of harmony, as Arturo shows in his video.
To be continued...