Slammer: A Handy Tool for Grid Designers

There comes a time in the life of a designer where they seek methods to make their already beautiful design magnificent. The grid system is one of these such alternate methods, with many application developers, both online and offline, creating their own for a specific purpose. Two popular examples in the web field are the 960 grid system and the blueprint framework. Slammer takes this to a whole new level, adding in powerful tools to manipulate your grid system framework across all platforms.

Slammer, developed by Ringce, is an advanced layout tool that allows web and interface designers alike to create and tweak their layouts to align with a grid system, golden sections, harmonious sections and the fibonacci series.

Interface

Slammer, when first opened, presents you with a dual-pane interface, not too dissimilar to that of Pages or Word. One pane is your ‘toolbox’, it has all the controls you need to change the layout, look and feel of the grid. Another familiar feature about this application is the blending modes that it shares with the Adobe family.

The Interface

The Interface

From the ‘toolbox’ pane, users can modify a range of settings that change the grid design. Layers and overlays can be added, colors can be changed, margins may be modified and the frame size can changed at either the top or by dragging the corners of the grid box.

Slammer Menu

Slammer Menu

In 1.0, the newest version, Slammer presents you with the ability to use pre-made themes, or even make your own to suit the design that you are tweaking. They are quite flexible in their design and can suit any project.

Selecting a Theme

Selecting a Theme

Rulers and Measurements

The design pane features a pixel-perfect grid that allows for accuracy. Another great aspect of this application is that it is adaptable to your own needs. Aside from the ability to customize your themes, you may also change the unit measurements (pixel, inch, centimeter, millimeter and pica). When your frame size measurements are changed, the rulers on the side of the grid automatically update. In addition to this, more (or less) line marks appear on the side.

Interface Measurements

Interface Measurements

In the ‘rulers’ section of preferences for this application, you are given complete control of your axes. Preset options of ‘min’, ‘center’ and ‘max’ are available and, if you wish, you may also put in your custom values for those times where the grid needs absolute precision.

If you want to quickly change your rulers on the axis of your grid, hold down Command and drag the desired ruler (either on the X or Y axis).

Adjusting the Rulers

Adjusting the Rulers

Magnifier and Color Picker

A useful feature of this application is the ability to zoom in on your work and pinpoint colors at an exact spot. When magnify mode is enabled (Window -> Magnifier or Option + Command + M) a separate window appears in the uniformed OS smokey grey style.

Once your cursor is inside the grid panel, scroll up or down to increase the size and magnification of the magnifier window.

Once this mode is activated the cross-hair is also enabled to further guide you. The window gives you a sample of the color that you are currently hovering over and the exact hexadecimal code. Below this section is the point on the grid at which the sample has been taken (NB. Pressing Command + C copies the hexadecimal code.)

Picking a Color

Picking a Color

Layers and Overlays

As with the Adobe family of applications, Slammer also features a layers palette. Layers can be rearranged just like you are familiar with. Layers you want on top, go on top of the layers list, and vice versa. This feature is great for web designers and coders as they can easily create a grid layout of their design or even make new layers for each div of their website. You can easily change the size of layers by adjusting each sides respective margin.

Handling Layers

Handling Layers

Overlays are the helpful addition to the layers section that allow you to add distributions to your layers as well as change the angle and opacity. The layers window also has the option of customisable blending modes.

Clickthrough and Measurement Modes

Clickthrough and measurement modes have been developed to further integrate Slammer into your workflow. Both can be enabled through the ‘Frame’ menu title or using the shortcuts Shift + Command + K (for clickthrough) and Shift + Command + D (for measurement).

Clickthrough and Measurement

Clickthrough and Measurement

Clickthrough mode aids in design of interactive elements. It sits on top of the element you are designing and becomes an overlay so you can interact with the design, while not moving around the grid or accidentally changing settings. An example of when this can be used is when verifying the consistency of grid design on a website or flash presentation. The frame around the grid automatically disappears when in this mode.

Measurement mode does exactly what it’s called! When enabled you can measure the elements in your grid. You click and drag to measure distances in a triangulated form or if you hold down shift you can get just a straight line. By default the grid will disappear while in this mode, but you can easily adjust that in the ‘Frame’ menu.

Crazy Measuring!

Crazy Measuring!

Other Stuff

Distributions – Slammer offers four different distributions that are aesthetically pleasing and can greatly enhance your design. They are well-known and work great with grid designs. They are Uniform, Fibonacci, Golden and Harmonious (‘rule of thirds’ is most popular).

The Golden Grid

The Golden Grid

Templates – You may save templates that you have created for your own purposes, or to share with the Slammer community. This feature is great as it allows those who have really mastered the program to share their expertise.

Export – After you have completed your grid design, you may export out into an image format or even that of JSON. You have the choice to export with or without the Slammer grid.

Conclusion

Slammer is a great program for grid designers and I can see the usefulness it has for others also. After reviewing this application I am sure that I will be using it again and again for my web design needs. The intuitiveness of the application is great and has a massive potential for improvement. In my past week of trailing I have found a few minor bugs and niggles, but nothing worth mentioning as a major downside.

Overall, I have found this application to be well worth the discounted price of $20 as I can see it being an essential application in the toolbox of designers and developers alike. Go grab a trial and see how it goes for you – there is a slight learning curve to get used to the concept, so if you don’t get it in the first couple of minutes, be prepared to give it a slightly longer try before making a decision.


theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow