Do grid systems also apply to application interfaces?

29 Jul 2009 - 3:06am
4 years ago
8 replies
1243 reads
R. Groot
2006

Hi All,

I'm very interested in hearing your opinion/experience on the
followig:

For content sites a grid system can be used to give the page a clean
and consistent layout.

Do grid systems also work/exist for application interfaces?

My own opinion:
I think this does not work since application interfaces are not very
likely to be layed out in columns, but rather in functional spaces.

Hope to hear from you.

Comments

29 Jul 2009 - 4:17am
William Hudson
2009

Hi, Rein.

Grids have a history of useful application long before the web was
invented and yes, they are applicable to application interfaces as well
as web pages.

Their advantage is that they reduce the number of alignment points,
thereby avoiding visual clutter and increasing consistency.

You suggest that application dialogs are not laid out in columns, but in
fact all but the most trivial interfaces have more than one vertical
alignment point (and therefore, multiple columns). Have a look at some
well-designed applications and you will usually see that a grid has been
used, albeit in not such an obvious way as with a web page.

Regards,

William Hudson
Syntagm Ltd
Design for Usability
UK 01235-522859
World +44-1235-522859
US Toll Free 1-866-SYNTAGM
mailto:william.hudson at syntagm.co.uk
http://www.syntagm.co.uk
skype:williamhudsonskype

Syntagm is a limited company registered in England and Wales (1985).
Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
OX14 2DS.

Confused about dates in interaction design? See our new study (free):
http://www.syntagm.co.uk/design/datesstudy.htm

12 UK mobile phone e-commerce sites compared! Buy the report:
http://www.syntagm.co.uk/design/uxbench.shtml

Courses in card sorting and Ajax interaction design. London, Las Vegas
and Berlin:
http://www.syntagm.co.uk/design/csadvances.shtml
http://www.syntagm.co.uk/design/ajaxdesign.shtml

> -----Original Message-----
> From: new-bounces at ixda.org [mailto:new-bounces at ixda.org] On Behalf Of
> Rein Groot
> Sent: 29 July 2009 02:06
> To: discuss at ixda.org
> Subject: [IxDA Discuss] Do grid systems also apply to application
> interfaces?
>
...

29 Jul 2009 - 6:02am
Esteban Barahona
2006

sure, software is actually quite limited in concepts... you have 2 bits (even if humans usually count in baseTen... with base8 and hex as later additions; the lowest common denominator was chosen decades ago... when the first BINARY computers were born)... and any image is basically a matrix of pixels... which is a 2D grid. "3D images" use fancy calculations to implement in a 2D grid of pixels what should be a 3D grid of pixels (which doesn't exist... yet).

See, every image... even 3D images can be made using a grid (even if grids are just for guiding); which are basically sculptures (quite nice to make; i don't need Euro 2000 hardware $1000 software to make... sculptures).

The only problem with sculptures (and the material world) is that you cann't "copy-edit-paste" sculptures in less than 1 minute... That's it. Computers were made because people are by nature LAZY (which isn't that bad; free time is a blessing)... humans took an enhanced calculator, added 1 screen, 1 keyboard and (thankfully) 1 mouse... and called their creation comput'er

The screen is a 2D matrix of pixels. The keyboard is a 2D matrix of keys... and the mouse is a 2D pointer that... moves in an "image" (a 2D grid with beatiful colors represented using 3 quite small Light Bulbs). but that was a later addition; and since the "dual world" only accepts 2 options... there was a black bg and GREEN text... there was no white in that age; oh... and images were a luxory reserved for those that painted in PAPER and drawed using such advanced technologies as carbon-covered by-wood with a wood-based texture as base... which is: pencils paper).

29 Jul 2009 - 5:18am
Anonymous

Hey Rein,

I totally agree with William here. The grid definitely cuts down on
the time taken to interpret a layout, whether it be print, web or
software. If you want to learn more here's a good little link:

Design by Grid
http://www.designbygrid.com

Hope this helps,
Stu Collett
Super User Studio

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44190

29 Jul 2009 - 7:03am
jasonrobb
2009

Apparently, we have entered... The Twilight Zone...

Jason R.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from ixda.org (via iPhone)
http://www.ixda.org/discuss?post=44190

29 Jul 2009 - 9:28am
Jennifer Vignone
2008

I design financial applications for trading and trade analysis. I have always used grids to base my design in. They provide stability to the design and make the design repeatable so that once created and applied as needed across the main screens, panels, widgets, etc., it can be replicated as the application evolves/expands. It cuts down on the back and forth between me and the developers to fine tune the design, because they have a grid and patterns to follow (down to the pixel). It also makes rapid development, where sometimes elements are implemented very quickly (and occasionally without the benefit of the designer -- ;) ) still adhere to some notion of the required design parameters.

Jennifer

===================================

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Rein Groot
Sent: Tuesday, July 28, 2009 9:06 PM
To: discuss at ixda.org
Subject: [IxDA Discuss] Do grid systems also apply to application interfaces?

Hi All,

I'm very interested in hearing your opinion/experience on the
followig:

For content sites a grid system can be used to give the page a clean
and consistent layout.

Do grid systems also work/exist for application interfaces?

My own opinion:
I think this does not work since application interfaces are not very
likely to be layed out in columns, but rather in functional spaces.

Hope to hear from you.
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help
This email is confidential and subject to important disclaimers and
conditions including on offers for the purchase or sale of
securities, accuracy and completeness of information, viruses,
confidentiality, legal privilege, and legal entity disclaimers,
available at http://www.jpmorgan.com/pages/disclosures/email.

29 Jul 2009 - 10:11am
jonkarpoff
2009

We use grid-based layouts for apps. First, a lot of financial apps need to
display tabular data. Second, grids help with consistent layout for forms.
If you have multiple functional areas on a single screen use the 'modulus'
concept from the Swiss Style of design. That is, divide your screen into a
grid of small cells that represent the finest granularity of real estate
assignment you need. Then create your functional 'zones' using a muliplier
of cell height and width (cell spanning). Continue to use the grid for
layout within each zone. This will give you a logical and extensible
layout.

This will work for content, displays (charts, graphs, et al.), controls and
form fields as long as all objects are sized as a multiple of the modulus.
Obviously the size of the modulus must be chosen with care since you can't
have fractional dimensions of the modulus - the modulus represents the
finest resolution of object size. The overall usable screen dimensions must
also be a multiple of the modulusAttached is an example using a 5 pixel
square modulus.

A 1024 x 768 pixel screen can be divided into a grid of 256 x 192 cells
using a modulus of 4 pixels square. In this case the finest resolution for
positioning is 4 pixels.(See attached file: Swiss Style.png)

Jon Karpoff
Senior Partner
Director User Experience
Office: 1-212-237-5516
Cell: 1-914-419-4151
Email: jon.karpoff at ogilvy.com

We few, we happy few
636 11th Ave, New York, NY 10036.

Jennifer R
Vignone
<jennifer.r.vigno To
ne at jpmorgan.com> Rein Groot <rein.groot at gmail.com>,
Sent by: "discuss at ixda.org"
discuss-bounces at l <discuss at ixda.org>
ists.interactiond cc
esigners.com
Subject
Re: [IxDA Discuss] Do grid systems
07/29/09 10:30 AM also apply to application
interfaces?

I design financial applications for trading and trade analysis. I have
always used grids to base my design in. They provide stability to the
design and make the design repeatable so that once created and applied as
needed across the main screens, panels, widgets, etc., it can be replicated
as the application evolves/expands. It cuts down on the back and forth
between me and the developers to fine tune the design, because they have a
grid and patterns to follow (down to the pixel). It also makes rapid
development, where sometimes elements are implemented very quickly (and
occasionally without the benefit of the designer -- ;) ) still adhere to
some notion of the required design parameters.

