week 6

Design tools

Design tools are used to assits web designers and developers to provide users and clients of the visual apperiance and hierarchy of a website, a number of concepts are used at the design stages these are;

• mood boards, often used to enable designers to gather ideas and themes accross a website moodboards are a collection of images displaying fonts, colours, product images and textures. Commonly used by brides to be these design tools enable the others to understand the desired feel of the ocassion or site. Below is an example of a moodboard used in different situations
  
  http://cdn.onextrapixel.com/wp-content/uploads/2010/04/moodboard1.jpg
  http://www.weddingtv.com/theme/4d13ad1add4145075700001e/moodyellabdnvlack.jpg
  http://www.webdesignstuff.co.uk/fj101/files/2011/12/2.jpg
• storyboarding; layout techniques eg frames, tables, block level containers (DIV), inline containers (SPAN); templates; colour schemes; screen designs; other eg outline of content
  The use of storyboarding in webdesign really enpowers the designers to present to the client the location of elements in the webpages and to enable the potential web developers to take the designs and understand the positions of things like, tables, block level containers known as DIV tags or commonly known as dividers, inline containers known as SPANs, the prefered colour selection for thing such as backgrounds and text.
  An example of a storyboard is demonstrated below,
  
  http://www.webdesignstuff.co.uk/fj101/files/2011/12/1.jpg
  The storyboard above was an actual design that i created durring my Masters degree studies, this storyboard was designed and linked to the third moodboard above, and then went on to create the website on the below link.
  Biscuit Web Site

A commonly used tool to enable the design of wireframe layouts for a web page is balsamiq, this tool allows a designer to quickly put together layouts of pages to enable clients to see a vision of structure and position of elements on a page.

Create a simple design of a web page using Balsamiq, use this as a chance to practice before your assessments. Balsamiq

What are frames, tables, block level containers (DIV), inline containers (SPAN); templates; colour schemes; screen designs

Well these are elements with HTML that enable a website to be presented and formated in a certain way. The understanding of what these are and how that they function will enable you to create a design that will functionally work.

• Frames
• Tables
• Block Level Containers (div)
• Inline containers (span)
• Templates
• Colour schemes
• Screen Designs

Frames

Frames and framesets have been used over the time of the simple website to enable positions of things like navigation, content and footer information these are not favoured in the web development world any longer as there are tags that will enable developers to create this presentation using only 1 web page and not 4!!.
The use of framesets required 4 webpages to create a site like the below image

This pages all acted independantly from one and other, however the page that had the code below, brought them all together.

Tables

Table are possible one of the most frequently used tags in HTML, these allow the ordering of information in to sections. They enable the data to be presented in a form that could allow a comparison of features, figures and other elements.

Block Level Containers (div)

So lets look at block level containers or more commonly recognised as DIV's. These are the tools now used instead of the frameset to provide elements of structure to pages. These are used within each other to set out the page. The example below best shows the use of DIV's to structure the page.

Inline containers (span)

Templates

Colour schemes

Screen Designs

Software: markup languages eg HTML; client side scripting languages eg JavaScript, VBScript; features and advantages of software languages; software development environments

The information covered in this page covers the knowledge and understanding linked to the criterion in the table below.

Last Updated
2018-04-16 13:27:00