You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
302 lines
14 KiB
302 lines
14 KiB
<!DOCTYPE html>
|
|
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<meta name="author"
|
|
content="" />
|
|
<meta name="description"
|
|
content="We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual …" />
|
|
<meta name="keywords"
|
|
content="design, ux, ui, public, developer, privacy, security, foss, floss" />
|
|
<meta name="robots" content="noodp" />
|
|
<meta name="theme-color" content="#135D66" />
|
|
<link rel="canonical" href="http://test.ura.design/work/stackspin/" />
|
|
|
|
|
|
<title>
|
|
Stackspin :: Ura Design
|
|
</title>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="http://test.ura.design/main.css" />
|
|
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
|
|
<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
|
|
<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
|
|
<meta itemprop="name" content="Stackspin">
|
|
<meta itemprop="description" content="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."><meta itemprop="datePublished" content="2022-03-25T12:00:00+02:00" />
|
|
<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
|
|
<meta itemprop="wordCount" content="193"><meta itemprop="image" content="http://test.ura.design"/>
|
|
<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:image" content="http://test.ura.design"/>
|
|
|
|
<meta name="twitter:title" content="Stackspin"/>
|
|
<meta name="twitter:description" content="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."/>
|
|
|
|
<meta property="article:section" content="Branding" />
|
|
|
|
<meta property="article:section" content="UX Research" />
|
|
|
|
<meta property="article:section" content="Illustrations" />
|
|
|
|
|
|
<meta property="article:published_time" content="2022-03-25 12:00:00 +0200 +0200" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body class="d-flex flex-column min-vh-100" style="background-color: #135D66;">
|
|
<a class="screen-reader-text" href="#content">Skip to content</a>
|
|
|
|
<button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
|
|
|
|
<header>
|
|
<div class="container-fluid">
|
|
<div class="container">
|
|
<nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
|
|
<a class="navbar-brand" href="http://test.ura.design">
|
|
|
|
|
|
|
|
<img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
|
|
</a>
|
|
<button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
|
|
<i class="fa-solid fa-grip-lines text-white"></i>
|
|
</button>
|
|
<div class="collapse navbar-collapse flex-grow-0">
|
|
<ul class="navbar-nav"><li class="nav-item ms-4">
|
|
<a class="nav-link text-white " href="http://test.ura.design/about/">About</a>
|
|
</li>
|
|
<li class="nav-item ms-4">
|
|
<a class="nav-link text-white active" aria-current="page" href="http://test.ura.design/work/">Work</a>
|
|
</li>
|
|
<li class="nav-item ms-4">
|
|
<a class="nav-link text-white " href="http://test.ura.design/contact/">Contact</a>
|
|
</li>
|
|
<li class="nav-item ms-4">
|
|
<a class="nav-link text-white " href="http://test.ura.design/clients/">Clients</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<div id="navbar-mobile" class="overlay d-block d-lg-none" style="background-color: #135D66;">
|
|
<div class="container-fluid">
|
|
<div class="container">
|
|
<div class="navbar align-items-center justify-content-between">
|
|
<a class="brand" href="http://test.ura.design">
|
|
<img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
|
|
</a>
|
|
<button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark text-white"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="overlay-content">
|
|
<div class="container pt-4"><a class="text-white " href="http://test.ura.design/about/">About</a>
|
|
<a class="text-white active" aria-current="page" href="http://test.ura.design/work/">Work</a>
|
|
<a class="text-white " href="http://test.ura.design/contact/">Contact</a>
|
|
<a class="text-white " href="http://test.ura.design/clients/">Clients</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openNav() {
|
|
document.getElementById("navbar-mobile").style.height = "100%";
|
|
}
|
|
function closeNav() {
|
|
document.getElementById("navbar-mobile").style.height = "0%";
|
|
}
|
|
</script>
|
|
|
|
</header>
|
|
|
|
<div id="content" class="content">
|
|
<main class="project text-white">
|
|
<div class="container-fluid py-5 mb-5">
|
|
<div class="container">
|
|
<div class="row justify-content-start">
|
|
<div class="col-xl-9 col-lg-9 col-12 pt-5">
|
|
<h1 class="project-title">Stackspin</h1>
|
|
<p class="project-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.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="row">
|
|
<div class="col-xl-2 col-lg-2 col-12">
|
|
<div class="sticky-xl-top pt-5">
|
|
|
|
<div class="mb-5">
|
|
<p class="list">Services</p>
|
|
<div class="d-flex flex-column" style="color: #FFFFFF;">
|
|
|
|
<a class="category" href="http://test.ura.design/categories/branding">Branding</a>
|
|
|
|
<a class="category" href="http://test.ura.design/categories/ux-research">UX Research</a>
|
|
|
|
<a class="category" href="http://test.ura.design/categories/illustrations">Illustrations</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mb-5">
|
|
<p class="list">Links</p>
|
|
<div class="d-flex flex-column" style="color: #FFFFFF;">
|
|
|
|
<a class="links" href="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" target="_blank" rel="noopener noreferrer">brand book</a>
|
|
|
|
<a class="links" href="https://www.figma.com/proto/P8JOnCnyoX4I4t2M0ltbDZ/I2P-%7C-Branding?page-id=504%3A2&node-id=504%3A4&viewport=241%2C48%2C0.33&scaling=contain" target="_blank" rel="noopener noreferrer">user research</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="offset-xl-1 col-xl-7 col-lg-7 col-12 pt-5 project-content">
|
|
<p>Stackpin is an online office suite in which you control your data. It includes everything a small organisation needs to get themselves organised.</p>
|
|
<hr>
|
|
<p>Working with Stackpin consisted in creating a modern and relevant brand identity and building the right user experience foir their services.</p>
|
|
<p>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.</p>
|
|
<figure><img src="http://test.ura.design/img/work/stackspin-cover.webp"/>
|
|
</figure>
|
|
<h2 id="s-as-stack--s-as-spin">S as Stack / S as Spin,</h2>
|
|
<p>The icon of the new logo symbolizes the stacked blocks while forming the letter S. (something about the colorr and the Greenhost connection). Lorem Ipsum</p>
|
|
<figure><img src="http://test.ura.design/img/work/stackspin-icon.webp"/>
|
|
</figure>
|
|
<h2 id="typography-and-colors">Typography and Colors</h2>
|
|
<p>Lorem Ipsum</p>
|
|
<figure><img src="http://test.ura.design/img/work/stackspin-typography.webp"/>
|
|
</figure>
|
|
<figure><img src="http://test.ura.design/img/work/stackspin-colors.webp"/>
|
|
</figure>
|
|
<h2 id="brand-book">Brand Book</h2>
|
|
<p>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. Lorem Ipsum</p>
|
|
<p>Link: <a href=https://www.figma.com/proto/upxHYnkoc9x4bKSXlCvsdv/Branding?page-id=77%3A62&node-id=81%3A100&viewport=241%2C48%2C0.19&scaling=contain
|
|
|
|
target="_blank" rel="noopener noreferrer"
|
|
>Stackspin - Brand Book</a></p>
|
|
<figure><img src="http://test.ura.design/img/work/stackspin-mockup.webp"/>
|
|
</figure>
|
|
<h2 id="how-we-helped">How we helped</h2>
|
|
<ul>
|
|
<li>We helped OpenAppStack become Stackspin.</li>
|
|
<li>We offered our expertise to create their new brand and visual identity.</li>
|
|
<li>We designed the book of style guides so the brand is visually consistent.</li>
|
|
<li>(UX?)</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<section aria-label="Return to all items page">
|
|
<div class="container-fluid py-5 background-white">
|
|
<div class="container">
|
|
<a class="back-overview" href="http://test.ura.design/work">Back to overview</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="py-4 mt-auto">
|
|
<div class="container-fluid">
|
|
<div class="container">
|
|
<div class="row d-none d-lg-flex">
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="navbar-collapse" id="footerNav">
|
|
<ul class="navbar-nav"><li class="nav-item">
|
|
<a class="nav-link " href="http://test.ura.design/about/">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="http://test.ura.design/work/">Work</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="http://test.ura.design/contact/">Contact</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="http://test.ura.design/clients/">Clients</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="row py-5 pt-lg-5 cta">
|
|
<div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
|
|
<p>Let's talk:</p>
|
|
<a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
|
|
</div>
|
|
<div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
|
|
<p>Subscribe:</p>
|
|
<a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
|
|
rel="noopener noreferrer">Newsletter</a>
|
|
</div>
|
|
<div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
|
|
<p>We are on:</p>
|
|
<div class="pt-2">
|
|
<a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row justify-content-between align-items-center">
|
|
<div class="col-xxl-4 col-xl-12">
|
|
<nav class="navbar navbar-expand-lg" aria-label="Secondary">
|
|
<div class="navbar-collapse" id="footerLinks">
|
|
<ul class="navbar-nav flex-row"><li class="nav-item">
|
|
<a class="nav-link " href="http://test.ura.design/source">Source Code</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="http://test.ura.design/privacy">Data Privacy</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="http://test.ura.design/imprint">Imprint</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
|
|
<p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script defer src="http://test.ura.design/bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|