Design Phase

Visual design

Story boards:

Designing the website is an art and to make it perfect, designer should create paper sketches or diagram or a model before implementing it. The visual design of the site, site map and the layout of the page/pages are important factors for building a successful website. Visual design or story board are important to show the designer how the website will look like and what elements are important. Consistency in a website makes it look better and appealing for the visitors. It is always better to sketch the home page and other page/pages of the website before developing it.

Home page layout

Site Navigation:

Justification:

Justification for Interface Design:

According to USERNOMICS, “Technology alone may not win user acceptance and subsequent marketability. The User Experience, or how the user experiences the end product, is the key to acceptance." Here comes the need of user interface where user can experience the real world application. The interface designed for the website will be very simple and attractive so clients can visit and play around on website with accuracy and efficiency. The UI is very much similar to newspaper and easy to find information. The idea behind designing this interface is that, different age and type of people can use it with ease and to make their experience worth. All the images have alt text in case if someone is using website without turn on the image options.

Colours and contrast:

Colour, contrast and colour theme of any system or any website is very important, GARYSIMON. There are several websites available with great colour theme, great colour combination but with unacceptable contrast and vice versa. In order to maintain the colour and contrast I designed it very simple with WHITE background and black text. The contrasts of Blue highlight and white text for main headings and Dark blue (Navy Blue) for other headings will be used to stand out from the rest of the content. The black and white colour and contrast is always appealing because of its simplicity. Felki-Morris also suggested using white background with black text for simple design. For some of the pages especially new talent and other technology pages the background may be light blue. The reason for choosing blue colour is that it is widely acceptable and white means peace in nature. People with some visibility problem (young or old) can take the advantage of this website with this simple colour and contrast and interact with system.

Font Size

The normal font size chosen for the website is size 14 and type San-Serif for text and Serif style for headings. Fonts of size 14 with black background make words clearly visible and easy to read. The main heading font size will be larger around size 18-20 and normal heading size will be restricted to 16pt. The font will also make the website look beautiful and readable.

The texts do's and don'ts option was kept considered before choosing the font size and colour. According to Shneiderman, "Line-height, font size and spacing between the paragraphs must be kept accordingly."The spacing between the paragraphs and text is consistent. Colours and contrast is very much pleasing to make user's experience better.

Layout:

The layout of the website is very simple. I have used the DIV approach to set up the layout. This type of layout is very easy to manage. According to Felki-Morris, “The layout must be simple and appealing to the site visitors.” Company name and logo is at the top which divides the section with rest of the page. The footer section is added for foot notes and text menu navigations. The top second divider is used for navigation bar. The navigations bar will be an image so it was better to separate that layer from the main body content layer. Last but not least the middle section. The section for the body is aligned with the screen. The options and menus are large enough for everyone to focus on it easily. This makes users experience fruitful and also make sure these options are stand out in compare to normal content. The whole website will be very user friendly. There is a sufficient white space on the website for the content to look simple and consistent.  The design technique used for page layout is Jello Design.

Consistency:

Consistency was always first point for designing/sketching of any webpage for desired website. According to Jakob Nielson, "Consistency and standards must be there in any application to make easy for users to understand instead using different words for same actions."

The design of the website is very simple and easy to access. Pictures and texts are simply added for this project. Audio and video will be added soon with suitable quality and less in size. No blur or any other filters has been fitted for this. The usability of this website is really good one. This website design tried to avoid cluttering to much information on the page and kept the design and layout to simple.  According to GRAYSIMONS, "Usability is all about making the visitor's experience a good one."  Text is easy to read, easy to access and easy to understand.

Navigation Justification:

            I have chosen Website Hierarchical Organization navigation layout or Hierarchical Navigational structure. According to Morris in Hierarchical Navigational structure

Ø  A clearly defined home page

Ø  Navigation links to major site sections

Ø  Often used for commercial and corporate Web sites

Another reason for choosing this structure is that “Too many choices make it confusing and less usable web site. George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory. Three click rule indicates that “A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.”

The design of website navigation shows that the website is easy to navigate with clearly labelled navigation on each page at same location. The navigation options will be available on top of the website and text based at the bottom of the site. I have used Graphics based as well as text based navigations. Another approach might be added later in the website is to break long pages into several small pages using Linear Organization navigational structure.