Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #d
  • #de
  • #des
  • #design
RSS: #design_system

#design_system

  • #design_systems
  • @b_b
    b_b @b_b PUBLIC DOMAIN 6/02/2023
    8
    @jeanmarie
    @biggrizzly
    @sandburg
    @gblin
    @rastapopoulos
    @hassan_nya
    @ericw
    @cy_altern
    8

    Visual #design #rules you can safely follow every time
    ▻https://anthonyhobday.com/sideprojects/saferules

    You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are #safe to follow every time.

    – Use near-black and near-white instead of pure black and white
    – Saturate your neutrals
    – Use high #contrast for important elements
    – Everything in your design should be deliberate
    – Optical #alignment is often better than mathematical alignment
    – Lower letter spacing and line height with larger #text. Raise them with smaller text
    – Container borders should contrast with both the container and the background
    – Everything should be aligned with something else
    – #Colours in a palette should have distinct brightness values
    – If you saturate your neutrals you should use warm or cool colours, not both
    – Measurements should be mathematically related
    – Elements should go in order of visual weight
    – If you use a horizontal grid, use 12 columns
    – #Spacing should go between points of high contrast
    – Closer elements should be lighter
    – Make drop shadow blur values double their distance values
    – Put simple on complex or complex on simple
    – Keep container colours within brightness limits
    – Make outer padding the same or more than inner padding
    – Keep body text at 16px or above
    – Use a line length around 70 characters
    – Make horizontal #padding twice the vertical padding in buttons
    – Use two #typefaces at most
    – Nest corners properly
    – Don’t put two hard divides next to each other

    b_b @b_b PUBLIC DOMAIN
    • @sandburg
      Sandburg @sandburg CC BY-SA 6/02/2023

      #ux Finitions.
      J’ai l’impression qu’on redit toujours un peu les même choses depuis 15 ans.
      Et surtout que ce sont les pratiques de PAO qui débouchent sur le web.

      Sandburg @sandburg CC BY-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 7/02/2023

      #saferules #design_system #webdesign

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 2/11/2022
    2
    @rastapopoulos
    @jeanmarie
    2

    Home | The Component Gallery
    ▻https://component.gallery

    Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of #interface #components based on examples from the world of #design_systems

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/11/2022

      #intégration #web #composants #ergonomie #HTML #CSS #javascript

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 24/06/2022
    2
    @rastapopoulos
    @tofulm
    2

    COMPOSANTS - Système de Design de l’État - Confluence
    ▻https://gouvfr.atlassian.net/wiki/spaces/DB/pages/193036295/COMPOSANTS

    Design system officiel de l’état français (et en particulier ▻https://gouvfr.atlassian.net/wiki/spaces/DB/pages/223019527/Typographie+-+Typography pour télécharger la police Marianne)
    Voir aussi : ▻https://www.gouvernement.fr/charte/charte-graphique-les-fondamentaux/le-systeme-graphique

    #design_system #etat_français #officiel #typo #Marianne

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 20/09/2021
    2
    @rastapopoulos
    @ericw
    2

    “Welcome to the #W3C design system

    This #design_system documents the styles, components and templates available to use on your website.”

    ▻https://design-system.w3.org

    Étonnant que personne ne l’ait encore partagé, #style_guide #css et tout ça...

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 15/07/2021
    8
    @arno
    @tetue
    @simplicissimus
    @7h36
    @biggrizzly
    @fil
    @gblin
    @sombre
    8
    @tetue

    Système de Design de l’État
    ▻https://www.systeme-de-design.gouv.fr

    https://systeme-de-design.gouv.fr/src/img/systeme-de-design.gouv.fr.jpg

    Le tout nouveau design system de l’État français, signalé par @tetue dans son article : ►https://seenthis.net/messages/922369

    Avec une charte, des éléments de base, et des composants.

    #design_system #conception #web #UX #interface #France

    RastaPopoulos @rastapopoulos CC BY-NC
    • @pierrick
      Pierrick @pierrick ART LIBRE 15/07/2021

      Charte, éléments de base et composants qui sont en discussion sur le logiciel wiki « Confluence » de la société australienne côtée au NASDAQ « Atlassian » (qui a racheté « Trello » il y a quelques années).
      Marrant de voir dans l’url du wiki le gouvernement français devenu simple sous-domaine de cette société. Un présage de demain ?
      ▻https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217251899/Fondamentaux+identit+de+l+tat

      Pierrick @pierrick ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 15/07/2021
      @touti

      et ping @touti pour sa liste de services de l’état qui dépendent de services tiers qui surveillent etc

      RastaPopoulos @rastapopoulos CC BY-NC
    • @pierrick
      Pierrick @pierrick ART LIBRE 15/07/2021
      @touti

      @touti Il y a aussi celui-ci, avec « Slack ». ▻https://gouvfr.slack.com

      Pierrick @pierrick ART LIBRE
    • @tetue
      tetue @tetue CC BY 16/07/2021

      #GovDesign

      tetue @tetue CC BY
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 18/04/2021

    Système de Design de l’État
    ▻https://systeme-de-design.gouv.fr

    Le « design system » pour les sites officiels gouv.fr
    La doc : ▻https://gouvfr.atlassian.net/wiki/spaces/DB/overview

    Sur la notion de « design system » voir aussi :
    – un petit tour d’horizon : ▻https://www.usabilis.com/design-system

    Un Design System s’apparente à une bibliothèque de composants, visuels et principes au code réutilisable. Ce kit évolutif offre un référentiel UX et UI pour les designers et les développeurs

    – quelques exemples complets :
    . la région Occitanie : ▻https://zeroheight.com/51aa4cb6d/p/29be13-charte-ditoriale
    . une compagnie d’assurance : ▻https://www.design.foyer.lu/index.html
    – une tentative d’annuaire des design system d’entreprises françaises : ▻https://www.designsystems.fr/liste-des-designs-systems-francais

    #design_system #UX #charte_graphique #interface_utilisateur #UI #élément_réutilisable

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

Thèmes liés

  • #web
  • #ux
  • #interface