Slides badge

Design

Learning Intentions

  • Understand and use wireframes and low-fidelity prototypes to design a website

  • Understand the key concepts behind design (consistency, readability and visual layout) as well as responsive web design

Success Criteria

  • I can explain and exemplify a wireframe and low-fidelity prototype
  • I can explain the terms readability, consistency and visual layout
  • I can explain responsive web design and design a webpage to be responsive

Website dESIGN

  • The first step of website development is to plan the structure of the website. This is how the pages will link together, to allow for navigation between pages of the website and any links to external pages.

  • In higher we will use hierarchical structures (as well as linear structures) for the web sites we will be creating, these websites will utilise a navigational bar to display the links to the main pages.

tOP-LEVEL

  • All of the designs will start with the homepage at the top level,
    and then there will be the pages of level one (there will be no
    more than 4 internal pages linked). The homepage and the pages
    on level one will be the links that appear in the navigational bar.

  • The SQA will highlight the pages that are to appear in the navigational bar using an area of shaded background, the home page SHOULD ALWAYS be in the navigational bar.

Second-level hierarchical diagrams

  • When showing how the pages on level two will link we add to the
    diagram similar to the following.

  • In the structure designs the pages linked with horizontal lines (level one and the homepage in the examples) will be two way links. The pages linked by vertical lines will be one way links from the source of the line.

Bidirectional links

  • On most websites there is some form of bidirectional linking between pages. 

  • Most websites have a navigation bar at the top of them which allows you to go back and forth between pages with ease.

  • The SQA more often wants diagrams to look like those below when you are asked to make one:

  • To represent bidirectional navigation, we use a double headed arrow.

Wireframes

  • Wireframes are a way of representing the visual design of a webpage and are very common in the industry. 

  • A wireframe should:

    • navigational bars/links

    • text elements on the page (but not necessarily including all the text that will be in the element)

    • interactive elements such as buttons

    • images, videos and audio

    • form inputs

    • hyperlinks (and where they go)

Wireframes

  • Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

  • For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

Wireframes

  • Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

  • For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

low-fidelity prototypes

  • After a wireframe is built, the web development team often move towards the construction of a low-fidelity prototype. 

  • This is often developed by a graphics designer.

  • A low fidelity prototype is different from a wireframe in the sense that it offers interactivity.

  • Low-fidelity prototypes are often more detailed than wireframes and may contain more text than a wireframe and images might actually be hand drawn into the prototype.

  • Construction of a low-fidelity prototype is cheaper than building the finished product as it is faster to build. This way the client can suggest changes early on in the development cycle.

  • Low-fidelity prototypes can also help find dead links and features that aren't clear very easily.

low-fidelity prototypes

This is my BSc Honours Year dissertation low-fidelity prototype (I did this at Knox Academy in 2016!)

Copyright, Designs and Patents Act (1998)

  • The Copyrights, Designs and Patents act covers all sorts of media, ranging from text to graphics to video and audio.

  • It's often the case that a website designed or developer includes a copyright statement about materials used.

  • Sometimes the website developer may not own materials on the website. If this is the case:
    • credit for use of material must be given
    • the permission to use the materials needs to be obtained

Responsive web design

Responsive web design

Responsive web design

  • Responsive design is all about building a website that works on all devices.

  • Often with responsive design simply means rearranging columns of information on a desktop site into a single vertical column. 

  • Sometimes responsive design means hiding certain elements that don't work well on a smartphone or tablet.

High-fidelity prototypes

  • As you can imagine, a high-fidelity prototype is an even more complete prototype of a webpage or website.

  • A high-fidelity prototype will have been developed using HTML and CSS as well as JavaScript, and will offer an example of a finished product. 

  • Some companies go straight to the high-fidelity prototype as it can actually be quicker to transform the prototype into the finished version.

  1. State one place where you might find a linear structure
  2. Draw a multi-level structure for the eBay website
  3. What is a wireframe?
  4. Which elements should be included in a wireframe?
  5. Explain:
    1. Readability
    2. Visual Layout
    3. Consistency
  6. Create a low-fidelity prototype for the amazon.co.uk website

Task

Presentation Overview
Close
JB
Design
© 2020 - 2024 J Balfour
16:13 | 23-05-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files