Learning Web 2018

Goal

This website was designed to allow access from anywhere to the additional training materials I had created for courses I had been teaching. The primary reason for creating this as an external site was that the site was designed to be accessible for students and high school teachers who would not have access to the internal systems of Griffith.

Site to be completed over the course of a weekend.

Research

The site was a collection of enhanced tutorials, ranging from basic web deveolpment through to 3D design and games programming.

Elements required - Simple headings, links to software used, links to pdf tutorials, links to resources when required.

As content was already created (3D content and adv web content created and updated in 2018), there was minimal need to research content. The site was designed with the following personas in mind.

Persona - Student - Jane Doe

  • Name: Jane Doe
  • Gender:Female
  • Age: 18
  • Work: No work, full time student
  • Learning Capability:Straight into University from High School. Study habits are normal.
  • Estimated Study Time: New concepts, 15 minutes every other day.
  • Social life: high
  • Device Access: Mainly mobile, limited desktop

Persona - Student - Jeff Doe

  • Name: Jeff Doe
  • Gender:Male
  • Age: 48
  • Work: Full time work
  • Learning Capability:Returning to study from full time work
  • Estimated Study Time: New concepts, 2 hours every other day.
  • Social life: low, married with children
  • Device Access: Mainly desktop

Research results

The personas indicated that the site needed to be adaptable to multiple devices and that the content was able to be picked up and used for small periods of time. This meant the tutorial time frame would be based on learning capability - 15 minutes to 2 hours. The site needed to be easily navigatable.

Accessibility was based on colours that would maintain a high enough contrast to be viewable. With an ease of access to each element.

Responsive - use bootstrap and bootstrap styles

Planning

With the simplisty of the site concept, all that was needed to ensure that students and potential students would be able to access the information, which in turn meant a link to a pdf and the resources linked to that lesson.

Gnatt Chart

Timeframe: A Saturday & Sunday - March 2018


Gnatt Chart

Mock Ups

Mock Up 1 Mock Up 1 Mock Up 1

Visual Design

Text - Font

Primary font: 'Roboto',sans-serif.

Text - Sizes

  • Header h1: 3em
  • Label: 1.8em
  • Lesson content: 1.4em
  • Footer: 0.7em
  • Blockquote: 0.9em
  • Mobile Changes
  • label: 1.3em
  • p: 0.7em
  • a: 0.7em

Colour Palette

  • Background: #1b809e
  • Lesson Label: #f37600
  • Lesson Label Hover: #ff4c01
  • Lesson Content: #ff4c01
  • H2 background: #f37600
  • H2 color: #ffffff
  • PDF link: #1b809e
  • Resource link: #BB1133
  • li: #f37600

Interaction

  • Lesson links were toggled with a Javascript fade.
  • Links were coloured changed on hover

Development

Development was carried out locally using XAMPP, with design and layout.

Images and icons were optismised within this period of the project. Content was added after the structure was completed.

Tools used were: XAMPP and Visual Studio Code.

Testing

Testing was carried out throughout development.

Browsers

  • Edge
  • Chrome
  • Firefox

Devices

  • Desktop - 4k -> 1366
  • Tablet - Surface, android
  • Mobile - Windows, android

Browser development tools where used to assist with responisveness of the website.

A section would be developed and then tested.

Once deployed the site went through online validation for html, css and accessibility.

Deployment

Deployment was FTP to a server in Miami. Once depoyed, testing on all links and validation was carried out again.

Site look

Learning Web 2018 Learning Web 2018