5 Bootstrap UI Kits for Customizing Your Designs

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

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.

Improve Your UX with Microcopy

What is microcopy? It is the smallest piece of content on your website or app. Microcopy can be text-based or visual. Text-based includes buttons, calls to action, error messages and forms. Visual microcopy focuses on images and videos.

Improve Your UX With Microcopy

Microcopy needs to be easy to understand, short and draws the user in. It should guide the user and help them to understand how to use your website or app.

What can you do to improve your microcopy?

Talk to your users like a person

Does your copy sound conversational or like a marketer? If it sounds like a marketer, change the words. You want to write copy with the same words that your users use.

Use copy to guide your users

Write short and helpful sentences, not paragraphs. If you need more than 8 words to explain what the users need to do, rewrite it.

Explain errors

Nothing is more annoying than confusing or cryptic error messages. Let your users know how to fix the problem. Take the time to write simple and easy to understand error messages.

Minimize User Worries

Your microcopy should anticipate user questions. Use clear labels and descriptions in forms to minimize data entry problems. Let them know why you require certain pieces of information.

Know when to user your Brand voice

Your microcopy can use your brand voice. The trick is to know when to use it and when not to. Some situations require clear and simple language.

Want examples of good microcopy?

Goodmicrocopy.com, curated by Richard Sison, has a collection of clear, concise and sometimes quirky microcopy.

Screenshot Good Microcopy.com

When you create a website or app, the smallest bits can make your users’ experience a good one. To make their experience a good one, remember to design the smallest bits of microcopy.

8 Ways to Freshen Up Your Blog

You keep your blog current by writing new blog posts. As you write more posts, you may decide to change the focus of your blog. Or you want to make some minor changes. What can you do to freshen up your blog?

You can tackle it in two ways: maintenance and tweaking your blog.

Freshen Up Your Blog

Maintenance

As you continue to write and create posts for your blog, your website can start to slow down or links no longer work. You should take this time to do some routine maintenance on your blog.

Broken Links

Websites change their links, remove content or go permanently away. You need to check your site for broken links. If you have WordPress, use the Broken Link Checker to find them. If you are using a different CMS, try W3C Link Checker.

Clean up your sidebar

Is your sidebar working for you? Look at the items in your sidebar and decide if you have links, forms or products ads that need to be updated or removed. You may want to replace them with links to recent or popular posts or a signup to your newsletter.

Clean up WordPress

Your WordPress database over time can get messy. You add, edit and delete posts. You manage comments by editing or deleting spam. This can cause your database to become bloated and slow.

After cleaning or optimizing your database, you should update any plugins and themes that you use. Then, delete any plugins you are no longer using.

Tweak Your Blog

By updating your blog with simple changes, you can help to freshen up the content of your posts.

Update Graphics and Photos

Are your photos and graphics working for you? You may want to change them out for higher quality photos. Pick out pictures that work better for your blog and brand. You can use one of the sites mentioned on the The Badass List of Free Stock Photos Websites for Designers or take your own photos.

Add headings to your posts

When you first wrote your posts, you may not have used heading. Headings are a way to organize and highlight important information. They range from H1 to H6. Headings allow you to break up your post into easily readable and scannable chunks.

Add call to actions

You can use clickable buttons to let your readers know what action to take. You may want them to sign up for your newsletter, contact you or buy a product from you. Adding clickable buttons is a great way to get your readers to engage with you.

Add pull quotes

Create a pull quote to jazz up your design and draw your reader’s attention to an important idea. Use these tips to draw your readers attention with pull quotes.

Summary

Regular maintenance helps to keep your blog running smoothly. By changing photos, adding headings, pull quotes and calls to action, you can update old posts and improve your relationship with your readers.

Photo Credit: http://startupstockphotos.com/

5 Ideas for Making a Screenshot Great

You want to include a screenshot of your app on your blog post or website. How do you make it look great? You want your screenshot be apart of the design and attract the attention of visitors.
5 Ideas for Making Your Screenshot Great

What can you do?

Use a colored pattern

Put your screenshot on a solid or patterned background. The background can help to draw attention to your screenshot.Scrrenshot with blue-green background

Place it on an image of a computer or phone

Create a screenshot that shows how your app looks on a desktop, phone or tablet. With a blank template, you can size it to fit. First, resize the computer monitor image to the size you want. Then, resize your screenshot to fit inside the monitor. You may need to crop and resize to get it to fit without looking squished.
Screenshot in Monitor

Add text to the screenshot

Is there a feature or part of your app that you want to show? Take a screenshot that focuses on that area of your app. Then, use your favorite photo editor to add text that describes the features that you are showing.
Screenshot with text

Create Multiple Screenshots

One screenshot doesn’t show the uniqueness of your app. Try three. Layer them on top of each with the most important screenshot on top. Or show it on a desktop, tablet and phone.
Three Screenshots

Add a shadow behind it

Use your favorite photo editor to edit the screenshot and add a background shadow to the image. The shadow can make it look like it is hovering over the background on your page.
Screenshot with a shadow

Your screenshot is an important part of the design. You want to make it stand out. Mix and match one or more of these techniques. You can make it look great by using one or more of these additional design techniques.

What do you do to make your screenshot great?