The Power of Iterative Design

I often find inspiration for my projects in unexpected places. One source I found was the book “The Non-Designer’s Handbook” by Robin Williams (no, not that one). In this article, I’ll walk you through how I applied the principles to create a professional-looking design. I aim to demonstrate that anyone can create professional-looking designs simply by following these principles and using some beginner-friendly tools like Figma or Adobe XD.

The Iterative Approach:

The biggest advantage of designing in a tool like Figma or Adobe XD is the ease of iteration. Instead of making changes directly to your design, thus erasing or overwriting your old work, you can easily create duplicates of your artboard, allowing you to explore multiple design ideas without fear of losing progress.

Here’s how this iterative process works:

Once you’ve created your initial design on one artboard, you can duplicate it with a single command (Ctrl-D in Figma). This duplicates all the elements and settings as well, so you can quickly get back to designing without interrupting your flow.

With a duplicated artboard, you have a safe canvas to experiment with different design variations. And without fear of ruining the work you’ve done, you can go wild — make changes to fonts, colors, shapes, and other elements without fear of affecting your design. 

Having multiple artboards side-by-side allows you to compare different iterations and assess which one works best. This visual comparison makes informed decision-making so much easier because you can see the change right next to what the design looked like before. Then, just as before, you can continue to refine and tweak your design across multiple artboards until you achieve the desired result.

The iterative approach also preserves your design history. You can always scroll just a little back up to a previous artboard if you want to revisit a design concept you tried before. This ensures that no creative effort goes to waste. Iterating through duplication is a fundamental part of the design process. It encourages creativity, allows for experimentation, and ultimately leads to better design outcomes. It also aligns perfectly with the principles of graphic design, such as repetition and contrast, making it so you can clearly see how different choices impacted the overall design.

Once you’re satisfied with a particular iteration, you can choose the best version for final export, whether it’s for a book cover, website, or any other design project.

Designing with Figma

Now that we’ve discussed the importance of the iterative process in design, let’s delve into a practical example of how I applied the principles from “The Non-Designer’s Handbook” to design a book cover.

1. Proximity:

In the initial design, the title and subtitle of the book were placed close together, which made them hard to distinguish. By following the proximity principle, I created a clear separation between the title and subtitle. This change immediately improved the overall structure of the cover, making it more reader-friendly.

2. Contrast:

To make the elements stand out, I experimented with contrast. I gave the subtitle a distinct background, creating a visually striking effect. 

Additionally, I played with different fonts to enhance the cover’s impact further. This exploration in Figma allowed me to quickly visualize the various contrast options and choose the most effective one.

3. Alignment:

I created a satisfying square shape that emphasized parallel lines, pleasing to the eye. This simple alignment technique made a significant difference in the cover’s visual appeal and readability.

4. Repetition:

Repetition is a powerful design technique for creating unity and organization. To apply this principle, I added similar stripes to the top and bottom of the cover. These stripes not only added a sense of cohesion but also drew the reader’s eye to the book’s title and subtitle. I then applied the title’s font to the other text elements on the page. 

In the final step, I replaced the font color of the background text with that of the stripes, establishing a sense of unity. I presented the client with various color choices, and they ultimately selected the navy blue option.

By embracing the iterative design process and these fundamental design principles, you can achieve more polished and effective designs, whether you’re working on eLearning materials, websites, or any other creative project.