joystream / design Goto Github PK
View Code? Open in Web Editor NEWDesign standards, gudielines and systems for Joystream project
Design standards, gudielines and systems for Joystream project
First we actually need to settle on some rules, perhaps with the help of some assistance from Pawel/Tomasz.
Estimation: 1 - 2 Man Days
Feedback Required
Estimation: 0,5 Man Day
Estimation: 0,3 - 0,5 Man Day
Viewer Experience, Accessibility Issue
For the Joystream repo
Other Repos:
Visioning In Progress
We need working twitter (and facebook?) cards for:
1️⃣ joystream.org website
This could just be the simple "Joystream" logo, white on black. (.svg and .png in this repo). The code for this should already be there, but I think the image is gone!
2️⃣ blog
This could either be the same logo, with a smaller ".blog" below, or something like what you see on the blog header. (we have an .svg if you need)
3️⃣ pioneer app
Here, we can either use the same as for joystream.org, only with a subtitle like "Join the testnet", or the athens cover with the same subtitle. At some point, we should make a logo for the app, but not the top priority.
Issue covering frontend design and asset sourcing
Frontend for this: Joystream/joystream#188
Visioning In Progress
Please see latest comments for progress on this issue.
This issue has been created in order to track our final preparations before our new brand identity is launched. I have created some mockups below to test whether we have all of the necessary assets for all of the places we may need to put them.
One thing I noticed during my testing process is that we do not currently have an asset which contains just the name of the project in the new logo font. This might be useful in cases where we are constrained for space (e.g. on the top of the sidebar in Pioneer) and do not want to include the logo icon alongside the logo text.
In other words, I think we should have an asset that is the equivalent of this (a textmark) in the new design style:
I think this is quite a weak asset, it would be much better to have this so that the text is more right-aligned. In the current proposed layout, the twitter profile photo is almost overlapping the cover design text.
I think this is quite a weak asset, it would be much better to have this so that the text is more right-aligned. In the current proposed layout, the twitter profile photo is almost overlapping the cover design text.
WIP document for everything that must be done to deploy new brand identity.
TBD
Identify full list of surfaces that must be updated, and for each, make sure that we have the right asset with suitable dimensions and resolution and have tested the asset live. For ac
Needs to be updated and reogranized, and the PDF versoin of the brand design guide must be there, very prominently.
What is involved here? add checklist items.
Need to make blog post draft: short and sweet: why we did it, origiganl github issues should be good inspiration, and then just link to new brand identity portal
Frontend for this: Joystream/joystream#190
Including scripts, design, assets, etc.
The frontend part of this: Joystream/joystream#191
Including design, assets, scripts etc.
There are a couple of places on GitHub where we've listed where elements of the old brand identity are shown, but I think a definitive list would be useful to aid the transition.
I'm not completely sure whether the Jsgenesis branding (as opposed to Joystream logos etc.) is included in the rebrand but have included those examples in this list just in case.
Ticks indicate new asset exists
REMOVED - likely to be out of scope for rebrand
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.
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
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
https://twitter.com/joystreamapp
https://blog.joystream.org/ Arguably this could have use the textmark, as the website itself does.
Here are examples of the mixed usage of logomarks.
https://telemetry.polkadot.io/#/Joystream%20Testnet%20v2
On https://testnet.joystream.org/faucet
We are just using random things, such as
Here there are many problems.
There is no consistency in the
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.
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.
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.
Also, as for the twitter covers, the lack of any system in the background colors degrades clarity.
Blog imagery is abstract and unclear, and often just reuses existing assets without much care.
Please review the new brand profile description here.
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
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.
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
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.
Here we need a full layout for each case, which is also responsive.
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.
Must be the right dimensions, and have suitable . Here are some strong examples
Here are some nice examples
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.
*Requires Estimation
The communication style needs to be constrained better, with guides on what language and image motifs can be used in communication, in particular, blogs.
Estimation: 0,5 Man Day
Estimation: 0,5 Man Day
I.e.
Menu More
Crop and Adjust
Processing
Estimation: 0,2 Man Day
Visioning In Progress
Visioning In Progress
WIP
Estimation: 0,5 Man Day
Video Statuses
Update Tile Design
More Menu
Pagination
All Tabs
Action Bar
Designing login/onboarding screen
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.