Re-inventing Clickon Studio’s brand and website

Clickon Studios

text underlined

Heading

The site focuses
video content and
technology
Heading

Redesigning the look and feel of a company with interconnecting sub-brands can be tricky. Stakeholders can be protective over their piece of the  pie and, many chefs can sometimes change the direction of a project. By focusing on the core brand and how the Clickon collective family would connect and look like helped to build trust and direction for their core website design.

Designing the website to show off the capabilities of both creativity and videography technology works hand-in-hand with simple motion and footage autoplays.

What’s a Rich Text element?

This is a subheading and where it goes in the document flow

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is an h2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Jaw Breaker

Creating a candy themed block breaker in a week

The challenge

As a long-time consumer of the gaming industry, I decided to challenge myself to build a game by myself within a short time-frame.

This included all artwork, UI/UX and development of the game with little to no-experience prior. I gave myself one week to complete the project with a primary focus on creating a candy themed art style.

Game

Artwork

UX/UI

C#

Tasty artwork
and assets

The name and logo were based on block breaker with a candy theme.

I created three types of candy balls with different properties. Pink being capable of breaking any block with a single hit, and blue spawning multiple balls.

The breakable blocks had different break limits which were themed on candy and biscuits.

Buttons also followed a glossy rounded theme.

A simple UI with sprinkles on top

The main UI focused on displaying the score (coins), and number of lives remaining which could be increased by collecting coins.

I added mystery blocks that would change the default ball into an unbreakable ball or explode into a random number of blue balls. The licorice blocks could only be broken with the special pink ball.

Conclusion

I set out to create a simple block breaker game that became progressively more difficult through level design. By adding the mystery block helped with giving the player a unique gameplay each time through random rewards.

I'm happy with the result of the gameplay functionality and the artwork style.

Think you can get to the end? Try the game here

Next case