The Power of Feedback: A Cornerstone of UI Design

In the realm of user interface (UI) design, where the goal is to create seamless and intuitive experiences, feedback plays a pivotal role. It’s the bridge between the designer’s intention and the user’s perception. By providing timely and informative cues, feedback helps users understand the system’s state, navigate effectively, and accomplish their tasks with ease.

Why Feedback Matters

• Clarity and Understanding: Effective feedback ensures users comprehend the system’s current state and the potential outcomes of their actions. This reduces confusion and frustration, leading to a more enjoyable experience.
• Guidance and Direction: Feedback acts as a guiding light, directing users towards their desired goals. It can be as simple as a progress bar indicating the completion of a task or a tooltip explaining the purpose of a specific button.
• Error Prevention: By providing immediate feedback when users make mistakes, we can help them avoid costly errors and ensure data integrity.
• Satisfaction and Engagement: Positive feedback reinforces correct actions, rewarding users and boosting their satisfaction. This can lead to increased engagement and loyalty.

Types of Feedback

• Visual Feedback: This includes changes in color, size, or shape of UI elements. For example, highlighting the currently selected tab or changing the color of a button to indicate it’s disabled.
• Auditory Feedback: Sound cues, such as a confirmation beep or a gentle chime, can provide immediate feedback without requiring visual attention.
• Haptic Feedback: Vibrations or tactile sensations can enhance the user experience, especially on mobile devices.
• Textual Feedback: Clear and concise messages can inform users about the status of their actions or provide instructions.

Best Practices for Effective Feedback

• Be Timely: Feedback should appear immediately after an action is performed to avoid confusion.
• Be Relevant: The feedback should be directly related to the user’s action and provide value.
• Be Consistent: Use consistent feedback patterns throughout the UI to create a predictable and familiar experience.
• Be Clear and Concise: Avoid overwhelming users with excessive information. Keep feedback messages simple and easy to understand.
• Be User-Centered: Consider the user’s needs and expectations when designing feedback mechanisms.

Feedback is an essential component of UI design that can significantly enhance the user experience. By providing clear, timely, and relevant cues, we can help users navigate our systems with confidence and achieve their goals efficiently. By incorporating feedback into our designs, we can create products that are not only functional but also enjoyable and satisfying to use.

Where to find good stock photos

Stock photos may have a negative connotation, but for me, they’re an important part of web design. I have a mantra I tell to each of my clients before we begin designing a website. “You don’t need a GREAT website. You need a GOOD website with GREAT images.”

It’s not that I’m trying to tell them or myself short. What I mean is that most modern WordPress templates take care of all of your technical requirements. They are mostly well optimized for SEO and responsive to mobile and different screen sizes. There really is no good reason today to design a website from scratch. Instead, your time is better spent looking for great images to fill in the placeholders in the template.

The best photos are from your organization, showing your services, and highlighting the people you serve. But if you’re just starting out you may not have a large media library to choose from and will need to resort to stock photos. As good stewards of digital data, we should avoid (intentionally or unintentionally) violating a copyright on a photo. That’s where license free photos come in handy. Photographers upload their stock imagery to different websites and grant you permission to download them, use them on your website, and edit them as you see fit. Some may ask for donations in return.

Four great websites for stock photos

• Pexels – This was the first stock image website I found and used. And you will see many of the images there as featured photos on my blog posts.
• Unsplash – As I started to blog about the same topics again and again, I started looking for variety in images and topics to choose from, and that’s when I found Unsplash.
• Pixabay – Nowadays I search all three of these sites to find just the right image to portray the emotion I’m going for. You can use them for anything from print to web to social.
• Vice Media – This last example fills a niche that other stock photo sites typically do not. They host images of gender fluid, non-binary, trans or queer people. If you are trying to reach this audience, it is a great place to find a few stock images that are more inclusive.

Take these websites for a spin and use them without losing sleep about a copyright infringement. From PowerPoint decks to social media posts, sometimes it’s just too much to rely solely on photos you and your organization have taken. Happy hunting!

What is Lorem Ipsum?

