Your friends at Viget present Inspire, a Design & Interaction Blog

Responsive Logos, Part 2: Making Logos Truly Responsive with Inline SVG

In Responsive Logos - Part 1, I made the case that applying responsive design thinking to logos and allowing for subtle flexibility can actually support and enhance a brand’s identity. Several tips were then presented, on how logos can be adapted to better fit small screen constraints.

This post shows how to efficiently implement responsive logos on the front-end, using the examples from part 1.


Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens

From what I’ve seen, logos typically receive the short end of the stick when it comes to responsive web design practices. Take a look through responsive galleries, and you’ll see that, in most examples, the logo is just shrunk to fit within available space.

For rectangular logos with simple and minimal details, this approach can work just fine. But if the composition or proportion of a logo is anything else, simply reducing its size for small screens may make small details unrecognizable, and small type unreadable. Fortunately, it doesn’t have to be this way.


Color Contrast for Better Readability

article introduction image contains the words 'color contrast'

When you create color palettes for your web design projects, are you testing the color combinations for contrast? If you're not, you might not be considering the eventual readability of the design and thus losing potential audience. 

I’ve been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too. 

I should mention that I’m far from an accessibility expert. My goal here is to simply show that a little bit of effort can go a long way when it comes to selecting colors with optimal readability in mind. Check out W3C for a more thorough explanation. Also, check out Contrast Rebellion for an interesting look at the contrast problem. 


Beyond Empathy: Approaching a New Career in UX

So you're starting a career in UX. You’re empathetic, detail-oriented, and a stellar organizer to boot, and you want to combine these skills into a career. Welcome, New UX Designer! We’re so happy to have you in the industry.

Now, I’m sure you’ve heard that empathy is at the core of the UX process; this is one thing we’re great at communicating to designers who are just starting out. However, UX requires more than empathy, and it’s hard to know what else to prioritize when you’re new in the industry and there’s so much to learn. Where do you begin?

Here are a few additional lessons I hope will serve you well as you start out in your UX career.


A Skip Link Primer

Of all the accessibility enhancements that can be made to a page, adding a "skip to content" link is one of the easier wins. These links allow keyboard-only (non-mouse) users to quickly jump to the page's main content or other important sections.

In fact, if you need to conform to WCAG, Level A or above section 2.4.1 requires it.

"A mechanism [...] to bypass blocks of content that are repeated on multiple Web pages."

There's some important nuances to this seemingly simple feature, both in use and implementation, that I'm going to explore.