Comment on page
Design and UX
Unless you come from a design background, it can be difficult to know where to start. Luckily, there is an abundance of design resources both within the Bubble community and on the web in general.
Let's first quickly cover what exactly we mean by design.
The short and easy answer is of course: design is what your app looks like. Let's break that down into some more detail.
The design process of an app can be categorized into two main disciplines:
The user interface (often called UI) is the overall look of an app, including page layout, colors, typography, icons, images and other elements. Designing a user interface is about making the app look visually pleasing and aligned with the brand identity.
User experience design focuses on how the user perceives the app. Is it easy to navigate and use? Is it logical in its structure? Does it solve problems efficiently? UX design is rooted in understanding and optimizing the user's journey, ensuring that the interface is intuitive, efficient, and user-friendly.
So from this, we can draw up a few points that you can focus on in your design process:
- An app should look good and have a consistent design to represent your brand
- It should be easy to understand, navigate and use
Design is of course a wide and professional discipline. If you don't come from a design background, we recommend studying the work of great designers to get ideas and inspiration for your own work.
Creating software that is easy to use and useful is both an art and a science. Have you given any thought as to why some apps feel like a natural extension of your brain, while others are frustratingly clunky? Great software feels intuitive, anticipates user needs, and delivers a delightful experience that keeps users coming back.
Behind every seamless app or platform is a meticulous combination of design thinking, understanding of user behavior, and technical prowess. Drawing inspiration from these standout pieces of software can guide your own app-building journey.
Study them, not just as a user, but as a creator. Dive deep into their user interface (UI), their user experience (UX), and the problems they solve. Ask yourself, why does a particular feature resonate with you?
Many app ideas will belong to one or more software categories. For example, if you are writing software to handle internal projects, inventory or HR in your company you can find a lot of inspiration in already existing software doing similar things.
Sometimes, great inspiration passes us by because we don't really reflect on what it is that makes it good. You will likely find things in these apps that you really like, and other things that you think could be improved – make it a habit to keep an eye out for clever solutions and good user experiences and ask yourself why it's good.
Bubble has a very active and helpful community that offers plenty of resources to get you started on your app's design.
We have a large and growing catalogue of templates in our template store. Templates are not only about design, but often offer fully functioning apps that you can use as a springboard for your own project. Some templates focus on multi-purpose apps, while others serve specific niches, such as eCommerce, task management and landing pages.
The Component Library is a collection of pre-built User Interface (UI) components that can be dragged and dropped onto your page to help you build beautiful interfaces faster. These UI components are fully responsive and are made up of containers, visual elements, and form inputs that can be individually customized once added to your page.
From pre-designed templates to user interface guidelines, and from color palette generators to typography recommendations, there are tools and platforms dedicated to helping.
Lastly, remember that design isn’t just about aesthetics. Good design solves problems. It's about creating an intuitive, seamless experience for your users. As you dive deeper into design resources, keep the user's needs and behaviors at the forefront of your decisions. With the right tools and a user-centric mindset, you can craft a design that not only looks good but also feels right to your target audience.
When your ideas are in place and after you've found the inspiration and resources needed to bring it to life, it's time to think about how to transfer that design to the screen. There are various methods to do this, and no right or wrong way. Decide for yourself what you're most comfortable with, and focus on getting to the finish line.
Again, there is nothing wrong with using pen and paper during the first part of designing your app. Many users enjoy the freedom of not having to learn any new tools and the speed at which you can draw something directly on the page – and the feeling of throwing away stuff you no longer need.
Planning your app's design doesn't have to start on the screen – a sheet of paper, post-it notes and whiteboards are a great place to start sketching quickly.
Pen and paper is great for visualizing different parts of the user journey too. For example, when a user signs up, what fields do you need? How should that form look? How many fields are too many?
Another method is to use mockup and prototyping tools (as suggested in point 5 in the above list). These are essentially visual tools that let you draw your ideas on the screen more in the way that you intend for them to look in the final app. Using a mockup tool like Figma can be highly useful as it offers real-time collaboration, cloud storage and the design can be imported directly into Bubble.
Your choice between using a prototyping tool or diving straight into Bubble largely hinges on your personal preferences and familiarity with such platforms. If you're wary of adding another layer of software mastery to your plate, you might choose to dive directly into Bubble's design environment instead.
Bubble comes with a visual WYSIWYG editor that's designed to help you place elements directly on a canvas and see the results immediately, similar to popular prototyping tools.
If you choose this approach when you plan your design, we strongly recommend reading through the Design section of the manual to learn how Bubble's tools work. From there, we also link to video lessons that can get you quickly into the mindset of designing in Bubble.
To keep your design process efficient, it's often a good idea to think about a UI kit. This is essentially a collection of elements that have consistent style attributes, which can include buttons, icons, form inputs, typography, and other elements.
If you want to set up and maintain a consistent design, we recommend going through this process first. Not only does it make it easier to be consistent in your design choices, but it can really speed up the design process overall, since you don't need to spend time on each individual element.
Setting up a UI kit can be as simple as placing and styling a few elements on a page, but it can make your design process a lot more efficient and consistent.
The idea is to think about the different elements that you will use in your app, and then set up their design in one place. This can be a page, or a reusable element for example. Whenever you need a specific button, you simply copy/paste it from that page to use it elsewhere.
You decide how detailed and advanced you want to be in your UI kit. Below we suggest a few different levels of complexity – if this is your first app, you may choose to only focus on the basics for example.
Think about all the design attributes that should consistently apply to an element, such as its color, border, shadow, width, height and font/font size.
Focus on the fundamental components first:
- Buttons: These come in various sizes and states. Design for primary, secondary, and tertiary actions. A "Cancel" button is often less prominent than an "OK" button for example.
- Input Fields: Think about text fields, dropdowns, checkboxes, radio buttons, and sliders.
- Navigation: Design navigation bars, sidebars, and tab bars.
- Headers and body text: text elements that are correctly formatted for headers and paragraphs
Once you have the basic components, it's time to tackle more complex ones:
- Cards: Commonly used to display snippets of information in an organized manner (such as the products in an eCommerce store)
- Modals: Pop-ups that grab the user's attention (alerts, confirmations, etc)
- Tables: Vital for displaying data. Consider pagination, sorting, and filters.
Users will interact with your interface, so account for various states:
- Hover: How does an element look when a user hovers over it?
- Active: What happens when an element is clicked?
- Disabled: Ensure users can recognize non-clickable or non-interactable components (i.e. a disabled button or input form)
When you are happy with your UI kit, you can save the styling on the different elements as styles. This saves their styling attributes in a style that you can name, and then apply to other elements of the same time. We recommend that you set up styles after you have finished your UI kit, so that you can review your overall design first.
Font variables and color variables can also help you keep track of your app's design.
Whenever you need a new type of element, make a habit of adding it to your UI kit, so that you keep an updated "catalogue" of elements.
If you create your UI kit on a page, remember to remove that page before you deploy your app to live users (or they page will be accessible online). If you want to keep the UI kit without it being available to your end-users, you can place it inside of a reusable element instead.
When you are happy with your UI kit, you can start building your actual pages. Because you have invested some time to set up your initial colors, fonts and elements, you'll have a better feeling of how the app's overall look should be.