!
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
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.
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.
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.
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 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)
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.
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.
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.
This is my BSc Honours Year dissertation low-fidelity prototype (I did this at Knox Academy in 2016!)
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.
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.
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.
The following are key shortcuts for using DragonSlides and reveal.js.
| Key combination | Action |
|---|---|
| →, PAGE DOWN, SPACE | Next slide |
| ←, PAGE UP | Previous slide |
| SHIFT + → | Last Slide |
| SHIFT + ← | First slide |
| B | Whiteboard |
| W | Widget Board/White Screen |
| C | Toggle Notes Canvas |
| DEL | Clears Whiteboard/Notes Canvas |
| S | Show Presenter Mode |
| SHIFT + D | Toggle Dark Mode |
| H | Goes to the Home Slide |
| META + P | Show Print options window |
In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.
DragonSlides and jamiebalfour.scot are copyright © Jamie B Balfour 2017 - 2024, 2010 - 2024. Content is copyright © Jamie B Balfour