Teaching basic design principles to freshmen at our local university keeps me limber and sharpens my skills like nothing else. My students were working on an app design project and one day I taught a lecture on four particularly important principles to pay attention to.

ALIGNMENT

PROXIMITY

CONTRAST

REPETITION

The same day, scrolling through social media I saw this post that appears like many others I’ve seen in the past. (**Note: I recreated the post to its likeness, but used alternate names and phone numbers for anonymity’s sake.) It probably once was a Canva template that was edited several times over. While it’s not the worst, and certainly has its strengths, like its strong call to action (CTA), it could be made more readable and scroll-stopping by using a few simple design principles.

So I thought, how can I take this post and follow the principles I just taught and apply them here? Here’s what I did:

Alignment

Element (text and image) placement should be intentional and consistent, not random and haphazard. Every element should have some visual connection with another element on the page.

First, I created a rule of thirds grid with turquoise guides. What I like about grids is that they are a natural decision maker that produce close to no-fail results. Second, I marked out the margins that were already in place with pink lines. Then, I aligned all the text to the left using the pink lines as my guide. While I could have aligned all the text to the center or to the right, I thought that a left alignment would look much cleaner parallel to the photo.

Proximity

Elements relating to each other should be grouped near each other. Items that are close to each other, become a visual unit rather than several separate units, which helps organize information and reduces clutter.

Next, I grouped like text together. For example, I grouped the title/hook and the call to action together, then the contract info, and then the salutation and signature. I eye-balled the spacing and will give you details on that under repetition.

Contrast

Elements, text and images, on the page should avoid being too closely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then they ought to be very different.

Essentially, there are two ways I increased contrast. First, by changing the colors and second, by utilizing typographical hierarchies (making the most important information standout first.)

While the original designer most likely was going for a soft boho look, the readability does suffer some, not to mention it doesn’t fit the company’s logo or the look of the headshot. That’s why I changed all of the text to black to stand out from the background. The motifs I changed to the purple of the headshot’s cardigan to add subtly and tie the elements together.

Then I utilized contrast by creating hierarchies within the type. I altered the call to action to be bigger and bolder. I adjusted the rest of the body copy (contract information and salutation) to be several points smaller to make everything else stand out. I found a font that was more like a personal signature and fit with the look of the rest of the post and applied that to the realtor’s name.

Repetition

Repeat visual elements of the design throughout the piece to develop organization and strengthen unity. Repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc.

Repetition can add dimension and keep your eyes looking focused on the post (unity). There are three ways I used this principle. First, I made the spacing consistent between text groupings (remember we did this under proximity?) Second, there is a line to create definition between the content and the salutation. It’s obnoxiously bold in the original post, so I altered it to be consistent with the triangle motif. And third, I moved the triangle motif to the bottom right corner, to help the viewer’s eyes bounce back on the page.

What do you think? How did I do?

In Conclusion:

Every designer/creator is unique and has their own sensibilities, background, and education. There is not always one right way to do something, and yet there are principles and guidelines that lead to better, more fruitful, and aesthetically pleasing results.

Whether you’re a business owner trying to hack your social media posts or you’re a designer trying to hone your own skills — these principles are for you! I hope you find them helpful as we’re all trying to make our work stand out in the crowded World Wide Web.

Have questions? Please reach out to me via email; I’m happy to help.

***Note: Headshot via Unsplash.

4 Design Principles *Almost* Everyone Should Know