Changes

Jump to navigation Jump to search
3,097 bytes added ,  11:04, 30 October 2020
Page creation
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.

== 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.

=== Fonts ===
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''':
** "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: [https://addons.mozilla.org/en-US/firefox/addon/font-inspect/ 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]

== Resources and inspirations ==
* [https://twitter.com/jdvogt/status/1319065447346573313?s=09 What happens when you prioritize consistency over clarity].
* [https://medium.com/salesforce-ux/defining-principles-to-drive-design-decisions-b647b68fb057 Defining Principles to Drive Design Decisions]
* [https://noti.st/jcolman/jO6Ndh/how-to-maximize-the-impact-of-content-design How to maximize the impact of content design] (see [https://noti.st/jcolman/jO6Ndh/how-to-maximize-the-impact-of-content-design#sqz7Npl slide 46])
* [https://blog.prototypr.io/design-for-coherence-not-consistency-8d890760dc4c Design for Coherence, not Consistency]

Navigation menu