openfoodfacts-design

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

openfoodfacts-design

★ 15 Open GitHub ↗

This is the secret lair of the Open Food Facts design team.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Open Food Facts

# Welcome
[Click here to get onboarded on the Design team](./CONTRIBUTING.md)

# Current assets
- [Graphic charter by Quentin Lagrange](./graphic-charter)
- [Illustrations by Quentin Lagrange and Clémence Gigandet](./images/illustrations)
- [Avatar system by Clémence Gigandet](./avatars)
- [Rive animation by Clémence Gigandet](./animations)
- [Design System documentation](./DESIGN.md)
- [Code implementation resources](./ACTING-ON-THE-CODE.md)

# Design plan
This is an initial plan to kickstart design at Open Food Facts.

## High level plan
- Organisation
- Contribution guidelines
- Design System
- User experience
  - User flows / User journeys
  - User persona
 
- [🎨 Fostering the Open Food Facts Design Community](https://github.com/orgs/openfoodfacts/projects/76)
- [🎨 Creating & Maintening a Design System for Open Food Facts](https://github.com/orgs/openfoodfacts/projects/75)
- [🎨 UXR & Design team - a daunting and massive backlog generated automatically from all our repositories](https://github.com/orgs/openfoodfacts/projects/11)

<br />

# Brand
Should drive every single decisions when building new products/features. Good brand is much more than a name and a logo.
Values should define our unique identity and should makes us stand out from others.

<br />

## Questionnaire

### Audience
> Who is the audience?
- Consumers
- Journalists
- Contributors
  - Catalogue
  - Developers
  - Designers

### Vision
> Why does Open exist? What are its values? How do they help guide the future of the product?

<br />

### Design principles
> What are the basis of Open Food Facts Design? How do we approach design? Help with everyday decisions.

<br />

### Tone of voice
> What's the tone of voice we want to speak to our audience at every moment in their journey in order to help getting wherever they want to go?

<br />

### Terminology
> What are the standard terms and phrases that need to be kept the same throughout the UX, speeding up the design process and unifying our voice.

<br />

# Logo
In most cases, your logo will be the first brand asset someone sees. Make the right first impression. A distinctive logo helps users recognise a product immediately and gives the essence of the branding
- [x] Create monochromatic version of logo
- [x] Provide a variety of formats for the vector version to make it easier for others to work and prevent anyone from redrawing it.
- [![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?logo=figma&logoColor=white) Logo of Open Food Facts](https://www.figma.com/design/HKAAPSQq8CZZO5uAziabRY/New-Open-Food-Facts-logo?m=auto&t=bGdHdz45zaPlgTnW-6)
<br />

# Illustrations
- [ ] Provide guidelines for illustrations
- [ ] Create the most important illustrations so that we stay coherent
- [![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?logo=figma&logoColor=white) Illustrations for Open Food Facts](https://www.figma.com/design/aM6Yu2w3JGBuHTXDHoeUuf/Illustrations?m=auto&t=bGdHdz45zaPlgTnW-6)

# Guidelines
Provide guidance on how to approach common UX patterns, achieve consistent UX.

<table border=2>
  <tr>
    <th rowspan=6>P0</th>
    <th rowspan=6>Logo (Done)</th>
    <th>Usage</th>
    <td>Provide contextual examples of what to do and not to do with the logo</td>
  </tr>
  <tr>
    <th rowspan=2>Small</th>
    <td>Logo should perform well and should be recognisable at all sizes</td>
  </tr>
  <tr>
    <td>Provide tips for using logo in these cases in order to minimise the risk of it being misused.</td>
  </tr>
  <tr>
    <th>Placement</th>
    <td>How should the logo be placed and how can we preserve its space, especially when living along with other content.</td>
  </tr>
  <tr>
    <th rowspan=2>Monochromatic</th>
    <td>Should look good on top of photography</td> 
  </tr>
  <tr>
    <td>Should look good when printed with a poor quality print</td>
  </tr>
  <tr>
    <th rowspan=4>P1</th>
    <th rowspan=2>Accessibility</th>
    <th>Colour hierarchy</th>
    <td>[insert text here]</td>
  </tr>
  <tr>
    <th>Assistive technologies</th>
    <td>[insert text here]</td>
  </tr>
  <tr>
    <th rowspan=2>UX Copy</th>
    <th rowspan=2>Microcopy</th>
    <td>How do we write for the components</td>
  </tr>
  <tr>
    <td>Platform conventions and best practices for writing all into consideration.</td>
  </tr>
  <tr>
    <th rowspan=1>P2</th>
    <th rowspan=1>User Onboarding</th>
    <th>User Onboarding</th>
    <td>How do we onboard users to product or new feature, give them great UX from the start</td>
  </tr>
</table>

### Elsewhere
* Wiki page to update: https://wiki.openfoodfacts.org/Design
* We have a #design channel on Slack. https://slack.openfoodfacts.org
* We'd like to restart a regular design call (for meta subject related to design, and creating a design org), as well as find a way to integrate Design in our development process, and weekly calls.

openfoodfacts-design

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README