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.

RiotCop 2087

Creating a dystopian shooter in a week

The challenge

After completing Jaw Breaker I challenged myself again to build a slightly more complex game by myself within a short time-frame. This included all artwork, UI/UX and development of the game. I gave myself one week again to complete the challenge - therefore the gameplay needed to be simple enough to produce, yet visually appealing and fun to play.

Game

Artwork

UX/UI

C#

A cyberpunk themed dystopian scroller

I started with the idea of a simple Cyberpunk spin-off.

I added a triple weapon upgrade that breaks when shot to add a little more depth to the gameplay.

I then focused on creating a repeatable neon hellscape to create an endless loop.

Adding in a shield gave the game a little extra aesthetic, and more protection.

Game artwork

Possibly the quickest and smallest artwork I’ve had to create

Artworking the player and enemy sprites were something I knew had to be kept simple. I wasn’t used to working at such a small scale, and so a lot of initial designs lost all detail.

The original player ship design was cleaner with additional weapon upgrades.

Projectile sprites were kept simple, with a neon glow.

I later redesigned the player ship to fit the grungey aesthetic.

The enemy ships were kept simple, quick geometric shapes grunged up and an ominous glow

Conclusion

I set out to create a challenging vertical scroller set out in a neon cyberpunk city. I wanted to give the game additional depth which was achieved through additional layers of parallax and weapon upgrades.

Why not give it a go yourself? Play here

Next case