Project Goals
Yama’s Judo Site was another fun demo site I experimented with to once again test my creativity and front-end development skills using a content management system. I went for a more professional appearance and pulled inspiration from the Japanese culture including the patterns, characters, and iconography; which I designed myself. I wanted this site to come across as a convincing dojo and sourced the images from stock photos to capture the theme I had in mind. I used dynamic photography to create movement and removed the backgrounds to place them in the hero and bodies of the site. I also managed to design and develop an interactive table that shows the class schedule, as well as display more information when the cells were hovered.
My Process
01
I discuss with the client what information they would like to present, images to use, color assets, and typefaces. After I get a feel for all the content and number of pages for the site, I start to formulate a plan to execute.
02
I start with a wireframe using Adobe Photoshop. This will be used as a template to show where the images, icons, and the provided verbiage will go as placeholders. Then I will flesh out each page using the discussed assets such as typefaces, color scheme, imagery, and icons.
03
After creating and laying out the design that includes all the assets, I use Adobe XD to prototype the site’s functionality. This will include how the navigation will function, the buttons hover effects, and where each button and link will lead to.
04
Once approved, I will slice each graphical element so I can store and add them to the site. I will reference the designed pages and page building modules and some custom code to create each page. Finally, I will test each version of the site for desktop and mobile options.
Project Details
Font Family
Montserrat
AaBb
Color Swatches
#0e2750
#1fcc56
#000000
#ffffff
Software Used
Adobe Photoshop
Adobe Dreamweaver
WordPress
Yama’s Fitness Dojo Website
Home Page
The home page displays information about Judo, the principles taught there, and pricing options.
Classes
This page displays an interactable schedule and info on the instructors who will train the judokas.
About Us
This page displays what upcoming judokas expect to learn at this dojo along with the contact info.