SteemMakers Branding Guidelines

in #steemmakers6 years ago (edited)

Over the past months we've made a lot of progress with our community. Most of the work goes on behind the scenes and sometimes we have to say 'we could help you a bit but we're working on it'. A feature that has been requested a lot is to have a place where all our branding information is explained and can be downloaded. Today we can finally present you with this great information. The information will be available on the website as soon as the redesign has been implemented, it is ready but the redesign is not. This post shows the first version in anticipation. In the future please always refer to the website for the most recent information.

A big shout out to @podanrj for all the help, the support and the artwork!

Thank you for your interest in SteemMakers. We have a few guidelines for using our brand resources. Please take a moment to familiarize yourself with them.

Our logos

The SteemMakers logo system is the common thread throughout our communications, and should be your starting point when creating marketing materials. Think of it as a map that helps explain and unify our large, complex community.

Scroll down for precise guidelines on logo usage, placement, color, and size. Consistent treatment of the logo builds the SteemMakers brand.

General logo guidelines

These general guidelines apply for all artwork described in the next sections.

Respect the design

Respect the work that has been put into this design and the people that have made it. Use the logo artwork exactly as it’s given. Do not make up a logo yourself and do not manipulate it. Do not change the type, the colors, or the rules around it. Do not redraw it, distort it, or add anything to it.

If you want to make something using the logo (e.g. 3D print, lasercut, etc) respect the dimensions of the logo:

Clear space and sizing

The minimum clear space is defined as x, defined as one fourth of the width of the logo. The minimum clear space of x should always be applied. Try to maximize clear space whenever possible.

The minimum size of our logo is 98 px on screen, or 0,327 in (8,316 mm) in print. In exceptional circumstances, smaller sizes for print may be necessary (e.g. on event merchandise). In such cases, legibility should always be your top priority – always ensure the line in every object logomark and slogan are clearly visible.

Colors

The SteemMakers logo can be color, dark or light. The used colors are detailed below. Don't use the eyedropper, the ‘eye dropper’ or color sampling tool is inaccurate. For best color reproduction, follow the numbers in the color guidelines.

color1

color2

Placement

The logos should be used on all external communications and on internal communications that need a more formal approach.

Give the logo its space. This is one of the most important things we’d like you to remember. This space is always required on print pieces. If you’re creating a composition, put the SteemMakers logo in one of the areas. Some examples can be found in the next section.

placement

Background

Ideally the logo is to be used on a light background for maximum impact and clarity. When this is not possible, be sure to choose background colors or photos that provide sufficient contrast with the logo. There is also an official background available in the resources below.

Examples

p2

Questions

When making use of our branding artwork, be sure to follow the guidelines. If you would like to make use of our artwork or other brand features in a manner not within the guidelines we ask you to first contact us.

Have questions about how to properly use our logo or other brand features? Contact us at our discord server.

Font / Typhography

Rajdhani is Steemmakers primary type and should be used whenever possible to communicate key brand messages in headlines and display copy. It’s available in multiple weights, complete with italics, but please narrow your use to “Light” through “Semi-bold” in most instances. The font is available in the resources section below.

font

Resources

Primary master logo

logo1

The primary master logo, sometimes also called the master plate or master logo, is the official logo of SteemMakers.

Download color, blue, black and white versions in png, ai, svg and pdf format in one zip file here.

Secondary master logo

logo2

The secondary master logo is an alternative to the primary master logo and also an official logo of SteemMakers.

Download color, blue, black and white versions in png, ai, svg and pdf format in one zip file here.

Alternative logo

The alternative logo is the same as master logo but without the slogan and can be used where space is limited.

Download color, blue, black and white versions in png, ai, svg and pdf format in one zip file here.

Icon

icon

The icon signature (the SteemMakers icon) is our more informal logo to use. Use the icon for the SteemMakers brand when the main logo can not match your needs. It helps the outside world to understand that it is the SteemMakers brand.

Download color, blue, black and white versions in png, ai, svg and pdf format in one zip file here.

SteemMakers makers subcategory

makers

Download color, blue, black and white versions in png, svg and pdf format in one zip file here.

SteemMakers DIY subcategory

diy

The SteemMakers DIY subcategory logo is our more informal logo to be used only for the DIY category within SteemMakers. Only use the logo if targeting the DIY category explicitely.

Download color, blue, black and white versions in png, svg and pdf format in one zip file here.

Steemmakers background

This is our official background, you can use our background if u needed for creating something.

Download the background and combinations of the background with several logo versions here.

background

Font

Rajdhani is Steemmakers primary font for graphics.

Download the font here.

Steemmakers signature

After you've looked around in the community and made some friends, you can start with the next step. Show your love for SteemMakers!

Our community graphics hero @podanrj, who is responsible for all of our amazing artwork, created a fantastic banner that you can link in the footer of your articles.

footer

You can request your footer in the discord channel "footer-request".

Complete package

Grab only the brand elements you need or download the complete SteemMakers brand package in here.

Utopian information: proof of work done

Repository: https://github.com/JefPatat/SteemMakers/tree/master/website

My github account: https://github.com/JefPatat

Relevant commit: https://github.com/JefPatat/SteemMakers/commit/27359e408375c4a702e8e0f15cef1caa103d4839

Sort:  

This is a brilliant work and a great contribution. Thank you. And also great work, @podanrj. The graphics are amazing as always.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.



Chat with us on Discord.
[utopian-moderator]Need help? Write a ticket on https://support.utopian.io/.

Thank you so much for the positive feedback! I really appreciate the work you guys do. My small upvote in return ;-)

Amazing!
Now every question is answered. :)

Awesome looking design guys, big respect to @podanrj for doing all the graphic work, looks real tight and professional

I will fly. 🤣.

Congratulations @jefpatat! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

<p dir="auto"><a href="http://steemitboard.com/@jefpatat" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/768x0/https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png 2x" /> Award for the number of upvotes <p dir="auto"><sub><em>Click on the badge to view your Board of Honor.<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto">To support your work, I also upvoted your post! <blockquote> <p dir="auto">Do you like <a href="https://steemit.com/@steemitboard" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">SteemitBoard's project? Then <strong><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for its witness and <strong>get one more award!


Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!Hey @jefpatat

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @jefpatat! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

<p dir="auto"><a href="http://steemitboard.com/@jefpatat" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/768x0/https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png 2x" /> Award for the number of upvotes <p dir="auto"><sub><em>Click on the badge to view your Board of Honor.<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <blockquote> <p dir="auto">Do you like <a href="https://steemit.com/@steemitboard" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">SteemitBoard's project? Then <strong><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for its witness and <strong>get one more award!