2018
Website Development
UNIT 6
LUCA PALMERI
,Contents
Assignment A .................................................................................................................................... 3
Design Principles........................................................................................................................... 5
Purpose ..................................................................................................................................... 5
Usability .................................................................................................................................... 7
White space/Spacing ................................................................................................................ 8
Unconventional Layouts and the Golden Ratio ...................................................................... 11
Site Layout .............................................................................................................................. 13
Accessibility ............................................................................................................................ 15
Navigation............................................................................................................................... 16
Typography ............................................................................................................................. 18
Alignment ............................................................................................................................... 19
Clarity...................................................................................................................................... 21
Consistency ............................................................................................................................. 22
Accuracy, Content, Media and Object .................................................................................... 24
Simplicity ................................................................................................................................ 27
SEO (Search Engine Optimisation).............................................................................................. 28
Performance Factors .................................................................................................................. 28
Web 1.0, 2.0 and 3.0 Technologies ............................................................................................ 30
Analysis of the two websites for the client’s requirements ....................................................... 30
Evaluation of websites for clients’ needs ................................................................................... 31
Assignment B .................................................................................................................................. 34
Website Design Cycle ................................................................................................................. 34
Design Brief............................................................................................................................. 34
Problem Definition Statement ........................................................................................... 34
Purpose Requirements ....................................................................................................... 35
Figure 1 Mind Map of initial ideas ...................................................................................... 36
Figure 2 Gantt Chart ........................................................................................................... 37
Figure 3 Research on other Web Development Sites......................................................... 39
Figure 4 Persona of a user of my website .......................................................................... 43
Figure 5 Mood Board .......................................................................................................... 44
Figure 6 Storyboard / Site Map .......................................................................................... 46
Figure 7 Wire Frames ......................................................................................................... 47
Figure 8 Flow Charts ........................................................................................................... 69
Figure 9 Ready-made digital graphics and digital video content ....................................... 72
Figure 10 Colour Schemes .................................................................................................. 81
Figure 11 Feedback on various aspects of my proposed site ............................................. 82
Figure 12 Testing plan and test data using paper prototypes............................................ 88
1
, Search Engine Optimisations .............................................................................................. 89
Technical Design Constraints.............................................................................................. 89
Legal and Ethical Considerations ........................................................................................ 89
Common tools and techniques used to produce a website ....................................................... 90
HTML and HTML 5 .............................................................................................................. 90
Tables.................................................................................................................................. 90
Forms .................................................................................................................................. 91
Navigation........................................................................................................................... 91
Interactive Components ..................................................................................................... 92
Colour Schemes, Styles and Templates .............................................................................. 93
Cascading Style Sheets ....................................................................................................... 94
Embedding Multimedia, Exporting and Compression........................................................ 95
Accessibility Features ......................................................................................................... 96
The World Wide Web Consortium ..................................................................................... 96
Platform Compatibility ....................................................................................................... 97
Assignment C .................................................................................................................................. 98
Client-Side Scripting Languages.................................................................................................. 98
Embedding Client-Side Scripts ............................................................................................ 98
Types of Web Scripting Languages ..................................................................................... 98
Uses of scripting languages ................................................................................................ 98
Constructs ......................................................................................................................... 100
Website Development.............................................................................................................. 101
HTML Tags ........................................................................................................................ 101
CSS Frameworks ............................................................................................................... 102
CSS Box Model .................................................................................................................. 102
Accessing CSS from HTML ................................................................................................ 103
Doc Types ......................................................................................................................... 103
Use of tools and techniques ............................................................................................. 104
Compatibility with mobile and tablet devices .................................................................. 109
Uploading to a web server ............................................................................................... 109
Website Review ........................................................................................................................ 110
Quality in comparison to other websites ......................................................................... 110
Suitability for the intended purpose and audience.......................................................... 111
Bibliography.................................................................................................................................. 118
2
, Assignment A
Understanding Principles of Website Design
Purpose and Principles of website
product, Performance Factors
The two websites that are being compared and contrasted are the Apple Store and Netflix’s
online video streaming site. Apple is an American multinational company which designs and
manufactures consumer electronics such as the iPhone and Mac; they develop both the
hardware and software of their devices so that they work seamlessly together. Netflix is an
online video streaming service which produces and makes its own TV shows and films for
their subscribers to watch via their app or website. (Leana Yang, 2017) Both sites have the
purpose of providing a service as Netflix’s main target audience is between 18 - 24 use the
website to watch video content therefore the website meets the needs of the target
audience as people are able to use it as well as its designed for its indented audience and
Apple has designed it website for its target audience such which are 18 – 30 year olds
customers which use the online Apple Store to find out more about their products, purchase
new products and receive support for existing products.
Both websites are large and are very complex and have large amounts of information and
data on them. However, the comparisons that will be made will be from the websites main
home page which is the one that is first seen when entering the website from a search
engine. The comparisons that will be made will focus on the design principles of a website
which are the key concepts to a great website design.
3
Website Development
UNIT 6
LUCA PALMERI
,Contents
Assignment A .................................................................................................................................... 3
Design Principles........................................................................................................................... 5
Purpose ..................................................................................................................................... 5
Usability .................................................................................................................................... 7
White space/Spacing ................................................................................................................ 8
Unconventional Layouts and the Golden Ratio ...................................................................... 11
Site Layout .............................................................................................................................. 13
Accessibility ............................................................................................................................ 15
Navigation............................................................................................................................... 16
Typography ............................................................................................................................. 18
Alignment ............................................................................................................................... 19
Clarity...................................................................................................................................... 21
Consistency ............................................................................................................................. 22
Accuracy, Content, Media and Object .................................................................................... 24
Simplicity ................................................................................................................................ 27
SEO (Search Engine Optimisation).............................................................................................. 28
Performance Factors .................................................................................................................. 28
Web 1.0, 2.0 and 3.0 Technologies ............................................................................................ 30
Analysis of the two websites for the client’s requirements ....................................................... 30
Evaluation of websites for clients’ needs ................................................................................... 31
Assignment B .................................................................................................................................. 34
Website Design Cycle ................................................................................................................. 34
Design Brief............................................................................................................................. 34
Problem Definition Statement ........................................................................................... 34
Purpose Requirements ....................................................................................................... 35
Figure 1 Mind Map of initial ideas ...................................................................................... 36
Figure 2 Gantt Chart ........................................................................................................... 37
Figure 3 Research on other Web Development Sites......................................................... 39
Figure 4 Persona of a user of my website .......................................................................... 43
Figure 5 Mood Board .......................................................................................................... 44
Figure 6 Storyboard / Site Map .......................................................................................... 46
Figure 7 Wire Frames ......................................................................................................... 47
Figure 8 Flow Charts ........................................................................................................... 69
Figure 9 Ready-made digital graphics and digital video content ....................................... 72
Figure 10 Colour Schemes .................................................................................................. 81
Figure 11 Feedback on various aspects of my proposed site ............................................. 82
Figure 12 Testing plan and test data using paper prototypes............................................ 88
1
, Search Engine Optimisations .............................................................................................. 89
Technical Design Constraints.............................................................................................. 89
Legal and Ethical Considerations ........................................................................................ 89
Common tools and techniques used to produce a website ....................................................... 90
HTML and HTML 5 .............................................................................................................. 90
Tables.................................................................................................................................. 90
Forms .................................................................................................................................. 91
Navigation........................................................................................................................... 91
Interactive Components ..................................................................................................... 92
Colour Schemes, Styles and Templates .............................................................................. 93
Cascading Style Sheets ....................................................................................................... 94
Embedding Multimedia, Exporting and Compression........................................................ 95
Accessibility Features ......................................................................................................... 96
The World Wide Web Consortium ..................................................................................... 96
Platform Compatibility ....................................................................................................... 97
Assignment C .................................................................................................................................. 98
Client-Side Scripting Languages.................................................................................................. 98
Embedding Client-Side Scripts ............................................................................................ 98
Types of Web Scripting Languages ..................................................................................... 98
Uses of scripting languages ................................................................................................ 98
Constructs ......................................................................................................................... 100
Website Development.............................................................................................................. 101
HTML Tags ........................................................................................................................ 101
CSS Frameworks ............................................................................................................... 102
CSS Box Model .................................................................................................................. 102
Accessing CSS from HTML ................................................................................................ 103
Doc Types ......................................................................................................................... 103
Use of tools and techniques ............................................................................................. 104
Compatibility with mobile and tablet devices .................................................................. 109
Uploading to a web server ............................................................................................... 109
Website Review ........................................................................................................................ 110
Quality in comparison to other websites ......................................................................... 110
Suitability for the intended purpose and audience.......................................................... 111
Bibliography.................................................................................................................................. 118
2
, Assignment A
Understanding Principles of Website Design
Purpose and Principles of website
product, Performance Factors
The two websites that are being compared and contrasted are the Apple Store and Netflix’s
online video streaming site. Apple is an American multinational company which designs and
manufactures consumer electronics such as the iPhone and Mac; they develop both the
hardware and software of their devices so that they work seamlessly together. Netflix is an
online video streaming service which produces and makes its own TV shows and films for
their subscribers to watch via their app or website. (Leana Yang, 2017) Both sites have the
purpose of providing a service as Netflix’s main target audience is between 18 - 24 use the
website to watch video content therefore the website meets the needs of the target
audience as people are able to use it as well as its designed for its indented audience and
Apple has designed it website for its target audience such which are 18 – 30 year olds
customers which use the online Apple Store to find out more about their products, purchase
new products and receive support for existing products.
Both websites are large and are very complex and have large amounts of information and
data on them. However, the comparisons that will be made will be from the websites main
home page which is the one that is first seen when entering the website from a search
engine. The comparisons that will be made will focus on the design principles of a website
which are the key concepts to a great website design.
3
