Conception visuelle Streamlit

Les petits détails qui rendent les apps polies.

Compétences connexes : La conception visuelle fonctionne main dans la main avec d'autres compétences :

• choosing-streamlit-selection-widgets → Choisir le bon widget (segmented control, pills, toggle)
• displaying-streamlit-data → Column config, sparklines, bordered metrics
• using-streamlit-layouts → Containers, alignment, dashboard cards

Configuration de la page

Définir le titre de l'onglet du navigateur, l'icône et la mise en page. Placez-le en haut de votre script pour éviter les scintillements visuels :

st.set_page_config(
    page_title="My Dashboard",
    page_icon=":material/analytics:",
    layout="wide",  # Use "wide" for dashboards with lots of data
)

Options de mise en page :

• layout="centered" (par défaut) → Idéal pour la plupart des apps, le contenu est limité à une largeur lisible
• layout="wide" → Pleine largeur, bon pour les tableaux de bord et les apps riches en données

Logo de l'app

Ajouter un logo à la barre latérale/en-tête :

st.logo("logo.png")

Icônes plutôt qu'émojis

Utilisez les icônes Material pour un look plus épuré et professionnel.

# GOOD: Material icons
st.markdown(":material/settings:")
st.markdown(":material/calendar_today:")
st.markdown(":material/dashboard:")
st.markdown(":material/person:")

# SPARINGLY: Emojis for special occasions
st.markdown("Celebration! 🎉")

Format : :material/icon_name:

Trouver des icônes : https://fonts.google.com/icons

Icônes populaires par catégorie :

Badges pour le statut

Pour les badges autonomes :

st.badge("Active", icon=":material/check:", color="green")
st.badge("Pending", icon=":material/schedule:", color="orange")
st.badge("Deprecated", color="red")

Pour les badges intégrés au texte :

st.markdown("""
:green-badge[Active] :orange-badge[Pending] :red-badge[Deprecated] :blue-badge[New]
""")

Évitez l'ancienne syntaxe verbeuse :

# OLD (still works but cluttered)
st.markdown(":orange-background[:orange[Pending]]")

Espacement : supprimer les séparateurs

Les séparateurs (st.divider() ou ---) semblent lourds. Supprimez-les simplement—l'espacement par défaut de Streamlit suffit généralement.

# BAD
st.header("Section 1")
st.write("Content")
st.divider()  # Too heavy
st.header("Section 2")

# GOOD
st.header("Section 1")
st.write("Content")
st.header("Section 2")

Si vous avez vraiment besoin d'espacement :

st.space("small")   # Small gap
st.space("medium")  # Medium gap
st.space("large")   # Large gap
st.space(50)        # Custom pixels for fine-tuning

N' remplacez pas systématiquement les séparateurs par st.space()—ça peut aussi avoir l'air bizarre.

Casse des phrases

Utilisez la casse de phrase pour les titres et les libellés. Title Case Semble Criarder.

# GOOD
st.title("Upload your data")
st.selectbox("Select a region", options)
st.button("Save changes")

# BAD
st.title("Upload Your Data")
st.selectbox("Select A Region", options)

Caption plutôt que info

st.info() est trop lourd pour du texte informatif simple.

# GOOD: Plus léger
st.caption("Data last updated 5 minutes ago")

# BAD: Trop lourd
st.info("Data last updated 5 minutes ago")

Quand utiliser quoi :

• st.caption → Info simple, métadonnées, timestamps
• st.info → Instructions importantes
• st.warning → Avertissement, problèmes potentiels
• st.error → Erreurs qui bloquent la progression
• st.success → Confirmation d'action
• st.toast → Confirmation légère qui s'auto-ferme

Alignement du texte

Utilisez text_alignment pour les éléments texte :

st.title("Centered title", text_alignment="center")
st.write("Right aligned", text_alignment="right")
st.caption("Justified text", text_alignment="justify")

Options : "left" (par défaut), "center", "right", "justify"

Note : horizontal_alignment sur les conteneurs positionne les éléments mais définit aussi leur text_alignment. Si vous avez besoin d'un alignement de texte différent dans un conteneur aligné horizontalement, remplacez text_alignment sur l'élément texte lui-même.

Icônes dans les callouts et expanders

Les icônes Material peuvent améliorer l'apparence des callouts et expanders :

st.info("Processing complete", icon=":material/check_circle:")
st.warning("Rate limit approaching", icon=":material/warning:")
st.error("Connection failed", icon=":material/error:")
st.success("Saved!", icon=":material/thumb_up:")

with st.expander("Settings", icon=":material/settings:"):
    st.write("Configure your preferences")

D'autres éléments comme st.button et st.tabs supportent aussi les icônes—à considérer quand ça améliore la clarté.

Références

• st.set_page_config
• st.logo
• st.badge
• st.space
• st.markdown
• st.toast