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 WEBSITE 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

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
Digital Design :: Web Design and Development :: Web Design
© J Balfour
21:18 | 30-05-2023
Slideshow Outline
Save progress Show presenter mode Toggle whiteboard
Dark Mode Bold Text Accessibility
Random Number Generator Timer Binary & decimal converter Show Python editor Show Knox 90
Provide feedback Help
Login
Keywords
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slide files