Design Systems
We are now going to look at entire systems in which not only the same visual elements such as fonts, font sizes, visual information and shapes are used consistently, but where also the entire page (or in the case of a multiple page design, the entire site) is constructed with a well planned system that repeats the same visual structure.
A sensible way of doing this is by using the Wix strips themselves as structural design tools that can be subdivided to create grid based systems, or be used to create horizontal or vertical visual structures in which the core design element repeats itself - either all across the site or inside the page boundaries. Below you will find 2 such grid based designs, and one each for horizontal and vertical
Grid Systems
The two different grids below hold identical texts and visual material. However, their layouts are quite different: The first is symmetrical, it has been constructed out of strips that have been halved into two identical width columns. The second grid is asymetrical. Here too, the strips were divided into two columns, but their ratio is 4/6.
Something to be aware of when doing a strip column grid on Wix is that the divided strip columns have very limited areas into which text can be placed. Therefore, this approach will only work on home pages with just headlines and subheads, from where one would link to follow pages with more detailed information; or a micro-site, the purpose of which is to just give a pleasant, swift overview of a project or a company and to provide contact information.
In the first grid, the strips were divided into two equal columns. These columns were then occasionally subdivided into two further equal parts. These subdivisions were made to stop things from becoming too monotonous which is a always a danger with symmetrical designs.
In the second grid the site width was divided into two unequal parts, 40% on the left, and 60% on the right. Unlike the symmetrical version, I did not subdivide these columns since this being an asymmetrical design, a danger of becoming monotonous is not a concern.
Horizontal System
You can create a very effective visual system by simply placing full width strips underneath each other and filling them with your content. This is also a good way of showing content that has more than just headline level text, although it may not work for sites that have a lot of paragraph level content.
The height of the horizontal sections is determined by the amount of content - strips into which you have placed more text will be higher, image or video strips can be very high, so that you get enough space to break monotony.
This is a style that I like enough to have designed my own website around it. Check it out here >>>
The site was constructed entirely out of horizontal full width sections into which all the content was placed. The height of the sections was determined by the content, although when it came to the visual material I kept the strip heights consistent at 500 pixels, except for the video header where the proportions of the videos themselves determined the height at 650 pixels.
Vertical System
The fourth system is one that would be good for pages that have paragraph text level content, which none of the other three above are really meant to accommodate - they are designed more to become either home pages or micro sites in which only introductory level information is given.
So, when you have content that goes beyond that, it is a good idea to stick to the classical, vertical, scroll down approach of web design, in which the center of the site is predominantly used, although there can also of course be occasional full width elements that will be good to overcome monotony.
Here the page is constructed on a vertical axis that predominantly uses the central page area, although there are a few scattered horizontal items in order to avoid monotony. I added dummy text paragraphs in order to give a visual representation that such a design is well suited to sites that have more detailed informational content that is also text based, not only on a heading, subheading level but also has body texts.