Design
Website Structure
A website such as the school’s website is constructed of many web pages.
URL
A URL(Uniform Resource Locator) is a method for identifying the address of each page/site that is hosted.
It has 3 main parts.
Structure of a URL
Navigational Structure
When designing a site you have to consider the structure of the navigation structure that will be used in your site.
There are 3 main types we will look at:
Linear
Hierarchical
Web
The gallery below demonstrates the three different types.
Wire Framing
The use of a wireframe is one design methodology used to show individual elements in a user interface (UI) design. The advantage of this method is that the designer can quickly create a visual prototype to show clients.
When creating a wireframe you should aim to demonstrate the following:
Navigational Links
Consistency
Vertical Positioning
File Format Indication
Example Wireframe 1 - Single Page
The wireframe on cloud computing meets all of the requirements for a single page as it is
highlighting the destinations of all of the hyperlinks
demonstrates the vertical positioning of the elements
the file formats of the pictures, video and audio are highlighted
Example Wireframe 2 - Multiple Pages
The wireframes above demonstrate the consistency across multiple pages.
Prototyping
A prototype is used to show the intended user interface for any product.
to show the (complete) content and layout of the website
to show the intended user interface to client
it allows end-users to get the look and feel of a website
allows client to give feedback
Prototypes can be low-fidelity (paper based) or high-fidelity (electronic), with developers sometimes using both.
Wireframe
Low Fidelity Prototype
High FiPrototype Example
If you download this pdf below and view it in Chrome/Adobe Reader you will notice that the hyperlinks embedded within the wireframe allow you to use the system. This would allow the client to use the system and recommend changes. This is an example of a High Fidelity prototype and has been created with specialist software.
AH PHP WIreframes Prototype.pdf