Here is an extended version of the Design Tips Lightbox that you can find at the bottom of every page on the footer. Consider all of these tips before you start working on the assembly of your page.

KEEP IT SIMPLE!

"Less is More." This is something that was said by the famous modernist architect Mies van der Rohe, who was not only an architect but also a spectacular furniture designer. 

What did van der Rohe mean by this?

You should use only the things that add to your design, without which the existential purpose of your object, or in the case of graphic design, the purpose of your informational content would be incomplete. Everything that is unneeded will take away, rather than add to your work.

So - always ask yourself, with every action that you take, "is this needed?" 

In most cases your answer will be "no". Did that frame that you just put around your image add to it? Did it strengthen its message? Did that color that you just put behind something increase its impact? Is it really necessary to make that piece of text bigger? Or bolder? Was it necessary to use that animation? That effect? Put a shadow behind that box? Probably not... Always, always ask these questions. In almost all cases your design will be greatly enhanced by what you didn't put on it, rather than by what you did.

kisspng-barcelona-chair-brno-chair-chaise-longue-knoll-2-12-mars-27-archive-at-diaposon-5b
 

KEEP IT SIMPLE!

Creating variable repeaters

Mies van der Rohe, Barcelona Chair, 1929.

CONSISTENCY

Use the same elements: Fonts, colors, similar visual material, similar shapes. It is a mistake to think that you have to always find different things to put together in order to be considered creative. When you are working on a project the idea is to show your creativity through the many ways in which you can combine the same elements differently. And possibly the most important of these elements is alignment, which is the heading that follows this one.

 

ALIGNMENT

Create vertical rules that are based upon your header elements and align things on your pages to these. This is a very sure way of achieving alignment across your entire site and not only one page. 

However, it is not only the vertical alignment that matters, horizontal alignment is also important. 

When it comes to big elements that are placed at the very top of most pages on a site, such as the video strips that I have on this site, you should definitely create horizontal alignment points for the bottoms of those. However, when it comes to things that are further down a page, such a horizontal alignment system cannot be achieved since the material to be aligned horizontally on a page will be very different from another page, depending upon the amount of content. Use the horizontal Wix rulers to align things horizontally on every single page but do not worry if they do not align across pages.

Tip: Align rectangular things from the top, circular things from the middle. In a circular shape the top and the bottom are not strong enough to give you an alignment, which is why we use the middle. 

When it comes to rectangular objects, it is usually the top that counts. So, if you have two columns of text and one is a bit longer than the other, don't worry about it - just make sure that their tops are aligned. Now, this is only a rough rule of thumb, there are plenty of nice ways in which rectangular objects can be aligned into groupings. One example is how I aligned the three underwater videos in one the example lightboxes I made.

 

GROUPS / CLUSTERS AND HIERARCHY

Things that belong together should be close to each other. And things that belong together should have a "boss", which in the case of text is a headline, and also "boss assistants", which for text are subheads. With visuals, again it will hugely help if some things are more prominent than others - in other words are larger, provide more focus.

The first thing you should be careful of is not to place pictures and texts that belong together too far apart. 

The second thing to be careful of is making correct paragraph breaks; in other words not to make paragraph breaks by pressing "enter" twice on key board since this will result in a very big break between the sentences. There is an entire section on this topic here, please look at it carefully.

HIERARCHY

The way we achieve a good hierarchy is by placing the "boss" in the center. You can think about this as a "real life" situation: Would the boss of a company sit in the corner of the room, or the middle? Would his or her employees have their backs turned to them? No, right? The boss is usually at the center of things, and is usually also bigger. In printed editorial design (magazines, brochures, etc) this rule applies to headlines which are usually placed in the center parts of pages, however in web design, because of the scrolling nature of the medium, headlines are mostly placed at the top (although often with a subhead that is above them, and not below). And the rule that the boss is usually bigger applies in web design as much as it does in the print medium. 

When it comes to pictures, the rule that the boss is usually in the middle holds. When we have three pictures, and one is the boss, it will be smart to place that one in the center and group the others around it. And again, in the case of pictures too, the boss picture will benefit from being bigger.

 
 

SPACE

But then you should also leave space between clusters. Empty areas are as important as full ones. In Graphic Design they are called "negative space" and they are considered to be essential for the viewer's eye to distinguish between one group of information and the other. In other words, if we do not have empty areas between content groups we become confused and very quickly abandon reading or viewing. 

There is however a challenge here when it comes to web design: On a website it will be difficult to make horizontal space since the format is a long and narrow one that the viewer scrolls down. Responsive websites are exceptions since in a responsive website the content can also be configured in such a way that it goes across the browser. Such sites can be created with Wix's sister platform EditorX, however when it comes to Wix itself we have to work vertically, which means that the spaces that we place between different content groupings has to be vertical rather than horizontal.

The problem with that however, is that it will lengthen the page and create an unwanted amount of scrolling, which is something that most visitors are not willing to do. The next section will show you a way of resolving the issue of creating spatial separators for different informational content without having to resort to using excessive amounts of vertical negative space.

 

SEPARATORS

When I talked about Space in one of the sections I pointed out that in web design we have certain challenges. We cannot place informational content in a horizontal manner and when we do it vertically we are faced with the fact that a website is something that scrolls vertically where only certain portions of the site are visible at any one given point. So, placing things too fart apart may also become a problem in that it lengthens the scroll time and may cause a loss of interest. But then, we still have the issue of having to separate different types of informational content. 

 

AVOIDING AMBIGUITY

Do not go for half measures when you are putting together visual material. Your actions should be deliberate and strong so that there is no confusion of hierarchy:

  • Align things exactly. But when you want to place something in an unaligned way (it can happen), then make sure it is visibly unaligned, and not just a bit unaligned.

  • Make things either exactly the same size, or noticeably different sizes.

    • This is especially important for texts. A difference of one point between two pieces of texts is ambiguous - we may not consciously notice it but it is still a subliminally confusing ambiguity. If you want to make texts in different sizes then make sure that the difference is clearly recognizable.

    • Same for visuals. Make things either the same size (same height, same width, or exactly the same) or very different sizes. Different enough to be noticeable right away, so that we immediately recognize the boss.

  • Place clusters deliberately apart.

 

CRISP, CLEAR VISUALS

Videos, pictures, vectors - always keep things sharp and clean - and consistently so. 

When you are looking for visual material to put on your site, the first thing you will obviously be thinking of is to find things that actually have something to do with your content. However, this is not enough. What also matters is to find pictures, videos and vectors that look good. And one of the really important things to watch out for are visuals that are clear, sharp and contrasted. While soft, blurry, low contrast pictures may look good hanging on a gallery wall in the physical world or as full screen images or videos online, they will not have the same impact when they are displayed in much smaller sizes on a website where they will mostly be visual aids to informational content.  

Something else to also think about are image crops: Again, because of the small sizes in which they are usually displayed on a website, images with huge background areas are problematic since the actual content is too far removed from the viewer. We usually need visual content in which the subject matter is closer to us. Less backgrounds, more content in other words. And exception to this are obviously situations in which we pick a visual for the very reason that it has lots of neutral background since we want to place text on it.

Bottomline: Don't just search for "boat" or "coffee" or "phone" or "burgers" or "happy girl" - to give just a few examples as to what someone may be looking for on the resource portals. Instead look for visuals that depict the object that you are trying to find - of course - but also that show it in a really good way, which is clear, sharp, contrasted and also has good compositional values.