JIANFENG's Portfolio – 健锋的作品集 - Web Front-end UX Design and Development Coursework 2018 前端UED设计及样式开发作业

Web Front-end UX Design and Development Coursework 2018 前端UED设计及样式开发作业


This is an University coursework to design a steaming web product including product design,  competing product analysis, UI/UX design and front-end development. The result is a demo product for cinema website names “POPCORN CINEMA”. This project including team management, brand design, interaction and visual design, Web front-end and back-end development, website admin page user experience design.

这是一个学校作业,要求为从零设计一个流媒体网站产品,内容包括产品设计,竞品分析,用户体验设计(线稿),用户界面设计和前端开发。最终产品为一个仅包含前端的产品样品。作品是一个电影院网站,名称为“POPCORN CINEMA”。本次作业包含项目和团队管理,品牌设计,用户体验交互设计,用户界面设计,Web前后端开发,网站后台交互设计。

产品原型体验 Product Demo (Watch the video if demo down):

源代码 Sources Code:

====================================================================

DEMO Video (Desktop):

DEMO Video (Mobile):


作业提交时间CourseWork Time: 3nd year 大二(3/3)

团队中工作 Job in the team: Product Manager, UX/UI Designer(Including Logo and Icon design), Web developer. 

用户体验设计 UX DESIGN: 所有页面 ALL PAGE

网页界面设计 UI DESIGN: 所有页面 ALL PAGE

动画效果设计 ANIMATION DESIGN: 所有页面 ALL PAGE

网页前端开发 WEB DEVELOPER: 所有页面 ALL PAGE

PPT 设计 Presentation Design: 一般页面 1/2 PAGE,

协作设计师 Collaborators: Liam White

视觉走查 Design Reviewer: Liam White

技术细节 Technical Detail:

Font-end Framework: Vue.js / jQuery

Back-end Detail: php-built json format API, mysql database

Admin Page Detail : Vue.js (PWA & Single-Page Website)

====================================================================

查看完整产品设计开发文档 View Full Product Design and Development Documentation:

以下为产品/设计/开发文档 Product DEMO still in process, the following content are some part of the documentation.

Project Management:

User Experience Design:

Brand Design:

Colour and typeface:

Visual UI Design:

Admin Page Design:

Design principle:

Technique Detail:

For more contents including competing product analysis, please view completed PDF file in under: