The guide framework of the website I designed is "portfolio", which can be explained as uploading and structuring my experience and interest in a professional form. Therefore, my rationale is creating a simple, clear and professional webpage to show my interests and characteristics. It will let others know more information, including my working experience and skills about me. This will also be useful for me to apply a job in the future, if I want to get a web design job.
(First, the design framework is based on my previous lab and bootstrap.)
For the perspective of mood boards, most of them are referenced from my previous lab. For example, my Gallery page, since gallery is the page, which should contain amount of pictures, I decide to tile all my photos and productions neatly on the web page. The reader will see the photo descriptions after they click on the image. For the other pages, the image arragement should near my name, since they are used to introduce myself. Each of my paragraph is followed a subtitle/title, which is to explain or provide more information around the title.
For the perspective of colour palettes, I choose blue as my main color. Therefore, all of colors I put on my webpage is around the color blue. It can make sure that I have a clear and neat page. I use three different blue color on my technical skills on Resume page is because they have different length. I have different mastery of these skills.
For the perspective of typographic, I decide to put my important content, including my name and each webpage's title, as heading. It will catch audiences' eyes in a short time. Display heading helps decide my title's font size. It can let my heading stand out. Descripton list alignment is quite useful, when I was designing "Resume.html", especially on the part of technical skills. List unstyled help remove the default list-style, which means I can put less content on my stylesheet.
1. Gallery1.jpg, take by Yiwen Ye, 2018
2. Gallery2.jpg, take by Yiwen Ye, 2019
3. yyw_h.jpg, take by Yiwen Ye's Friend(Yumi), 2019
4. yyw_r.jpg, take by Yiwen's friend (Patricia Ran), 2019
5. resume1.gif, retrieved by https://www.pinterest.ca/pin/95983035782683812/
6. contact.gif, retrieved by https://dribbble.com/shots/3588374-Contact-the-Narwin-V2
7. book-notebook-blue-stool.jpg, retrieved by https://www.wallpaperflare.com/blue-notebooks-and-a-camera-on-a-blue-wooden-stool-diary-seat-wallpaper-wkdld
8. Gatty_M1.JPG, take by Yiwen Ye, 2018
9. Gatty_M2.JPG, take by Yiwen Ye, 2018
10.St.Monica1.JPG, take by Yiwen Ye, 2018
11.St.Monica2.JPG, take by Yiwen Ye, 2018
12.St.Monica3.JPG, take by Yiwen Ye, 2018
13.UniversalS1.JPG, take by Yiwen Ye, 2018
14.UniversalS2.JPG, take by Yiwen Ye, 2018
15.UniversalS3.JPG, take by Yiwen Ye, 2018
16.UniversalS4.JPG, take by Yiwen Ye, 2018
1.Yiwen Ye.(2018) Animation Mix Cut 1.mp4
2.Yiwen Ye.(2019) Vlog_Peru.mp4
3.Yiwen Ye.(2019) Vlog_Suzhou_SH.mp4