In this type of layout, information is presented vertically and the viewer is encouraged to consume the data starting at the top and then scrolling to the bottom. The above layout (with one columns with double and the rest with single width) can be achieved with this code: col1, col2, col3, col4 = st.beta_columns((2,1,1,1)) In the 2nd row, we see pickups per minute represented across the minutes of the hour. In the first row, we see 3 charts containing similar conceptual information, i.e., airport pickups shown left to right. the NYC Uber Ridesharing App ( source code) by Streamlit. In this type of layout, we want the viewer to scan information from left to right, for eg. Use layout to focus attention in a direction Page contents can be laid out in 'centered' or 'wide' mode(as shown below) using st.set_page_config : # NOTE: This must be the first command in your app, and must be set only once Having information represented in columns create a proportional distribution of information and gives consistency to the interface.Īdditionally, this page uses wide mode to show even more content. A great example is Streamlit Cheat Sheet ( source code) by Daniel Lewis. Organizing your app with column layouts with st.beta_columns helps place content in a uniform way across the app. Make it fun with badges, logos and emojis 🥳.Choose your theme colors and contrast ratios wisely.Kicking off this post, the main things to keep in mind are: In Part II, we jump into how you can use layout and design options to make visually appealing apps for your app viewers. In Part I of this blog series, we covered how to Design for the User.

At Streamlit, we strive to enable developers to easily make beautiful apps that create great experiences for their users.

Cool app icons