Difference between revisions of "Design"

From Open Food Facts wiki
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
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.
 
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 (server)''':
+
 
 +
=== General ===
 
* 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]
 
* check for our existing issues: see these categories:
 
* check for our existing issues: see these categories:
 +
 +
=== Server ===
 +
* as a first step, better explain our goals
 +
* TL;DR: 80% of our traffic is mobile web, yet the site is poorly optimized for mobile
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3Adesign design]
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3Adesign design]
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3A%22%E2%99%BF+a11y%22 a11y]
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3A%22%E2%99%BF+a11y%22 a11y]
Line 19: Line 24:
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3A%22responsive+ux%22+ responsive ux]
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3A%22responsive+ux%22+ responsive ux]
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3Afrontend frontend]
 
** [https://github.com/openfoodfacts/openfoodfacts-server/issues?q=is%3Aissue+is%3Aopen+label%3Afrontend frontend]
* as a first step, better explain our goals
+
 
 +
 
 +
=== Mobile app ===
 +
* TL;DR: The mobile team is doings mocks and implementing them. Some innovation and deviation from the 2 year old mockups is happening.
 +
=== Open Food Facts explorer (next Gen Web Frontend) ===
 +
* TL;DR: We're trying to copy the best of classic frontend for lack of bandwidth to do mockups in advance. Loads of engineering bandwidth at the moment.
 +
=== Other ===
 +
* Search-A-Licious (P1): TL;DR: important, not launched yet, coherence with the web and mobile could be great. Interesting challenge if you like search projects. https://search.openfoodfacts.org/
 +
* Taxonomy Editor (low priority)
 +
* Hunger Games: TL;DR: the UI needs to be more consistent with the website, and also more efficient on mobile and web (it's a mass annotation system, people want to annotate as fast and as safely as possible)
 +
=== Bringing visual coherence to our secondary tools ===
 +
* Wiki (Mediawiki template), Forum (Discourse template), Blog (Wordpress template)
  
 
== Our design files==
 
== Our design files==
 
* Our design files are on Figma and Sketch. While we have many files and components, we use only a couple of them on a weekly basis: mobile, and sometimes web. Many of those files are outdated, and we lack digital twins for many of our key project. Our "design system" only has a couple of UI components (we have many more for things like scores, icons, illustrations…)
 
* Our design files are on Figma and Sketch. While we have many files and components, we use only a couple of them on a weekly basis: mobile, and sometimes web. Many of those files are outdated, and we lack digital twins for many of our key project. Our "design system" only has a couple of UI components (we have many more for things like scores, icons, illustrations…)
- Mobile app design: https://www.figma.com/design/nFMjewFAOa8c4ahtob7CAB/Mobile-App-Design-(Quentin)?node-id=5761-19044&p=f&t=EtNteEOoNEpfLbq7-0
+
** Mobile app design: https://www.figma.com/design/nFMjewFAOa8c4ahtob7CAB/Mobile-App-Design-(Quentin)?node-id=5761-19044&p=f&t=EtNteEOoNEpfLbq7-0
 
+
** New mobile app design (by Edouard @g123k, being retroported on a rolling basis): https://www.sketch.com/s/11375b6d-9c02-4920-846d-a2b1376600b9 
- App store vignettes: https://www.figma.com/design/loMFSX1wJ61jjuZkSeLV7e/Vignettes-App-Design-(Quentin)?t=6dcOBoRVCPmKZTQm-0
+
** App store vignettes: https://www.figma.com/design/loMFSX1wJ61jjuZkSeLV7e/Vignettes-App-Design-(Quentin)?t=6dcOBoRVCPmKZTQm-0  
- Web design: https://www.figma.com/design/Qg9URUyrjHgYmnDHXRsTTB/Current-Website-design?t=JC6vK1yBXR8faf1n-0   
+
** Web design: https://www.figma.com/design/Qg9URUyrjHgYmnDHXRsTTB/Current-Website-design?t=JC6vK1yBXR8faf1n-0   
 
[[File:Figma Screenshot.png|thumb]]
 
[[File:Figma Screenshot.png|thumb]]
 
+
* If you'd like a complete tour of our assets + access to Figma, please ask in #design. Since Figma is a paid for system, please use the free tier, and duplicate our files in your personal account. We can reintegrate your changes to the main file. If you're regularly volunteering in design, we'll be happy to pay you a paid seat.
 +
* We also have a Canva account, but this is limited to marketing/communication/blog & social assets.
  
 
==Needs and constraints==
 
==Needs and constraints==
Line 43: Line 60:
 
===Graphic Charter===
 
===Graphic Charter===
 
*[[Graphic charter]]
 
*[[Graphic charter]]
 +
* More details at https://quentinlagrange.com/projets/open-food-facts
  
 
===Fonts (outdated)===
 
===Fonts (outdated)===
Line 58: Line 76:
  
 
===Open Food Facts logo===
 
===Open Food Facts logo===
[to be documented]
+
* Please see [[Graphic charter]]. Feel free to port documentation here.
  
 
===Open Food Facts palette===
 
===Open Food Facts palette===
[to be documented]
+
* Please see [[Graphic charter]]. Feel free to port documentation here.
  
 
===Open Food Facts illustration policy===
 
===Open Food Facts illustration policy===
[to be documented]
+
* Please see [[Graphic charter]]. Feel free to port documentation here.
  
 
==You might also be interested by==
 
==You might also be interested by==

Latest revision as of 08:44, 4 April 2025

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.


General

  • document current design state (see below)
  • identify issues (coherence, accessibility, ...), and report it on Github
  • check for our existing issues: see these categories:

Server


Mobile app

  • TL;DR: The mobile team is doings mocks and implementing them. Some innovation and deviation from the 2 year old mockups is happening.

Open Food Facts explorer (next Gen Web Frontend)

  • TL;DR: We're trying to copy the best of classic frontend for lack of bandwidth to do mockups in advance. Loads of engineering bandwidth at the moment.

Other

  • Search-A-Licious (P1): TL;DR: important, not launched yet, coherence with the web and mobile could be great. Interesting challenge if you like search projects. https://search.openfoodfacts.org/
  • Taxonomy Editor (low priority)
  • Hunger Games: TL;DR: the UI needs to be more consistent with the website, and also more efficient on mobile and web (it's a mass annotation system, people want to annotate as fast and as safely as possible)

Bringing visual coherence to our secondary tools

  • Wiki (Mediawiki template), Forum (Discourse template), Blog (Wordpress template)

Our design files

Figma Screenshot.png
  • If you'd like a complete tour of our assets + access to Figma, please ask in #design. Since Figma is a paid for system, please use the free tier, and duplicate our files in your personal account. We can reintegrate your changes to the main file. If you're regularly volunteering in design, we'll be happy to pay you a paid seat.
  • We also have a Canva account, but this is limited to marketing/communication/blog & social assets.

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 palette

Open Food Facts illustration policy

You might also be interested by


Resources and inspirations

Get in touch

Slack channel