Jennifer

===================================

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Rein
Groot
Sent: Tuesday, July 28, 2009 9:06 PM
To: discuss at ixda.org
Subject: [IxDA Discuss] Do grid systems also apply to application
interfaces?

Hi All,

I'm very interested in hearing your opinion/experience on the
followig:

For content sites a grid system can be used to give the page a clean
and consistent layout.

Do grid systems also work/exist for application interfaces?

My own opinion:
I think this does not work since application interfaces are not very
likely to be layed out in columns, but rather in functional spaces.

Hope to hear from you.
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help
This email is confidential and subject to important disclaimers and
conditions including on offers for the purchase or sale of
securities, accuracy and completeness of information, viruses,
confidentiality, legal privilege, and legal entity disclaimers,
available at http://www.jpmorgan.com/pages/disclosures/email.
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

Privileged/Confidential Information may be contained in this message. If you are not the addressee indicated in this message
(or responsible for delivery of the message to such person), you may not copy or deliver this message to anyone. In such case,
you should destroy this message and kindly notify the sender by reply email. Please advise immediately if you or your
employer does not consent to email or messages of this kind. Opinions, conclusions and other information in this message
that do not relate to the official business of the sender's company shall be understood as neither given nor endorsed by it.

For more information on WPP's business ethical standards and corporate
responsibility policies, please refer to WPP's website at
http://www.wpp.com/WPP/About/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Swiss Style.png
Type: image/png
Size: 14666 bytes
Desc: not available
URL: <http://lists.interactiondesigners.com/pipermail/discuss-interactiondesigners.com/attachments/20090729/5d73efc3/attachment.png>

29 Jul 2009 - 11:22am
Shawn Collins
2009

I'm trying to think of an application interface example that doesn't
appear to use a grid. Even in the Adobe applications where all of the
palettes are floating, there is logic and consistency to where those
floating palettes originally appear. And that's just one simple
example.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44190

30 Jul 2009 - 7:29am
Itamar Medeiros
2006

I'm quite happy to see a discussion around grid systems on the list:
coming from a Graphic Design background, I remember being quite
excited when Kevin Mullet's and Darrel Sano's book "Designing
Visual Interfaces" first came out
(http://www.amazon.com/gp/product/0133033899?ie=UTF8&tag=d3tidetecu-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0133033899).

Since then, I haven't seen any good Grid Systems references specific
for Interface Design.

Cheers,

{ Itamar Medeiros } Information Designer
designing clear, understandable communication by
carefully structuring, contextualizing, and presenting
data and information

mobile ::: 86 13671503252
website ::: http://designative.info/
twitter ::: designative

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44190

Syndicate content Get the feed