Kurechii came up with a bespoke design for its out-to-date website. They needed someone with design sense and coding ability to turn the established high-fidelity prototype into actual code. I was engaged in building the website alongside the team's designer.
I used a page builder called "Oxygen Builder" to visually develop a customized WordPress site with minimal coding. It allowed me to go as in-depth as possible on building elements with custom HTML, CSS, JS, and PHP.
02. Living style guide
I always begin the development by building a style guide first. It is all about styling elements such as text, color, and any components that'll show up multiple times on the site. This workflow allowed me to work more efficiently and be more consistent by implementing those already created elements to build pages or bigger components.
03. Tappable vs. hoverable interaction
User interactions on mobile differ from interactions on desktop. Hence I tailored the experience to match both desktop and mobile environments.
On desktop, hovering over an image triggers the element to display avatar information.
On mobile, hover interaction is replaced with tap for better experience.
04. Easy-to-update
90% of the site content is manageable through WordPress CMS. It can easily archive updates like adding a new character or editing an existing game content without any technical experience by filling in the fields on the edit screen. This intuitive-to-use allowed the client the flexibility needed to edit regularly and manage the site effortlessly.
05. The collaborative process
The designer in charge and I worked in close collaboration on the development. I actively engaged the designer to review and assess the site from time to time. We ensured the website was error-free before it went live.