 |
| ||||||||
Website Design Guide for BeginnersDesigning your own company website is bit of a technical challenge, and one that requires a descent grasp of HTML and best practice design principles. Here is our beginners guide to getting web design right first time... Constructing a Basic HTML Webpage HTML is a computer language that facilities the construction of all internet web pages. HTML stands for HyperText markup language. An HTML webpage is just text file containing a series of short defining codes surrounding text and images. These codes or HTML tags, define the appearance of the visible text, lines, images and background i.e. whether it should be bold, italic, larger font, coloured background and so on. This HTML is uploaded to a website and can be interpreted using a web browser like Chrome or Internet Explorer. HTML tags are fairly intuitive to learn by creating a few dummy pages using an HTML editor. You do not really need to know much about HTML tags. Most HTML editors allow you to create your web pages in a WYSIWYG (what you see is what you get) format. However, you should familiarise yourself with the principal on-page elements (such as the <header>, metatags and <body> elements). To include scripts or CSS style sheets, you will need to grasp the basics of viewing HTML in its raw format to build your new website. The Homepage is the most influential webpage because most users will land on it, relative to other internal pages. Use bullet points to summarise your entire value proposition. Remember that users attention span is extremely short and expectations are high. They will be unforgiving if they experience slow loading pages, which are difficult to navigate or are confusing on the eye. Do not use technologies that are potentially incompatible with some users older browsers. Most web design relies on a template or container standard layout for consistency between web pages. Try and logically separate areas of each web page into a top and bottom borders, side borders, and main body. You may need a content management system if your site is going to have lots of web pages. A CMS standardises website design and make managing multiple files easy. Many CMS have standard templates that allow non technical editors to publish a blog or a forum without knowing the underlying source code. Beware that unpicking someone else's website design apart (particularly if its database driven) may be too much for a typical small business or home user. So, if you become reliant on one of the free open source scripts (such as Drupal or Wordpress), choose it very carefully indeed. Constant CMS upgrades, security patches, enhancements or bug fixes involve customising or adapting your web design may become complicated. Your website should be easy to navigate using a straightforward navigational structure. Visitors should be up to find your most valuable pages within one click. It should be consistent across all pages, so users can easily navigate their way between sections and back again. A horizontal menu system at the top of the page with drop downs, is a familiar and popular webmaster choice. To supplement your main menu you should use a 'breadcrumb menu', similar to the menu we have used above. This helps users understand the hierarchical relationship between ideas and topics. Lastly, to help users browser through your site include a search box on every page. A search box is more appropriate for larger sites. Major search engines provide 'site search' code for a nominal annual fee.
Making Graphic Design Look Pretty Perhaps the hardiest and most problematic field of web design is graphic design. It wastes and consumes beginners time and invariably best left to the professional graphic designer. Think back to your marketing objectives. Is your new web site going to be paid brochure only website, shopping basket, forum or portal? Match your look and feel with the expectations of your visitors. If you are not terribly creative, why not find half a dozen websites you like the look of, then borrow some design concepts from them. If in doubt, kepe your website design uncluttered by using lots of white space and neutral colours. A quick and easy solution is to buy a pre-branded website template and 'fill in the gaps'. There are literally thousands to buy online. Be aware that one in twelve people are colour blind. They find it difficult to distinguish between red and green. A substantial web design boundary is compliance and changing standards. Different visitors can see the same web design entirely differently depending upon their browser type, monitor size, screen resolution setting, preferred zoom mode, internet device type and operating system default setting. For instance, users could be using a tablet, smart phone, giant flat screen TV or standard PC monitor. The browsing iterations are almost endless. So your challenge as a web designer is to ensure your website renders flexibly enough for most popular browsing scenarios. Think carefully about container widths (in pixels versus %'s). To make the design experience even more difficult, you will soon discover that exactly the same HTML code renders entirely differently across different browsers. So check your CSS and HTM, by manually viewing each page in all browsers. Also, check each page is compliant using a WC3 html checker. Similarly, avoid using frames where ever possible as they are difficult to navigate, difficult to design and stop search bots from caching the page! Lastly, always optimize each image by reducing the file size and resizing the width and height for web browsing purposes. Always include an ALT text to each image, so search bots can understand the general meaning of the image. The alt tag is used to display a brief description of an image when the user hovers the curser over it. We hope this short guide will get you thinking about planning your new website design logically and efficiently! | ||||||||
© Copyright 2008-2012
Infoguides Limited
Webmasters - please link back using: