How to Pick Colors for Better Readability

Posted on March 15, 2020August 12, 2022 by djbrensinger

Have you thought about the readability of your website? The colors you choose can impact how readable people find your website to be. If people can’t read your website, they may become frustrated and go somewhere else. How do you choose the best colors? By testing your color combinations for contrast.

How to Pick Colors For Better Readability — Image by vixrealitum from Pixabay

What is color contrast?

Contrasting colors or complementary colors are from different segments of the color wheel. For example, red is a warm color and blue is a cool color. They appear on different segments of the color wheel which makes them contrasting colors.

By using contrasting colors in web design, you provide enough contrast between content and background so that your website is readable to as many people as possible. You want to make sure your buttons, body text, logos and other content has the right amount of contrast.

1. Choose a color palette

For some projects, you may have a pre-existing color palette to work with. If you don’t, use a tool like Material Palette or Colormind to choose a color palette. Or choose from these 90 Accessible Color Classes to build your palette.

2. Find a color contrast analyzer

You can find many color contrast testing tools on the web. Pick one that works for you. Here are a few to test out:

3. Pick your primary colors

Is your theme light or dark? You want to pick colors that work best with the types of colors for your theme.

4. Choose colors for the body text

You may need more than one color for the body text. Each color can be for a specific task like headers, body and sub-headers.

5. Select colors for buttons and links

Buttons and links tell users that you want them to do something. You want to pick colors that draw attention to them and easy to read.

6. Establish color combinations

You may need to add error messages, calls to action or other areas for users to pay attention to.

7. Check your results

After you build your website, use the accessibility checker in the browser for any additional issues. If you find problems, use a contract analyzer and retest.

Learn more about readable colors

How to keep improving your UX Design skills as a developer?

Posted on February 15, 2020February 21, 2020 by djbrensinger

Not creative? It takes creativity to solve programming problems. Design is about solving problems, not making things pretty. You can learn UX Design. Design is a learned skill. You can get better at it.

Improve Your UX Skills — Photo by Daria Nepriakhina from Pixabay

How do you keep improving your skills? The same way you improve your programming skills. You learn about design principles, practices and tools. Then, you build something.

Understand design principles

Design principles help you to make websites and apps that are aesthetically pleasing, easy to use and behave the way the user expects them to.

Learn and Use UX Design Tools

Developers like their tools. You can find design tools that help you do tasks like wireframing, prototyping, animations and more. Which tools do you use? That depends on your needs and preferences. Here is a short list to help you find the tools that may work for you:

Take a UX Design Course

A UX Design Course can give guidance on best practices, basic principles and techniques for creating software that people love to use.

Read up on UX and Design

Keep up to date on changes in UX and Design by reading books and blogs.

Blogs

Books

UX Reading List

Build Something

Take an app that you built previously and redesign it with what you have learned. By redesigning it, you can see what works better.

Keep experimenting. You can get better by practicing.

Choosing fonts for your next project

Posted on December 27, 2019 by djbrensinger

Choosing fonts for your project can be a challenge. How do you pick fonts that work? The fonts that you choose can either help or distract your users. You want to pick fonts that are easy to read and fit the personality or mood you want to convey.

Choosing fonts for your next project — Photo by Alexander Andrews on Unsplash

Where do you start?

Pick fonts that match the purpose of your design
Whether you are creating a blog, tutorial, app or business website, you need to pick fonts that match the mood or personality of the project. Fonts can have distinct personalities or moods — casual, serious, playful or elegant.

Decide on a visual hierarchy

Fonts help you to design a typographic hierarchy. You decide how the fonts work together. The three levels we need to consider are primary, secondary and tertiary. The primary level is your headlines. Secondary is used for subheads, captions and pull quotes. The tertiary level is your main body text. These levels help users to scan quickly and focus on the information that they need.

Choose fonts that work with your project

No matter what type of project you are making different fonts work better than others. Fancy and decorative fonts may be a better choice on a blog than your business website.

Create contrast

Pick fonts that complement each other. Mix style, weight, size, spacing and color to achieve the desired effect. For example, pari a bold, chunky font with a tall, thin one.

Limit the number of fonts used

Try keeping the number of fonts to 2 or 3. If you design needs more, add one font at a time.

Use a font generator

A font generators can help you to pick out fonts or experiment with new ones.

Practice

Build sample pages or apps to test out different fonts to see how they work. Keep experimenting and reading blogs for suggestions on font combinations.

Build Code With Accessibility

Posted on September 30, 2019August 12, 2022 by admin

What is accessibility in web development? It means building websites that as many people as possible can use. Accessibility benefits everyone not only people with special needs. Have you tried to use your phone in outside in the side or with one hand? You may have given up or waited until later to do what you needed. If you have special needs, using an app or website can be a challenge. Accessibility means developing websites that people can use regardless of their physical and cognitive abilities. Or how they access your website.

Build Code With Accessibility — Photo by Zan Ilic on Unsplash

How do you build software with accessibility in mind?

In her talk at Dot Net Conference 2019, Rachel Appel explained how developers can build accessible websites without greatly changing how they code. People have variety of needs. When you develop, you need to make your code usable for people with a wide range of visual, cognitive, hearing and motor abilities.

Visual

People with visual issues include low vision, blindness and color contrast. Some people may use a screen narrator to help them navigate your website. For people using a screen narrator, use skip links. Skip links allow them to skip over the navigation and go directly to the content.

For making sure that your site is readable by as many people as possible, you can use Color Oracle, a free color blindness simulator. It is available for MacOS, Linux and Windows. You can also use Accessible Colors or WebAim’s Color Contrast Checker to ensure check your color choices.

Cognitive

People with cognitive difficulties includes learning and age-related issues. You want to keep things simple and clear. Write using short sentences, active voice and simple words. Use headings and labels to help people easily find information. See Mozilla’s Cognitive Accessibility for more tips.

Hearing

People have a wide range of hearing abilities. With videos or audio, you want to include transcripts and close captioning. In your software, don’t rely on sounds alone for feedback.

Motor

People with motor issues can have tremors, difficulty moving a mouse and more. Avoid pop-ups if you can. When you can’t, make sure that they can be closed easily. Use alt tags on all images that are not decorative.

By developing for a wide range of people, you make sure that your website is usable no matter how or where they access the web.

Animation Principles for Enhancing UX

Posted on July 31, 2019September 20, 2019 by djbrensinger

With new tools like CSS Animation, JavaScript Libraries and modern browsers, we can easily add animation to our websites. Animation helps you to provide context, give feedback, convey status and delight your users. You can affect color, location, scale, shape, focus and opacity of objects. By learning the principles of animation, you can create deliberate animation that improves the user experience.

12 Principles of Animation

Disney animators, Ollie Johnston and Frank Thomas, first introduced the 12 Principles of Animation in their book, The Illusion of Life: Disney Animation. They examine the process of animation from Disney’s leading animations and provide you with 12 basic animation principles.

What do the 12 principles provide?

Realism
Context
Causality
Focus
Delight

They also help to create hierarchy and relationships between objects. These principles help you to provide feedback to the user, indicate status and give instructions. One of the first uses of animation on computer screens was the flashing cursor. It tells you that you can start typing and that the computer is working and not frozen. This simple animation conveys information faster than words can.

How to Use Animation Responsibly

When you are deciding to add animation to your user interface, consider the following:

Does it add value?
Are your behaviors consistent?
Is the user interface still functional without it?
Is the animation optimized?
Do you need it?

Using Animation to Enhance User Experience

At WordCamp Atlanta 2019, Michelle Schulp gave a talk Squash and Stretch and Good UX- Using Animation To Enhance User Experience. She gave a quick overview of the 12 Principles of Animation. Michelle explains the uses of animation and how to use animation responsibly.