A 4-step framework for crafting meaningful designs
Creating a successful design doesn't have to feel like wandering through a maze. There's a proven design process that keeps things smooth and helps you nail it every time. It's like a recipe with four steps to make your work better.
- Content — What information and messages need to be conveyed? This step involves content strategy and planning.
- Structure — How will the content be organized and grouped? We focus on information architecture and navigation design.
- Layout — Where will each piece of content be placed? We explore the page layout and composition.
- Style — Which visual design elements like colors, typography, and images will be used? We refine the look and feel.
Each completed step is already a success and a result. You won't have to jump straight to choosing colors and understanding how to make the text on cards to what the main visualization of the app should be. You move right on to completion.
1. Get to know your content
We have to start somewhere. Something has to come first.
Start by understanding what you're working with and the type of content: the words, the pictures, and all the other bits. This helps you build a solid foundation for your design. It's like figuring out the puzzle pieces before creating the picture.
“Good design [is] not about what medium you’re working in. It’s about thinking hard about what you want to do and what you have to work with before you start.”
— Suzan Kare
Putting content thinking ahead of figuring out design elements and aesthetics helps you create designs with content that is easy to find, read, and understand.
This doesn't necessarily mean we need to put design aside. On the contrary, the content-first strategy recognizes that design and content must work together seamlessly to create compelling designs for a magazine, website, or app. It aims to ensure that your design approach aligns with the content and maximizes the impact of both.
Further reading
↗ Let the content determine the design
↗ Steps to content-first design
2. Sort out the structure
Once the content is defined, the next step is to establish the overall structure of the design, including the arrangement of different sections and elements. Focus on what's important and see how they fit together. This step is like creating a blueprint for your design. You know where everything goes, making things way easier.
A significant aspect of design revolves around the organization and handling of information. However, at its core, structuring design is one crucial element: understanding your user's perspective. Whether you're arranging a single page, a section, or an entire website, the structure should consistently align with your users' mental models.
In addition to the skill of thinking in user flows, information architecture stands out as a fundamental element in creating impactful human-centered interaction design.
Information architecture (IA) focuses on organizing, structuring, and labeling content effectively and sustainably. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture and how items relate to each other within the system.
You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. An important distinction.
So you have to start with the structure not the words. What exactly is an opinion piece. What are the variables? Can we even define them? Images? How many? (to which, the response is always: ‘I don’t know, it depends!’). We can design around fluidity, but it means letting go of control. Again. How do we do that, then? How do we design around the fluidity?
Well, we define structure; of our content, and the templates that content inhabits. We define the rules of the system to display the content in different ways (if we can) to help the reader understand the content better.
— Mark Boulton, Structure First. Content Always.
Suppose you structure your design thoughtfully for a user. In that case, you overlook the user's context and the potential value the user can get from your designed product or service interaction.
There is a symbiotic relationship between content and design. One cannot thrive without the other. Determining how content is organized and presented to users during interactions plays a pivotal role in your design.
Further reading
↗ How to structure your content
↗ What is information architecture?
↗ Information architecture: for the web & beyond
3. Set Up Your Layout
Now, it's time to set the stage. Think about how your design will work — where things should go for the best user experience. It's the way your content is arranged. It doesn't matter if you're working with text, images, or elements in a graphic; without a thoughtful, well-composed layout, your work would fall apart.
A design's layout is about arranging elements to guide the reader's attention and understanding. Like how directors direct your focus in movies or editors organize content in newspapers, a good layout helps highlight what's essential and makes it easier to grasp information.
This involves principles like visual hierarchy, flow, and alignment, which are logical and systematic approaches to design. Visual hierarchy is the principle of arranging elements so users can understand information quickly. By laying out elements logically and strategically, you will influence users' perceptions and guide them to desired actions.
Remember, your design's layout is the foundation for arranging well-chosen elements that must look and work best together — so users can enjoy seamless experiences and forget they're using an interface as a medium.
The principles you just learned can help you elevate any project. All it takes is a little attention to detail to create beautiful, professional-looking layouts and compositions.
Further reading
↗ Organizing the page: Layout of page elements
↗ Usability heuristics for user interface design
↗ Which comes first? Layout or content?
4. Add Some Style
Lastly, add the fun stuff — colors, styles, and all those visual goodies. You're giving your design a personality makeover. This step is where you make things look fantastic and catch the eye.
After defining the content, organizing the structure, and designing the layout, the next step is to add styling.
This step involves the application of visual aesthetics to the design, including aspects such as color, typography, and other design elements to enhance the overall look and feel of the design. It's important to consider visual hierarchy, flow, grouping, alignment, and contrasting fonts and colors to create a cohesive and visually appealing layout.
Paying attention to these details ensures that the final design is visually attractive and effectively communicates the intended message to the audience.
Further reading
This framework is excellent because designers often start by going back and forth to figure out what looks good. Some begin with colors, some with big titles, and it can get messy. But with this four-step magic, you avoid the mess and save time.
For example, if you pick fonts and colors too early, you might have a mismatch between your plan and the actual content. You could have incredible details that just don't fit, or your chosen style might not suit what your project is all about.
Design isn't only about picking fonts or text sizes first. It's about diving into your content and understanding it inside out. So, grab any font you like, something popular like Inter, and start sketching your content in one size on the canvas. Then, think about structure, layout, and style in that order.
Whether you're working on a website, a dashboard, or a mobile app, this framework focuses on defining the content and organizing it into a sensible structure before designing the layout and creating style.
The structure and organization of content are determined before deciding how it will look visually. This helps you ensure the design is content-driven and user-focused.
— Hi there! Thanks for reading.
I’m Bora, an independent designer exploring practical design knowledge, principles, design thinking frameworks, cognitive biases, and how to use design for good.
As designers, by expanding our knowledge, we can increase our impact.
