Month: December 2017

5 Bootstrap UI Kits for Customizing Your Designs

Posted on by djbrensinger

You are building a new website with Bootstrap. The default theme is not fancy enough for your project. Should you create your own custom theme from scratch? What if, you don’t have time to create a new theme and you still want something custom? You can download a Bootstrap UI kit to help you get started.

5 Bootstrap UI Kits for Customizing Your Design

What is a UI kit?

A UI Kit contains styles and components that you use as a starting point to build an attractive and consistent user interface. With a Bootstrap UI Kit, you can customize a Bootstrap website to fit a specific design without starting from scratch.

Here are 5 different Bootstrap UI kits for you next project to consider. They use popular design styles like material, flat and more. You can use these UI kits for building a simple website or a custom web application.

1. Material Kit

Want to use material design in your Bootstrap project? You can use Material Design for Bootstrap to develop a responsive, mobile-first projects. With this kit, you can use HTML, CSS and JS to build prototypes quickly. If you like the free version, you can also purchase pro versions. With the pro versions, you get more components and can build dashboard apps with material design.

Bootstrap Material Design UI Kit

2. Paper Kit

Paper Kit is a free Bootstrap UI kit. This kit from Creative Tim allows you to create something different. Paper Kit was inspired by paper and drawings. It uses pale colors, includes sample pages and beautiful typography. You also can customize this kit to make it your own.

Bootstrap Paper Kit

3. Flat UI Kit

Want to use flat design in your Bootstrap project? You can use Flat UI to create a website with flat design. Flat UI provides flat design on buttons, drop downs, navigation, icons, colors and more. You get samples that you can use to customize your own design.

Bootstrap Flat UI Kit

4. Wrap Kit

WrapKit Lite is a Bootstrap 4 UI Kit. It includes Google Web Fonts, Sticky Headers, CSS Animations and more. WrapKit Lite is easy to customize and build your own website quickly.

Bootstrap WrapKit Lite

5. Bootstrap UI

Are you building a web application? Bootstrap UI provides you with components to build a beautiful web application. It includes typography, Bootstrap Grid, stick footer, tabbed navigation, list groups and standard Bootstrap navigation.

Bootstrap UI Demo

With these Bootstrap UI Kits, you can quickly customize your Bootstrap project without starting from scratch. When you need to use material, flat or a different design type, UI kits can help you get started.

What are your favorite UI Kits?

White space in UI Design

Posted on by djbrensinger

Every element that you use in your UI needs special attention. You carefully pick out the colors, graphics, photos and fonts. Each item is chosen for how it fits into the design. You create a design that carefully balances all of these elements. Have you considered how you use white space?

White space in UI Design

What is white space?

White space is the space between elements. It is intentionally left blank or empty. White space or negative space is the space between columns, graphics, text and other elements. You leave these areas untouched to help make your design easy to read and use.

Where can you use white space?

  • Photos, graphics or any visual element: By adding white space around your visual elements, you can make them stand out. Too little space around them and your design may look cluttered. Too much and it may look empty. You need to play with the space to see what works.
  • Navigation menus: Your visitors use the navigation menu to move through your design. Tinker with changing the spacing between menu items and text.
  • Headlines: They help guide people through your design. Increase the space around each headline. More space around your headlines makes them stand out and help people to understand how to use your design.
  • Content or copy: Not enough space between paragraphs or lists can make them difficult to read. Increasing the space around paragraphs or between characters can help to make it easier to scan and read.
  • Columns: Margins or spacing defines the borders of a column. Use margins and padding to give your columns more definition and breathing room.

As a design element, white space doesn’t have specific rules about when and where you should use it. You have to experiment with spacing to learn what works best. White space is a tool that you use to help make your designs more readable and easy to use. Isabella Morris on Usablity Geek talks about how to use white space to increase usability.