• 371k
  • 69
Web Design \ Jul 10th 2017

The 7 Principles of Design and How to Apply Them to Your Photography Portfolio

The times, they are a-changin’”, sang a certain Nobel Prize in Literature. Techs and products are evolving at a very high pace, and our world has very little in common with the one our grandparents used to live in. But despite all these changes, the core principles of our lives have remained the same. Take love, for example. Only 10 years ago, you would find your mate at your workplace, in your favorite bookstore, or at a party organized by mutual friends. Today, more and more people rely on Tinder to engage – and eventually, get engaged. Yet, one thing didn’t change: the little butterflies in your stomach when you see your loved one walking down the street.

The exact same goes for art and design. Materials, trends and influencers may have dramatically changed, yet professional designers still rely on the same rules as Leonardo da Vinci did, in order to express their inner world. You too will see this: when the time comes to create or revamp your sparkling photography portfolio, you’ll apply these 7 principles of design to make sure that your composition is solid and aesthetically enticing. From balance to unity, we will break down the “what” and the “why” of each of these eternal rules, and also a bit of the “how” – with practical tips for you to apply to your website.

Of course, you don’t have to follow each one of them equally. Actually, you are invited to intertwine and tweak them, based on your artistic sensibility. But you should learn them. Only then will you be able to break them, and create a composition that is truly yours.

1. Balance

Just like you wouldn’t eat your three meals of the day in the morning, you don’t want to pack all your elements in only one area of your composition. That’s what balance is: making sure that the visual weight is equally distributed in your design. It’s crucial, because it gives a sense of stability and comfort that is enjoyable to the eye (and brain) of your viewers. To be precise, there are three types of balance:

  • Symmetrical balance: The elements of one side of the composition are strictly similar to those of the other side. This option naturally evokes classicism and constancy – like the pillars of a Greek temple.
  • Asymmetrical balance: The elements on both sides are different, but still give a feeling of having the same “weight”. This is achieved by playing with the colors, textures, shapes and positions of the items. For example, a small object can balance a bigger one if its color is darker, or its texture is more contrasted. This type of balance evokes modernism and vitality.
  • Radial balance: The elements are equally positioned all around the central point of the design, like if they were radiating out from it. This option gives a strong sense of life and dynamism.

How to apply it to your photography portfolio:

You need to pay attention to balance at every stage of the creation of your online portfolio. Especially in the case when you’re about to insert a splitting element in one of your pages. Each time, you need to make sure that you have the same number of items on both sides of the barrier (symmetrical balance), or that their features give them the same visual weight (asymmetrical balance). Be especially cautious every time you insert strips on a long-scrolling page, a footer or a photo gallery. For this last one, always upload a number of images that won’t unbalance your layout. You certainly don’t want a grid with lines of four photos, and a last one with only two. To be on the safe side, simply use the Wix Pro Gallery: its powerful algorithms will automatically arrange your images so that your layout will always look clean and evened out.

2. Contrast

Sneakers with a tuxedo? A splash of red on a black canvas? Some combinations naturally “pop” more than others. You just can’t help but look at them. In art and design lingo, this “pop” is called a contrast, that is to say, the effect created by the juxtaposition of two – or more – elements that are extremely different. Bright versus dark colors, negative versus positive spaces, round versus sharp angles… Contrast possibilities are endless!

How to apply it to your photography portfolio:

Warning: Too much contrast can easily destroy the unity of your design, and make it painful to look at. That being said, when used smartly, this design rule is a powerful weapon, since it naturally commands the viewer’s attention. It should thus be used on the elements of greater importance of your composition. In the case of a photography website, you’ll want all the eyes on your name (for people to know who you are), your photos (for them to see what you do), and your contact form (for them to hire you). One of the simplest, yet most powerful ways to achieve this, is to switch your background color. As a professional photographer, you already know that black and white offer the highest contrast. Go for one of them in the background, and let the other colors play their vivid symphony in your pictures.

Need some inspiration? Check out this sublime Wix photography template, where the important text is written with white “ink” on a black “paper”. Impossible to miss!

Screenshot of a Wix website template

3. Emphasis (or Dominance)

What’s the common denominator between The Third of May, 1808 in Madrid, and the mythical scene of the baby carriage falling down the steps in Battleship Potemkin? In one word: emphasis. It occurs when an artist creates an area that is visually dominant in the composition – the poor labourer in white in Goya’s painting, and the carriage in Eisenstein’s movie. It’s often achieved by means of contrast, but not exclusively. Every design should incorporate a primary element like this, known as a “focal point”, that will serve as a door through which the viewer can enter the composition. On the flip side of that, a “lack of dominance among a group of equally-weighted elements forces competition among them. Readers must then discover their own entry point, which is a chore”, wrote Alex W. White in his seminal guide on The Elements of Graphic Design.

How to apply it to your photography portfolio:

