Slides badge

Website Design

Learning Intentions

  • Understand how websites are laid out

  • Understand how web designers and developers plan out websites

Success Criteria

  • I am able to state what requirements to look for in a website
  • I am able to construct a wireframe for a website

What this unit is

  • The next unit of learning we are going to work on is web design and development, but rather than developing your website with a website builder like Google Sites, you are going to build it with code.

  • This unit will start off with a very gentle introduction to web development and will move on to the more advanced parts of it.

  • The lesson structure for this unit is flexible and designed to give you as much time as possible to develop your own skills, encouraging you to better yourself at using HTML and CSS.

What this unit is

  • You are expected to complete 1 web development task each week. To assess what you’ve learned, you will also be given a worksheet at the end of every lesson.

  • At the end of the unit there will be a short test as well as practical project. You may start working on the practical project at anytime when you have finished (details to follow).

Web development project

  • Your final project task will be to build a website with several HTML pages and an external CSS file linked into it.

  • You will be provided with the basic structure of a website with a linked CSS file.

  • You will work on this using the Trinket editor and share it with your teacher when you are done.

How do we create a webpage?

  • Websites are created using multiple webpages. These webpages are created using HTML or Hyper Text Markup Language.

  • When a webpage is viewed in a browser such as Google Chrome or Microsoft Edge, the webpage is rendered by the browser. When the webpage is rendered the code is transformed into objects and the page is known as a web document.

  • A webpage is made up of HTML tags such as <p> or <a>. When the webpage is rendered these tags are transformed to elements.

How do we create a webpage?

<!doctype html>
<html>
  <head>
    <title>Sample webpage</title>
  </head>
  <body>
    <h1>My website</h1>
    <p>
      Welcome to my website!
    </p>
  </body>
</html>

How do we create a webpage?

What do they need to know?

  • Discuss what you think web designers and developers need to know before they can build a website for someone?

Starting out - identifying the requirements

  • The first step to develop a website is to identify the requirements of the website.
  • This stage is called analysis or requirements gathering.
  • These requirements will be defined by several things, including:
    • Who the users of the website are
    • What the website is about
    • How the website will be used

The purpose of the website

  • The purpose the website is one of the very first things to consider when building a website. For example, a website about archeology is no good to a user if it discusses politics.
  • As a result, the purpose of the website should be well-thought out, with the intentions of the website being carried out throughout its development.

Target audience

  • When developing a website, one of the very first things that the developers think of is the target audience for their website.
  • For example, Apple might target users who are interested in the latest technology whereas Amazon might target multiple different users for their website.
  • Another way that the audience can be identified is by the country the website is targeting. For example, a .co.uk website is only intended for people in the UK whereas a .com is world-wide.
  • Websites may also target specific age groups, for example a website for retirement homes might specifically target elderly users.
  • A wireframe is one of the is one of the first steps to building a website.
  • A wireframe allows us to very quickly design a website using pen and paper or specialised software like Balsamiq.
  • A wireframe consists of little to no actual content, but uses descriptions to explain what each section of a page will be about

What is a wireframe?

An example

  • A wireframe for the website heriotsfpgolfclub.co.uk is shown

(copyright Jambour Digital ltd)

An example

So why do we bother with wireframes?

  • Wireframes in the industry cut costs by huge factors because:
    • They are cheap to produce
    • They allow the product to be designed to the wireframe
    • They allow the client to see what their finished website will look like
    • They can be easily (and cheaply) changed if something is wrong with them
    • They actually improve your skills in design

So why do we bother with wireframes?

What does a wireframe look like?

A button

A graphic

An input box

What does a wireframe look like?

Share zone

Product image

Allows user to insert quanity

# of items in cart

Additional product images

Username

Site wide search

Button to add to cart

Select up to four of the websites below and identify the purpose and target audience of each website. Pick out one of them and create a wireframe for the website based on the current website.

  • next.co.uk
  • amazon.co.uk
  • apple.com
  • diy.com
  • mcdonalds.co.uk
  • hp.com
  • homeenergyscotland.org
  • pcworld.co.uk

URLs

  • A URL or Uniform Resource Locator is simply a full path to a webpage or file.
  • For example https://www.amazon.co.uk/ is the full URL of Amazon's UK homepage. This is sometimes known as a web address.

lINKS

  • A link or hyperlink is the method of navigating the web.
  • A user moves from one page to another via a collection of these links.
  • If a link points directly to a page (e.g. https://www.amazon.co.uk) then it is an absolute link.
  • If a link points to a file in relation to where that file is (e.g. images/image1.png) then it is a relative link.
  • When links point to the same website, it is called an internal link.
  • When they point to another website they are called an external link.

Search engines

  • The world wide web is made easier to navigate by the use of search engines such as Google.
  • A search engine crawls the web and websites looking for keywords to identify the webpage.
  • If a user types in something they want to find, the search engine looks through its database to see for webpages that match that criteria.

Develop a wireframe for a website which provides receipes with instructions on how to make them. The receipes page should have a big picture of the food at the top and then bullet points on what ingredients are required. Below that it should have some content with a picture to the right hand side of it. Near to the bottom there should be pictures that act as links to similar receipes.

Presentation Overview
Close
JB
Website design
© 2020 - 2024 J Balfour
09:49 | 12-10-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Fullscreen
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:

      ×
      Loading
      All slideshow files