When building new software applications, developers wrestle with doubts on whether their design decisions will deliver users the best possible experience. From interface layout to control and display element selection, developers must decide on a range of issues which directly impact the functionality of their apps. At CARTO we’re fortunate enough to work with a fantastic Design team who provides feedback on our projects, but most customers and partners don’t sit across from designers who can help them with these decisions.

So we decided to solve this problem by first building and over the last six months expanding our front-end library called Airship.

First Asset

As a comprehensive CSS framework and Location Intelligence component library, Airship offers users ready-to-use layout elements, components, CSS styles, and icons featuring user-centric designs. As such Airship eliminates the guesswork and soul-searching involved in app design allowing developers to instead focus on what problem-solving features are likely to attract new business.

From maps to apps: starting with layout matters

After years of experience in building Location Intelligence products and solutions our product team knows a thing or two about what app layout to choose for specific use cases in different industries. The typical Airship app layout is structured like this:

Layout

As the code snippet reveals, maps are still the main attraction. However, in Airship this layout can be enhanced by adding content, charts, and other actions to the map’s sidebars or footer to facilitate viewer engagement with the information being presented.

Another highlight to note is that a toolbar can be added to the map header and also you can create panels for hosting common LI elements (legends, info panels, etc.) in any corner of the map, which can help developers attract users away from competing LI products and toward their app.

Airship is charting a new era of data storytelling

Unlike BI dashboards and GIS reporting tools, Location Intelligence equips users with interactive features for exploring and dynamically rendering the geospatial relations in their data. However, complex relations are sometimes best communicated with charts that reveal the data’s underlying structure and distribution. For these reasons and more Airship includes interactive charts–histograms, stacked-bar, category charts, etc.– designed to process and present insights from various location data streams.

Responsive

This interactive design is made possible using a simple API connecting selected charts to their source in the map’s dataset. This means that when map zoom levels are adjusted Airship charts dynamically update so their information reflects the current data view.

All about the UI

Apps are more than maps and charts, but few people realize the amount of UI elements needed to support simple app interactions. In the past, developers had to maintain consistently styled and synchronized workflows for all the buttons, links, dropdowns, checkboxes, and countless other elements for the UI. Now the tedious task of identifying individual UI element issues is a thing of the past thanks to Airship’s predefined CSS styles and basic UI components. Mix and match different UI elements until you find the right look and feel with the certainty that these choices won’t cause your app to malfunction.

Features

The speed at which exploratory apps, demos, and proofs of concept can be created with Airship is great, but when LI apps go into production you may need to modify certain style choices to align with brand guidelines or standards related to the specific use case.

Not a problem!

Simple CSS variable updates allow you to custom select colors and backgrounds to change, but you can also make more extensive changes by overriding any CSS style property. Learn more about styling Airship.

Airship works on any browser and is framework independent

Whether you’re a React diehard, or you favor new players on the scene like Vue, or you prefer javascript plain and simple, we’ve got you covered! Airship works with your javascript framework of choice.

The image below shows a recent app built with React and Airship.

React

Based on web components standard, Airship works seamlessly in modern browsers and can be easily packaged with any framework. In case the browser doesn’t support the needed requirements, polyfills are loaded on the fly. No need to worry about cross-browser issues with components.

App Animation

And yes, if you stick to Airship layouts, then your app will work on mobile devices. All you need to do is specify which components are responsive by placing them inside an ‘as-responsive-content’ element, With this the selected components automatically rearrange themselves as tabs in mobile screens.

Learn more at the Developer Center

There’s a lot more to explore so make sure to visit the Developer Center for in-depth guides, references, and examples that highlight Airship’s exciting and extensive offers.