You may have seen the term Lorem Ipsum around the internet (or at ye olde print shoppe). You can even see on my Twitter bio I facetiously claim to speak Lorem Ipsum. But what is it? Is it a real language? Why does it even exist in the first place?

Is Lorem Ipsum a language?

Lorem Ipsum is not, strictly speaking, a language. It is based on Latin, and certainly some of the words could be directly translated. But it is not intended to mean anything or relay any information.

It can be a fun activity to pop sections of Lorem Ipsum into Google Translate. For example:

ipsum dolor sit amet

Translates to:

the pain itself is to be loved

Poetic.

Why does Lorem Ipsum exist?

Lorem Ipsum exists because it looks like real text. When designing a page layout, whether digitally or physically, it is helpful to have some text where paragraphs are meant to go. But you almost never have the finished text to test.

It can also be distracting to the viewer if real text is used. Your eyes instinctively focus on the copy and subconsciously read the lines. Rather than looking at the white space, balance, layout, or design, you focus instead on the text. Real text is distracting enough. Silly placeholder text is even worse.

That’s where Lorem Ipsum comes in. It occupies the same space using roughly the same letters, word lengths, sentence structure, and cadence. But it’s completely unreadable, so your eyes are not distracted by its presence. Take this paragraph for example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue a elit a rutrum. Cras vestibulum dapibus quam non auctor. Donec gravida tempor pulvinar. Nam id efficitur arcu. Suspendisse congue eu sem vel luctus. Suspendisse ut justo aliquam, suscipit purus et, pharetra justo. Aenean faucibus orci non sodales scelerisque. Nullam dignissim efficitur dui vel bibendum. Nulla facilisi. Integer laoreet quis purus dapibus euismod. Praesent eget leo a libero semper elementum nec sit amet est.

Pleasing in its composition, but mostly utter nonsense.

Where to get Lorem Ipsum?

One thing you may notice about Lorem Ipsum is that it’s consistent. It always stars with the same words and has remain unchanged since around the 1500s. So where is everyone getting it?

The good news is, these days there are plenty of generators available online. My favorite is at Lipsum.com. Here you can specify how many paragraphs, words, or bytes of text you need. Click a button, copy/paste, and you can move on to more important aspects of your design. The ease of this beats even the fastest gibberish typer, so I will use it exclusively for any design activities. Give it a try on your next layout and feel in on the secret of Lorem Ipsum!

Serif versus Sans Serif fonts

You may have seen some fonts in your Microsoft Word styles labeled as “sans serif.” But did you ever stop to think what that means? A serif is a small flourish on the ends of letters in a font. If the font doesn’t employ these small calligraphic embellishments, then it is sans serif, or without serif.

The two most well known examples of each type of font are:

• Serif – Times New Roman
• Sans Serif – Arial

It may not be imperative to know this definition, but it can help you with some basic type-setting or stylistic determinations. An easy way to make printed words look good (or blocks of text on a web page) is to alter the headings and the body text between two similar fonts – one with and one without serifs. For example, two geometric fonts that use very circular letters can be used together if one has serifs and the other does not.

The addition of the font flourishes is just one designating feature of a font. The size, shape, weight, and style of the font all factor into the final look – but also whether two fonts will look good together. Similar fonts with just one attribute different between them pair harmoniously for the reader. If they differ in 3 or 4 different ways they cease to be pleasing to the eye and can even be distracting to the reader.

The next time you go to add text to a document, a webpage, or even a social media graphic, ask yourself if adjusting the serif between paired fonts will get you a more professional and pleasing look.

Logomarks vs. Logotypes

When designing a new logo, two main components to consider are logomarks and logotypes. You can have just one, or both. Understanding the difference will help you work with a logo designer to get the most appropriate end result for your brand or organization.

What is the difference between a logomark and a logotype?

Using the Dijon Marketing logo as an example, you can see two distinct elements. The first is the circular icon resembling an uppercase cursive D. This is the logomark. The text to the right of that then would be considered logotype. The logotype can be as simple as a font, but usually involves some additional styling or flourish. In my logo, I use Roboto font with specific font weights, specific ratio of font sizes, and some additional kerning on the word “Marketing” for a more uniform width.

