Chapter 2 : Site Design Page Design

Question 1

List out 6 web development processes

Answer 1

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing
6. Maintenance & Support

Question 2

List out the things I wanted to state in Information Gathering

Answer 2

1. State my purpose / objective
2. Determine my audience
   
   • Who are my target audience
3. Define the content
   
   • What kind of information will be provided on your site
4. Identify the essential resources
   
   • Do you have the budget, personnel, materials, time and other resources

Question 3

List out the elements of a web page? ( 6 )

Answer 3

1. Title ( Document Title )
2. Web Address ( URL )
3. Content
   
   • Information on the page ( text, graphic and other media types )
4. Design
   
   • Style of the page, font, color, background, visual elements
5. Structure
   
   • Layout of the page, title headings, tables, frames, navigational tools, footers
6. Hyperlinks
   
   • Links to related resources

Question 4

How many color is commonly used in website?

Answer 4

1. 2 colors

Question 5

What is important for choosing color scheme?

Answer 5

1. Color scheme should be applicable to target audience

Question 6

List out elements that defines an effective typography ( 3 )

Answer 6

1. User color, size, and weight variation for titles and subtitles
2. Maintain legibility with correct line, letter, and word spacing
3. Line height should be 1.5 times your font size

Question 7

List out elements that defines an affective Design Elements ( 4 )

Answer 7

1. Attribute to the overall mood of site
2. Keep elements consistent
3. Attention to detail ofen makes larger impact
4. Less is more

Question 8

What is necessary to separate units of information and create balance?

Answer 8

1. Solid Layout

Question 9

What design element is important for a web page?

Answer 9

1. Overall look of the web page
2. Content
3. Navigational Tools
4. Graphics
5. Page Layout & Structure

Question 10

What does Uniform Color Scheme does?

Answer 10

1. Maintain consistency, clarity and simplicity

Question 11

What must be use effectively for a good website design? ( 4 )

Answer 11

1. Colors
2. Images
3. Hyperlinks
4. Web Technology

Question 12

List out the technical elements that should be taken into consideration ( 5 )

Answer 12

1. Descriptive File Name
2. Descriptive Document Title
3. Complete Contact Information
4. Effective Use of Tables and Frames
5. Browser Compatibility

Question 13

What does the word Wireframe mean?

Answer 13

1. A basic visual guide used to suggest the layout of fundamental elements in a web interface

Question 14

What is the main purpose of wireframing?

Answer 14

1. Show the client how the website will be structured before designing

• Wireframe is the blueprint of our website

Question 15

What is the advantages of wireframing for a developer?

Answer 15

1. Get a clear picture of the elements that they will need to code

Question 16

Describe Wireframing with the below:
1. Key Aspects
2. What to Use For

Answer 16

1. Basic Representation of design elements
2. Communication, Documentation

Question 17

Describe Prototype with the below:
1. Key Aspects
2. What to Use For

Answer 17

1. Interactivity
2. Interactive user testing, UI Design

Question 18

Describe Mockup with the below:
1. Key Aspects
2. What to Use For

Answer 18

1. Static Visualization, Branding
2. Stackeholder Design Buy-In

Question 19

Elements in wireframe are displayed and organized to consider what? List out ( 5 )

Answer 19

1. Content
   
   • What will exactly be displayed in this page?
2. Structure
   
   • How will the elements of this page be put together
3. Hierarchy
   
   • How will these elements be displayed in positioning, labelling and size?
4. Functionality
   
   • How will these elements work together?
5. Bahavior
   
   • How does these elements interact with the user?

Question 20

List out things that shouldn’t be included in a wireframe

Answer 20

1. Graphic elements
   
   • Wireframes are not supposed to include design elements, as this will distract the purpose of the
     wireframes
   • Should be created without the use of colour, graphs, or typography.
2. Lorem ipsum text
   
   • Use real text for clarity.
3. Actual design
   
   • Wireframes shouldn’t define the final look of the page. It should show how the site will work, not how the site will look like.

Question 21

List out the type of wireframes ( 2 )

Answer 21

1. Sketch
2. Digital

Question 22

List out the Do’s in Web Page Design ( 10 )

Answer 22

1. Plan the website structure and navigation
2. Keep the layout simple and intuitive
3. Use the same general style throughout
4. Add standard navigation tools to each page
5. Include copyright and contact information on each page
6. Use original or free graphics
7. Use images wisely and keep file size small for fast download
8. Respect copyright and intellectual property rights
9. Always state the source of all materials used
10. Spell check and proofead each page

Question 23

List out the Don’t in web page design ( 7 )

Answer 23

1. Don’t crowd the pages
   
   • Balance text, graphic and space
2. Don’t overuse graphics, animations and other bleeding edge technology
   
   • Use them to support and enhance but not to overpower the work
3. Don’t use background that distacts the use or makes text unreadable
4. Don’t use blinking or glowing text for emphasis
5. Don’t use long paragraphs of text
   
   • Divide them into readable chunks
6. Don’t create dead end pages, which have no links to any other local page in the site
7. Don’t design for a specific browser