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.
311 lines
16 KiB
311 lines
16 KiB
3 years ago
|
<!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 designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes …" />
|
||
|
|
<meta name="keywords"
|
||
|
|
content="design, ux, ui, public, developer, privacy, security, foss, floss" />
|
||
|
|
<meta name="robots" content="noodp" />
|
||
|
|
<meta name="theme-color" content="#1A7C83" />
|
||
|
|
<link rel="canonical" href="http://test.ura.design/work/optima/" />
|
||
|
|
|
||
|
|
|
||
|
|
<title>
|
||
|
|
Internews’ OPTIMA :: 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="Internews’ OPTIMA">
|
||
|
|
<meta itemprop="description" content="We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style."><meta itemprop="datePublished" content="2021-01-24T12:00:00+02:00" />
|
||
|
|
<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
|
||
|
|
<meta itemprop="wordCount" content="428"><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="Internews’ OPTIMA"/>
|
||
|
|
<meta name="twitter:description" content="We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style."/>
|
||
|
|
|
||
|
|
<meta property="article:section" content="Branding" />
|
||
|
|
|
||
|
|
<meta property="article:section" content="Illustrations" />
|
||
|
|
|
||
|
|
|
||
|
|
<meta property="article:published_time" content="2021-01-24 12:00:00 +0200 +0200" />
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="d-flex flex-column min-vh-100" style="background-color: #1A7C83;">
|
||
|
|
<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: #1A7C83;">
|
||
|
|
<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">Internews’ OPTIMA</h1>
|
||
|
|
<p class="project-summary">We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style.</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: #FFD2F9;">
|
||
|
|
|
||
|
|
<a class="category" href="http://test.ura.design/categories/branding">Branding</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: #FFD2F9;">
|
||
|
|
|
||
|
|
<a class="links" href="https://www.figma.com/proto/sf5rhrK9a6tS7yEomiNwmr/Optima?page-id=248%3A1754&node-id=248%3A1755&viewport=241%2C48%2C0.13&scaling=contain" target="_blank" rel="noopener noreferrer">brand book</a>
|
||
|
|
|
||
|
|
<a class="links" href="https://internews.org/wp-content/uploads/2021/03/Optima_Needs_Assessment_Report_2020.pdf" target="_blank" rel="noopener noreferrer">needs assessment report 2020</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="offset-xl-1 col-xl-7 col-lg-7 col-12 pt-5 project-content">
|
||
|
|
<p>Internews’ OPTIMA program is designed to build resources and advocacy capacity such that civil society organizations (CSOs) in high-risk countries can better and more proactively predict, prevent, and be prepared to respond to internet shutdowns.</p>
|
||
|
|
<hr>
|
||
|
|
<p>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.</p>
|
||
|
|
<figure><img src="http://test.ura.design/img/work/optima-brand.svg"/>
|
||
|
|
</figure>
|
||
|
|
<h2 id="about-the-logo">About the Logo</h2>
|
||
|
|
<p>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.</p>
|
||
|
|
<figure><img src="http://test.ura.design/img/work/optima-text.svg"/>
|
||
|
|
</figure>
|
||
|
|
<h2 id="visual-style">Visual Style</h2>
|
||
|
|
<p>Internews’ OPTIMA needed a visual style that would be approachable and empowering.</p>
|
||
|
|
<p>We designed the visual components in a modular way in order to compliment the energetic dynamic we want to communicate. A little bit glitchy, yet not naive. The graphics of this visual identity will be an abstract combination of geometric shapes and other stylized icons, which help in illustrating a specific concept.</p>
|
||
|
|
<p>The illustrations set is flexible and open for changes. Any icon can be added, as long as it is designed in this specific style.</p>
|
||
|
|
<figure><img src="http://test.ura.design/img/work/optima-icons.svg"/>
|
||
|
|
</figure>
|
||
|
|
<h2 id="independent-slogan">Independent Slogan</h2>
|
||
|
|
<p>DEFENDING THE INTERNET WITH DATA is OPTIMA’s tagline.</p>
|
||
|
|
<p>It stands in the middle of the two graphic styles, creating a bridge between the logo and the supportive illustrations.</p>
|
||
|
|
<p>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.</p>
|
||
|
|
<figure><img src="http://test.ura.design/img/work/optima-slogan.svg"/>
|
||
|
|
</figure>
|
||
|
|
<h2 id="brand-book">Brand Book</h2>
|
||
|
|
<p>The brand book is an important addition and documentation of the visual identity of Internews’ OPTIMA. It ensures that the brand is correctly presented, respecting each graphic asset, preserving the style, making the brand easily recognizable.</p>
|
||
|
|
<p>Link: <a href=https://www.figma.com/proto/sf5rhrK9a6tS7yEomiNwmr/Optima?page-id=248%3A1754&node-id=248%3A1755&viewport=241%2C48%2C0.13&scaling=contain
|
||
|
|
|
||
|
|
target="_blank" rel="noopener noreferrer"
|
||
|
|
>Internews’ OPTIMA - Brand Book</a></p>
|
||
|
|
<figure><img src="http://test.ura.design/img/work/optima-typography.svg"/>
|
||
|
|
</figure>
|
||
|
|
<h2 id="needs-assessment-report">Needs Assessment Report</h2>
|
||
|
|
<p>The Needs Assessment Report “BUILDING CAPACITY FOR INTERNET SHUTDOWN ADVOCACY” , authored by Laura Schwartz-Henderson, was one of the deliverables designed after setting the tone.</p>
|
||
|
|
<p>The report was redesigned with a new layout based on the recently designed visual identity, adding more diversity to the visual style.</p>
|
||
|
|
<p>Link: <a href=https://internews.org/wp-content/uploads/2021/03/Optima_Needs_Assessment_Report_2020.pdf
|
||
|
|
|
||
|
|
target="_blank" rel="noopener noreferrer"
|
||
|
|
>Internews’ OPTIMA- Building Capacity for Internet Shutdown Advocacy</a></p>
|
||
|
|
<figure><img src="http://test.ura.design/img/work/optima-report.webp"/>
|
||
|
|
</figure>
|
||
|
|
<h2 id="how-we-helped">How we helped</h2>
|
||
|
|
<ul>
|
||
|
|
<li>We helped Internews’ OPTIMA create their brand and visual identity.</li>
|
||
|
|
<li>We offered consistent design solutions of every digital asset of the program, such as the Needs Assessment Report.</li>
|
||
|
|
<li>We made sure the program was visually presented and engage with their audience in the right way.</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>
|