The original purpose of this website was to get to know me, "Yifan Cai," better. In terms of site planning, I began by browsing numerous websites for inspiration, for example, adidas.ca, slite.com, and aprilford.com. I began by deciding on the content of my pages and listing them on an information architecture plan. Then I used my iPad's sketching feature to create a scribbled wireframe drawing, which I then converted into a formal wireframe model in Adobe XD. Following the completion of the wireframe, I followed the WCAG 2.0 guidelines to create my graphic design prototype, ensuring that my web pages were accessible to anyone.

For the webpage, I focused on the simplicity of the design layout and I decided to use different percentages of colors in the same color palette to maintain the unified nature of the page's colors. I used the same basic layout for each page, such as logo position, spotlight position, and navigation bar style, but the content layout was different for each page, which kept the uniformity of each page and added variety to the page. The main color of the page is a blue color close to gray, while the font of the page is a blue color close to white.

When designing the information architecture of the web pages, I first decided what content the pages needed to contain, and then I decided on the number of pages. The web page contains Home, which is used as the home page of the web industry. The About page is used to introduce myself, and the Resume page is used to introduce myself more formally and contain more detailed information. The Gallery page contains a well-designed gallery. The Contact page is for users to contact me quickly, and the Process page is to show users my web design process. In addition, I designed the Term of use and privacy policy pages to ensure the legitimacy of my site.

After designing the information architecture, I decided on the Navigation map of the webpage. The global navigation of the webpage contains Home, About, Resume, Gallery, Contact, and Process, but I think this is too monotonous, so I chose to use Start Here, About Me, My Resume, Live Gallery, Contact Me, and Web Process instead of the old global navigation tabs. Footer Navigation includes Term of use, Privacy policy, About me, and Contact me. For the sake of simplicity, I did not use Local Navigation, but I added a number of Associative Navigation to make it easier for users to access outside of this site.

I used Adobe XD to build the wireframes for my project. Beforehand, I spent a significant amount of time sketching on my iPad. After that, I chose the sketches with which I was most pleased and turned them into a visual wireframe. My ability to decide on the structure of the online content was facilitated by the use of wireframes. In addition to that, I made use of a few of Brown's 8 principles, such as the concept of disclosure and the principle of multiple classification.

After completing my Wireframing, I started the High Fidelity Prototype. I started by deciding on the main color of the web, a hazy blue, which reveals a light blue color that conjures up images of sky and snow. I used a different percentage of the same color as the main color as the background color of my navigation bar, so that the user can easily understand at a glance which is the content and which is the navigation bar. I chose images and videos that are related to the content, so that users can understand the general All the images are related to the content, so that users can understand the general content of each phrase more quickly when reviewing it.

The logo, as the iconic image of a web page, is certainly indispensable. I created my logo using Adobe AI and converted the image to SVG format so that no matter how many times the user zooms in on my logo, the image will remain the same pixels. I chose to use the Initial of my name, E for Evan and C for Cai, as the main body of the logo, and underneath that I put the Initial of my English and Chinese names: ECYF. The colors of the logo are a gradient of purple and blue, similar to the colors near sunset.

The Images are created by my own, such as Images for Spotlights, Images of My self, and Images in the Live Gallery Pages. All The Images are related to the content. The videos in my websites are also created by my own, I uploaded to the Youtube, and then embeded into my website.