Green Plant Swap
Plants and Workshops that You'll Actually Love
Web Design/Development Project
Role: Designer/Developer
Collaborators: Xutong Chen, Siyun Pan
Duration: 1 month (Octuber 2022 - December 2022)
Tools Used:
-
Figma (Prototyping)
-
HTML/CSS/JavaScript (Development)
-
GitKraken (Group work Git Tool)
Project link: https://greenplantswap.netlify.app/
Project Description
The Green Plant Swap is a virtual business company website, developed and designed as part of the class IAT 339: Web Design and Development.
The Green Plant Swap website includes a product list, product information, information about plants, as well as a customer feedback page and payment page. The website includes responsive design, ensuring a positive browsing experience for users on different devices.
Through this project, I learned more about web design and how information can be structured for ease of access and formatted for readability.
Disclaimer: I do not own any of the images and most of the content on the website. For a full list of references, please visit this reference page.
Sample screenshot of ProductList page. Design made by Xutong Chen
Planning & Challenges
During the planning process, each team member created draft mockups to visualize their individual design approach for the website. We then combined various elements of our respective drafts to create a cohesive design for the site. In my initial mockups, I incorporated a cool color palette with white and light grey backgrounds to improve readability and ease of access.
As our company specializes in the sale of greenery, Xutong proposed a thematically consistent beige background, which was unanimously liked by several students during our testing process. However, the team ultimately decided to incorporate a mix of Xutong's and my designs for the website, as Xutong's color palette and content sectioning were visually appealing, and my mockups provided an unique layout and stylistic elements to create a stonger branding style.
My personal draft of the home page
My personal draft of second home page
The group's final draft of the home page!
Process
Consideing about this is a short term project, I suggested to use GitKraken, a software that facilitates team collaboration during the development process. I provided extra technical training to the other two members on how to use the program effectively for simultaneous team development, which resulted in reduced work time and ensured detailed documentation of our work progress.
Sample screenshot of GitKraken's teamwork documentation. It shows the recorded information related to working collaboratively.
Sample HTML from home page. Shown is the HTML for the detail information, near the middle of the page past the content.
Takeaways
In creating this website, I was able to learn the basics of web development and design, how to structure content in a website for informational purposes, and how to use the development app to cooperate with group members. Using these newfound skills, I hope to further hone my skills in web design and development to create websites for a variety of different purposes.
