DESIGN GUIDE

Discover how we can enhance your online presence with our expertise.

The following Design Guide is applicable to all products and/or services undertaken by R & M Web Developers (Pty) Ltd t/a WebSiteDesigns SA.

A Guide to Design a Website:

Overview

Designing and development of your website is a way to express your business visually and informatively to new and existing customers. This is exciting and best when undertaken in a fun and creative way, notwithstanding the seriousness of using your website as a marketing and commerce platform.

It is important to remember that communication to customers via your website is not an interpersonal experience, but that the tone of the experience the customer has with the website needs to correlate with any personal experience the customer may have with you and your staff as a result of the website. Continuity is often overlooked. Realise that the website is an extension of your business and not a replacement thereof.

After all, even with technology (created by humans) doing the work for us, e-commerce still is a human experience.

As clear as possible, stipulate your reasons for having a website. Designers and developers are able to do almost anything and more with technology today, but obviously still can’t read minds…

These are the obvious reasons for having a website:

To interest customers and gain their confidence in your brand, products and/or services on both a local and international platform;
To gain precious time in your business, allowing customers to inform themselves about your brand, products and/or services in a logical consequential manner, including all related options thereto;
Exclude all the unnecessary explanations and negotiations in transactions by including all legal requirements, and terms & conditions of consequence in transacting with your business.

When you know what, why and who you want your website for, together we can start working on how to achieve it.

Hosting

If you understand all the hosting technical terms, then pick a package that will suit your current and projected needs for at least a year.

If you need help with hosting services, have at least a clear indication of the movement of traffic and content you expect on your website.

Written Content

All the words in the world will not be enough, and too little or poorly written information won’t get the customers attention either.

Write only what is necessary to hold the reader’s attention, and opt for read more or technical specification buttons.

Client Supplied Written Content Requirements

Written content must be supplied in digital format, in a commonly used document software application, such as MS Word, Google Docs, PDF, or as a simple text file.
Acceptable file extensions are: .doc; .docx; .gdoc; .pdf; .txt
Other file extensions may be acceptable and convertible, but features can be lost if the written content formatted text is applicable.
Formatted text is considered as the layout and display of written content (font, size, effect, paragraph styles, spacing, bullets, numbering etc.).

Layout and Navigation

Headings, titles, stories, descriptions, tag lines and sales techniques are all condensed into a website. Think how your product and/or services are sold successfully now, and lay it out as a visual process.

Navigation of your website is determined by it all. So don’t over complicate things with detailed instructions and multiple selections for the user to get around. Designers will assist you with the latest trends and ease of use, but ultimately it is what you choose to communicate and how. Our advice: chronological, intuitive, and reliable.

Not every website starts with an ‘About us’ page, or even has a ‘Home’ page. Successful websites follow the nature of their business. Your designer/developer knows this, but he/she/they don’t know your business. You have to sell to the customer, and determine what it is your need in order to do so, and in what sequence. Our expertise lies in knowing how to design and develop from your vision a website with visual efficiency, ease of navigation, effective communication, secure transacting, and technological compatibility.

Obviously you may look to the industry leaders and follow their trends, or dare to be different and stand out from the crowd.

We are however, like business consultants, exposed to such a wide spectrum of industries, that we can often advise on the workings of your industry, but would never divulge information or intellectual property from our other clients.

Typical pages may include

Home – The landing page, meaning the page that will be displayed first when a user accesses your website. It doesn’t have to be called home, but this is the industry norm as to standardise navigation. This is your first message to the customer – the billboard of the website.
About us – Often this is included on the homepage, but if you have a lot to say or a story to tell, it usually is done on a separate page.
Products – Depending on your type of business, this should be named accordingly for example “Courses”, “Events”or “Services”. To un-clutter the menu if you intend on having several pages, use categories of products/services, or a “Categories” page with sub-headers.
Portfolio or Gallery – Preferably, only one of these should be opted for. Galleries are just a display of images with perhaps short descriptions for the images if they aren’t self explanatory. Portfolios are detailed success stories of projects, customers, products like artwork, and usually have several pictures linked to one success stories, or links to external websites.
Contact us – Stick to using the term “Contact” on this page. It’s a must have for any website. Further down in this document described under Contact Information and Maps
More suggestions are FAQ (Frequently asked Questions), Newsletters, Blogs, Partners, Directories, Pricing, Info, Disclaimer, T&C, or anything you need.

Fonts

Often your company brand and/or logo already contains a set font. We advise that this font be used, and only variations thereof. If your company and/or brand does not have a uniquely created font, then best to find a free font (Google fonts are our recommendation due to their compatibility on different platforms).

You may specify the fonts and font effects, but keep in mind the designer may have to alter these if and when needed to achieve compatibility with the widest range of browsers and devices.

Client Supplied Font Requirements

Font files must be supplied in digital format if it is a custom font, or referenced if it is an open source font.
Acceptable file extensions are: .ttf; .otf
Other file extensions may be acceptable and convertible, but we can not ensure that it will display correctly on all browsers.
More than one font is acceptable, but no more than 4 is practical and will be considered.

Photo and other Graphic Images

Graphic images are considered as the logo, artwork, icons, wallpaper, or anything not a photograph, but in an image file format. There is a lot of useful free images available on the internet, so you can save yourself a lot of money if you have the time to browse through millions of images. We do however offer graphic design services at a cost should you need anything more professional, unique and of higher quality.

Photographic images are photographs/pictures and videos in digital format. The use of video on a website other than via an external link (like youtube), requires very specific details – please refer to your designer.

