## Administrative details

### Client name:

IPD workshop helpers

### Website name:

Leoprint

Go to the website!
P1 requirements
P3 changes
P4 testing

## Purpose and goals

The purpose of the website is to make it easier to use the 3D printers at the Institute for Design at Gløshaugen at NTNU Trondheim (IPD). The website will make it easier for the user to book a 3D printer at the institute, as well as contain information about how the 3D printers are working and how to use them. The goal is to make the website easy to use and understandable, so that there is no struggle when a user wants to use a 3D printer.

The website will focus on students as the user group, but also be a good overview tool for the workshop helpers at IPD. Allowing the users to see when a certain printer is occupied and when it’s going to be available makes it easy for students to plan when to print, and for workshop helpers to know which periods it might need more help at the printer room. The students will also be able to share their work and get insight into what other students have created with the printers.

## Navigation Structure

The website will consist of a homepage with links to the other pages on the website. The homepage will contain buttons linking to the pages “Booking and calendar”, “How to 3D print”, “Gallery” and “Ask for help”. All these subpages contain a navigation bar that can transport the user to all the other subpages. Clicking on the logo will transport the user to go back to the home page. So the overall form will be wide (as opposed to deep), and hierarchical. However, we also want the user to be able to move between the different sub-pages as well. The site will also allow users to move through the site in a linear fashion. From the gallery page, it is possible to click on the project thumbnails, to open up a full-page project.

By allowing the user to move easily between pages, the web-page will be easy to navigate through and the user will not get lost in the site.

## Page Layout and Appearance

Our main focus when it comes to the layout of the website is to make it accessible and user friendly. We want the users of the website to be able to get the information they are looking for quickly and without having to scroll the entire page looking for it. For that reason, the layout is structured with clear sections the user can navigate through. Every clickable button will also stand out from the rest of the page.

The layout will focus on universal design, giving the user plenty of feedback for every action. We will make sure that the page has enough contrast and make the buttons stand out and be easy to spot. The design will be clean to make the website informative without unnecessary distractions. We will make the design responsive, so the user can use the website both on mobile and on their laptop.

The navigation bar will be horizontal on desktops, and it will stick to the top of the page when scrolling. This will make it accessible for the user to navigate to other pages at all times. On mobile devices the navigation bar will be a hamburger menu at the upper right corner of the screen, and the bar will be listed vertically.

The styling that will apply to all pages of the website is listed below:

- Fonts
  - H1: Inter regular: 48pt
  - H2: Inter regular: 36pt
  - Text: Inter regular: 24pt
  - Nav-bar: Inter regular: 24pt
  - Caption-text: Inter regular: 20pt
  - Default fonts: sans family
- Color scheme:
  - Text: #032C36
  - Background: #FCF7F4
  - Buttons: #E6921C
  - Logo: #0996B4
- Body-width: 100%
- Nav-bar: 150 px
- Footer: 200 px
- Images: 100%
- Logo: 60 x 60 px in the upper left corner

## Content

The webpage will consist of five different pages:

### Home page

The home page will contain general information about 3D printers and links to the different pages. This will be the first page the user sees and will work as an informative page that gives the user information of what they can do at the web page.

The goal for this page is to inform the user of the purpose of the website. When the user first enters the website, the goal is for them to immediately understand that it is a site for 3D printers, and that they will know if they have come to the right website or not. It is also important that it clearly emerges that the site is there to help the user with whatever they need. It should therefore not be too much content on the home page, but simple explanations and opportunities to navigate further.

### Booking and calendar

This page will make it possible for the user to book a printer at the printer room. The goal is to make it easy to book a printer, as well as seeing when other people have booked the printers.

For the user to quickly go in and book a printer, it is important that the page displays the booking opportunity as visible and easy as possible. It should not be a struggle to find where to fill in the information to book the printer. It should also not be possible to book a printer that is occupied at the same time so that the user does not need to make sure that it is available, the web-site will do it for them.

The goal of having the calendar on the same page is both to let the user know when the printers are available, and for the workshop helpers to quickly get an overview of when many printers are in use to know when extra help might be needed. For the user and the workshop helpers to easily see when the different printers are booked and when they are available, a calendar will be displayed on the same page with clearly marked timespots when the different printers are booked.. It will be on the same page as that booking so that the user does not need to navigate to a new page just to see when the printers are available.

### How to 3D print

The goal for this page is to teach the users how to use the 3D printers, and how to book a 3D-printer using the website. For this page to fulfill the goal, it is important that the information is displayed in an efficient way that gives the user just what they need to know. It has to clearly and precisely give instructions on how to start a 3D print without too much filler text and exceptions. Then it can have another section that gives instructions if something in the previous instructions did not go as it should.

