First steps to your own design

Before designing your website, you should think about the following: What is your website about? What is the content? Which target group, which visitors would you like to reach? Remember that a corporate website should bring across trust, make a professional impression and create a feeling of trust in new potential customers and clients and animate to do business. You should therefore rather avoid bright colours, make use of clear structures and use a uniform typeface. If you are creating a fan-site or are reporting on your hobbies then you can use far more colours and allow yourself more liberties. At the end it is of course always a matter of taste. Take into consideration that not everyone has your font on their computer either. If your website is looking great on your computer, it might look totally different on your friends’ computer, simply because he/she might not have that font. So you should always check to see what your page looks like on other computers.

The layout determines where the elements of your page are placed. So where the navigation is, how wide the page is, where design images are integrated and how many design images are being used, if it has a sidebar and/or a so-called footer, an area at the end of your page and how the background can be used. So take some time to think about how one should navigate on your website and if you would like to display additional information to the contents. Also take a look at the special layouts. These do not follow any special scheme. Although you may not have many editing options, a special layout might just be exactly what you are looking for.

The design determines the size of the design images (height), the colours, fonts and lines, if the frame is graphical and which areas this frame encloses and of course the image motifs. If you are choosing a layout then there are various design layouts available to you. You should choose the design layout that meets your image motifs best. If you like using large design images then you will of course have to choose a layout that will permit a large motif. It is not possible to change the predefined size of a design image. You can however make use of smaller images and then place them in available spaces, for example if you like using images with rounded corners. But you cannot adjust the predefined height. If the design has a too small header image, then you can change to a new design at any given time. The contents will remain and you will only have to link your design images and possibly adjust colours, background and fonts. With a purchased version you can store an edited design and upload it again at any given time.

Colours have different effects on the visitors of your website. They can provoke different emotions, confuse or attract. The readability of your texts and the effect of your images are significantly affected by the colours. So take some time to think about which colours, patterns or images you will want to use on the background of your website (that what is visible all round) and attune your choice with the content of your actual website. Artists can safely use more powerful colours and patterns than politicians or doctors. Always include the colour selection with the theme of your website. You can adjust the colours with the first icon on the left.

The title image, also know as the emotion-header or header-image, is without a doubt the eye-catcher of your website. You should therefore invest a lot of love and time to make the correct selection here. Either you can take an image provided by us that fit in perfectly in size, or you upload your own header-image. The visitors will receive a first impression through the header-image and that is why you should consider carefully that the motif should fit to the contents of your website. Should you not have your own images or not find a suitable image in our archive, then you will probably be able to purchase one from one of the many image service providers. The investment will probably be worth while. The header-image can also be found under the first icon all the way on the left-hand side. Make sure that you are uploading a suitable size so that the quality remains optimal.

Fonts have a similar emotional effect on your visitors like images. If you use a Times italics font for a company that manufacturers concrete elements, then you will irritate your visitors. So attune your font i.e. the typeface with that of the contents of your website. This applies for the font family as well as the colour. A good selection would be to use the Headline font 1 in a colour that is suitable to the rest and to keep the Headline font 2 and the flowing text in a grey or black colour. Select a clearly recognisable colour for your links on your pages as well as for the effect when the visitor goes over it with the mouse pointer. You should not choose to big a font for the flowing text and generously measure the line spacing. 10 or 12pt are entirely sufficient. Remember that not every visitor has a large monitor. Plain and simple is more effective and comes across as more professional. So hold yourself back and do not use too many different fonts and colours. The design-fonts can also be found under the first icon on the left. You can define the font style for the continuous text, the Header font 1 and 2 and for left (normal and hover). These settings are saved in the design as with all other settings that are made. If you select a new design then logically you will have to create new colours, images and fonts.

The colour of the navigation can be adjusted in many areas. Please note that if you are using divided navigation, when the main pages are arranged on top and all lower pages on the left or right, then you are currently not able to adjust the look of the navigation on the left or right; so the lower pages. We want to make the complete navigation interchangeable in spring 2011, so that you can change the style of the navigation independent of the design by selecting the suitable navigation from various layouts. Once this expansion is completed you will be able to change the colour of all navigational areas. Up until then it is only possible if the navigation is placed in one area. You can adjust font colours, line colours and background colours up until the third level and for all “conditions” of navigation. In order to not confuse your visitors, you should try to not have more than 6-7 main pages arranged and you should also watch out that a horizontal navigation is not split and displayed in two rows because you have too many pages on the first level or the names are too long for the pages. So think about how you would like to structure your pages first. In the page administration (the icon on the top in the menu bar) all pages are displayed in a tree format. As soon as you have selected a page you can shift it with the blue arrows on the right-hand side of the dialogue. If you have pages in the main level whose navigation point is not highlighted, then these pages can still be viewed in the navigation while logged in so that you can edit the contents. If in doubt you should have your page open in a second browser while logged out to check the status.

You should especially place a sufficient amount of text on the title page of your website so that your visitors now immediately what to expect and so that Google views your page as interesting. You should also know that interesting images and videos on your website make visitors stay longer. Take your time in selecting your images and prepare them for an optimal internet appearance. Ideally the images should not have to be adjusted in size anymore when uploading although it is possible and simple to do. If quality and sharpness is important to you, then edit the images in an image editing program to the correct size before uploading. Provide each image with its own unique test so that search engines know what your image contains. Create short videos for your visitor and upload them on YouTube and link them to your website. Videos are more and more in demand and are a magnet for every website.

You can link a vast variety on tools to your website via the XHTML content. Make especial use of tools that allow your visitors to become active (surveys, votes, newsletter). If you are using a purchased version then you can upload PDF files to provide your visitors with more information. Make use of password protected pages and have the interested party give you their e-mail address before you make useful information such as PDF files (e-Book) or videos available. In that way you will be able to get in touch with interested parties at any time to build up trust. From spring 2011 you will be able to make use of the new blog-function of page4 to regularly write about the latest news and to have the opportunity to communicate this news to your visitors. Contact forms assist your visitors to get in touch with you without having to open an e-mail program first. A well-moderated guest book also offers opportunities to maintain interactivity.

There are several dozen layout templates that offer you a large variety of design possibilities. Based on the symbol you will be able to recognize how the website is partitioned. Yellow areas show where the navigation is. The layout 001 for example only has a horizontal navigation bar on top and makes us of a drop-down menu to display subpages. The layout 005 on the other hand has two navigational areas. The main pages are displayed on top and all subpages on the right hand side next to the content. The area where the contents are shown is displayed in green. Red areas mean that you can equip your design with more than one image. We have however often used the possibility to link the horizontal navigation with an image. Layout 003 of the design templates has a header image, although there is no special image area. The navigation is then on top of the image. Blue areas show you that there is a sidebar. That is an area that you can fill with contents, but that will look the same on every page of your homepage. Good for contents that should always be visible. The above selection only shows a small portion of the layout templates.

For each layout there is a varied amount of design suggestions. As shown above in layout 003, the design templates differentiate on one hand in the various sizes of the header image. On the other hand, some design templates have additional elements such as graphic frames or the possibility of replacing the content with an image. Select a suitable design, especially in view of the size of the header image. Colours and motif can be interchanged at any given time. The number of the layout will appear if you keep the mouse over one of the designs for a few seconds. If you have any questions on one of the designs then please also provide us with the number of the layout template and the number of the design so that we can react more quickly to your request.