web final concept

Concept statement

I’m planning to make an information website about the story of different kinds sneakers. The reason why I want to make this website is that I want to popularize some interesting stories and culture of sneakers for attracting more people to the family of sneakers. What’s more, I want to build up a sneakers community that people can communicate with others who have the same hobby.

Why am I interested

Sneakers is becoming more and more popular. But actually, sneakers are not just sneakers, they represent a culture. Some people wear sneakers because they are comfortable, but some people wear sneakers just because they saw other people did. The culture and the story in the sneakers are very interesting. I believe that if those people know more about the story of the shoes they wear, they will fall in love with the sneakers, not just follow a fashion tendency. I also believe it will be a good platform for the people who love sneakers to communicate with each other.

My public

Young people who love fashion.

Difference between my website and others

In my website, you can not only see the story of different kinds of sneakers, you can also share your story about your sneakers to others. It will be a good platform for you to communicate with other people who have the same hobby.



Web final concept

Concept statement

I’m going to make an introduction website of one of my previous product design project which contains 9 different kinds of Chinese traditional tea. I wanna let people know more about teas and their origins through illustrations and videos.

Why am I interested

Drinking tea is one of my grandpa’s favourite during his spare time, but I was lack of passion for a long time until one day I heard of a song from my favourite pop star, Jay Chou. The song was about an ancient scholar who wrote the first book of Chinese tea, and suddenly I got interested in the tea culture.

According to research and interviews, I found that only a few of the youngs know about Chinese tea. But almost no one knows exactly about the classification, history, drinking methods or taste of different kind of tea. What I wanted was to make people interested in tea culture and spread some less popular knowledge of Chinese tea to my users.

My public

Young generations who want to know more about tea culture.


I combine the elements TEA and MOUNTAIN together to display this product from a different view. A dynamic website gives the possibilities that people can learn about the culture and the product through interactive, interesting ways.

Web Final Concept

For my final, I’ve decided to mock up a dashboard of some sort that will display an overview of a DT students’ day. It will be built using jQuery and maybe P5. I’m interested in doing this because I started using the Momentum Chrome extension and would like it to be more personalized for my own use. My public is the DT student body as I’m sure they would easily grasp the concept I’m trying to create. If things were to go well it could expand to other students as well.


Referents: https://momentumdash.com/


The project is different from others because this one is based more so on school whereas others are vague and open. I’ve included the wireframes below:

Challenges of Midterm Project – Web

My main challenges were two fold, and probably related: Understanding positioning and keeping my code organized. I could probably have figured out my positioning trouble if I had organized my code better. Similarly, I could never get my margins/padding/borders to work like I expected them too – they always ruined my positioning/alignment. I think my plan for the final is to work through my wire frame in more detail assigning vw/vh values and margin values so that everything adds up and lines up and it will be less overwhelming when things start to not work because I will have a written plan.

Mid-term Website Summary

link: https://github.com/iristy318/web-midterm-Iris.git






















  • two divs half & half
  • positioning
  • id & class
  • composing

Future Steps:

  • Add detailed page of each project
  • Promote the transition effect
  • Think of better ways to compose
  • Add background sound

Web Midterm


Here is the link to my github for the web midterm: https://github.com/jwoa/WebMidterm

A link to the slides: https://docs.google.com/presentation/d/1aj_xZuH29QgPTMwDf4Ki3lLi7BCyZD6S4eFcBKWQWjc/edit?usp=sharing