Joystream / design

Design standards, gudielines and systems for Joystream project
2 stars 12 forks source link

Finalise Visual Brand Idenity #9

Closed bedeho closed 4 years ago

bedeho commented 5 years ago

Notice: This is a very sloppy description of a problem and corresponding project, which may take some time to narrow down. Only take this as a starting point for an iterative process.

Problems

The Joystream visual brand identity is incomplete and undefined, leading to problems in the visual communication with our audience across all of our communication channels, products and messages.

Here is a list of some of our problems currently

Logomark

We literally are using two separate logo marks simultaneously, a "J" and an elephant. We no longer want to use the elephant, as it does not make sense with our current brand identity and vision, and we require a new set of logo marks that work with our existing wordmark.

Trying to avoid using the elephant logo mark has forced us to use the wordmark in places where it does not make sense, such as

Github organization

https://github.com/Joystream

Screenshot 2019-04-19 at 13 42 58

Twitter account logo

https://twitter.com/joystreamapp

Screenshot 2019-04-19 at 11 41 00

blog

https://blog.joystream.org/ Arguably this could have use the textmark, as the website itself does.

Screenshot 2019-04-19 at 14 18 43

Pioneer application

Screenshot 2019-05-10 at 10 55 42

Here are examples of the mixed usage of logomarks.

Polkadot Telemetry

https://telemetry.polkadot.io/#/Joystream%20Testnet%20v2

Screenshot 2019-05-10 at 10 57 00

Rocket.chat

Screenshot 2019-04-20 at 20 19 42

Browser tab

Screenshot 2019-04-19 at 11 42 42

Jsgenesis.com footer

Screenshot 2019-04-19 at 15 10 18

Email newsletter email capture screen

Screenshot 2019-04-19 at 21 10 46

Testnet Faucet

On https://testnet.joystream.org/faucet

Screenshot 2019-05-09 at 20 13 10

Missing social media covers

We are just using random things, such as

Twitter account

Screenshot 2019-04-19 at 11 41 06

Reddit

Screenshot 2019-04-19 at 11 42 19

Twitter post covers

Here there are many problems.

Inconsistency

There is no consistency in the

twitter-coulmn

Low production quality

Screenshot 2019-04-19 at 11 41 41 Screenshot 2019-05-10 at 09 32 49

Complex imagery

The imagery chosen is too complex, e.g. "From Sparta to Athens" or "The Sack of Sparta". It is not likely that many in the audience are able to decipher how it matches the message of the post. Instead proper usage of text would greatly aid the communication, and lowering requirements on imagery.

Screenshot 2019-05-09 at 20 14 47

Lack of explicit rules for images and photographies

These examples from the blog show that we have good rules on what imagery can be included, which leads to low quality and inconsistent communication.

Screenshot 2019-05-10 at 13 18 43 Screenshot 2019-05-10 at 13 19 22 Screenshot 2019-05-10 at 13 19 59

Blog covers

Blog covers again have complex imagery which does not communicate effectively, and reuses illustratations meant for other purposes. Simply assembling mulitple illustrations is not an effective way of conveying the prupose of a post.

Screenshot 2019-04-19 at 14 20 10 Screenshot 2019-04-19 at 14 21 01

Also, as for the twitter covers, the lack of any system in the background colors degrades clarity.

Screenshot 2019-04-19 at 14 19 02

Blog images

Blog imagery is abstract and unclear, and often just reuses existing assets without much care.

Screenshot 2019-05-10 at 13 23 21 Screenshot 2019-04-19 at 14 20 18

Brand

Please review the new brand profile description here.

Deliverables

Brand style guide

A new complete brand style guide document (in markdown) which covers

We have some old stuff on this on Figma, but its not in the form of a full document, and its also not all worth keeping, e.g. some of the color choices are no longer appropriate. Here are examples of brand style guides we think work well

New logoes

A new set of logoes which work with our word mark is required, along with a description for how placement and usage should be done. There should be multiple versions of the logo for multiple resolutions, perhaps with different levle of detail. Here are the contexts in which it may be used.

Again, its critical that there is an explicit usage policy for how they are to be used.

Icon set

We would like a light weight general purpose line icon set which covers lots of general purpose needs, including having icons associated with our roles, networks etc. Icons must be vector format, and must come in two versions

Communication templates

Our communication happens primarily over

For each, we need a set of well defined templates for the following messages, which address all problems outlined above.

One idea we would like to be explored is if all communication associated with a givne testnet can include some standard branding for that testnet, e.g. a tiled logomark for that testnet in background surfaces.

Newsletter

Here we need a full layout for each case, which is also responsive.

Blog

Here we need a cover photo (with the correct dimensions) which is compatible with Ghost blog frame, as well as standard ways of doing graphics and illustrations.

Twitter post covers

Must be the right dimensions, and have suitable . Here are some strong examples

Screenshot 2019-04-23 at 08 13 54 Screenshot 2019-04-22 at 06 47 56 Screenshot 2019-04-23 at 08 13 54

Twitter account cover

Here are some nice examples

Reddit branding

Product subbranding system

We have multiple digital, and in the near future physical, products. We need a system of subbrands for each one, where makes them recognizable parts of the Joystream identity. For example, we currently have

Each one needs proper branding, such as a logo set, etc.

bwhm commented 5 years ago

Just some small comments on the actual content.

My biggest questions are listed below, and are mostly concerning the process itself.

  1. Is this on @TomiNadratowski alone, or should we involve more people?
  2. How involved will you be in the process.

I would like @TomiNadratowski and elpassion to give this a proper review, ask questions, and then present a formal document, including things like:

Comments

Jsgenesis.com footer

A brush up of this page could arguably be prioritized over this, as a couple of days should be sufficient.

Email newsletter email capture screen

I would add template(s) for newsletters as a an extra deliverable.

Lack of explicit rules for images and photographies

One of the few points I disagree with. I think it makes sense to try and formalize recurring and more serious posts, but I think some posts can be more informal in nature. In the specific case you are referring too, I do agree we should still avoid mixing between the "sudo" image (which is somewhat consistent with our usual posts, eg. produced in house, transparent background, council members, etc) and the memes. If you prefer, we could separate such posts out to a more fitting medium.

Blog covers

Something we've discussed before, and I fully support. Would cut down on production time, and improve quality.

Blog images

(Somewhat related to "Lack of explicit rules for images and photographies".) I don't know what your point, or solution is here. I would argue reusing images helps readers recognize and associate images with whatever they are representing. For "recurring" posts, I think this is a good thing. As a sidenote, we need to break the text of posts sometimes. I don't think we can justify making new images, in sufficient quality, that is following the rules 2-5 times pr post. In addition to resources spent, it always causes delays.

Deliverables

Dead link Are the examples meant to represent good branding, or good branding style guides?

Communication templates

I would argue for more blog categories, but it's fine to start with these.

Product subbranding system

This seems premature, maybe with the exception of Pioneer. Most users don't see anything else.

bedeho commented 4 years ago

Identity itself is done, will be introduced into this repo later.