With both graphic images and photographs it is important to keep in mind the average speed of the internet connections your target market has access to. Having a high resolution website that takes too long to download on any device, will not serve your business.

However, supply the designer with the best quality image files as it is possible to convert a large pixel/DPI file to work and display properly on your website, but not vice versa (low quality will always remain low quality).

Consider the amount of images you intend for your website carefully. Although easy enough for your designer to upload, conversions and editing of images and pictures are time consuming and costly if you don’t have your image files standardised.

Client Supplied Photo and Graphic Image Requirements

All graphic image files must be supplied in digital format. There are three categories of image files, namely: static, transparent and animated. Ensure the correct file format for how you intend the image to be used.
Acceptable file extensions are: .png; .jpg; .jpeg; .bmp
Photographic image files must be supplied in digital format.
Other file extensions may be acceptable and convertible, but we can not ensure that it will display correctly on all browsers.
Pixels for image file should not be less than 700X700 nor exceed 2000X2000 pixels (in both instances width X length indicates the maximum and not the relation of width to length).
Resolution for images should be no more than 300 DPI. 72 DPI is what is typically used on websites. For example an image file with maximum 2000X2000 pixels at 72 DPI, will still display adequately on most devices and browsers.

Pixels and DPI shortly explained:

Pixels refer to the image size of a screen in terms of the amount of dots it will display. Modern technology allows users to change this on computers, laptops, cellular phones and more, but these are limited to the actual size of the screen and the technology literally behind the screen. So it is safe to say, unless your users have high definition big screen monitors, the biggest pixel setting you should ever need for a website is 1920X1080 (current statistics show only 1% of worldwide users uses larger screens).

DPI (dots per inch) is like pixels the amount of dots, but more so refer to the display of the image itself. So think of the distance users and their internet equipment interact with – it is fairly close, so the amount of dots per inch needed for your images needs to be reasonable dense. If the dots were far apart the image will display distorted over a short distance (pixelated).

Specified Colours

Specified colours in the creation of graphic images for the Client, must be supplied in Pantone or CMYK values. This is also acceptable specification for use on the website.

The colours that can be specified by the client for the website design can be for use of written content, the different types of fonts, headings, frames for images, webdings, buttons, backgrounds, menus, basically everything can be specified individually or collectively in colour schemes. Choosing your business’ image colours are recommended to start with, and if you do not know how to specify them in any of the context describe below, we are able to determine them from high digital images for you.

Please remember the colour(s) will be set correctly on the website platform, but the display thereof is entirely up to the settings of the devices used to access the website.

Client Supplied Specified Colours Requirements

For creation of graphic image colours must be supplied in Pantone or CMYK.
Acceptable website design colour specifications are: RGB; Hexadecimal Colour Code (#); Pantone; CMYK
Alternatively supply a high quality digital graphic image for us to determine the applicable colour codes.
Other specifications may be acceptable and convertible, but we can not ensure that it will display correctly on all browsers.

True Colour (24-bit RGB) explained:

All colour coding is basically specified according to the combination of its red, green and blue components (the primary colour wheel), each represented by eight (computer) bits. Thus, there are 24 bits used to specify a computer colour, and 16,777,216 colours that may be so specified because of the range of values each of the primary colours can represent (0 to 255 in decimal notation) – (0) represents the least to (255) the most intensity each of the colour components display.

E-commerce and Products

Depending on your range of products and method of selling and delivering products or services, the requirements can vary drastically. Please refer to our “Online Shopping Requirements”.

Contact Information and Maps

Exposing yourself to millions of potential customers you need to ensure they can contact you if needed and clearly indicate when you are available (business trading hours). Not all businesses operate from a specific site such as an office or store, so only include what is relevant to your business.

Billions of people use Google Maps to find things, and especially for navigation on mobile devices. If you have not already placed your business on Google Maps, we can do it for you. A lot of associated Google products can enhance your website’s accessibility (like Google Analytics), and again if you don’t want to register or manage that aspect of your site, we can do it on your behalf at a cost.

Placing a map on your website or link to your mapped location is another navigational function assisting your customers to remain on your website. Commonly included on the contact page, but it doesn’t have to be.

Social Media

Websites may include social media (like facebook, twitter, pintrest etc.) as news streaming, live chats, handling queries and FAQ’s (Frequently Asked Questions) to mention just a few. Although common practise these days, ensure you are doing it for the right reasons and are able to support the flood of information, which may be both positive and negative.

Responsibility and registration of any such accounts and maintenance thereof lies solely with the owner of the website. You only need to indicate whether or not you want to include social media on your website and where. The designer will assist you with how these can function in respect to the website.

Legal Requirements

Most of us are barely understanding the Terms and Conditions of our own businesses as drafted by lawyers, skip past all the T&C and disclaimers of of all the ‘apps’ we are downloading to our phones, and trust financial institutions to abide by the law we never read.

If that doesn’t sound like you, then you will have understood and already prepared such documents. If not, this time you might want to read on.

Website terms and conditions are required to structure the legal relationships between the website operator and user. More detailed, it grants users rights to use website materials and imposes acceptable use and legal disclosure obligations; explain warranties; and disclaim liabilities of use of the website.

There are many more documentation, like website disclaimer, copyrights notice, cookies policy, privacy policy or statement. It is possible to include most of these in one document which will typically be the terms and conditions. WebSiteDesigns may be able to assist or refer you to obtain such documentation, but is not a legal advisor and recommend you seek professional legal advice in drafting these documents specific to your business and jurisdiction.