Another sub-goal for this page is to take some workload of the workshop helpers. By giving the students a possibility to try printing themselves before they contact the helpers will take off a lot of workload. However, if the user are not able to print even when using tha manual, the page will contain the possibility to go to the “Ask for help” page.

### Ask for help

The ask for help page will be a page where the students can ask the workshop helpers for help. The user can ask for help in case a problem occurs with the printers, if the user needs help with anything else or let the workshop helpers know that a printer is broken or dysfunctional.

The goal for this page is to quickly let the workshop helpers know if there is a problem or if anyone needs help, and for the user to have a place to go to if they do not get to print or do not understand how to. It is therefore important on this page that the user can easily fill out a form with name, number and what the problem is, so that the workshop helper knows who to contact and quickly get the message with most of the information they need.

### Gallery

The gallery will be a page where students can share their work. This page can give student inspirations and ideas on what is possible to do with the 3D printers. It will both be possible for the user to see others work and share their own. The goal for this page is to share projects on an easily accessed gallery. It is therefore important that the projects are displayed tidy and sorted by either names or release dates so that it is easy to find the different projects. It is also important that it is easy to post the users own projects, so the “+ add new project” button should be displayed at the beginning of the page so that the user does not need to search through the page to find it.

The project will only be displayed in small boxes with a short introduction and reduced images to make the page tidy and reduce the loading time on the page. It will be displayed in a grid that covers most of the page with the size 360x360. It is possible for the user to click on one of the boxes if they want to read more about the project. The grid will be fitted so that when the user opens the page, the row at the bottom of the pages will only display the top of the row with boxes. This is to indicate to the user that they can scroll down the page to see more without saying it directly.

### Project

The project page will display the same base-information as the thumbnail (name of the project, name of the creator), as well as the date uploaded, the class and the subject it was made for, and a small text about the project. As well as the 3D printing file, 3D model file, and pictures one by one, vertically. The pictures should be 70% width and auto height, with some padding in between, to make it easier to see and understand the pictures.

## Minimum Requirements:

Functions we want in javaScripts:

- ### Form validation:

  At the “Booking” page it is important that the user fills in their first name, surname, phone number, what printer they will use and for how long. To ensure that the user fills in all the needed information, the page will use the Javascript function form validation to make sure that all the details are given. The site will tell the user to fill in the empty area(s) if they try to book a printer without filling in all the information. It will also give feedback to the user to let them know that they have successfully booked a printer.

- ### Pop-up

  When clicking on “add new project”, a pop-up will open, prompting you to fill in the necessary information.

  - Required: Name of the project, name of the creator), as well as the date uploaded, the class and the subject it was made for (), a small text about the project, and a picture.
  - Optional: 3D printing file, 3D model file.

  The booking function in the callendar is also a pop-up.

- ### Drop-down navigation menu for phone:

  On the phone, the navigation bar will be a drop-down menu.

- ### Roll over function

  We want the navigation bar at the top of the site to highlight the element when you hover the mouse over it.

## Plan

### List of files and folders:

- homepage.html
- booking.html
- help.html
- contact.html
- gallery.html
- images/
  - leoLogo.png
  - projectImage1.jpg
  - projecImage2.jpg
  - ...
  - projectImageXX.jpg
- scripts/
  - dropDownMenu.js
  - popUp.js
  - formValidation.js
  - rollOverMenu.js
  - style.css

### Division of responsibility

Filename | Description | Responsible | Deadline
--- | --- | --- | ---
homepage.html | The homepage. | Mari | 07.11.22
booking.html | The calendar shows bookings, and the button directs you to the popup of the booking form. | Sigrid | 07.11.22
help.html | How to use the printers and directs you to the contact page with a button. | Lisa | 07.11.22
contact.html | Gives you contact information to the workshop helpers. Includes a form where you can send a message. | Michelle | 07.11.22
gallery.html | A gallery with old projects. “Add new project” button at the top. Form for adding new project appears as a pop-up. | Emma | 07.11.22
Images | Need pictures of old projects. | Sigrid | 01.11.22
dropDownMenu.js | A javascript that shows a drop down menu to mobile users with the pages you can visit. | Mari | 07.11.22
popUp.js | A javascript that gives the user a chance to add extra information after pressing the buttons “add project” and “book now!” | Lisa | 07.11.22
formValidation.js | A JavaSctipt that validates the information in the forms the user fills out and makes sure no forms are submitted without the required information. | Michelle | 07.11.22
rollOverMenu.js | a description/a color of/on the buttons you are hovering over | Emma | 07.11.22
style.css | The code that describes the website’s look. | All | 07.11.22
User testing: | We have to test our website on people and fix the mistakes | All | 17.11.22