Web Design

Telling users that you are, and who you say you are. use subdomain directory Choosing a domain name Domain names are important. They are part of the URL of a website. A domain name looks something like this:

Mycompany.com But a lot more information can be included in this. Domain names can carry the following information:

subdomain.domain.tld/directory

• Domain – the registered domain name of the website

• Subdomain – a domain that is part of a larger domain

• TLD – the top level domain, uppermost in the hierarchy of domain names

• directory – a folder to organise content The TLD can indicate the country in which a domain is stered, and can also give information about the nature of the domain.

• .com – the most common TLD

• .co.za, .co.uk, .com.au – these TLDs give country information

• .org – used by nonprofit organisations

• .gov – used by governments

• .ac – used by academic institutions

Domain names must be registered aßnd in most cases there is a fee for doing so. Many hosting providers will register domain names on your behalf, but you can also do it yourself

“How do users know it’s us?” by - developing a branding (logo).

Design Theory - Design can be a pretty precise science – there is a lot of research out on what makes for effective design. A lot is also common sense and practice based on accepted web standards. Here are some concepts you should know.

• The Fold: The fold is the imaginary line at the bottom of the monitor that divides the immediately visible part of the website (content above the fold) from the part that is visible only after scrolling down (content below the fold).

• Consistency:

• White Space: Spacing on the page allows the eye to travel easily between chunks of information and allows scanning.

• Brand guidelines or style guide in Adobe Reader (PDF) format.

• Logo and other key brand elements. These could be in Illustrator format(ai) or Photoshop format (psd). Best practice is to have your logo designed using vector graphics. If your logo or other brand assets are created in this format, they can be enlarged without losing quality. Other formats do not allow scaling and if displayed larger than the original designer intended will result in a poor-quality image. If you do not have a vector version of your logo available, then you should make sure that your image is at least 1 000 pixels wide.

• Image libraries. Photographs and images can be hosted online, where the designer can access them with a login. They can also be sent to the designer on a CD. Make sure the images are of sufficient quality. It is best practice to provide images that are 300dpi. This is the measure of a high-quality image that will retain its quality if resized. Although all images on the web are displayed at 72dpi, a higher quality image will give your designer room to optimise and resize and crop or cut images where needed.

• Fonts folder. You will need to provide both Apple Mac and PC versions of the fonts that are listed in your Style Guide. Many designers work on Macs, which use different font versions from those read by PCs.

• Brand colours need to be given to digital designers in RGB format. RGB stands for red, green and blue and is the standard for colours online.

• Any existing creative assets that have been created for your brand over time such as: o Print designs o TV ads

• Website copy should be made available before the final design is required. This prevents delays caused by designers waiting for material.

• Any additional assets your designer may need that can be downloaded or sent, such as your price guides or product descriptions.

Colour Theory - Colour has an incredible psychological effect on people.

•Colours also hold different meanings and associations for people.

•for example, red signifies luck in Asian cultures, but danger in many western cultures.

•There are some colour-related web design conventions you should follow: • Red is used for warnings, error messages and problems. • Green is used for successful actions, next steps and correct submissions. • Blue is best used for hyperlinks.

• Bespoke: This is a CMS that is built specifically for a certain website, and many web-development companies build their own CMS that theyuse for their clients. This option is highly tailored and customised to your website, and can be more expensive than other options. It is also possiblyless flexible.

• Off the shelf: A CMS can also be pre-built by an external company or developer. These can be bought like any other software on the market. While this may have fewer custom features, it’s potentially a more cost effective option than a bespoke CMS.

• Open source:Open source means that anyone can see the code that the CMS is built with, and can manipulate or improve it (and share this with everyone else using the CMS). Some widely used open-source CMS solutions include:

• WordPress (www.wordpress.com)WordPress.com

• Joomla (www.joomla.org)Joomla.org

• Drupal (www.drupal.com) Drupal.org

• Cost: The cost varies depending on the language you choose for your web development project, as the language chosen directly influences the salary of the developer. If information is processed where your website is housed, as opposed to on the client’s computer, it increases the costs. Some languages also require on-going website management and maintenance, which is an additional cost to consider.

• Scalability: When planning a project where scalability is a factor, consider whether there are developers readily available to develop in this language. Also find out if there are supporting libraries and frameworks available that suit your project

• Cost: Front-end language development costs are relatively low.

• Features: HTML, CSS and JavaScript are open source languages often used together and are compatible with most hardware and software. Content developed in these is also more search engine friendly. Flash is known for its video, animation and interactive multimedia capabilities. In many cases, similar results can be achieved with HTML, CSS and JavaScript. Flash can be used alone or in conjunction with other languages. What your end users will be able to view should always be the most important consideration.

• Scalability: Depending on the capabilities of the device executing the language, certain features may not be available or certain code may run too slowly to create a good user experience. The front-end code needs to take all the considered devices into account.

• Browser and OS support: With front-end languages, you have to cater for browser and operating system support. A website will look different on each browser and operating system and this needs to be factored in. If a feature cannot be displayed under certain conditions, work-arounds have to be implemented.

• Open-source or proprietary software: Any developer can create addons for or improve on open-source software, while proprietary software is owned and its use is restricted. It can be cheaper to develop in an open-source front-end language such as HTML, but as HTML is needed to host all web pages, combinations of the two are sometimes used. In most cases and for the languages we cover, however, this is not a major consideration.

Which mobile experience should you create? When creating a platform for mobile users to access your content and brand, you have three options:

1. Mobile website

• Test iPhone – www.testiphone.com

• BlackBerry – https://developer.blackberry.com/develop/simulator/

• Mobile Phone Emulator – for Samsung, iPhone, BlackBerry and others – www.mobilephoneemulator.com 2. Mobile application 3. Responsive website

Colour Theory - Colour has an incredible psychological effect on people.

•Colours also hold different meanings and associations for people.

•for example, red signifies luck in Asian cultures, but danger in many western cultures.

•There are some colour-related web design conventions you should follow: • Red is used for warnings, error messages and problems. • Green is used for successful actions, next steps and correct submissions. • Blue is best used for hyperlinks.