3.0 KiB
+++ layout = "work/single" theme = "dark" background = "#135D66" accent = "#FFFFFF" text = "#FFFFFF" title = "Stackspin" 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." date = "2022-03-25 12:00:00 +0200" image = "stackspin" tags = [] categories = ["Branding", "UX Research", "Illustrations", "Interaction Design"] [links] "Brand Book" = "https://www.figma.com/proto/P8JOnCnyoX4I4t2M0ltbDZ/I2P-%7C-Branding?page-id=504%3A3&node-id=504%3A495&viewport=241%2C48%2C0.06&scaling=scale-down" "User Research" = "https://www.figma.com/proto/P8JOnCnyoX4I4t2M0ltbDZ/I2P-%7C-Branding?page-id=504%3A2&node-id=504%3A4&viewport=241%2C48%2C0.33&scaling=contain" +++
Stackpin is an online office suite in which you control your data. It includes everything a small organisation needs to get themselves organised.
Working with Stackpin consisted in creating a modern and relevant brand identity and building the right user experience foir their services.
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.
{{< figure class="with-js" src="/img/work/stackspin-cover.svg" alt="Stackspin Logo cover image" >}} {{< figure class="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).
{{< figure class="with-js" src="/img/work/stackspin-icon.svg" alt="Stackspin logo composition" >}} {{< figure class="no-js" src="/img/work/stackspin-icon.webp" alt="Stackspin logo composition" >}}
Typography and Colors
{{< figure class="with-js" src="/img/work/stackspin-typography.svg" alt="Typeface preview (Space Grotesk & Inter)" >}} {{< figure class="no-js" src="/img/work/stackspin-typography.webp" alt="Typeface preview (Space Grotesk & Inter)" >}}
{{< figure class="with-js" src="/img/work/stackspin-colors.svg" alt="Color palette preview (teal)" >}} {{< figure class="no-js" src="/img/work/stackspin-colors.webp" alt="Color palette preview (teal)" >}}
Brand Book
After setting the visual identity, we prepared and provided the brand guidelines book. The purpose of this book is to ensure that the brand and visual identity of Stackspin is correclty presented everywhere.
Link: Stackspin - Brand Book
{{< figure src="/img/work/stackspin-mockup.webp" alt="Stackspin brand book mockup" >}}
How we helped
- We helped OpenAppStack become Stackspin.
- We offered our expertise to create their new brand and visual identity.
- We designed the book of style guides so the brand is visually consistent.