Difference between revisions of "Design"
Jump to navigation
Jump to search
(+ category "Open Food Facts policies and guidelines") |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
As an international and inclusive project, Open Food Facts needs to share a clear design for all its current and future users. | As an international and inclusive project, Open Food Facts needs to share a clear design for all its current and future users. | ||
| − | This current page aims to list main needs and constraints, and document our current design efforts. | + | This current page aims to list main needs and constraints, and document our current design and UX efforts. |
| − | + | ||
| − | |||
| − | |||
| − | |||
== How to help == | == How to help == | ||
Open Food Facts does need design work and design skills. | Open Food Facts does need design work and design skills. | ||
| − | Design discussion takes place in the "design" channel of [https://slack.openfoodfacts.org/ our Slack space]. | + | Design discussion takes place in the "#design" channel of [https://slack.openfoodfacts.org/ our Slack space] , in our GitHub dedicated to design (https://github.com/openfoodfacts/openfoodfacts-design) and in the various issues/slack channels related to specific projects. |
| − | '''Some current tasks to be done''': | + | '''Some current tasks to be done (server)''': |
* document current design state (see below) | * document current design state (see below) | ||
* identify issues (coherence, accessibility, ...), and [https://github.com/openfoodfacts report it on Github] | * identify issues (coherence, accessibility, ...), and [https://github.com/openfoodfacts report it on Github] | ||
| Line 35: | Line 32: | ||
Open Food Facts is currently using informal rules to support these needs and constraints. | Open Food Facts is currently using informal rules to support these needs and constraints. | ||
| − | === Fonts === | + | === Graphic Charter === |
| + | * [[Graphic charter]] | ||
| + | |||
| + | === Fonts (outdated) === | ||
Open Food Facts is using easy to read fonts: for their main contents, most Open Food Facts websites(*) use the following font directives: <code>"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif</code> | Open Food Facts is using easy to read fonts: for their main contents, most Open Food Facts websites(*) use the following font directives: <code>"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif</code> | ||
* '''issues''': | * '''issues''': | ||
| Line 56: | Line 56: | ||
=== Open Food Facts illustration policy === | === Open Food Facts illustration policy === | ||
[to be documented] | [to be documented] | ||
| + | |||
| + | == You might also be interested by == | ||
| + | * [[User Experience]] | ||
| + | |||
== Resources and inspirations == | == Resources and inspirations == | ||
| Line 63: | Line 67: | ||
* [https://blog.prototypr.io/design-for-coherence-not-consistency-8d890760dc4c Design for Coherence, not Consistency] | * [https://blog.prototypr.io/design-for-coherence-not-consistency-8d890760dc4c Design for Coherence, not Consistency] | ||
[[Category:Open Food Facts policies and guidelines]] | [[Category:Open Food Facts policies and guidelines]] | ||
| + | [[Category:Design]] | ||
| + | == Get in touch == | ||
| + | {{Box | ||
| + | | 1 = Slack channel | ||
| + | | 2 = [https://openfoodfacts.slack.com/messages/C02L4H55V/ #design] | ||
| + | }} | ||
Latest revision as of 12:34, 19 November 2024
As an international and inclusive project, Open Food Facts needs to share a clear design for all its current and future users.
This current page aims to list main needs and constraints, and document our current design and UX efforts.
How to help
Open Food Facts does need design work and design skills.
Design discussion takes place in the "#design" channel of our Slack space , in our GitHub dedicated to design (https://github.com/openfoodfacts/openfoodfacts-design) and in the various issues/slack channels related to specific projects.
Some current tasks to be done (server):
- document current design state (see below)
- identify issues (coherence, accessibility, ...), and report it on Github
- check for our existing issues: see these categories:
- as a first step, better explain our goals
Needs and constraints
Open Food Facts design have to address the following needs and constraints:
- international: Open Food Facts is an international project and its design should be readable and understandable in any kind countries or cultures
- highly readable: Open Food Facts is a project which promotes food transparency and aims to share knowledge; its design should make contents easy to read and understand
- inclusive and accessible: we care about every kind of users with every kind of technologies or disabilities
- opened to every kind of usages and users: Open Food Facts is not only talking to the general public but also to professionals such as scientists, policymakers, expert, journalists, food producers, etc.
- Open Food Facts doesn't provide recommendations but tries to enlighten users about product facts; its design shouldn't add subjective meanings unless it is based on facts and science (e.g. red colour used to share a factual information)
Current design state
Open Food Facts is currently using informal rules to support these needs and constraints.
Graphic Charter
Fonts (outdated)
Open Food Facts is using easy to read fonts: for their main contents, most Open Food Facts websites(*) use the following font directives: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
- issues:
- "Helvetica Neue" and Helvetica are not installed on some operating systems such as Linux (and ?); some users have said Helvetica is not the best
- Roboto is not installed natively on the main operating systems (MacOS, Windows, Linux); it should be downloaded by a CSS directive but it's not
- TODO:
- compare with other website such as Wikipedia, OpenStreetMap or other projects
- use Arial which is widely used?
- use CSS directive to download the main font (drawback: impacts on performance)
- what about non-Latin alphabets?
(*) tip: Font Finder, a Firefox extension, is an easy-to-use font inspector to get the current font of the selected element.
Open Food Facts logo
[to be documented]
Open Food Facts palette
[to be documented]
Open Food Facts illustration policy
[to be documented]
You might also be interested by
Resources and inspirations
- What happens when you prioritize consistency over clarity.
- Defining Principles to Drive Design Decisions
- How to maximize the impact of content design (see slide 46)
- Design for Coherence, not Consistency
Get in touch
|
|---|