The target audience for this E-commerce platform is for those looking to either purchase a handmade pottery product or parttake in pottery classes and/or workshops. This website in particular is directed at adults looking to purchase a unique, and handcrafted gift (for themselves or soemone else), in addition to adults looking to parttake in pottery as a hobby on a regular or casual basis. The aim is to connect the products with the services offered and convert both consumer types to the aforementioned product(s) or service(s).
As a first time visitor I want to:
- easily understand what the website is about, so that I can quickly decide if the content is relevant to me.
- navigate the site with ease.
- learn more about what products and services are available and if they apply to me.
- register an account.
- learn more about pottery.
As a return visitor I want to:
- quickly find new products/services since my last visit.
- easily filter products/services to find those relevant to what I'm looking for.
- purchase a product/service with ease.
- safely purchase a product/service.
- receive a confirmation email to say that my transaction was completed safely and the details of my purchase.
As site admin I want to:
- enhance user experience.
- grow and engage the audience.
- convert site visits to sales.
- easily manage customer orders and fulfill them with ease.
SAMPLE The website is designed with three separate pages. This is to ensure ease of use, and for the length of each page to remain concise on a mobile device. It has an intuitive interface with clear navigation. This is emphasised with colour and imagery, allowing for quick access to facilities and respective socials.
There is a great emphasis on ...... for this website. I wanted it to reflect...
The colour scheme of the website illustrates...
This palette holds...Many of the colours were extracted from this image and are accented throughout the website.
This palette extracts......found in the hero image. It is used primarily for defining elements such as headings, areas of importance or quick reference.
Both colour palettes were created using the Coolors website.
SAMPLE
- This font has an illustration-type quality to it, which reflects the theme of the website. It adds some fun, looks hand-drawn and mirrors the chosen style of favicon. It is illustrative, yet has a structural integrity and readability to it. Furthermore, it effortlessly reflects what the website is about. This is primarily used for the website heading "Hobby".
SAMPLE
- This is a legible, sans serif font with many varieties of weight to choose from. It is versatile and accomodates all structural styling needs. It is a very accessible font, and easy to read. This is used for more word heavy content sections of the website.
Both fonts were sourced from Google Fonts.
All images were source from Raw Pixel.
Talk about favicon design choices.
Wireframes were created for desktop (1920px x 1080px), iPad (768px x 1024px) and iPhone 12Pro (436px x 867px).
| Features & Pages | Existing Features | Future Implementations | Screenshots |
|---|---|---|---|
| SAMPLE | |||
| Navigation Bar | - Visible on all pages. - Kept white so as to remain clear. - The favicon styles are refelcted in the header. - There is a ...... icon to give an idea as to what the page is about. - Has a toggle feature that links to each page when using smaller devices. |
--- |  |
| Hero Image | - Each page features a hero image of XXX. | - Experiment with more options. |     |
| Colour | - Block colours are used where there's writing so they do not get lost in the sprinkles background. | --- |     |
| Footer | - A focal point that stands out clearly with a white background. This is carried throughout each page as it is essential to create a strong social following as the concept of the website is community-based. | - Expand footer to include contact details, T&Cs, Privacy Policy etc. |  |
| About | General landing page that describes what the website & what it is about. | - Add an image carousel. - Add a map listing all hobbies in the area. - Add a preview section of reviews from former clientel. |
 |
| Discover | This is the main directory page. It features a gallery of the hobbies that the website is connected to (actual links to be implemented at later stage of development). They are displayed in rows of three on desktop and collapse responsively with decreasing screen size. This page illustrates what is available through the website with simple visual cues. | Once data is collected from those wanting to promote their business, club or facility it could be utilized across the website. Each hobby displayed would connect to the organisations offering those services. This would also include: - Links to their socials, webpages, features and contact details. - Add filter column to the directory with features such as "Onsite Parking", "Wheelchair Accessible" and "Sensory Friendly" to name a few. This way people can find the best service to suit their essential needs. |
 |
| Sign Up | Features a one-way means of contact. This would meet the needs of the website on it's first phase as a relatively static website. The purpose of this feature is to collect potential customer and facilitator data. | Use the page to promote new & upcoming developments. | |
| Response | - Only activated when the user clicks the 'Subscribe' button for the signup page. It is there to inform the user they have been successful with their subscription. - Home button below notifcation to redirect users. |
--- | |
| Feature | Description |
|---|
The entire website was designed with a responsive-first ethos in mind. Some best practices implemented were: SAMPLE
- Using semantic HTML.
- Good used of colour contrast throughout the website.
- Using alt attributes to create acurate descriptions of each image.
- All pages are responsive for various media screen sizes.
- Django Documentation was used to consult the structure of the code and ensure the most up to date versions were applied.
The following is a comprehnsive list of useful tools you can use for a project like this:
- Am I Responsive? - To demonstrate the website on a range of devices.
- Balsamiq - To create wireframes.
- Canva - To create favicon image.
- Chat GPT - To create written content & general consultation when troubleshooting.
- Codeanywhere - Initial IDE used; transferred to VS Code midway.
- Coolors - To create colour palettes.
- Diffchecker - To compare segments of code.
- Favicon.io - To convert favicon image into suitable sizes.
- Font Awesome - To source any icons used.
- GitHub - To store associated files & developments of the website.
- Google Chrome Dev Tools - For troubleshooting and testing features, styling and responsiveness.
- Google Fonts - To extract fonts for the website.
- Raw Pixel - For images.
- VS Code - Primary IDE used.
Fonts
The site was deployed early using Github Pages. The is how the live site was deployed:
- Log in (or sign up) to Github.
- Find the repository for this project, Kate McGuane / Website_Name.
- Click on the Settings link.
- Click on the Pages link in the left hand side navigation bar.
- In the Source section, choose main from the drop down select branch menu. Select Root from the drop down select folder menu.
- Click Save. Your live Github Pages site is now deployed at the URL shown.
To fork the Website_Name repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, Kate McGuane / Website_Name.
- Click the Fork button in the top right corner. This action will create a copy of the repository under your GitHub account.
To clone the Website_Name repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, Kate McGuane / Website_Name.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Please see TESTING.md for a comprehensive list of tests performed.
The markup outline for this project was taken from the following README files:
- CI Full Template was used for creating the initial repository.
- Did you follow a video tutorial?
- Was there a template you used?
Favicon Code
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
- Did you write the content yourself?
- Did you source the content from ChatGPT?
- Did you use another website as a reference point?
SAMPLE
- Canva was used for creating the favicon. Their selection of artworks had the best variety & compatibility for application as a favicon.
- Raw Pixel was used for sourcing images as it had the best selection available in one place.
- Thank you to my mentor, cohort leader & CI team for your support and understanding during this project.
- To Mikhail, thank you for your continued support.
Developed by Kate McGuane for Code Institute Portfolio Project 5: E-commerce Applications, 2024