Hobby is a fictional recreational directory. It is a comprehensive website dedicated to an array of hobbies. It is open to complete beginners, seasoned enthusiasts and associated hobby organisations. This directory is a gateway to discovering old and new hobbies alike, specific to your locality & community.
The main purpose of this website is to easily connect hobbyists with other like-minded individuals and facilitators. It allows users to gain quick access to pastimes of interest, and promotes more nuanced hobbies. It also highlights business owners, facilitators and clubs/organisations with a new, collective online presence.
| User Type | Overview | Specific Goals |
|---|---|---|
| Client | Create a website directory that connects hobbyists and facilitators alike. I want to ensure that the platform provides an enriching and engaging experience for users, empowering them to discover, explore, and connect with various hobbies and interests. | - I want to be able to view the site on a range of device sizes. - I want to introduce all user types to the concept. - I want to collect user data & create a point of direct contacct with all user types in by signing up to a newsletter. - I want to direct visitors to our socials. |
| Hobbyist | As a hobby enthusiast, I want to explore a comprehensive website directory dedicated to hobbies, so that I can discover new passions, connect with like-minded individuals, and access resources to enhance my hobby experience. | - I want to find out what Hobby is, and if it has the activity that I'm looking for. - I want a website that's easy to navigate. - I want to find the information I'm looking for with ease. - I want to be able to find and follow Hobby on socials. |
| Facilitator | I want to collaborate with industry partners, enrich my business/organisation and reach new audiences. | - I want to find out what Hobby is, and if it a good fit for my business/organisation. - I want a website that's easy to navigate. - I want to connect with the website owner. |
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 colour for this website. I wanted it to reflect the positive association that can be had with hobbies. I wanted it to be playful for children and adults alike; perhaps even evoke a sense of nostalgia for older users.
The colour scheme of the website illustrates variety and fun through the colour palette. 100s of Thousands were the inspiration for this palette of choice.
This palette holds the pastel colours found in the hero image. They are used throughout the website where a solid colour is needed to make wording stand out from the hero image behind it. Many of the colours were extracted from this image and are accented throughout the website.
This palette extracts the more vibrant colours 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.
- 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".
- 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.
I designed this favicon especially for the webpage using Canva. I chose an illustrated 'h'. This was the best way to reflect the nature of the website. The paintbrush icon used in the header was also a contender (along with other hobby - related instruments), however it did not translate as clearly on the broswer tab compared to lettering. The 'h' has an illustrative quality to it, again reflecting the theme and typographies used throughout.
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 |
|---|---|---|---|
| Navigation Bar | - Visible on all pages. - Kept white so as to remain clear. - The favicon styles are refelcted in the header. - There is a paintbrush 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 sprinkles with other information being layered on top. | - 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 |
|---|---|
| 404 Page | Add custom 404 page. |
| Blog Page | A hobby team member tries a new hobby each week at one of the participating associations. |
| Login Page | - Participating organisations can list information about their business. - Users of the website can write reviews about the businesses listed & contribute to the community forum. |
| Community Forum | Allowing users to connect & share experiences. |
| E-commerce | Integrating e-commerce to the website where businesses can opt-in to sell from the website if they do not have one themselves. |
| App Devlopment | Create an app version of the website that makes access more innovative for all user types. |
The entire website was designed with a responsive-first ethos in mind. Some best practices implemented were:
- 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.
- 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.
- Favicon.io - To convert favicon image into suitable sizes.
- Font Awesome - To create paintbrush icon in header.
- 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.
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 / hobby.
- 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 Hobby repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, Kate McGuane / hobby.
- 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 Hobby repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, Kate McGuane / hobby.
- 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.
-
First Edition:
- The general format of my markup is based on the readme-examples work by Kera Cudmore.
-
Second Edition:
- I formatted some of my README based off of BookWorm, again by Kera Cudmore.
- I based my testing documentation off of Animal Shelter from my mentor, Juliia Konovalova.
- I followed the format of the Love Running Walkthrough Project. This was to ensure best practice in creating my first interactive Front-End web application.
- The paragraph on the 'About' page (index.html), was written using Chat GPT.
- Any other content, I wrote the content for the website myself.
- 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.
- A huge thank you to my mentor, Alex, who helped me resolve any major issues on my 1st ed.
- Thank you to my mentor Juliia. Your guidance was crutial and made the objectives more concise.
- To Kera Cudmore, for providing astounding documentation. All of the repositories are so accessible for newbies and I would have been lost without them.
- My dear friend, Sarah, you are a wonderful teacher, gave valauble insight & resources.
- My partner, Mikhail, for keeping me well fed and hydrated throughout this project.
- To my cohort leader, Laura, who provided a sense of calm when needed most. Your guidance gave me the reassurance I needed.
Developed by Kate McGuane for Code Institute Portfolio Project 1: HTML & CSS Essesntials, 2024