jasonw123456784/task1-quote/digest.md

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
2. Site planning & Task allocation
3. Screen design & Branding Design (Site Logo, landing page, sliders, etc.)
4. 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