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.

What is app 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:

UI and UX

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.

Finding inspiration

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.

Design resources

Bubble resources

Bubble has a very active and helpful community that offers plenty of resources to get you started on your app's design.

Templates

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.

Page: Template store

Component library

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.

Page: The Component Library Video: Introducing the Component Library

Showcase

Bubble hosts millions of apps, and you can easily find inspiration in our Showcase. This is where we publish customer success stories.

Page: Bubble showcase

Third-party resources

From pre-designed templates to user interface guidelines, and from color palette generators to typography recommendations, there are tools and platforms dedicated to helping.

1. Design templates: Websites like Dribbble, Envato elements or Behance showcase design works from professionals worldwide. These can serve as inspiration or even a starting point for your app’s interface. Some platforms also offer downloadable UI kits to give you a jumpstart.

2. Color tools: Websites like Colormind, Adobe Color, or Coolors can help you generate color schemes that look harmonious and pleasing to the eye. Understand the psychology of colors and pick a palette that aligns with your app's mood and purpose.

3. Typography: Tools like Google Fonts or FontPair can help you pick the perfect font combinations for readability and aesthetics. Remember, typography plays a crucial role in user experience, so ensure your text is legible across devices.

4. Icon libraries: Need more icons than the built-in ones? Websites like FontAwesome, Iconfinder offer vast libraries of icons that you can use to enhance your app's design. We also have plugins in the plugin store that offer more icons.

5. Mockup and prototyping tools: Platforms such as Figma or Sketch allow you to create detailed mockups and interactive prototypes of your app. This helps visualize the end product. Bubble has a tool for importing designs from Figma.

6. Design guidelines: For beginners, sticking to guidelines can be helpful. Material Design (by Google) and Human Interface Guidelines (by Apple) provide principles and recommendations to create a consistent and intuitive user experience.

7. Feedback platforms: Websites like UserTesting or Maze can help you gather feedback on your designs from real users. Feedback at this stage can save countless hours of rework after development.

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.

The design process

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.

The tools

Pen and paper/post-its

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?

Mockups/prototypes

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.

Designing in Bubble

Bubble comes with a visual editor that's designed to help you place elements directly on a canvas and see the results immediately, similar to popular prototyping tools.

Bubble's WYSIWYG editor makes it easy to see results immediately. With the instant app preview, you can see exactly what the app will look like to your users.

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.

The UI kit

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.

Start with the basics

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

Expand to complex components

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.

Interactivity and states

Users will interact with your interface, so account for various states:

• Hover: How does an element look when a user ?

• Active: What happens when an element is ?

• Disabled: Ensure users can recognize or non-interactable components (i.e. a disabled button or input form)

Save styles and style variables

When you are happy with your UI kit, you can save the styling on the different elements as . 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.

and can also help you keep track of your app's design.

Add more elements as needed

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.

Article: Reusable elements

Building the page

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.

In the next section of the guide, we'll look into how you Create and manage apps in Bubble, before moving onto covering the Bubble editor, its tabs, sections and tools and settings.

If you want to read more about how to use Bubble's design tools, you can continue directly to the Design article series.