Breaking the Grid, the Right Way

Producing a well designed, and aesthetically pleasing web site must begin with planning and preparation. This is not exclusive to gathering content, such as vibrant photos, well-written copy, or choosing appropriate colors and typeface. The very base of your design begins with wire frames and the grid.

A wire-frame is like a blueprint for your site, a skeletal visual representation of how you want your site to look, and how you want to organize and arrange your content.

What is a Grid?

Similar to wire frames, a grid can create a basic structure for your design. This image from webdesign.tutsplus.com is a great visual aid to help understand how the grid works.

Gutters

The grid consists of vertical units, separated by gutters, which together form columns. The units form the grid, and the gutters represent white-space. Columns are simply containers in which to store your content.

A strong understanding and consistent use of the grid will strengthen any web developers technique, and will help simplify the structure of your content. As many of us new to web design can attest, creating a layout can be frustrating. Trying to determine where to place content, how to align the different elements so it flows well and feels unified, can be a challenge.

Breaking the Grid

Traditionally, the grid ensures that columns do not overlap, and elements do not bleed into one another, thus maintaining a clean, legible layout.

Breaking the grid involves challenging the notion of content-focused layout and design. Many designers break the grid to bring focus to a call to action, or to draw the user’s attention to specific content. The grid layout creates logically organized, symmetrical, perfectly aligned content. The intention is to present a clear design which can be easily navigated by new and returning users. There is absolutely nothing wrong with this approach, but aesthetically it can get a bit boring. That’s why designers now are playing with ways to break the grid, in an intelligent and effective way.

Breaking the grid the wrong way will result in a poorly designed site. There is potential to disrupt the flow of content and to make navigation difficult. This article  suggests to choose one way to break the grid then use that approach consistently throughout the site. Your users will appreciate that this new look or function is present on other pages. It not only gives them an opportunity to get used to it, but may create more interest and engagement with your site.

typographyex2

One technique for breaking the grid that I really love is through big, bold typography. Some designers are challenging the rule of separating elements. As seen in the example below, the text on the left begins in its own space, and ends just inside the space parallel to it; the photo. You can see as well the geometric shape of the photo that is almost leaning into the text area, outside its column. I think this is an effective and interesting use of space. It includes the traditional structure of the grid, yet skews it just enough to draw the user in with the text, and take notice of the image. In this example, the layout focuses the user’s attention on the call to action. If you look at the other pages on their site, you’ll see this style is carried through consistently.

typographyex1

 

As powerful as this technique is, not all attempts are equally accomplished. A mistake that is easy to make is trying to break the grid in too many ways at once. Doing so will cause confusion for the user. The site should still be easy to navigate and important content simple to find. This article from Design Shack  offers some excellent guidelines regarding how to apply breaking the grid techniques while still maintaining an intuitive design and a sold structure for your content. Breaking the grid can be a great tool, but keep it simple, know your audience, and be consistent.

 

References

Wasserman, Ed (2016) A Comprehensive Introduction to Grids in Web Design. Retrieved from https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design–cms-26521

Awwwards Team (2017) 30 Grid-Based Websites. Retrieved from http://www.awwwards.com:8080/30-grid-based-websites.html

The Best Designs. (2017) Ghafari Associates. Retrieved from https://www.thebestdesigns.com/designs/ghafari

Cousins, Carrie (2017) How to Break the Grid without Making a Mess. Retrieved from https://designshack.net/articles/layouts/how-to-break-the-grid/

Next Level User Experience

Personalization in UI design is like an extension of responsive design. Responsive Web Design adapts the layout based on the device you are using, whereas personalization adapts to suit the needs of the individual user. The way it looks and how it functions can be tailored so different users see different things. For instance, if you have poor eyesight font-size and kerning can automatically increase to make reading easier.

 

How Does it Work?

You have already experienced a level of personalization through user-specific advertising such as on Facebook, and suggested products based on your search history as seen on Amazon. Personalization in UI design would derive its capabilities from the same pool of information. This metadata is already available and being used behind the scenes so to speak, to bring personalization to its users.

multipleDevices

“The main goal of personalization is to deliver content and functionality that matches specific user needs or interests, with no effect from the targeted users” (Schade, 2016)

 

Personalization vs. Customization

Personalization is done by the system itself by gathering information about each user and applying changes as necessary. Customization would involve more work on the part of the user. They would be given the opportunity to customize features to suit their needs. Both options have drawbacks and benefits.

Personalization offers an individualized experience that requires no effort from the user. Concerns however will inevitably rise surrounding privacy and ethical use of sensitive information. To give a user the most accurate experience will require access to as much personal information as possible, which for many users will cause discomfort and distrust.

Another issue is having to rely on the applications ability to guess what each user needs. If the personalization is way off, you won’t retain users, but if it is too good you may also cause concerns about how much personal information you have. Finding the right balance will likely prove difficult.

Customization will avoid these issues regarding privacy because it puts the user in control. They can decide what information to share or to keep private. It also has the potential to enhance user experience even further than Personalization because users can set their own preferences and tailor what they see to be exactly what they want and need.

The issue however is that many users may not even know what they need. This is especially true for inexperienced users, the very young, or the elderly. Furthermore, giving users such control sounds great in theory, but in actual application may not prove successful. One of the biggest rules in UX design is to ensure users do as little as possible to achieve their goals. Customization requires quite a lot of the user, and I doubt it would have great success unless the interface was very well designed.

 

Age-Responsive Design

Age-responsive design is another term being thrown around for 2017. It incorporates personalization but focuses on age-groups to determine which adaptation of a website to present to each user. This variation of personalization could be an effective stepping-stone into more user-specific personalization. This excerpt from medium.com explains how a site could change:

  • Navigation menus will expand and contract depending on perceived competency of users; those with difficulty will be presented with stripped-down interfaces to make it easier for them to interact the limited feature sets they are already familiar with.
  • Font-sizes and spacing will naturally increase to accommodate the eyesight of the elderly
  • Color-schemes will change; the young will experience more saturated hues, the old more muted palettes.

 

youngppl.jpg

 

Concerns surrounding information security and gathering and use of personal information are extensive and justified. Personalization is a great idea, but the real-world application of it may be problematic. Although it is already creeping into our everyday interactions online, it remains to be seen to what extent personalized UI will be used. The potential for enhanced user experience is there, it is just a matter of execution.

 

References

Buckley, Chase (2016) The Future is Near: 13 Design Predictions for 2017. Retrieved from

https://medium.com/digital-age/the-future-is-near-13-design-predictions-for-2017-654761f12c45#.324yfbpuv

Zolciak, Antoni (2016) Will Age-Responsive Web Design Take the World by Storm in 2017? Retrieved from

http://insanelab.com/blog/web-design/age-responsive-web-design/

Schade, Amy (2016) Customization vs. Personalization in the User Experience. Retrieved from

https://www.nngroup.com/articles/customization-personalization/

Levenson, Hannah (2017) Mobile UX Trends For 2017. Retrieved from

http://usabilitygeek.com/mobile-ux-trends-2017/