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>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Style Guides go Beyond Aesthetics</title>
|
|
<meta name="description" content="Style guides serve as a playbook for software creators. They itself serve as a single source of truth to create consistently well designed experiences famili...">
|
|
|
|
<!-- Metadata -->
|
|
|
|
<meta property="og:site_name" content="Ura Design">
|
|
|
|
<meta property="og:title" content="Style Guides go Beyond Aesthetics">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:description" content="Style guides serve as a playbook for software creators. They itself serve as a single source of truth to create consistently well designed experiences familiar to the user.[…]"/>
|
|
|
|
|
|
<meta property="article:published_time" content="2018-07-02T12:00:00+02:00">
|
|
|
|
<meta property="og:url" content="http://localhost:4000/2018/07/02/style-guides-go-beyond-aesthetics.html" />
|
|
|
|
<meta itemprop="keywords" content="Style Guides,Brand Guidelines,Open Source Design" />
|
|
|
|
<meta property="article:tag" content="Style Guides">
|
|
|
|
<meta property="article:tag" content="Brand Guidelines">
|
|
|
|
<meta property="article:tag" content="Open Source Design">
|
|
|
|
|
|
|
|
<meta content="https://ura.design/images/blog/osd_event.png" property="og:image">
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:site" content="@uracreative" />
|
|
<meta name="twitter:image:src" content="https://ura.design/images/blog/osd_event.png" />
|
|
|
|
<link rel="stylesheet" href="/css/app.css">
|
|
<link href="/fonts/overpass/overpass.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/superslides.css"/>
|
|
<link rel="stylesheet" href="/css/slick-theme.css"/>
|
|
<link rel="stylesheet" href="/css/slick.css"/>
|
|
<link rel="stylesheet" href="/css/animate.css"/>
|
|
<link rel="stylesheet" href="/css/linea-styles.css"/>
|
|
<link rel="stylesheet" href="/css/linea-arrows-styles.css"/>
|
|
<link rel="stylesheet" href="/css/fontawesome-all.css"/>
|
|
<link rel="stylesheet" href="/css/style.css"/>
|
|
<link rel="stylesheet" href="/css/responsive.css"/>
|
|
|
|
<script src="/bower_components/modernizr/modernizr.js"></script>
|
|
|
|
<link rel="canonical" href="http://localhost:4000/2018/07/02/style-guides-go-beyond-aesthetics.html">
|
|
<link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class='contain-to-grid sticky transparent'>
|
|
<nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
|
|
<ul class='title-area'>
|
|
<li class="">
|
|
<h1>
|
|
<a href='/'><img src="/images/main/logo.svg" width="180.7px" height="56.5px alt="Ura Logo">
|
|
</a>
|
|
</h1>
|
|
</li>
|
|
</ul>
|
|
<div id="menu-toggler" class="right">
|
|
<a href='#'>
|
|
<i class="icon-arrows-hamburger-2"></i>
|
|
</a>
|
|
</div>
|
|
<section class='top-bar-section closed'>
|
|
<ul class='right'>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/blog/">Blog</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/events">Events</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/services">Services</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/request">Request</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown active">
|
|
<a href="/projects">Projects</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/logobridge">Logobridge</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="active">
|
|
<a href="/support-us">Support Us</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/about">About</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/contact">Contact</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/jobs">Jobs</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</section>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="full blog">
|
|
<div class="post single">
|
|
<div class="row">
|
|
<div class="large-8 large-centered columns">
|
|
<div class="post-content">
|
|
<h2 id="page-title">Style Guides go Beyond Aesthetics</h2>
|
|
<p class='info'>
|
|
|
|
<span>July 02, 2018</span> by <a href="https://elioqoshi.me/" target="_blank">Elio Qoshi</a>
|
|
</p>
|
|
<p>Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym <strong>RTFM</strong> or “<em>Read The Freaking Manual”</em>. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?</p>
|
|
|
|
<p>A similar stigma often appears in Free Software / Open Source projects as well. The alternative “<em>Read the Documentation</em>” certainly would ensure that people would give a little more effort before repeating questions. With limited resources it’s also understandable that this might be the most sane way for a project maintainer to channel user interactions. However is that by design or due to lack of resources? One could argue that it would make more sense to integrate those ‘user lessons’ right inside the application instead of a manual or documentation alone.</p>
|
|
|
|
<h2 id="manuals-are-no-replacement-for-good-usability">Manuals are no replacement for good Usability</h2>
|
|
|
|
<p>Make a great manual and a mediocre application and you might be able to keep a user from running into blockers, however you won’t be able to improve their workflow. The user is basically learning an app by heart, not by intuition.</p>
|
|
|
|
<p>This is where Usability and User Experience come into play: An alternative to the traditional manual, created by a researcher or designer instead of an engineer, so to speak.</p>
|
|
|
|
<p>Unlike a manual though, a delightful User Experience doesn’t ask to be read, it is seamlessly integrated into the application in a human-centric nature. Not the other way around.</p>
|
|
|
|
<p>There is a strong connection between Usability and a user’s emotional feedback: When an application lacks usability, the amount of time it takes the user to accomplish that task is not only higher, it also brings along negative forms of feedback such as frustration and impatience. If this happens in the case of privacy-enhancing software, those emotions can quickly turn into fear and breach of trust, putting the stakes higher. At that point, usability is not only a commodity anymore.</p>
|
|
|
|
<h2 id="consistency-is-key">Consistency is Key</h2>
|
|
|
|
<p>User Experience is shaped by the usage of patterns and aesthetics familiar to the user within the same software. Unsurprisingly, users don’t like change. If change and inconsistencies confuse users, we can conclude that consistent design decisions create trust; it feels familiar and the user has witnessed it in the past.</p>
|
|
|
|
<p>Facilitating consistency can be done via a range of tools, including Brand Guidelines and a Tone of Voice. As early as 3 years ago, our friends at <a href="https://simplysecure.org/blog/nostalgia-trust-and-brand">Simply Secure highlighted the importance of Brand Guidelines in relation to creating user trust</a>.</p>
|
|
|
|
<blockquote>
|
|
<p><em>Brand guidelines ensure consistency when many different people are working on a product. This is an important component for building trust with end-users. It’s crucial for secure communication projects in particular because lay users can’t assess the underlying cryptography. Instead, they assess how trustworthy something is by the user experience, and consistent brand expression is a key part of that. As a counterexample, consider how a sloppily-implemented logo in an email can alert people to a phishing scam by signaling untrustworthiness.</em></p>
|
|
</blockquote>
|
|
|
|
<p><strong>Style guides serve as a single source of truth for design decisions and guidelines. They also ensure that a project can be inclusive to diverse contributors, while helping them to communicate with users in one consistent voice throughout the whole range of mediums the project is present on</strong>. Depending on the context, style guides can include various ingredients, including (but not limited to) Brand Guidelines, UI Components and Tone of Voice. A style guide has no specific definition and can vary from use case to use case, so depending on a project’s needs, specific parts can be prioritized.</p>
|
|
|
|
<h2 id="playing-by-the-rules">Playing by the Rules</h2>
|
|
|
|
<p><a href="https://www.sketchapp.com/">Sketch</a> revolutionized Prototyping and UX Design years ago. Nowadays <a href="https://www.figma.com/">Figma</a> is gaining popularity, being praised by its focus on unified design systems accessible by all members of a project without reinventing components. Figma emphasized the need for consistency and streamlined the design process by integrating it within a powerful design system. It’s one of the primary reasons designers are so excited about it.</p>
|
|
|
|
<p><img src="/images/blog/IconGridBlurry.jpg" alt="Icon Grid Display" /></p>
|
|
|
|
<p>At the end of the day, style guides serve as a playbook for software creators. They go beyond the debate whether design decisions are justified or not, as long as it’s covered within it. They are a single source of truth to help create consistently well designed experiences familiar to the user. It might not be a silver-bullet solution in the short run, but it immensely helps everyone involved be on the same page.</p>
|
|
|
|
<h2 id="examples">Examples</h2>
|
|
|
|
<p>In the past we have implemented style guides for various projects, including <a href="https://ura.design/projects/tor-style-guide">The Tor Project</a>, Thunderbird and <a href="https://ura.design/projects/reproducible-builds">Reproducible Builds</a>. If you want to know more, we also suggest to read Simply Secure’s blog entry on <a href="https://simplysecure.org/blog/style-guide">Why Open-Source projects need Style Guides</a>.</p>
|
|
|
|
<p>Last but not least, the points touched upon in this article is the very reason we started building <a href="https://identihub.co">Identihub</a>. Have a look and try it out yourself!</p>
|
|
|
|
<p>If you like to explore the possibility of a style guide for your project, feel free to reach us by <a href="mailto:hello@ura.design">email</a> or <a href="https://twitter.com/uracreative">Twitter</a></p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="full light-grey blog">
|
|
<nav class='wrapper'>
|
|
<div class="row">
|
|
<div class="small-6 columns">
|
|
|
|
<a class="previous button boxed black" href='/2018/06/17/welcoming-renata-uras-usability-researcher'>
|
|
<i class='fa fa-angle-left'></i> Previous post
|
|
</a>
|
|
|
|
|
|
</div>
|
|
<div class="small-6 columns">
|
|
|
|
<a class="next button boxed black" href='/2018/07/05/thunderbird-style-guide'>
|
|
Next post <i class='fa fa-angle-right'></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div id="cookieConsent">
|
|
<div id="closeCookieConsent">x</div>
|
|
This website is using cookies. <a href="/privacy-policy" target="_blank">More info</a>. <a class="cookieConsentOK">That's Fine</a>
|
|
</div>
|
|
|
|
<div class="full no-padding footer blue centered-text">
|
|
<div class="two spacing"></div>
|
|
<div class="row">
|
|
<div class="small-12 columns">
|
|
<p>Made with <i class="fa fa-heart" style="color: red;" aria-hidden="true"></i> in <a href="https://en.wikipedia.org/wiki/Tirana" target="_blank">Tirana, Albania</a><p>
|
|
<div class="one spacing"></div>
|
|
<ul class="socials">
|
|
<li><a href="https://twitter.com/uracreative" target="_blank"><i class='fab fa-twitter'></i></a></li>
|
|
<li><a href="https://github.com/uracreative/ura.design/" target="_blank"><i class='fab fa-github'></i></a></li>
|
|
</ul>
|
|
<p>Committed to Free Software, Internet Freedom, and <a href="http://opensourcedesign.net/">Open Source Design</a></p>
|
|
<p> Trademarks are property of their respective owners. All site content, unless otherwise noted, is licensed <a href="http://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0 International</a> by Ura Design</p>
|
|
<p><a href="https://tinyletter.com/uracreative/archive" target="_blank">Newsletter Archive</a></p>
|
|
<p><a href="/privacy-policy" target="_blank">Privacy Policy</a></p>
|
|
<div class="two spacing"></div>
|
|
<p class="back-to-top"><a href="#"><i class="fa fa-chevron-up"></i>Back to top</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="spacing"></div>
|
|
</div>
|
|
|
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
<script src="/bower_components/foundation/js/foundation.min.js"></script>
|
|
<script src="/js/jquery.superslides.min.js"></script>
|
|
<script src="/js/slick.min.js"></script>
|
|
<script src="/js/wow.min.js"></script>
|
|
<script src="/js/jquery.validate.js"></script>
|
|
<script src="/bower_components/countto/jquery.countTo.js"></script>
|
|
<script src="/bower_components/appear/jquery.appear.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/svg.js"></script>
|
|
<script src="/js/cookie.js"></script>
|
|
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
/ tracker methods like "setCustomDimension" should be called before "trackPageView" /
|
|
_paq.push(["setCookieDomain", "*.ura.design"]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytics.ura.design/";
|
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
|
|
<noscript><p><img src="//analytics.ura.design/piwik.php?idsite=2&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Matomo Code -->
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|