# EA Project

## Developing a Dynamic Website

### Module Intended Learning Outcome

You will learn the following skills with this assignment (MILO):

- Design websites with appropriate design factors for presenting information effectively and attractively;
- Set up and manipulate web server and database for web applications;
- Create static websites with integrated use of multimedia and interactive elements; and
- Build dynamic websites with scripting language connected to database;

#### Task Descriptions

#### Tasks

You are required to plan, design and develop a website with at least the following features:

- Webpages presenting information with interactive or multimedia elements
- Interactive functionalities with database operations (CRUD: create, read, update & delete)

#### Topic

Select a project nature of one of these or choose a custom topic:

- E-commerce website
  - e.g. provide Shopping Cart, Check-out, Billing, etc. for any product or services
- Content Management System
  - e.g. for employees, buyers/customers functions on company website for any SME (Small & Medium
    Enterprises)
- Digital Library System
  - e.g. Similar to Library Booking System
- Any web application (Should be approved by Instructor)
  - e.g. by using Google Maps API or any 3rd party API

#### Deliverables & Required Components

- A website
- Design and development progress

#### Design & Development Progress

You are recommend to finish the project in 4 stages:

- Research
- Site planning & Task allocation
- Screen design & Branding Design (Site Logo, landing page, sliders, etc.)
- Implementation (Front-end & back-end, the students need to setup the web server and any related components for the project)

#### Assignment Type Group Project, maximum 4 student per group

Submission 15-min In-class demonstration & Digital files to Moodle
Weight 50% of total module marks, EA.

---

Design & Development Progress

You are recommend to finish the project in 4 stages:

1. Research
1. Site planning & Task allocation
1. Screen design & Branding Design (Site Logo, landing page, sliders, etc.)
1. Implementation (Front-end & back-end, the students need to setup the web server and any related components for the project)

#### Stage 1 - Research (Individual)

**Required Components**

- Each team member needed to study at least 1 existing reference.

  - Create a 1-2 page presentation-formatted for each sample to explain the strength and the weakness of
    the website.
  - Word count: 50 - 100

- You may analyse in the following aspects:

  - Why do they design the web page like that?
  - What’s the mood?
  - Who are the target audience?
  - What’s feeling about their brand?
  - Does the design fit the business itself? Why?
  - What features you will put in your own web design.

#### Stage 2 - Site Planning & Task allocation (Group)

Design the website structure.

Based on the content, the website should have multiple pages. Divide the information into section and think about the connections of them.

**Required Components**

- A site structure map

  - The site map should show the whole structure of your website.
    - The division of information and the hyperlink between pages.
  - The whole scale of the website should contain at least 12-20 pages including all subpages (depends on the group size)

    - Each student is required to develop at least 4 pages.
    - Content size of 1 page: ~1200px height

      - If you are design a single page website, you have to ensure the amount of content is similar to the multi-page site requirements.

  - The depth of the website should be at least 3 levels.
  - Identify the navigation system

- Media elements

  - Identify the text & multimedia elements on each page. - Think about what kinds of media elements you are going to use for each page, text, images, animations, sound or video.
  - You need to start the content text writing and also the footage collections.

- Database design

  - Determine tables and individual fields
    - Determine precisely what tables the database will contain and the field that each table should have.

- Task allocation

  - With the whole structure and media elements plan, you can easily estimate the workload for different part, so you should also submit a table to show the task allocation.

#### Stage 3 - Screens Design (Group)

Start the visual design.

Based on the structure designed on the previous stage, you may start design the placement of information & adding style to them.

**Required Components**

- Wireframes for your own pages

  - Create wireframes for your own pages that clearly show the layout of your webpages.

    - Apply the design principles such as balance, rhythms, typography, consistence, white space,
      margins etc. to make sure the website is effectively communicate with the audience.

    - Clearly identify the priority of information on each page.

    - The wireframe of the whole website must be consistence.
      - Layouts and grids
      - Different viewport size

- Branding

  - Create a branding guideline for the website & decorating it.

  - You may consider the following aspects:
    - What kind of website it is?
    - The target audience.
    - The mood and emotion. How are the color scheme and the images?
    - The typeface for hierarchy and readability.
    - What’s the feeling about the business brand?
    - Does your design fit the business?
    - Features that you’ve inherit from the reference in your research?
  - Your branding guideline may contain the following items:
    - Overview of brand, including history, vision and personality
    - Logo specifications, Fonts and Typography, Colors, Images, Text and Tone, Design layouts and grids
    - Screen mockups of your rules

#### Stage 4 - Implementation (Group)

Implement the designs into an interactive website.

**Required Components**

- Complete front-end website

  - Well file construction
    - The first page of your website must be index.html
    - Using external style sheet
    - 3rd party plugins, stylesheets & web fonts should be loaded locally
  - With interactive elements
    - Mouse events, CSS transition, Javascript based interaction …
  - Multimedia elements
    - Video and audio will be a bonus

- Back-end and server-side components
  - Server-side logics
    - Connecting and operating the CURD of database
    - Generating dynamic contents for front-end webpages

#### Submission

- In-class Demonstration

  - Explain the whole design process of the project and the design decisions
  - 15-min

- Your should submit a `*.zip` file contains all the materials of your website, presentation & design progress

  - Implementation (all components of your website)
    - A dynamic site is expected
    - Short video-demo of all the website features.
    - Before you submit your files, please check the following: - Proper file types used - Page at correct URL & All links work - Navigation is functional, consistent and clear - All pages are uniquely titled - CSS pages validate

- Design progress

  - All the materials through the projects, for example:
    - Research
    - Site planning & Task allocation
    - Screen design & Branding Design
    - Design of the back-end (eg. Database design)

- Rename the file with the following naming scheme:
  - `GpNumber_IT114212_1A/B_Project.pdf`

#### Assessment Criteria

| Component               | Weight | Description                                                                                                                                                        |
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Technical Skills        | 30%    | The outstanding function and dynamic features in your website for navigation. Programming techniques, use of APIs, database, browser scripts, server scripts, etc. |
| Creativity & Aesthetics | 30%    | You have considered the graphic design, artistic feeling and use creative method to present your idea.                                                             |
| Production Process      | 20%    | All the production process in between such as the sitemap, wireframe, layout design etc                                                                            |
| Usability               | 10%    | User friendly interface, is the navigation easy to use?                                                                                                            |
| Presentation            | 10%    | Verbal report of the whole project at the final phase. The presentation skill such as volume, eye contact, presentation content.                                   |

- The final redesign should be properly displayed in different modern browsers.
  - Apple Safari
  - Google Chrome
  - Microsoft Edge
  - Mozilla Firefox