Site Basics

In the video gallery above we start with setting up a site, we then look at a very important thing which is the "web safe" area of a site, and from there we go on to designing the crucial site elements - the menu, the header and the footer which will all be displayed across the site on all pages.

I will show you examples of menus, a few types of header and footer designs below. However, these really only make sense when viewed within the overall context of a site since they also work as alignment elements. So, you should definitely take the time to watch the videos on this page, they will explain how menus, headers and footers work within the correct context far better than I can with only a few visual examples here. 

Setup

 

The first thing you obviously need to do is set up a Wix account and then go through all the steps that take you to the creation of a "blank" website. 

The first video in the gallery above takes you through all the steps of what happens once you have created your account and shows you the very basics of how the Wix Editor works and how the navigation of a website is put together by creating a few pages and placing a menu on the header.

The Menu

 

Unfortunately, this is the way the basic horizontal Wix menu looks when we first drag it onto the page. It looks so clumsy that I do not even want to place it on a white background. The obvious problem with it is that the text is much too big: It is their choice of font (Helvetica) more so than the point size (16) that is the problem here since not all fonts look the same at the same point size and Helvetica has an especially large appearance. And then, secondly the items are much too widely spaced. The way this is, it would take up a very big area of the header, practically leaving no room for the logo or anything else.

But then we see another problem when we roll over it and find out that the submenu is all over the place, nothing aligns properly, we cannot even see clearly what we are looking for.

So, the very first thing that I did was to go to the layout button and fix the issue with the submenu, making sure that everything aligned itself under the top menu item and did not appear sprawled all across the header.

Once this basic layout issue is taken care of we now go to the design palette, which is shown with that brush. And here, you will probably want to do quite a bit of doctoring around.

The first thing you want to fix is the size of the texts. And here we get to something rather tricky: You can only change the font or the size or the spacing of a menu item by creating a special heading style under the site styles. Luckily there are enough headings to play around with (6 in total) so you can set aside a few for menus. So, decide on your font and the size (depending on your font, 13 to 15 points will work very well with uppercase, you probably need an extra point if you have lowercase text) inside the styles tab, click apply and then go back to the menu design and select the heading from the text tab. Any other way will not work, you will only drive yourself nuts, so don't even try it. 

Once the text size is taken care of, the rest is fun: You can set strokes between or underneath or above menu items or create highlight boxes. I made a few examples here, that you can roll over and take a look at.

Once you are satisfied with the design it is now time to go back to the layout palette: Check that the vertical spacing and padding values on the submenu look reasonable, and also test whether a left or centered alignment works better. My personal experience is that centered works better with these menus; unfortunately left alignments are very difficult to get to work when it comes to an alignment between the menu and the submenu.

Menu Tips:

  • Careful with color - even on hover items! A menu is text and usage of color is very problematic with any form of textual element since even a tiny amount of it will clash with visual material.

  • Make menu texts uppercase rather than lowercase. These are small words which stand by themselves, and uppercase will give them a much better top alignment of characters.

Designing the Header

 

Below I am showing you a number of alternatives on how you can design your header. The first thing to take note of is that headers, as a rule, should not take up too much space or be too flashy in their design. Although they are at the top they are not the most important part of your site, they are only elements that let you navigate from page to page - and it is the pages themselves that are the most important parts of your site since they actually contain the information. But that said, the header is important in that it usually holds your site identity which is your logo.

The good place to put your logo is usually on the left, although you can also center it or move it further right and align it with the menu. But, whenever you do this the logo will end up on top of the menu which means that the height of the header will increase, which in turn means that your header will be taking away space that is better used for page content. Another tip, if you decide to put the logo on top of the menu is to separate them with a thin line since the logo and the menu are actually two different types of content: The logo is a branding element while the menu is there for navigation which are completely different in terms of the info that they convey, so it is better to separate them in the way that I did here.

So, a question could be asked as to why we do not place the menu on the left and the logo on the right? The answer resides in habit of usage. Over the years it has become the norm across the internet for logos to be either on the left of menus or above them, and so it could become confusing for viewers of a site to find a different configuration than the one they are accustomed to.

There is one very important thing about the header items which I want to point out now: Header elements also function as alignment points for you entire site, across all of the pages. All you need to do is place 4 vertical guides, one on each side - left and right, of the logo and the menu and you get excellent alignment points for 3 different width columns. The best way I can explain this is by asking you to look at this WixTrix site that you are on right now: There is one very wide column which stretches from the left edge of the logo to the right edge of the menu. The second one stretches from the right edge of the logo to the right edge of the menu, and the third goes from the left edge of the menu to the right edge. Keep your eye on things, but especially the text columns and you will see that as you scroll up and down they will always align to these 4 points. And that is one of the most important means through which I have achieved site consistency.

Among the examples below there is also one where only the icon of the logo is on the header and the full logo is placed on the home page. This way of doing it will work especially well for logos there rounded, like the one I am showing here, when scaling down the logo to a size where it will fit the header will make it so small that it becomes invisible, or at least insignificant.

7.png

Designing the Footer

 

When it comes to the footer what we show is contact information, legal disclaimers and things like social media links. As long as you display these in a clean efficient way that is really all that you need to do. Unless you are a company who, in addition to the basic contact and social media information also has things like "terms of service" or FAQs you may find very little to put on your footer, in which case the placement can become a problem since things will start floating around. In such a case one approach can be to put some things inside special areas or set boundaries for them by using strokes, like I am showing you in the examples below.

What will really help the design of your footer however are the social media icons. So, do not to settle for what Wix has to offer you in terms of icon alternatives but to go and find some of your own. There is a really good selection on Freepik that you can pick and choose from. What you will need to do once you download these is to open them in photopea, to crop them and import them into Wix. Here is the video that shows you how to do that. and once you have them do not settle for the default size and spacing but go and look under the layout button to see if making them bigger also helps.