YAP Model agency website

Yang Li
3 min readDec 19, 2018

--

1.Why do I choose to design a model agency website?

Four years ago, due to the rapid development of China’s entertainment industry, I started my first own business with my friends about models. Unfortunately, after six months of operation, my company went bankrupt under some irresistible factors. The failure was a massive blow to me. For a while, I felled into a deep depression and even thought about suicide. Thanks to my family who supported me a lot for helping me through that difficult time. But even I recovered from the pain, for a long time, I still didn’t want to recall that memory and always hope to put that time into the memory black hole. After four years of growth, I came to TC. Now I am willing to recall that time and appreciate that experience ,which taught me a lot and helped me to become a better and stronger person. So I decided to design a model company website, once again facing the darkest time in my life, but this time thanks to the failure of the past to make me better today.

What does not kill you make you stronger!!!

2.Design idear

It is undeniable that I used to hire a designer form Taobao to design my previous website, but after studying of this semester, I found out that he just used the Wix template and it was kind of over-design cause he tried to put all functions in one page.Before designing of my website, I browsed many famous model agency websites and found that one common feature from all top model agency websites is that the they try to design their homepage as simple as possible and only highlights the photos of every model. My design basically according to this idea:Simple, elegant but at same time eye-catching.

3.The process of design my model agency website

First,I found that reading code written by some great programmers was beneficial in improving my ability to write code, so I saw a lot of very meaningful code on the Codepen and used it for my purposes.Second,I think the Bootstrap template is the best library for designing a model website because it not only has clear sections but also can edit colors and styles according to your preference.But finally I was surprised to find that the library that actually helping your website become more eye-catching is not a Bootstrap but jquery. So I begin my self-learning jquery journey and struggled a lot!

1)youtube backgroud

youtube backgroud

2)Carousel

Instead of using css I used a jquery called SLICK to make more fancy carousel but then i find a black magic called Swiper which don't even need jquery to make a fancy carousel,anyway I use slick.

3)Model filter

https://isotope.metafizzy.co/

4)A touchable jQuery lightbox

Thanks Zhenzhen and Shuai ‘s help when I am designing this website,my little suggestion is that could we learn more about ES6 next semaster?Cause all Jquery example wirtten in ES6 but I don't understand all of them,so sometimes I can only cop and this made me feel little frustrated but I try my best to understand them.

--

--