@ -18,13 +18,15 @@ As part of the Open Tech Fund Secure Usability and Accessibility Lab, we support
We started by exploring several visual style directions for Briar’s Illustration System, basing the creative process on Briar’s brand identity and communicating with the project leads to better understand the needs and determine the best direction. After refreshing the UI color system, we proposed two main directions for the style of the illustrations, all scalable, having the possibility to create a consistent illustration system out of them.
After presenting the visual styles and receiving feedback from the Briar team, we decided to keep elements from both and work on a new direction to replace the current Briar’s App illustrations. We recreated five of the current images for the third visual style using the updated color system and visual style.
summary = "AsciiDoc is a plain text markup language for writing technical content. We were approached by the AsciiDoc working group to create a coherent brand identity and website to serve as the home for the AsciiDoc language."
@ -24,7 +24,8 @@ We were approached by the AsciiDoc Working Group, part of the Eclipse Foundation
More often than not we work on grassroot open source projects and help them establish their own identity. Here however we were working with an Eclipse Foundation project, a major organization in the open source world, owning various Trademarks, including AsciiDoc. We had to ensure we delivered everything necessary for the brand to work as part of the Working Group, website, trademark and file type icon.
@ -107,15 +108,20 @@ What is it that makes us radically different?
Soon we were able to pinpoint the tone of voice of AsciiDoc and how to present it to to the world. Beyond the tone of voice however, we also asked the workshop participants to tell us how the AsciiDoc brand should feel like, using a set of sliders representing different values determining the personality and look and feel of the brand.
Using that information led to interesting discussions among the participants, sparking thoughtful conversations and leading us through the visual exploration of the brand, most importantly its logo.
{{<figuresrc="/img/work/asciidoc-safespace.svg"alt="AsciiDoc logo safe spacing">}}
{{<figureclass="with-js"src="/img/work/asciidoc-safespace.svg"alt="AsciiDoc logo safe spacing">}}
{{<figureclass="no-js"src="/img/work/asciidoc-safespace.webp"alt="AsciiDoc logo safe spacing">}}
Through various stages of feedback processes, determining visual directions preferred by the working group, we concluded finally with the current AsciiDoc logo. The logomark resembles a D and A crossed out on its negative space; a simple yet effective interpretation of the AsciiDoc brand. Using freely licensed fonts Urbanist and Inter rounded up the visual identity as well, bringing a unique personality to AsciiDoc, paired with splendid readability, which was quite crucial for a markup language such as AsciiDoc.
summary = "We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System."
@ -23,13 +23,15 @@ CalyxOS is an Android mobile operating system that puts privacy and security int
CalyxOS needs to be the obvious alternative to the big mobile duopoly Google and Apple are controlling, so we prioritized making CalyxOS more approachable by improving various visual identity shortcoming. We aimed to bring an easy-going and fun note to the privacy values CalyxOS embodies. At the end of the day, this should be a phone available to the every-day person.
We helped CalyxOS by offering a new set of Illustrations to replace the current ones, giving a unique and modern look, also setting a flexible and scalable graphic style. These graphics are bright, fun, abstract, vivid, with elements of privacy and security integrated into them. We wanted to move away from the overexposed approach of shady metaphors when it comes to privacy and instead settled for a visual approach which normalized privacy features.
{{<figuresrc="/img/work/calyxos-illustrations.svg"alt="CalyxOS overview of 5 illustrations on dark mode">}}
{{<figureclass="with-js"src="/img/work/calyxos-illustrations.svg"alt="CalyxOS overview of 5 illustrations on dark mode">}}
{{<figureclass="no-js"src="/img/work/calyxos-illustrations.webp"alt="CalyxOS overview of 5 illustrations on dark mode">}}
summary = "We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style. "
date = "2021-01-24 12:00:00 +0200"
image = "optima.svg"
image = "optima"
tags = []
categories = ["Branding", "Illustrations"]
[links]
@ -21,13 +21,16 @@ Internews’ OPTIMA program is designed to build resources and advocacy capacity
The visual design for Internews’ OPTIMA aims to create a modern, approachable, and friendly identity for the program and its mission. As part of this scope we created a set of design deliverables, as well as accompanying brand guidelines to ensure coherent application of the OPTIMA brand across different channels.
As part of the logo, the rectangles represent censorship, while the divided OPTIMA stands for the obstacles in communication. The logo of Internews' OPTIMA aims to represent the idea of being able to communicate and understand through distance, division, and censorship.
{{<figuresrc="/img/work/optima-text.svg"alt="Optima logo composition">}}
{{<figureclass="with-js"src="/img/work/optima-text.svg"alt="Optima logo composition">}}
{{<figureclass="no-js"src="/img/work/optima-text.webp"alt="Optima logo composition">}}
## Visual Style
@ -37,7 +40,8 @@ We designed the visual components in a modular way in order to compliment the en
The illustrations set is flexible and open for changes. Any icon can be added, as long as it is designed in this specific style.
{{<figuresrc="/img/work/optima-icons.svg"alt="Optima brand elements preview">}}
{{<figureclass="with-js"src="/img/work/optima-icons.svg"alt="Optima brand elements preview">}}
{{<figureclass="no-js"src="/img/work/optima-icons.webp"alt="Optima brand elements preview">}}
## Independent Slogan
@ -47,7 +51,8 @@ It stands in the middle of the two graphic styles, creating a bridge between the
There is no constraint regarding the logo and slogan relationship. The slogan is independent. It may be shown with the logo or just part of the illustrated artworks.
{{<figuresrc="/img/work/optima-slogan.svg"alt="Optima brand elements 'Defending the Internet with Data'">}}
{{<figureclass="with-js"src="/img/work/optima-slogan.svg"alt="Optima brand elements 'Defending the Internet with Data'">}}
{{<figureclass="no-js"src="/img/work/optima-slogan.webp"alt="Optima brand elements 'Defending the Internet with Data'">}}
## Brand Book
@ -55,7 +60,8 @@ The brand book is an important addition and documentation of the visual identity
title = "Oxidize - The Conference of embedded Rust"
summary = "We created the brand and visual identity for Oxidize, designing every digital and print asset for the conference and providing a long-term design solution."
date = "2020-03-24 12:00:00 +0200"
image = "oxidize.svg"
image = "oxidize"
tags = []
categories = ["Branding", "Web Development"]
[links]
@ -25,7 +25,8 @@ They needed a visual brand to be in alignment with what they communicate and to
Combining the concept of circuits and chemistry helped me design this logo. It is simple, monochrome, and symbolically based on the atomic structure of Oxygen and the role of embedded systems in technology. The open spaces between the rounded shapes represent the open-source.
{{<figuresrc="/img/work/oxidize-brand.svg"alt="Oxidize logo composition">}}
{{<figureclass="with-js"src="/img/work/oxidize-brand.svg"alt="Oxidize logo composition">}}
{{<figureclass="no-js"src="/img/work/oxidize-brand.webp"alt="Oxidize logo composition">}}
## Words to graphics
@ -49,13 +50,15 @@ The identity of Oxidize Conference comes with characteristics as:
The Oxidize logo wordmark is inspired from the binary system which is made from “0” and “1”. Using a simple minimal design for the “i” and the “o”, applying the same style on the other letters, we designed a unique wordmark for Oxidize, which is modern and stable.
{{<figuresrc="/img/work/oxidize-watermark.svg"alt="Oxidize logo wordmark preview">}}
{{<figureclass="with-js"src="/img/work/oxidize-watermark.svg"alt="Oxidize logo wordmark preview">}}
{{<figureclass="no-js"src="/img/work/oxidize-watermark.webp"alt="Oxidize logo wordmark preview">}}
## Consistency
@ -63,7 +66,6 @@ After setting the visual identity, everything else was done step-by-step. With v
summary = "We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual identity conducting user experience research to provide relevant experience to their users."
@ -23,19 +23,24 @@ Working with Stackpin consisted in creating a modern and relevant brand identity
We created the entire brand design and implemented the new identity in the X pages. To ensure the visual consistency, we provided a guideline manual so Stackspin’s visual identity will presented correctly in their future activity.
{{<figuresrc="/img/work/stackspin-cover.svg"alt="Stackspin Logo cover image">}}
{{<figureclass="with-js"src="/img/work/stackspin-cover.svg"alt="Stackspin Logo cover image">}}
{{<figureclass="no-js"src="/img/work/stackspin-cover.webp"alt="Stackspin Logo cover image">}}
## S as Stack / S as Spin,
The icon of the new logo symbolizes the stacked blocks while forming the letter S. (something about the colorr and the Greenhost connection).
{{<figuresrc="/img/work/stackspin-icon.svg"alt="Stackspin logo composition">}}
{{<figureclass="with-js"src="/img/work/stackspin-icon.svg"alt="Stackspin logo composition">}}
{{<figureclass="no-js"src="/img/work/stackspin-icon.webp"alt="Stackspin logo composition">}}
summary = "Totem is an online learning platform that offers educational courses about digital security and privacy in a safe, online classroom environment. We helped them refresh their visual identity and explain technical concepts in a more visual way."
@ -25,13 +25,15 @@ Although it can be very effective and extremely useful, face-to-face, offline tr
Totem currently offers over 57 courses including various languages. Each course is represented by a visual image, which often has been duplicated over various courses. Due to this, various courses have duplicated imagery, offering little visual coordination across the site. Additionally, the current illustrations used are generic freely licensed illustrations which don’t represent the look and feel of Totem and could confuse viewers.
But before taking on the illustration system, we updated the Totem logo, together with its turtle mascot, offering a friendly refreshed logo with a new typeface (Maven Pro) moving away from the old typeface (Ubuntu). While Ubuntu is a beautiful and versatile typeface, it’s characteristic to Canonical’s Linux distribution. We wanted for Totem to establish its own character with time.
{{<figuresrc="/img/work/totem-safespace.svg"alt="Totem logo safe spacing">}}
{{<figureclass="with-js"src="/img/work/totem-safespace.svg"alt="Totem logo safe spacing">}}
{{<figureclass="no-js"src="/img/work/totem-safespace.webp"alt="Totem logo safe spacing">}}
## Illustrations
@ -41,7 +43,8 @@ Our objective was to create a modular illustration system that is expandable, op
With Totem being a platform where independent educators can create and submit courses, they should be empowered to create their own illustrations. The illustration system should make it easier for them to create covers which is close to the Totem identity, even if they are not professional designers.
@ -61,4 +64,5 @@ We were very excited to open-source the illustration system under Creative Commo
While talking to the Totem team, they were looking forward to build up this story arch further with the aquatic theme in Totem. The world of the turtle mascot is versatile and offers a wide range of metaphors we can explore visually. Protagonists (like the turtle) and antagonists (trolls, bugs) are included and offer a way to explain complex topics in a more simplistic visual explanation, especially tailored for beginners.
@ -18,13 +18,15 @@ As part of the Open Tech Fund Secure Usability and Accessibility Lab, we support
We started by exploring several visual style directions for Briar’s Illustration System, basing the creative process on Briar’s brand identity and communicating with the project leads to better understand the needs and determine the best direction. After refreshing the UI color system, we proposed two main directions for the style of the illustrations, all scalable, having the possibility to create a consistent illustration system out of them.
After presenting the visual styles and receiving feedback from the Briar team, we decided to keep elements from both and work on a new direction to replace the current Briar’s App illustrations. We recreated five of the current images for the third visual style using the updated color system and visual style.
We have been working with Briar for over 4 years now. During this time we constantly added new features and designed new experiences. Over time a bit of design debt has been collected, mostly noticeable in the different style and incoherent usage of illustrations, iconography and UI elements. With this we are doing the first step of creating a system for illustrations coherent across the app as well as having the needed ingredients for new illustrations when new features are added in the future
We hope that this will be the first step in refreshing Briar’s GUI and with more tweaks coming along in the future.
You can find the source files of the new Briar illustration system on our GitHub repos and [Figma Community](https://www.figma.com/community/file/1169212217112991383).
summary = "AsciiDoc is a plain text markup language for writing technical content. We were approached by the AsciiDoc working group to create a coherent brand identity and website to serve as the home for the AsciiDoc language."
@ -24,7 +24,8 @@ We were approached by the AsciiDoc Working Group, part of the Eclipse Foundation
More often than not we work on grassroot open source projects and help them establish their own identity. Here however we were working with an Eclipse Foundation project, a major organization in the open source world, owning various Trademarks, including AsciiDoc. We had to ensure we delivered everything necessary for the brand to work as part of the Working Group, website, trademark and file type icon.
@ -107,15 +108,20 @@ What is it that makes us radically different?
Soon we were able to pinpoint the tone of voice of AsciiDoc and how to present it to to the world. Beyond the tone of voice however, we also asked the workshop participants to tell us how the AsciiDoc brand should feel like, using a set of sliders representing different values determining the personality and look and feel of the brand.
Using that information led to interesting discussions among the participants, sparking thoughtful conversations and leading us through the visual exploration of the brand, most importantly its logo.
{{<figuresrc="/img/work/asciidoc-safespace.svg"alt="AsciiDoc logo safe spacing">}}
{{<figureclass="with-js"src="/img/work/asciidoc-safespace.svg"alt="AsciiDoc logo safe spacing">}}
{{<figureclass="no-js"src="/img/work/asciidoc-safespace.webp"alt="AsciiDoc logo safe spacing">}}
Through various stages of feedback processes, determining visual directions preferred by the working group, we concluded finally with the current AsciiDoc logo. The logomark resembles a D and A crossed out on its negative space; a simple yet effective interpretation of the AsciiDoc brand. Using freely licensed fonts Urbanist and Inter rounded up the visual identity as well, bringing a unique personality to AsciiDoc, paired with splendid readability, which was quite crucial for a markup language such as AsciiDoc.
summary = "We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System."
@ -23,13 +23,15 @@ CalyxOS is an Android mobile operating system that puts privacy and security int
CalyxOS needs to be the obvious alternative to the big mobile duopoly Google and Apple are controlling, so we prioritized making CalyxOS more approachable by improving various visual identity shortcoming. We aimed to bring an easy-going and fun note to the privacy values CalyxOS embodies. At the end of the day, this should be a phone available to the every-day person.
We helped CalyxOS by offering a new set of Illustrations to replace the current ones, giving a unique and modern look, also setting a flexible and scalable graphic style. These graphics are bright, fun, abstract, vivid, with elements of privacy and security integrated into them. We wanted to move away from the overexposed approach of shady metaphors when it comes to privacy and instead settled for a visual approach which normalized privacy features.
{{<figuresrc="/img/work/calyxos-illustrations.svg"alt="CalyxOS overview of 5 illustrations on dark mode">}}
{{<figureclass="with-js"src="/img/work/calyxos-illustrations.svg"alt="CalyxOS overview of 5 illustrations on dark mode">}}
{{<figureclass="no-js"src="/img/work/calyxos-illustrations.webp"alt="CalyxOS overview of 5 illustrations on dark mode">}}
summary = "We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style. "
date = "2021-01-24 12:00:00 +0200"
image = "optima.svg"
image = "optima"
tags = []
categories = ["Branding", "Illustrations"]
[links]
@ -21,13 +21,16 @@ Internews’ OPTIMA program is designed to build resources and advocacy capacity
The visual design for Internews’ OPTIMA aims to create a modern, approachable, and friendly identity for the program and its mission. As part of this scope we created a set of design deliverables, as well as accompanying brand guidelines to ensure coherent application of the OPTIMA brand across different channels.
As part of the logo, the rectangles represent censorship, while the divided OPTIMA stands for the obstacles in communication. The logo of Internews' OPTIMA aims to represent the idea of being able to communicate and understand through distance, division, and censorship.
{{<figuresrc="/img/work/optima-text.svg"alt="Optima logo composition">}}
{{<figureclass="with-js"src="/img/work/optima-text.svg"alt="Optima logo composition">}}
{{<figureclass="no-js"src="/img/work/optima-text.webp"alt="Optima logo composition">}}
## Visual Style
@ -37,7 +40,8 @@ We designed the visual components in a modular way in order to compliment the en
The illustrations set is flexible and open for changes. Any icon can be added, as long as it is designed in this specific style.
{{<figuresrc="/img/work/optima-icons.svg"alt="Optima brand elements preview">}}
{{<figureclass="with-js"src="/img/work/optima-icons.svg"alt="Optima brand elements preview">}}
{{<figureclass="no-js"src="/img/work/optima-icons.webp"alt="Optima brand elements preview">}}
## Independent Slogan
@ -47,7 +51,8 @@ It stands in the middle of the two graphic styles, creating a bridge between the
There is no constraint regarding the logo and slogan relationship. The slogan is independent. It may be shown with the logo or just part of the illustrated artworks.
{{<figuresrc="/img/work/optima-slogan.svg"alt="Optima brand elements 'Defending the Internet with Data'">}}
{{<figureclass="with-js"src="/img/work/optima-slogan.svg"alt="Optima brand elements 'Defending the Internet with Data'">}}
{{<figureclass="no-js"src="/img/work/optima-slogan.webp"alt="Optima brand elements 'Defending the Internet with Data'">}}
## Brand Book
@ -55,7 +60,8 @@ The brand book is an important addition and documentation of the visual identity
title = "Oxidize - The Conference of embedded Rust"
summary = "We created the brand and visual identity for Oxidize, designing every digital and print asset for the conference and providing a long-term design solution."
date = "2020-03-24 12:00:00 +0200"
image = "oxidize.svg"
image = "oxidize"
tags = []
categories = ["Branding", "Web Development"]
[links]
@ -25,7 +25,8 @@ They needed a visual brand to be in alignment with what they communicate and to
Combining the concept of circuits and chemistry helped me design this logo. It is simple, monochrome, and symbolically based on the atomic structure of Oxygen and the role of embedded systems in technology. The open spaces between the rounded shapes represent the open-source.
{{<figuresrc="/img/work/oxidize-brand.svg"alt="Oxidize logo composition">}}
{{<figureclass="with-js"src="/img/work/oxidize-brand.svg"alt="Oxidize logo composition">}}
{{<figureclass="no-js"src="/img/work/oxidize-brand.webp"alt="Oxidize logo composition">}}
## Words to graphics
@ -49,13 +50,15 @@ The identity of Oxidize Conference comes with characteristics as:
The Oxidize logo wordmark is inspired from the binary system which is made from “0” and “1”. Using a simple minimal design for the “i” and the “o”, applying the same style on the other letters, we designed a unique wordmark for Oxidize, which is modern and stable.
{{<figuresrc="/img/work/oxidize-watermark.svg"alt="Oxidize logo wordmark preview">}}
{{<figureclass="with-js"src="/img/work/oxidize-watermark.svg"alt="Oxidize logo wordmark preview">}}
{{<figureclass="no-js"src="/img/work/oxidize-watermark.webp"alt="Oxidize logo wordmark preview">}}
## Consistency
@ -63,7 +66,6 @@ After setting the visual identity, everything else was done step-by-step. With v
summary = "We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual identity conducting user experience research to provide relevant experience to their users."
@ -23,19 +23,24 @@ Working with Stackpin consisted in creating a modern and relevant brand identity
We created the entire brand design and implemented the new identity in the X pages. To ensure the visual consistency, we provided a guideline manual so Stackspin’s visual identity will presented correctly in their future activity.
{{<figuresrc="/img/work/stackspin-cover.svg"alt="Stackspin Logo cover image">}}
{{<figureclass="with-js"src="/img/work/stackspin-cover.svg"alt="Stackspin Logo cover image">}}
{{<figureclass="no-js"src="/img/work/stackspin-cover.webp"alt="Stackspin Logo cover image">}}
## S as Stack / S as Spin,
The icon of the new logo symbolizes the stacked blocks while forming the letter S. (something about the colorr and the Greenhost connection).
{{<figuresrc="/img/work/stackspin-icon.svg"alt="Stackspin logo composition">}}
{{<figureclass="with-js"src="/img/work/stackspin-icon.svg"alt="Stackspin logo composition">}}
{{<figureclass="no-js"src="/img/work/stackspin-icon.webp"alt="Stackspin logo composition">}}
summary = "Totem is an online learning platform that offers educational courses about digital security and privacy in a safe, online classroom environment. We helped them refresh their visual identity and explain technical concepts in a more visual way."
@ -25,13 +25,15 @@ Although it can be very effective and extremely useful, face-to-face, offline tr
Totem currently offers over 57 courses including various languages. Each course is represented by a visual image, which often has been duplicated over various courses. Due to this, various courses have duplicated imagery, offering little visual coordination across the site. Additionally, the current illustrations used are generic freely licensed illustrations which don’t represent the look and feel of Totem and could confuse viewers.
But before taking on the illustration system, we updated the Totem logo, together with its turtle mascot, offering a friendly refreshed logo with a new typeface (Maven Pro) moving away from the old typeface (Ubuntu). While Ubuntu is a beautiful and versatile typeface, it’s characteristic to Canonical’s Linux distribution. We wanted for Totem to establish its own character with time.
{{<figuresrc="/img/work/totem-safespace.svg"alt="Totem logo safe spacing">}}
{{<figureclass="with-js"src="/img/work/totem-safespace.svg"alt="Totem logo safe spacing">}}
{{<figureclass="no-js"src="/img/work/totem-safespace.webp"alt="Totem logo safe spacing">}}
## Illustrations
@ -41,7 +43,8 @@ Our objective was to create a modular illustration system that is expandable, op
With Totem being a platform where independent educators can create and submit courses, they should be empowered to create their own illustrations. The illustration system should make it easier for them to create covers which is close to the Totem identity, even if they are not professional designers.
@ -61,4 +64,5 @@ We were very excited to open-source the illustration system under Creative Commo
While talking to the Totem team, they were looking forward to build up this story arch further with the aquatic theme in Totem. The world of the turtle mascot is versatile and offers a wide range of metaphors we can explore visually. Protagonists (like the turtle) and antagonists (trolls, bugs) are included and offer a way to explain complex topics in a more simplistic visual explanation, especially tailored for beginners.
Anxhelo Lushka
2 years ago