We know every element of your photography website is like the apple of your eye. But let’s face it: some are more valuable than others. So what is the first piece of information you want your viewer to access? Before creating your website, you need to assign a leading call to action (or CTA). For a wedding photographer, it will most probably click on your bookings button to get more reservations. For a travel photographer, you’ll probably want people to subscribe to your blog and follow your thrilling adventures. Whatever your CTA is, always make sure it’s the most dominant item in your design, by playing with:

  • The font: In this scenario, the bigger the better.
  • The colors: Brighter shades will jump from the page, while muted ones will deter the eye.
  • The white space: Adding void areas around your CTA will not only let your design breathe, it will also make your message stand out.

4. Movement

Life is like a riding a bicycle. To keep your balance, you must keep moving”, once said Einstein. The exact same goes for your composition. For your viewers to enjoy it to the fullest, they have to “move” within your design. This is why a good creation always incorporates a path, which seamlessly leads the eye from one element to another, while communicating the proper information. Think of your creation as a story, with a beginning, a middle and an end – except that this story, you won’t tell it with only words, but with all the visual elements at your disposal.

How to apply it to your photography portfolio:

Wix offers (for free) many sophisticated features aimed to introduce movement into your website, like Parallax Scrolling – an absolute web design trend of 2017. The principle: your page is cut in different strips, which are moving at different paces. True fact: the speed distortion creates the illusion of 3D, as you can see on this beautiful photography template. However, movement doesn’t always imply changing items. It can be achieved through static elements too. On the same template, pay attention to the golden lines between each sections: thanks to their direction (vertical), they naturally invite the viewer to scroll down and know more. As a general rule, lines, arrows and a series of dots are very efficient when it comes to “paving the way” for your viewers’ eye. Another smart decision is to use numbers: just like chapters in a book, they are very natural way to create a dynamic in your visual story.

Screenshot of a Wix website template

5. Repetition (or Pattern)

Repetition = boring? Think again. A repeated element can create a pattern that is highly satisfactory. For example, thanks to their neat and ordered succession of points, the Indian mandalas can make you achieve Nirvana in seconds. On top of this, repetition helps to create consistency, which is crucial when it comes to inforce the unity of your composition – or your identity as a brand.

How to apply it to your photography portfolio:

You can create an appealing rhythm on your site by repeating certain design elements. For example, try to alternate on different sections of your page the same two fonts and the same three colours. This will help your visitors memorize your site better, and thus raise the chances that they think of you next time they’re looking for a professional photographer. If you’re a natural born designer, you can also take advantage of the thousands of free icons and other forms that you’ll find in the Wix Editor to create your very own patterns. For inspiration, take a look at the Artlandia Glossary of Pattern Design, the online encyclopedia of all the patterns one could ever imagine. You already knew the Prince of Wales check, but there are thousands more.

Important: No matter which pattern you choose, excessive repetition leads to monotony. Make sure you add some visual breaks and white spaces around your repeated elements, for your viewers’ eyes to rest a little.

6. Hierarchy

Most pieces of art carry a few signature features. But not all of them are equally crucial. Actually, a good composition should have three levels of importance: the most important, the least important, and everything in the middle made equivalently important. In design, hierarchy simply means that your data is visually arranged, so that the viewers access the most valuable information first.

How to apply it to your photography portfolio:

Start by taking a good old fashioned pen and a sheet of paper, and draw an outline of your page. What is the most important piece of information? The least important? And what is the rest that you can just put in the middle? Once you’ve organized your content, you’ll have to arrange it visually within your frame, giving the best spots to the most important data. The center of a composition is always a strategic point, since it naturally draws the eye. But scientific studies using eye tracking technologies also found that people browse a website in a very structured way. Our eyes tend to start by the top left, and then move right and down, following an “F” or a “Z” pattern. Everything in the middle of the page is usually not read, but scanned very quickly. In concrete terms, it means that you should always put your most crucial information at the top left of your page, and the least important in the center. This way, you’ll optimize the impact of your composition.

F shape content hierarchy in web design

 

7. Unity (and Harmony)

Unity is the most important aspect of design, so important that its achievement excuses any design transgression”. If the grand master himself Alex W. White wrote it, you can believe it. Unity in design exists when all elements are in agreement. It creates a sense of completeness, and completion. To achieve this precious state of harmony, the designer needs to make sure that every element really belongs to the composition, with a specific place and role. Nothing should be useless or placed randomly.

How to apply it to your photography portfolio:

Like it or not, as a professional photographer, you are a small business owner. And managing a small business requires a strong sense of brand identity. The key here is unity. You must seek a visual continuity across all the materials that will bear your name and signature, both offline and online: your website, your social accounts, your business cards, etc. It’s achieved by gathering a bunch of specific design elements that you’ll use and decline all over again, from your photography logo to your colors and typefaces. On your photo website, you’ll want to reinforce unity while incorporating some variety, in order to avoid dullness. How do you achieve that? Build a unique frame structure for every page, with the same fonts, the same style of headlines, the same header and footer. Once you have that structure in place, you’ll be free to personalize each page by playing with the size of the text, the color of the buttons or the placement of the images.

Ready to put these theories into practice? Create now your own photography portfolio!

Jonathan Sitbon
By Jonathan Sitbon
Editor-in-Chief of the Wix Blogs

Join Us!

Join the Wix Photography Blog and never miss an update!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Join Us! \ 

Get inspired and keep up with
the latest photography news, trends and tips.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email