An introductory website aimed at informing the reader about the evolution and transition of Jiu-Jitsu throughout the world, and how anyone can start today!
Little Orgiami is designed to be a seemless flow of information for the reader to enjoy, understand, and use.
This is accomplished through three responsive HTML/CSS pages:
The index page contains demonstation videos, brief informative articles, and interactive elements that aim to inspire confidence in the user.
The history page utilises scroll animations to tell the story of Jui-Jitsu as it travelled from Japan through brazil to the rest of the world.
The contact page allows users to send a message through a bootstrap form in order to foster a community around Little Origami.
Two additional pages were added to increse the depth and flexability of the site.
The 404 page enabled the early deployment and review of the site. As content was updated so to were unfinished link that lead to the 404 page.
The confimation page adds depth to the form submission experience. Thanking the user for their input before returning them to Home Page completing their journey around the website.
The goal of the design for Little Origami was to be a balance between striking and elegent. Reflective of the current trends within the martial arts space.
Libral use of contrasting colours, with bold images caputes the striking element. While, the fonts and the flow and the flow of information showcase an elegent or refined aesthetic.
A trend among martial arts websites is to use red, black, and yellow on a white background. This is a nod to the white gui adorned by the different coloured belts within the sport. Grey and darker shades are generally thrown in to contast these colours. The effect is an overall refined but striking website; perfect for martial arts.
For this project, I chose to mostly follow this trend. As the colour palette for this website looks as follows:
I opted to use #212529 - Eerie Black for the background colour as it tied the website's logo, content, and design better than a lighter alternative.
The #FFFF00 - Yellow, FF0000 - Red, & #870000 - Dark red were all chosen to make the website as stiking as possible, which all were used in the creation of the logo and branding.
The colours were then used as follows:
-
#FFFF00 - Yellow was use for the all the links and primary headings.
-
#FF0000 - Red was used for all subheadings.
-
#870000 - Dark Red was used in combination with black as a gradient background colour, and hovered links.
-
#FFFFFF was used for the primary text to keep good contrast.
-
#000000 was used in certain instances when the background was a lighter colour.
For the two additional pages, I chose an alternative background to add some personallity into my project. As way of leaving my mark (a trademark) on the project.
The colours I used were applied as a 45° gradient and are as follows:
- #833AB4 - Grape
- #FD1D1D - Red
- #FCB045 - Orange (web)
The aim of the font and icons are to create a fluid reading experience. Roboto was great choice as for readability, as evidenced by being a consistent top trending font on google fonts store.
However, I've opt to make the headings in a more eastern style of type. The eastern style gives an impression of elegance, but also legitimacy. Legitimacy that can be traced back through tested history from today to in this case fudal Japan. Therefore, this is a very important consideration for the website.
All font and icons used are as follows:
-
Protest Revolution was used for the logo brand and primary headings.
-
Protest Strike was used for the subheadings.
-
Roboto was used for all the non-heading text.
-
Font Awesome icons were used throughout the site, such as the navigation icons in the header.
-
Bootstrap Native Font Stack was used as a back-up collection of font families.
-
Sans-Sarif was used as a final redundant font.
The Font Awesome icons were a great addition to the website adding an extra layer of refinement, especially using the east-asia-world icon for the history navigaiton link.
-
As a new site user, I would like to enjoy reading about my hobby, so that I can have a great day.
-
As a new site user, I would like to learn about Jui-Jitsu, so that I can have more confidence to start practicing.
-
As a new site user, I would like to find reputable content on Jui-Jitsu, so that I know what I'm learning is legitimate.
-
As a new site user, I would like to understand how I start doing this today, so that I can start today.
-
As a new site user, I would like the content to be accessible to me, so that I can enjoy my hobby.
-
As a returning site user, I would like to help contribute to the community, so that I can feel connected.
-
As a returning site user, I would like to keep finding new features and content, so that I can become more engaged.
-
As a returning site user, I would like to reliably see what I'm expecting, so that I can keep enjoying the content I've come to love.
To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes. I've used Balsamiq to design my site wireframes.
Click here to see the Mobile Wireframes
Home
History
Contact
Click here to see the Tablet Wireframes
Home
History
Contact
Click here to see the Desktop Wireframes
Home
History
Contact
-
Bootstrap 5 - Navigation bar
- An easy to use navigation menu, that gives user-friendly access to all the available content on the site. This benefits the user by respecting their time, and has an overall positive effect on their user experience.
-
Bootstrap 5 Carosuel - Hero Banner
- An introductory slideshow aimed at showcasing interesting aspects of Jui-Jitsu in picture form. The focal point can then be used to draw users attention to something more specific in the future. This benefits the user by giving them a sense of what to expect.
-
Introduction-Text
- The introductory text aims to give guidence to new users, by inform them the intent of the website and where to go next. Therefore, this paragraph was designed as a sign post. It had to be short, to the point, with as much information as possible for the user to navigate more quickly.
-
Introductory-Video
- Joe Rogan is one of the most well recognised people in the world, and is very knowledgable about Jiu-Jitsu. As he himself has a black belt and is a commentator for the UFC. Adding this content here breaks up the text for the users.Giving them something else entertaining to enjoy. The value this delivers to the website is legitimacy, as Joe Rogan is reputable source on the sport that many people like.
-
The Technique Cards
-
The technique cards are animated HTML/CSS cards that reveal hidden content. The goal was to present the information in a more interest way. The design idea was to simulate the flipping off an opponent in Jiu-Jitsu, making a fun and interactive experience for the user.
-
The effect doesn't require any JS. Making run times faster and a better overall user experience.
-
-
Beginner's Guide
-
The beginner's guide is short list of helplful tips that a user can easily and understand, in order to feel more confident to make a decision.
-
Instead of writing a list and staking the infomaiton, I opted to display the infomration in a Bootstrap carousel. It made the presentation more compact and ultimately more fun for the end user. Improving the overall experience.
-
-
Demonstation Videos
- The demonstation videos were extra content added to make the section more interesting to the user, and take away from the emptiness retaining that intrest.
-
Footer
- The footer at the end of the page isn't the end. The user can follow us on social media or contact us directly. It was important to keep the user engaged in the site to see all the content, instead of clicking off when they reach the bottom. This is why there are a collection of links and a call to action in the footer to help prompt the user.
-
History Page - Scroll Animations
- The scroll animaitons add an entertainment value to the text. Making the content more engaging and valuable to the user.
-
Contact Form
- The contact form allows the users to feel more connected to the website. To form a community around Little Orgiami. Legitimising the site and potentially creating repeat visiting users.
-
404 Cats
- The page was design to incentavise free bug reporting and was seen as a great opportunity for user relations.
-
Confirmation Message
- The confimration message provides assurance to the user their request was sent. It's an additional layer of design quality.
-
Community Support
- To increase the community around Little Origami the following features could be introduced:
- Q & A Forum
- Message Board
- Dojo Review
- To increase the community around Little Origami the following features could be introduced:
-
Additional Animations
- Additional animations would be bring more of the content to life.
-
Finding a Dojo Near You
- Using the Google API to find dojos near the addresses of the users, to make the value propersition of the website higher.
-
Pop-out Videos
- Allow the videos to be popped out and stick with the user for a more enjoyable experience.
-
Add Visual Ques
- Add visual ques to the flip-cards, to make the more apparent that they flip.
- Git used for version control. (
git add,git commit,git push) - GitHub used for secure online code storage.
- VSCode used as my local IDE for development.
- HTML used for the main site content.
- CSS used for the main site design and layout.
- GitHub Pages used for hosting the deployed front-end site.
- Bootstrap used as the front-end CSS framework for modern responsiveness and pre-built components.
For all testing, please refer to the TESTING.md file.
The site was deployed to GitHub Pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
I've become aware that I've been using the wrong tense for my commit messages. This mistake unfortuately can't be remedied, but moving forwards I will use the presenet tense when sending messages.
This project can be cloned or forked in order to make a local copy on your own system.
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/patrickaod/Little-Origami.git
- Press Enter to create your local clone.
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
The local deployment of a website exists on a developer's computer during the development phase, where changes and testing occur. The live deployment of a website refers to the process of making the finalized and tested website live on a web server for public access. The local environment is a controlled and private space for development, while the deployment is the public-facing version of the website.
| Source | Location | Notes |
|---|---|---|
| Markdown Builder | README and TESTING | tool to help generate the Markdown files |
| Chris Beams | version control | "How to Write a Git Commit Message" |
| Bootstrap | entire site | responsive HTML/CSS/JS navbar |
| Bootsnipp | entire site | Bootstrap 4 Navbar with Icon Top |
| mdn web docs_ | home page | The Video Embed element tutorial |
| BBbootstrap | home page | Bootstrap 5 Flipping cards for catalog |
| Bootstrap | home page | carousel |
| Bootstrap | entire site | Buttons |
| Bootstrap | history page | grid layout |
| mdn web docs_ | history page | scroll animation tutorial |
| YouTube | history page | scroll animation demo |
| Bootstrap | contact page | contact form |
| YouTube | confirmation page | rotating border |
| Bootstrap | entire site | flex utility |
| mdn web docs_ | entire site | clamp() |
| CSS Gradient | entire site | linear gradient generator |
| Source | Location | Type | Notes |
|---|---|---|---|
| Pexels | home page | image | banner image #1 |
| Pexels | home page | image | banner image #2 |
| Pexels | home page | image | banner image #3 |
| Youtube | home page | video | intro video |
| Pexels | home page | image | technique card #1 |
| Pexels | home page | image | technique card #2 |
| Pexels | home page | image | technique card #3 |
| Pexels | home page | images | beginner's guide backgorund |
| Pexels | home page | video | demonstration video #1 |
| Pexels | home page | video | demonstration video #2 |
| Pexels | home page | video | demonstration video #3 |
| Pexels | history page | images | background #1 |
| Pexels | history page | images | background #2 |
| Giphy | 404 Page | GIFs | 404 Cat #1 |
| Giphy | 404 Page | GIFs | 404 Cat #2 |
| Giphy | 404 Page | GIFs | 404 Cat #3 |
| FontAwesome | entire site | images | home icon |
| FontAwesome | entire site | images | history icon |
| FontAwesome | entire site | images | contact navigation icon |
| FontAwesome | entire site | images | snapchat icon |
| FontAwesome | entire site | images | instagram icon |
| FontAwesome | entire site | images | facebook icon |
| FontAwesome | entire site | images | twitter icon |
| Shields.io | README | images | shields |
| BannerMaker | README | images | banner |
Unfortunately, some off the links for the media used in the site was lost. I'll endevour to have a mroe robust saving practice in future, as I understand the importance of keeping track of these things.
- I would like to thank my Code Institute mentor, Tim Nelson for his support throughout the development of this project.
- I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
- I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and imposter syndrome.