Slides badge

Web design

Learning Intentions

  • Be able to develop a website using an appropriate information architecture

Success Criteria

  • I can explain the term information architecture
  • I can build a website with an appropriate information architecture

Industrial web design

  • In the industry, web development is considerably different to how we develop it within school.
  • For a start, websites are structured in folder layouts called an information architecture.

Information architecture

  • The first step to developing a website properly is to develop this information architecture. 
  • In the industry, this is often done using techniques such as card sorting where the developers get together and figure out what pages go where. 
  • Creating these folders also can help generate the URL of the webpages on the website. For example, in the previous example structure, the URL to add a user to the site is website.net/members/add_user/

Index.html

  • Every folder in the information architecture will include an index file, normally the index.html webpage. 
  • For example, https://www.apple.com/index.html and https://www.apple.com/ are the exact same webpage.

Frameworks and libraries

  • On the web there are tons of free frameworks and libraries
  • Examples of frameworks include HTML5 Boilerplate, Bootstrap and Foundation

Building a good website

  • A good website must also be the following:
    • Consistent
    • Accessible
    • Readable
  • A good website should also have good visual layout

Consistency

  • Consistency is all about using layouts and styles that are similar across different webpages on the same website.
  • The main benefit of this is that it makes it easier for the user to see that they are still on the same website, but it also can make a website more memorable by reinforcing a brand.
  • CSS can help make a website more consistent by providing similar styles across several different webpages.

Accessibility

  • Accessibility requirements often consist of different aspects of ensuring that everyone can use a website.
  • One common accessibility concern is being able to use it on different devices without having to change settings and so on to make it readable.
  • It also involves checking font sizes are suitable for all users.

Readability

  • Readability is all about ensuring that users can read the content on the website with ease.
  • This involves checking that font is readable, including font size, family and the use of styles and font weight.
  • Readability also involves ensuring that no images or other elements obstruct text.

We are going to begin building a website from the ground up. The first step is to decide what you are going to build your website on. When you have done that, write down what pages you will need on your website. Create the information architecture of your website. 

 

We're going to do this with HTML code, CSS and JavaScript.

What we are going to work on is more advanced than what you would be expected do in National 5 Computing Science, but we've got more time to do this!

Task

Presentation Overview
Close
JB
Web Design
© 2020 - 2024 J Balfour
16:44 | 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
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files