Identity Systems Series: Geometry

September 21, 2017 Hannah GreenAlexa Tuskey

The structure and architecture of a web page may not always feel creatively driven, but digital geometry is an essential consideration when designing a website. Not only does the geometry of a page help lead users through content, but it also speaks to the look and feel of an organization’s entire brand.

Art Director Hannah Green and Front-End Designer & Developer Alexa Tuskey discuss the meaning of geometry when considering a digital design process and how it influences creative identity systems.

What does geometry mean within the context of digital design?
Tuskey: Simply put, it’s focusing on the placement of components within a grid and the grid systems that go into that design.

Green: Geometry is a framework that informs the layout and visual system. It tells the website how to behave responsively. The impact of a geometric system within digital design stretches beyond what most would expect. It creates thoughtful impact through the use of whitespace and creates harmony between components and sections. It dictates placement and grid systems while creating a positive user experience.

When discussing geometry in relation to web design, what changes have you seen over the past several years?
Tuskey: One of the biggest changes we’ve seen is that the fold used to be very important in the past. People would try cramming the most important content at the top of the page, within the initial browser window. Now we know that most users have come to disregard the fold in favor of scrolling thanks to more mobile-friendly layouts. This gives us the opportunity to create designs with a stronger hierarchy and lets us strategically place items along the page to invite more scrolling, rather than forcing them to stay above the fold.

Green: In the early years of web design, we didn’t worry about things like infinitely varying screen sizes, so concepts like responsive design didn’t exist. We were left with simple, symmetric layouts that resulted in a level of inflexibility we simply can’t allow for today. In fact, many designers could approach web design as they did print. As technology has advanced, we’ve seen the digital design landscape change a lot. We now have the flexibility to create unique, custom designs that work across all devices.

What factors should be considered in regards to user behavior when designing a geometric system?
Green: As with any digital project, you should consider your audience first. For instance, you should consider the language your users speak. If you’re primarily designing for users that read from left right and top bottom, that should inform the way that you set up a system.

Tuskey: It can be helpful to apply some user testing as well as using heat maps. Testing like this can help inform the browsing behavior of specific audiences. For example, we’ve noticed that users tend to consume information in an F-shaped pattern. 

Grid systems are commonly used solutions for professional services sites. What are some of the best practices used in designing these systems?
Green: A content audit is the best way to start solving for a grid system. Once you evaluate what kind of content should be included and how much things like title length vary, you can start to design a style. In some cases, grids will need to be built to respond dynamically based on the content entered. Sometimes a standard size can be used. Moral of the story, design the system around the content, don’t design content to fit the design.

We often hear designers discuss white space. What is it and how does it impact a design?
Tuskey: White space is the space that surrounds the components on your website. It helps create visual separation and assists in creating a hierarchy for users. It can help guide a user through content when things are spread out strategically, instead of trying to consume all of it at once.

Green: White space is often associated with “clean” design and it definitely has its advantages. From an aesthetic perspective, it opens up the page and creates the basis for a clean design. It avoids feeling cluttered and aids in increasing legibility. By using ample white space, generous margins and padding, and utilizing bold type and link colors, it’s much simpler for the user to read legibly and digest content.

How does geometry impact a digital ecosystem?
Tuskey: When you’re able to create repeatable grid systems throughout the site, it ties in a visual language for your brand. Through that, you’re able to extend that visual brand across different segments, like mini sites or new pages. It essentially builds a foundation that you can extend upon based on your firm needs over time.

Green: The geometry of your site really sets rules in place for the future. Of course, it can be revised, altered or evolved while still adhering to that base system. 

Creating a strong geometric system puts rules in place that allow for not only a high performing initial launch, but also successful future iterations. These rules can always be shifted and revised to help inform things like the new mini site that you want to build or the app you’d like to design. Adhering to the system ensures that the users will recognize and understand the various apps and sites because they’re consistent.

What current trends are you seeing for geometry and layouts?
Tuskey: I’ve noticed viewport-based design really take hold in the design world. Basically, this concept uses full width/height images to fill the screen and adds minimal teaser content to keep users scrolling. Designers are building these visual ecosystems within the scroll window to encourage the user to explore more the site and dive deeper into the digital experience.

Green: Right now we’re seeing a lot of asymmetrical grid systems. With so many screen sizes out there, we’re given the freedom to explore non-traditional layouts that morph to reflect the thousands of screens they may appear on. 

Geometry is an inherent aspect of building a website. Being thoughtful and strategic about how you structure your pages can have a significant impact on not only the look and feel of your site, but also on the branded impression it leaves on users.

Did you like this blog? Read part one of our Identity Systems Series on fonts here.

Subscribe

The One North Ideas Update delivers each month’s latest posts on digital for PSOs—including industry trends, news and our latest research—directly to your inbox. Although it’s our goal to always include thought-provoking and compelling content, you can unsubscribe at any time. 

See our Privacy Policy to learn more about how we protect and manage your submitted data.

Hannah Green Art Director

At the time of publishing, Hannah was an Art Director at One North.

Alexa Tuskey Front-End Designer & Developer

As a Front-End Designer & Developer at One North, Alexa creates innovative and engaging digital designs for clients and One North marketing materials through creative insight and cross-department collaboration. Alexa brings an open-mind, an unbeatable attention to detail and fearless creativity to her role at One North. She enjoys being able to help her clients tell their story by interpreting their vision and bringing it to life within functional and creative designs.

  • Fun fact: I did my senior thesis on the evolution of hip hop music.
  • What did you want to be when you were little: The President of the United States

One North Interactive 
222 North LaSalle St, #1500
Chicago, IL 60601

+1 312.469.1740