Do I need a logomark or logotype?

You certain can have a standalone logomark. Some of the most famous brands in the world do. Can you picture the logomark for Nike, Apple, or Target? The use of a logomark alone is best suited for well known brands. If you are just starting out, it may be difficult for people to recognize you without a logotype.

You can also have a standalone logotype. This is one of the most often requested when I start on a new logo design with a client. They most want just the name of their brand to be the logo. But I always say, “A font is not a logo.” You need a bit more than just choosing a font and a color if you’re going to go with only logotype.

The best of both worlds

The best solution in almost every case is a combination of a logomark and logotype. The logomark is iconic, bold, and recognizable. The logotype assists in new brands getting their name associated with the logomark. The other advantage is that you have the ability to create different sizes and combinations of the two elements for Responsive Logo Design. You can keep your branding regardless of the screen or print size you are dealing with.

Responsive Logo Design

You hear a lot in web design about responsive websites. A responsive website responds to the size of the screen viewing it. It may shift elements, change sizes of text or images, or drop elements completely from smaller phones.

What if you could do the same thing with a responsive logo?

Let’s take an example of Dijon Marketing. If I designed a letterhead or desktop graphic, I might be able to accommodate a very wide aspect ratio.

But as my screen gets smaller, if all I do is make the logo proportionally smaller, it can get harder and harder to distinguish. If you haven’t really considered web applications when originally designing your logo, it can be problematic.

In a responsive logo, much like a responsive website, elements of the logo can move, change size, or disappear altogether. Here’s a better way of displaying the logo on medium and small-width screens:

The brand is still recognizable, but the most identifiable elements stay front and center – and big enough to see!

It’s not too late to reconsider the implementation of your logo to add responsive elements to the display. A quickly recognizable brand means your users or followers will instantly recognize you from web to social platforms.

Hex color codes explained

Even if you’re relatively hands-off with your website or graphic design, chances are you’ve encountered hex color codes before. They can seem like garbled computer code, but there is a method to the madness. I’ll try today to demystify these codes and give you one more digital tool in your toolbelt.

First, if your eyes are already glazing over, don’t worry. There are many color pickers online that will do this for you. My favorite to use is by Google and is available right within Google search results. Just search for “color picker” and there it is.

Just pick a color and this will reveal the hex code to you. “Hex” is short for “hexadecimal” and is a base 16 representation of numbers 0 through 16. In hex, when you count to 9 instead of resetting to 0, it increments to A (10), B (11), C (12), D (13), E (14), and F (16). A two-digit hex number can thus range from 00 to FF.

You’ll see in the screen capture that a hex color code, though, has 6 digits. This is because it is comprised of 3 different 2-digital hexadecimal numbers. Each value represents how much of each primary color for a pixel is present. Unlike when mixing paint the three primary colors when mixing light are red, GREEN, and blue.

The rich green color shown in the example has a red value of 32. You don’t necessarily have to calculate its base 10 equivalent. Just recognize that 32 is relatively low on the scale. So this color doesn’t have much red. The green value is A8. Not surprising that there would be a lot of green here. And last the blue value is sort of middle-to-low at 52. If you’d like to know their exact values, look no further than the RGB code displayed just below. RGB, if you haven’t guessed, stand for Red, Green, Blue, and gives a base 10 decimal number for each value instead of hexadecimal between 0 and 255. Our guesses of low red, high green, and middle blue are confirmed by the code RGB(50, 168, 82).

If every value is zero (#000000) then the color is black. If every value is as high as it can go (#FFFFFF) then the color is white. So if every value is low, it will be a dark color. If every value is high, it will be a light color. The relative balance between them dictates which color is dominant within the hue and value. Color mixing is similar (but a bit different) to what you learned in preschool. Red and green make yellow. Green and blue make cyan. Blue and red make magenta.

Give the color picker a try and see if you can start to recognize generally what each code represents. Then you can impress your friends and coworkers when you say, “I think we should use #C41440 instead of pure red.”