Goal
Goal
Gain hands-on experience in web Design developing a website to sell worms for compost for the Vancouver metropolitan area.
Gain hands-on experience in web Design developing a website to sell worms for compost for the Vancouver metropolitan area.
Research
Research
To understand the current market in the metropolitan area I looked on Google, Craiglist and Google Maps.
To understand the current market in the metropolitan area I looked on Google, Craiglist and Google Maps.
What I found is that the main way of distribution for most of the websites is through shipping and their shipping range is all over Canada.
What I found is that the main way of distribution for most of the websites is through shipping and their shipping range is all over Canada.
Also I found they offer more items and services than just worms.
Also I found they offer more items and services than just worms.
Process
Process
With the information gathered, I decide to focus on the existent product to start the wbsite.
With the information gathered, I decide to focus on the existent product to start the wbsite.
I dive straight into code on HTML and CSS. The process wasn't smooth and I was not fully satisfied with the outcome.
I dive straight into code on HTML and CSS. The process wasn't smooth and I was not fully satisfied with the outcome.
I started again this time with my designer skills✨ I begin to visualize the website doing sketches on paper, then I made the prototype on Figma following the Google material design guidelines.
I started again this time with my designer skills✨ I begin to visualize the website doing sketches on paper, then I made the prototype on Figma following the Google material design guidelines.
The image was generated using the text-to-image ai model Dall-E and the scripts where made with ChatGPT help.
The image was generated using the text-to-image ai model Dall-E and the scripts where made with ChatGPT help.
In the process I found a plugin for Figma, that can translate the prototype to Framer; a responsive website making the launch of vermicompost.com faster to test with the public.
In the process I found a plugin for Figma, that can translate the prototype to Framer; a responsive website making the launch of vermicompost.com faster to test with the public.
Conclusion
Conclusion
With this project I put in practice my coding skills, HTML and CSS from scratch. Now I'm aware of how to work a website idea.
It helped me on my problem-solving skills and how to adapt my tools to get a project done.
It also helped me using Figma and Framer to improve my final product and gave insight on the constant evolving design tools
With this project I put in practice my coding skills, HTML and CSS from scratch. Now I'm aware of how to work a website idea.
It helped me on my problem-solving skills and how to adapt my tools to get a project done.
It also helped me using Figma and Framer to improve my final product and gave insight on the constant evolving design tools
While Framer offers interactive design to create websites without much coding skills, the fact that the domain still has .framer and the final product has a "made in framer" button makes me want to continue on my web designer path to create cleaner websites without displaying a button from a third-party platform.
While Framer offers interactive design to create websites without much coding skills, the fact that the domain still has .framer and the final product has a "made in framer" button makes me want to continue on my web designer path to create cleaner websites without displaying a button from a third-party platform.