WEBSITE DESIGN & DEVELOPMENT
The creation of fully-responsive and accessible websites, consisting of both individual and team projects.
1. REVOLUTION CHINESE YOYO
A website that I designed and developed for Revolution Chinese Yoyo, the Chinese yoyo team at the University of Michigan. Without much online presence, the website was designed to be a central, online hub for Revolution. The website features team information, performance photos and videos, links to social media, and a contact form.
Web Designer, Web Developer
Revolution Chinese Yoyo
October 2019 (2 weeks)
1. Accessibility - The website should be accessible to all users. For example, the website should function well with screen readers and all content should have sufficient color contrast. As a result, the website successfully passes the accessibility validators of W3C, WAVE, and axe. Other accessibility features are also included, such as hitting TAB to skip to the main content.
2. Responsiveness - The website and its content should be responsive, allowing the site to be accessible to users on all devices. To achieve this, different media queries were used for desktop, tablet, and mobile.
3. Upholds the brand - The website’s design and content should match with the brand of Revolution Chinese Yoyo. Not only does this include color schemes and typeface choices, but also the quirkiness of content.
1. Optimize images for web - With 30+ professional photos featured on the website, the site’s load time was extremely slow in the beginning. I later learned that these large images could be optimized for web using Photoshop.
2. Design the layout first - As the website requires multiple media queries to be responsive, it is important that the overall layout of the site is defined before any coding. To achieve this, I used CSS grid, allowing me to adjust the number of columns and rows for each media query. (And of course, always design mobile first.)
2. UMSI PROFESSOR PORTFOLIO
For a group project in SI 339 (Web Design, Development, and Accessibility), we redesigned and developed a portfolio website for an Assistant Professor at the University of Michigan School of Information. First, we identified problems with the current website, then proposed solutions to improve these shortcomings, collaboratively created sketches on Figma, and finally coded the new website.
Web Designer, Web Developer
Ceren Budak, UMSI Assistant Professor
Chelsea Ma, Noelle Enkema, Sydney Vollmar
Studying the original website, we identified 4 main issues that we would tackle with our redesign:
1. Lack of responsiveness - the website was purely static, consisting of the same exact screen regardless of the width of the viewing screen.
2. Lack of accessibility - key issues included the poor color contrast of text and the lack of hover states for the plethora of hyperlinks.
3. Poor design - this included inconsistent font sizes and alignment throughout the website. Additionally, the images featured on the “projects” page did not contribute to the website.
4. Poor user experience - parts of the website did not function how one would expect them to, confusing users. For example, clicking on the logo link in the navigation bar would not do anything.
1. Responsive Design - The website and its content should be responsive, allowing the site to be accessible to users on all devices. To achieve this, different media queries were used for desktop, tablet, and mobile.
2. Consistent Design - Color, typeface, margins, and UI elements should be consistent throughout the website. As a result, we defined these elements during the mockup phase, prior to any coding.
3. Continuity with current design - The redesigned website should remain familiar with users. Furthermore, it should not stray from the owner’s needs.
1. Coding collaboratively is not so easy - Our team had great teamwork, communicating well and dividing up responsibilities. Still, coding together with Github gave us many frustrating and time-consuming merge errors. In the end, we utilized Google drive in addition to Github. As such, I took charge of gathering the team’s changes and keeping the Github repository up to date.
2. Define the style guide - Before creating mockups of the website’s design on Figma, a style guide was created to determine colors and font sizes. This included font sizes for ‘h1’, ‘h2’, ‘h3’, and ‘p’ tags for all 3 media queries. Having these predefined styles allowed the coding process to be easier and more efficient.
Thanks for making it this far! Here's yet another fun fact about myself:
My favorite food is from the night markets of Taiwan - Stinky tofu