You might have heard the saying, “good design is invisible”. When an app is well-design and works as expected, you don’t notice how easy it is to use the app; you just use it. But if the experience is subpar, it’ll get your attention, and you’ll most likely quit using it and search for another app that allows you to perform the same activity but in a much more effortless way. That’s the power of UX and UI in the digital age.
And it doesn’t matter if we’re talking about B2C, B2B, or B2E apps; everything needs to be about intuitive and seamless user experiences.
The challenge comes in actually delivering those great and effortless experiences. If you are a front-end developer like myself, you know that delivering a great digital experience is hard, and it’s only getting more complex as new devices appear, with different code requirements and screens sizes, and everything needs to be integrated... Oh, and, of course, you need to deliver all that in a speedy fashion.
One of the great things about low-code platforms like OutSystems is that it provides you with the building blocks to create applications through pattern composition. This means you can deliver great experiences while shortening your development time.
Before you start rolling your eyes, I invite you to watch my Tech Talk, From Design to Implementation: Front-end Development Best Practices, where I’ll show you OutSystems UX/UI capabilities in action.
For a quick sneak peek, read this article.
Creating Beautiful UX/UI: Know Your Stack
With OutSystems comes OutSystems UI, which is the foundation for the incredible UX/UI you can build with this low-code platform.
The OutSystems UI is a UI framework that allows you to create seamless experiences for web and mobile by providing you with the building blocks to design your app. Embedded in OutSystems UI, you have access to:
- Responsive screen templates that provide both UI and functionality. When you choose a screen template, the screen is automatically created within your app, with sample data that you can test on your computer or mobile phone instantly.
- Over 70 pre-built UI patterns with predefined layouts and widgets that you can add to your screens with a quick drag and drop and that automatically adapt to the device's screen. So, things like progress bars, date pickers, carousels, switches to list, and dashboard screen templates are available to use and reuse across your desktop, tablet, and mobile applications.
- Design kits for Sketch and Figma that your design team can use to bring OutSystems UI elements to their favorite design tools to create app mockups.
- Live style guide that you can download from the OutSystems Forge. This is a document with your brand theme colors and patterns ready to use to create a consistent user experience on your applications. It is an essential piece to ensure adherence to your brand rules, user interface consistency, and foster usability. It is designed to guide you through all delivery assets to optimize the development process and user experience.
- You can also customize your themes using a built-in theme editor, so that your app(s) match your company’s branding layouts and patterns, or even create custom patterns and layouts from the ground up using low-code or CSS to ensure you never hit a wall.
You can use and reuse all elements within OutSystems UI and your design system across your multiple applications without re-writing code. This way, you’re able to accelerate the creation of applications with the confidence that they meet UX and UI's latest best practices.
Roll Up Your Sleeves: Get Ready to Build Wonderful UX/UI
This is just a quick overview of the OutSystems low-code platform UX/UI capabilities. To see the whole thing, join me in From Design to Implementation: Front-end Development Best Practices, where I'll show you how to create a custom pattern and add it to your application.
Whether you’re a UX/UI expert building complex UIs or a developer on a low-code team starting your first design project, I hope to see you there.
Additional Resources
