Home > website design > How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect?

How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect?

September 7Hits:0
Advertisement

Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than the CSS grid expects them to be, which leads to certain problems with the whole layout (elements can shift position because of number rounding)—in the end it doesn't look the same in a browser.

To illustrate it better, let's take Bootstrap's values: column width for the biggest container is ~97px. So, how should I lay out the grid in a graphics editor, should I round it to 97 or 98, or perhaps I should forget about these precise values and design not for the exact pixel numbers, but for the amount of columns instead—whatever the width?

I mean, I just can't get over the fact that it won't look the same, paddings would be different from how I drew them (sometimes even different from one another in case of an element taking 100% of a column [or two] width, say, a button with some text on it can have the padding-left of 30, and the padding-right of 32; it's noticeable and isn't right), widths would be different, gutters would be different, and so on. I don't understand how can you create functional and beautiful interface with this inconsistency and lack of precision.

Can you please share your experience? How do you do it? Am I wrong about something? Maybe there's something good I can read on designing for responsive/fluid grid systems? Thank you very much, and hopefully I'm in the right place to ask this question.

Answers

What you mention is precisely why reponsive design is so diffifult. You no longer have a canvas to start with. Starting a design is no longer the same as "opening Photoshop" You have to work in you head first. What do you want the design to look like on different devices, and how should it change when the screen size change just a little (ie. between different types of phones).

You may complain that it's almost impossible to design for all different types of phones at the same time, but the reality is that's how the site will be viewd. In other words, if you stick to some kind of common denominator, and just design for that, your site will still be viewed on different devices. You will have to give up control of at least some parts of the design. This used to be the size of the left and right margin in the old fixed-width days, but things are no longer so simple.

Here's a few tips that come to mind:

  • Build up slowly using low-fidelity prototypes. Keep sketching simple prototypes for different screens, and slowly build up your idea of what the whole design should work like.
  • Work from content: Start with a very solid idea of what kind of content you have and what goals the site should actually accomplish. Are you serving news stories, video's, recipes? If at all possible, work with the actual content that you'll be serving.
  • Think in terms of systems, not pages: Get rid of the idea of a page. A proper responsive design is an intelligent way of translating structured content to whatever device the use happens to be holding. You are designing that system.
  • Keep the design simple and flat: There's a reason flat design goes together with reponsive design. Since it only takes a few minutes to sketch out a flat design in Photoshop, you can do a lot of them for different screen sizes, and see how the system looks as a whole rather than how the individual screens look. If every button is perfectly crafted, with many subtle 3d effects, this would simply take too long

Related Articles

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 1.530 s.