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
framesets
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.

Links to Assessment Criteria Description
P4 using appropriate design tools, design an interactive website to meet a client need [CT1]
M2 explain the tools and techniques used in the creation of an interactive website
D2 discuss the techniques that can be used on web pages to aid user access to information
Functional Skills English Reading, Writing, Comprhension, Problems Solving, Nouns
Functional Skills Maths Compression,Reduction
British Values None covered in this session.
Equality and Diversity

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

Links to Learning Outcomes

Links to Assessment criteria
 

English

0

Maths




How 2's Coverage

0

0

Files that support this week

| | | | |
Week 5←
PrevWeek 6←
PrevWeek 7←
Prev→
Next→
Next
Webmaster Spelling Notifications