Web Design principles

Learning Intentions

Understand the idea of visual layout and how it affects our websites
Know how to add multiple pages and understand that most websites are built with multiple pages

Success Criteria

I can describe how visual layout and visual elements help to make a website easy to use

Use Google Chrome!

An inspiring read - Don't Make Me Think

User interface (UI)

A user interface is how we present our content on our websites. A good user interface would be:

Simple – easy to understand and avoid unnecessary content
Consistent – most if not all pages on the site look similar but with different content
Laid out well – websites should follow a good layout pattern and use colour and different font styles to represent different things.
Interactive – when a user expects to be able to click somewhere to do something (for example a link to another page) it would do just that.
Easy to navigate – navigation should be easy to find and going between pages shouldn’t require you to think too much

Good or Bad?

Consistency

Consistency is one of the most important things in web development. All pages, with the exception of the front page, must follow a similar pattern/layout in order to ensure that users have the most seamless and perfect experience possible.

Without consistency, the user would need to have to think about things like where to find the search box on a website.

When you’re creating a site, your job is to get rid of the question marks.

- Steve Krug

Design a website about a topic of your choice from the list below:

About a film or game (remember games are mostly blocked) you like
About a band you like
About a place you like
About the school
About a famous person

Your website needs to have:

Text discussing the topic
At least three image
A video (it doesn’t have to be related to the subject)

Task

Your next task is to design a website with three pages in it.
Make these pages as consistent as possible

Task

Presentation Overview

Web design principles

10:02 | 29-04-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

Remove after pick

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

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.

Feedback 👍

Accessibility

Apply a filter:

Dark Mode

Bold Text

All slideshow files