Takemusu Aikido Forest Row

https://takemusuaikido.net
A Social Image Card for Takemusu Aikido Forest Row.

Project Overview

Client: TAFR
Sector: Sports, Club
MUT Roles: Design, Development
Project Time: 2 months

Takemusu Aikido Forest Row (TAFR) is a not-for-profit sports club. They hold classes twice a week for members. The conception of the site is to serve club members, visitors who may be interested in starting Aikido practice, as well as a wider audience who have an interest in Aikido or martial arts practice in general.


Information Architecture

The site is distributed over 6 main pages. For visitors who are new to the club the "About" and "Iwama Aikido" provide information about the club and Aikido in general. For those who wish to explore more or for existing members who are preparing for their grading there are the "Resources" and "Technical Corner" pages and their associated sub-sections and pages/articles.


Information architecture for https://takemusuaikido.net.

Design

Inspiration for TAFR was drawn from "Sekiro: Shadows Die Twice" video game, created by FromSoftware.

Fade

When designing the TAFR image cross-fade it was moves to the bottom left. In Sekiro the image fade is even to the left which works when there is no scroll of the page. Because TAFR website content scrolls, the fade goes to the bottom left into the content. This fade technique is used at various parts of the site, e.g. "Technical Corner" articles.

Screenshots from TAFR website and Sekiro game where both show an opacity fade from the left.

The CSS for this is as follows:

Code Language
CSS

.post-thumbnail img { mask-image: radial-gradient(ellipse at right top, rgb(0, 0, 0) 10%, transparent 70%); }


Elements

The main navigation "paintbrush stroke" was created in Adobe Illustrator and using CSS oscillating the opacity to achieve glowing effect.

Screenshots from TAFR website and Sekiro game showing inspiration for the main navigation.
Main Navigation

The "Read More" button of an article also created in Adobe Illustrator and effected with CSS.

Screenshots from TAFR website and Sekiro game showing inspiration for the read more button.
Button

Other small elements were inspired from Sekiro, a true masterpiece in Game Design!


Development

Built with Wordpress, bespoke theme.


Live Website iframe


Back to all Works