How to take a graphic design grid illustration and design it for the web with CSS flex
Estimated reading time: 5 minutes
While I was studying UX Design and Project Management, I learned I still had a lot of issues balancing my designs to appear cohesive.
The term “cohesive design” is ultimately just a design that is easy for the eye to follow and follows a predictable pattern (colors, shapes, but mostly alignment). When people say, this design is not working, or it isn’t cohesive, or it doesn’t make sense, they are most likely referring to an alignment issue.
A friend and head of UX at her company said she can always tell a junior design vs a senior based purely on their use of alignment and namely with their usage of the Box Model. Designing with flex along with the principals of graphic design can help us create a balanced and cohesive design like a pro!
Check out how to navigate dev tools to fix common CSS bugs.
The Box Model
For those of you unaware of what the box model is, it is applied to every element in a web page. You have the inner most block which is the content, then the padding, then the border, and margin.
If you’re using any position styles you will see this show up in the bottom of your browser’s inspector tools as well. See this image from Mozilla.
Graphic Design Grid; a summary
Well, at the time of learning about UX Design I also was learning about the Graphic Design principles of Designing in a grid, which is extremely helpful for web designers since our products would be harder on our site visitors cognitively to find their way around if we designed with non-grid principles.
I learned these Graphic Design principles from the book Making and Breaking The Grid, which I highly recommend. Here is a great article that breaks down the definitions of the terms used in this post.
Flowlines
I started building an illustration in my Affinity Designer (similar to Adobe Illustrator) making a basic web page layout.
Then I started adding Flowlines, which are really just a visual representation of aligning elements to make sense for the human eye and for cognitive understanding.
According to the vanseodeisign.com article above,
“Flowlines are horizontal lines that break the space into horizontal bands. They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.“
However, in web design Flowlines can be adapted to be used vertically as well. Flowlines (seen in pink) help you align your elements so that they remain cohesive.
You can see all of my headings on the left are aligned to the end of the logo. The center headings are aligned and the top navigation is aligned to the right heading.
Something missing from my design here would be a Flowline to align the top navigation to the logo so that too is cohesive.
These Flowline illustrations helped me to remember my alignment as I styled my elements with CSS. But, using css flex and the flex alignment properties aren’t enough.
The box model is needed to further align elements. Because content size can vary, it is necessary to use your margins and padding to align elements cohesively within a design.
Check out how I used CSS Grid and these same graphic design principals to create a slick design.
Applying the Alignment concepts from the Illustration to CSS Flex
In my illustration, I created a box model for each element. This was time consuming but necessary for me because I’m a visual learner.
Also, illustrating the box model in an environment like an illustration app allows you to see your changes more quickly since you don’t have to upload your .css and reload your page. The box model’s in this image helped me to learn some very important principles.
- Use basic math to create a standard for your padding and margins. For the purpose of this exercise, I use 15px, 30px, 60px and 7px and 3px for smaller elements. Using percentages and em measurements will make your designs more responsive. This is the ideal route to take.
- Start by creating your container padding and make it consistent on all elements. Header, footer, main, rows, columns/components.
- When you create your inner div elements align them throughout the whole page. I design with css flex so I take my container rows and ensure they’re all using the same align-items and/or justify-content properties respectively.
- On these inner divs, use consistent padding and sometimes margins to further align your content both horizontally and vertically. This is much easier because the container elements are doing most of this work.
Consider the padding!
You make all of your rows held within the main tag 100% width with a padding of 30px by 60px.
Any component placed inside the row will be held within this bubble of padding.
You can give the component much smaller padding like, 15px and the align the text to the left. Now the whole left side of your page within the main area are completely aligned.
main {
box-sizing: border-box;
width:100%;
}
.row {
max-width: 100%;
padding: 30px 60px;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
background:#ffca96;
border:5px solid #ffffff;
}
.row h2 {
min-width:100%;
}
.component {
padding: 15px;
align-items: flex-start;
background:#7fb6c2;
color:#ffffff;
border:5px solid #ffffff;
}
