This informational graphic combines layers of information in an easy-to-read, yet comprehensive design. The design is driven by a large map of the Normandy coast that forms the basis for the content layering, but first we need to explore our form factor and set up a grid.
When starting the design we always take into account a border and margin, as the base form factor. In this case the border is a horizontal space that is 24 inches wide and 18 inches deep. The margin is 16 x 22, which leaves a 1-inch area of space all around the content area.
Next we determine a grid for aligning and designing content. Often that grid is a grid of rectangles that allows for simultaneous vertical and horizontal alignments.
Illustrator Dave McKean is a master at using grids for designing visual content.
Here's the vertical grid we applied, the coastline of the map is tyranny here for alignments, so having a strong vertical grid was beneficial.
Although the coastline dictated general content flow, there were also several horizontal alignments we used to build harmony and lessen interference.
Visual cues, such as the arrows and color combinations, help guide the reader's eye in micro-designs throughout the graphic. Two inset maps, one small, one large, bookend the large title/intro text in the middle column. The same red and blue that are used in the border elements are also used in other visual cues. Aside from the land colors, most other content was subtle overlays of grayscale, such as the areas indicating marshes.
Avoiding color overload enhances comprehension and lessens the stress that complicated layouts such as this can cause for readers unaccustomed to viewing dense content.
Hopefully these few tidbits are helpful to those of you designing your own information art projects. In kicking off this blog, I'm planning to post weekly about items that interest me. Please follow along if you are so minded.
Until next time - BP
Thanks Steve, much appreciated.
Congratulations, Bill! This is a great kickoff for your blog and shop. The D-Day piece is impressive. Your explanation of the grid system is helpful and foundational to everything that must follow, so it’s the perfect inaugural post. I also liked your “micro-designs” phrase. That’s akin to one thing I’ve always tried to stress to my own students as well as anyone I was mentoring: think in terms of entry points. Different people will be interested in different elements of a graphic.When we create multiple entry points—micro-designs—we make our work more accessible and provide more handles for our readers to hold on to for the ride. I think it’s very fitting that this was your graphic of choice for this topic as the Normandy coast provided multiple, literal entry points for our troops that fateful day. I’m grateful to the many that gave their all on that beach for my freedom, as well as the many who stormed ashore and lived to tell their story. And you’ve done an amazing job of honoring them while informing and educating those of us who have come after them. Well done!