https://rulescreative.com/

rules creative website
work at rules creative
2018 - 2019, Taiwan

Creativity is just like the universe. Every creator has their own universe, with each piece of work like an individual planet.

Gazing at a planet from afar, we can only see the shape and colour of its surface. To see the details of it, we must look carefully and pay attention, even without light.

responsibility
Formed the concept with the company director, designed it with a colleague, and then developed the site independently. Served as the project leader, proposed and iterated throughout the entire design cycle, and eagerly discussed with the team to collect feedback during the process.

technology
A-Frame (Three.js), Node.js, HTML, CSS, JavaScript, Contentful

results
Session Duration
126% increment

Business Enquiry
Increased notably

awards
Design Awards Asia
Design of the Day - 18 June 2019

CSS Design Awards
Special Kudos - 4 June 2019

CSS Winner
Star - 2 June 2019

CSS Light
Featured of the Day - 31 May 2019

Web Guru Awards
Guru of the Day - 17 September 2019

Mindsparkle Mag
Site of the Day - 22 June 2019

awwwards
Nominee

credits
Concept & Creative Direction
Jason Huang & Jack Dai

Design
Jason Huang & Ting-En Wei (Project Page)

Development
Jason Huang

Video Editing
Ting-En Wei

The initial idea was to create a website that can only be viewed in darkness.

The first design used the brightness level captured from the camera as the background colour, with the company name visible only in a darker background.

This lets users focus on the interaction that guides them to unlock the website - by reducing the brightness of their surroundings, with an indication bar near the bottom of the website.

problems
Although the design could express the company spirit of breaking the rules and being imaginative, the interaction mechanism of using the user’s camera to detect brightness was obstructive due to the browser’s prompt. Without a sufficient background story, the experience lacked the motivation for the users to continue to engage with the website.

After researching different possibilities, we discovered that 3D interactions could better guide users into the idea. This strikes a balance between expressing company spirit and usability.

3D interactions also bring out the concept of comparing creativity to the universe, and the idea of viewing a website in darkness was transformed into seeing the details of a work in darkness. This implies that every piece of work is like a planet, where its full story can only be seen without light.

White blocks that represent works were designed to be animated when hovered on their category, based on different natures. Brand-related categories have the motion of growth, and short-term projects have lively moving imagery.

reflection
The main objective was not only to express the company spirit but also to attract corresponding customers. Therefore, although the site’s usability could be improved, the direction of being more experimental did attract and intrigue clients, because it was designed to be imaginative rather than being a well-polished template. The lesson learned here was that the essence of design is actually communication.

more at rules creative

jason huang

multimedia

photography

diary

about