Bootstrap is a popular and effective framework for building responsive, mobile first web applications. Bootstrap allows developers to design and implement some beautiful user interfaces, and like extensions built for Google Chrome and Add-ons for Google Docs and Sheets, many of them are shared with the online community free of charge. The following Bootstrap templates demonstrate functionality and aesthetic appeal that can be easily integrated into any custom-built web application.
Template #1: First
This template is my favorite example of mobile-first design. Each page presents content in a way that’s both useful and easily digestible to the user. Navigation to different pages is also made easy thanks to the collapsible navigation pane in the top-left corner of every view. Finally, this template demonstrates the utility of client-side validation when you click the ‘Save Changes’ button on an empty Form page. The user’s attention is directed to highlighted invalid fields, and messages are displayed that tell the user how to correct the input.
The utility of this template can be manifest in applications that are designed to capture large amounts of data from a mobile user, like an inspector on a job site. It’s critical that the UI makes it easy to enter a large amount of data on a small screen, and points out invalid input for the user to quickly make corrections. Most importantly, this template accomplishes these goals using a simple UI design that conserves precious cellular data.
Template #2: Paper
Flat user interfaces are trendy, and this template shows how a 2-dimensional design can make your app feel more crisp and responsive to the user. Whereas traditional UI design tries to mimic real-world 3-D objects, flat design embraces the 2-D limitations of our phone/computer screens to show more content with less clutter. Apple changed its mobile platform to a flat UI with iOS 7, as shown in the images below.
I encourage you to check out the Paper template and see how its components can create a user experience that’s both effective and aesthetically pleasing. Combined with the mobile-friendly First template, these examples will hopefully aid any of your web application design efforts in the future.Originally published on June 04, 2015