222 lines
8.8 KiB
Markdown
222 lines
8.8 KiB
Markdown
# 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
|