Design Patterns in CTAs

What design patterns do you need to create an effective call to action? When you create a web design, you consider things like copy, color, fonts and images. The same things apply when designing your call to action.

Design Patterns in CTAs

Start with Copy

What should your call-to-action say? Use a minimal amount of copy. You want your visitors to scan your copy and quickly take action. Most calls-to-action have 1-2 sentences or a short bulleted list that convinces you to take action.

Nerd Fitness CTA

On NerdFitness.com, you can download a copy of their free weight-loss guide. Their copy uses a large heading that tells you want you are getting and 3 bullet points that explain what the guide entails. They use the copy to convince to give them your email address in exchange for their free weight loss guide.

Choose the right words for your Call-to-Action Button

You want to use words that get people to click. Start your button copy with a verb. Verbs like get, start or join. Avoid single word buttons. Instead use 2 or more words. You can add words like free or my to help people decide to click.

In the NerdFitness call-to-action, their button starts with a verb. They use “Get It Now” to convince you to download their guide.

Choose the right color for your button

Colors can affect whether or not people will click on your button. Your button need to stand out from the rest of the content. Be picky with the colors. Start with orange and test to see what colors work best.

Nerd Fitness used red. They use red on their website. It helps to make the button stand out and look like it belongs as part of the website too.

What size should your font be?

It depends. You may want to mix large fonts with small to make the copy stand out. Use a large font on your button to make it easy to read and entice your visitors to click on it. In the Nerd Fitness example, they use both large and small fonts. The size choices work to grab your attention.

How do you make it stand out?

Use photos, icons or background colors to make your CTA different enough from the rest of your content. Nerd Fitness used a yellow background, a black border and an image to make it different from the content of the page and compliment the rest of the design.

Summary

By combining copy, colors, fonts, buttons and decorative elements, you can create a CTA that entices your visitors to take the action that you want them to take. Not all CTAs work well. You may need to test and make changes to get the right design. Use these tips to incorporate current design trends when creating your next call to action.

Switching to Font Awesome 5

Do you use Font Awesome? I have used Font Awesome on my development projects. When you depend on a library, framework or font, you eventually need to upgrade to the latest version. Upgrades don’t always go smoothly. Font Awesome recently released their 5.0 version.

Switching to Font Awesome

How do you switch to the new version?

Before beginning, I looked at their getting started page. By looking at their documentation, I saw that they have different options for using Font Awesome 5.0. I chose the option that worked best for my project.

Updating my project with 5.0

Originally, my Bootstrap template used it as a web font. For the update, I chose to use the same method. They recommend to use their free CDN.

Font Awesome CDN Screenshot

I picked out a Bootstrap template that used an older version of Font Awesome to upgrade. The template had icons for web applications and a few brand icons into. The update show the web application icons and not the brand icons. Font Awesome changed their naming convention for the icons.

Screenshot with missing icons

Without the new names, the icons don’t show. I got a little box with text in it. Once I changed to the new naming convention, fab, my social media brand icons displayed.

Screenshot with icons

After fixing the social media icons, I switched the other icons to match their new naming convention.

With 5.0, Font Awesome has a free and pro version. I’m using the free version. In this version, the icons are a bit different from the previous version. I didn’t like one of the icons and found out that I didn’t have a choice. If I wanted a better one, I had to upgrade to the pro version. The quicker option was to pick a different icon for this project. I picked a different one. It works fine for this project.

Summary

Switching to 5.0 was easy. Not all upgrades you smoothly. Sometimes you spend hours trying to figure out what went wrong. Not this time. A few quick switches and my template look good.

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.

TOP 5 Reasons for Switching to TypeScript

If you write front-end code, you have built a website using HTML, CSS and JavaScript. JavaScript is popular because it is easy to code and flexible. As your website add more features, you may noticed that your JavaScript gets more difficult to add new code. JavaScript doesn’t scale very well. To deal with this, you may have switched to another framework like Node or Angular JS.

Top 5 Reasons for Switching to TypeScript

TypeScript by Microsoft helps you to write JavaScript that scales. With TypeScript, you can write it and compile it into JavaScript. Your compiled code will run on any browser or JavaScript framework that supports ECMAScript 3 or greater. When you write valid TypeScript, it compiles into valid JavaScript.

Top 5 Reasons for switching to TypeScript

At the Milwaukee .Net Users Group, David Pine explained the 5 reasons why you should switch to TypeScript.

5. Compatibility

TypeScript is compatible to ECMSScript 3 and newer.

4. Tools

You can write TypeScript using popular coding tools like Visual Studio products also support TypeScript.

3. Open Source

TypeScript is open source. It is being developed on GitHub. You can look at the specification on GitHub. You can download the source code and post issues right on GitHub.

2. Type System

You can use types that you use in other programming languages like:

  • Classes
  • Interfaces
  • Abstract Classes
  • Namespaces

1. Compilation

“If it compiles, it is one step closer to working code.” – David Pine

TypeScript compiles into simple, clean JavaScript. Valid TypeScript is also valid JavaScript. With the compiled code, you can run it in any browser.

Want to see TypeScript Compiled into JavaScript?

You can go to Playland and see the TypeScript compiled into JavaScript.

TypeScript Playland Screenshot

JavaScript is every where on the web. As a developer, you have probably used and supported it in your projects. TypeScript helps you to write code using programming features that developers in other languages are used to. It creates compatible, clean JavaScript while allowing you to use the tools that your already have.