Posts from "August, 2016"

How to … work with a grid system in Pidoco

A little while ago, we introduced our new grid feature. The grid feature was inspired by the wide use of grid systems in design and development and helps you

  • quickly build complex layouts within a prototype,
  • easily create multi-device layouts, and
  • set up a clean structure throughout the entire prototype.

Basically, the grid consists of customizable columns that contain all your site’s content and help you align elements easily. A “snap-to-grid” function makes aligning even easier.

 

1. The grid system in Pidoco

Working with the grid is simple: Just open a page of your project and click the “Show Grid” link above the canvas. The grid icon next to the link opens the dialog that lets you adjust your grid settings: You can set the number of columns, the gutter width between columns (to give the columns some padding), as well as the margins on either side of the grid. Finally, the grid width serves to define the total space available to your design and acts as an overall container that is centered relative to the device screen (much like the container concept in common grid frameworks). A grid preview right underneath the settings helps you choose the right values. Smart defaults will get you started right away.

Activating the grid in the Editing Panel

Activating the grid in the Page view

Since you may already be used to working with grid systems, here are some recommendations for settings corresponding to defaults in widely used grid systems you might want to use.

 

2. Working with the 960 Grid System

One of the most common grids is the 960gs. Optimized for “modern monitors” that “support at least 1024 × 768 pixel resolution”, this grid layout is still often used because its base number of 960 is highly flexible, being divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. The “container”, which holds the actual content of the website, is split into either 12 or 16 columns.

The 12 column grid (source: http://dev3wiki.dev3.develag.com/doku.php?id=960_grid_system under CC Attribution-Share Alike 3.0 Unported)

The 12 column grid (Source: dev3wiki.dev3.develag.com under CC Attribution-Share Alike 3.0 Unported)

 

2.1 Using 12 columns

You can recreate the 12-column layout of the 960 Grid System exactly by using the following grid settings in Pidoco:

  • Columns = 12,
  • Grid width = 960px
  • Margin = 10px
  • Gutter = 20px.

This is what the 12-column grid looks like on a 1024 x 768 pixel screen.

Using the 12 column grid on a website project

Using the 12 column grid on a website project

 

2.2 Using 16 columns

To work with the 16 column variant, you can use the following settings:

  • Columns = 16,
  • Grid width = 960px,
  • Margin = 10px,
  • Gutter = 20px.

 

3. Working with the Bootstrap Grid System

Another commonly used system is the Bootstrap grid system. This grid system takes into consideration that modern devices come in many forms and shapes ranging from very small screens (like on smarphones) to large widescreens (like many current laptops) and allows developers to easily plan for responsive scenarios with a “mobile first” approach. Depending on the target device size, there are five grid tiers with increasing container width (the container width describes what portion of the screen is actually reserved for the content and essentially corresponds to the grid width in Pidoco):

  1. extra small (XS): device width of less than 544px, no container width,
  2. small (S): device width between 544 and 768px, a container width of 576px,
  3. medium (M): device width between 768px and 992px, a container width of 720px,
  4. large (L): device width between 992px and 1200px, a container width of 940px,
  5. extra large (XL): device width of more than 1200px and a container width of 1140px.

The Bootstrap grid system assumes an additional margin of 15px on either side of the content, so the effective container width actually comes out to  be 30px wider than the specification lists, e.g. 1170px for the XL variant. If you work out the exact numbers for, say, a 12 column grid, you will find that this results in half-pixel dimensions (e.g. 97.5px in XL). Modern devices deal with this through their rendering engines, but since Pidoco only uses full pixels for projects, you need to approximate the default grid tiers. Here’s how…

To use the XL grid size (container width including margins of 1170px) in Pidoco projects, we recommend the following settings:

  • Columns = 12,
  • Grid width = 1164px (a little less than 1170px),
  • Margin = 15px,
  • Gutter = 30px.

This example shows a website project on a 1366 x 660 pixel screen. The result are 97px columns – 67px plus 15px margin on either side.

Using the Grid XL on a website project

Using the Bootstrap XL grid tier on a website project

You certainly will have noticed that is does not exactly fit the default column width of 97.5 px as prescribed by the Bootstrap specification. That’s why we approximated the settings with a column width of 97px, resulting in a grid width of 1164px and thus a deviation of 6px compared with the Bootstrap container width of 1170px. (Note: We recommend erring on the side of less space when designing, but if you would rather have 6px more, just set the grid width to 1176 px.)

And this is what it looks like:

Example prototype using the bootstrap XL grid

Voilà: An example using the bootstrap XL grid

 

That’s it! You have successfully applied a customized grid to your Pidoco project!

Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

 

New Release: Smart Duplicate, Interaction Highlights, Improved Grid

To spice up the summer, we have just released some new features and improvements. Here’s what’s new…

 

#1 Smart Duplicate

Tired of copy/pasting multiple repeating elements to fill your screen? With our brand new “smart duplicate” feature, it is much easier to create a series of tabs, an image grid or a row of buttons. Simply duplicate, and Pidoco will do the positioning for you. Of course, you can adjust where necessary.

Quickly duplicate and align elements

Smart duplicate: Pidoco does the positioning for you

 

#2 Interaction Highlighting

Ever wondered which elements are clickable? Wonder no more. With the new “interaction highlighting” you can simply press the Ctrl key and all elements with interactions attached will light up. Keep the Ctrl key pressed to open multiple target screens in new tabs.

Interaction highlighting: Accentuate the interactive elements in the Simulation View

Interaction highlighting: Easily find links and interactions in the simulation view

 

#3 Improved Grid

We updated and improved the grid feature which we introduced earlier this year. Now, aligning elements feels much smoother and is faster than ever before. Give it a try!

Easy alignment: Smoothly place elements with the improved grid

Grid feature: Smoothly and quickly place elements with the improved grid

 

Let us know in the comments what you think!

 

By the way, we run monthly usability tests. If you’d like to join, just send us a quick email to support@pidoco.com and we’ll be happy to provide you with more information. Stay tuned for more!

 

Happy Prototyping!

 

PS: Not a Pidoco user, yet? Why not register for a free 31-day trial today?