Designing a website that’s “accessible” means you’re providing an equivalent experience for all users, regardless of the physical ability an individual user may or may not have. The World Wide Web Consortium (W3C) puts it this way: “Accessibility means that people with disabilities can perceive, understand, navigate, and interact” with your website without barriers.
Who is the W3C? They’re an international non-governmental association that develops technical specifications for HTML and CSS, as well as recommendations and best practices for security, online payments, and accessibility. The W3C’s international gold standard for website accessibility rules is called the Web Content Accessibility Guidelines (WCAG).
Section 508 of The Rehabilitation Act, first adopted in 1973 and amended by Congress in 1998, requires federal agencies to make their electronic information accessible to people with disabilities. The rules were originally established in the fairly early days of the Internet, but Section 508 was modernized in 2017 to align with WCAG.
What this means in practical terms is, adhering to Section 508 for website development is synonymous with WCAG compliance. And while these standards are merely best-practice “recommendations” according to the W3C, for all U.S. government agencies — as well as for businesses and organizations that receive federal funding — these accessibility standards are requirements under Section 508.
The Americans with Disabilities Act (ADA), which became law in 1990, requires state and local governments, businesses, nonprofit organizations, and labor unions make “reasonable accommodations” for employees with disabilities. ADA is a broad law against disability discrimination that applies to agencies and organizations with 15 or more employees. While it doesn’t go into technical details about website development, Section 508, on the other hand, essentially tells employers how to comply with ADA. How so? By following the WCAG.
In addition to ADA and Section 508, there are other federal laws that touch on the subjects of website development and access to electronic information. The Connected Government Act of 2018, for example, requires all new and redesigned federal agency websites to be accessible using mobile devices.
Oregon’s Department of Administrative Services has developed a set of guidelines for usability and accessibility for state agency websites. Effective March 2017, all agency websites must:
The Web Content Accessibility Guidelines (WCAG) are separated into three levels of conformance. These roughly translate into “basic stuff” (level A), “essential stuff” (level AA), and “shootin’ for the moon stuff” (level AAA). The W3C acknowledges that AAA may be impossible to achieve, so for the most part we’ve only included rules from the first two levels here. Also, for the sake of brevity — and to prevent eyes from going crossed — we’ve omitted highly technical and fine point recommendations. (If you care to dig deeper into the geeky details, W3C has more than 1,100 technical specs.)
Here’s our quick reference checklist for developing a website that conforms to WCAG and Section 508 standards.
While accessible website design isn’t rocket surgery, it does require an approach to planning that starts at the very beginning. Done right, accessibility is woven into all phases and stages of website development: content strategy and information architecture, user experience and visual design, and programming.
Need help implementing these accessibility standards for your website? Contact Logan Hoffman at firstname.lastname@example.org or call 541.971.4113 ext. 711.
This article is also published on Medium.
Here at Madison Ave. Collective, we have a tested naming process for creating a memorable name that engages your most critical audiences and positions you for success.
It’s one thing to deliver an excellent student experience on campus; quite another to build an excellent website. Between us and one of our long-term clients, Colleges of Distinction, we’ve evaluated a countless number of college and university websites — the good, the bad, and everything in between.
In this article we’d like to share some of what we’ve learned, so that you can help your own higher ed website achieve excellence.
Let’s start with some of the most common issues we’ve seen in higher ed websites. Does any of this sound familiar?
No message. Many university websites lack a strong brand story. Also, they’re not sending targeted messages to defined audiences, prompting them to take specific actions.
No differentiation. What makes you different from other institutions? Whether or not you can articulate it internally, we’ve noticed many schools aren’t communicating it clearly online.
Internal focus. It’s easy to get so absorbed in the internal workings of your administration, faculty, and staff that you lose sight of what new students or donors need from your website.
Lots of sub-brands. Do you have a different microsite for each department? The ensuing chaos makes brand consistency a far-off dream — and maintaining the various logos, page templates, and back-end technologies is hard work. More importantly, an inconsistent experience for prospective students, donors, and other users can be jarring and off-putting.
Content clutter. Is your website a recruitment tool? an enrollment driver? a resource for students and faculty? … or is it a repository of all the information you’ve ever used, most of it out of date?
For every challenge, there’s a best practice to resolve it. Let’s look at a few of the most helpful rules we’ve noted from our experience.
Think strategically. A strategy is four things: a problem, a goal, a plan, and a result. Where is your website falling short? Where do you want it to be? Answer that, and you can plan a path to action.
Think like a user. Is the hierarchy of info logical? Are pages organized to meet the user’s most pressing needs first? Have you mapped the paths that users take and built a coherent journey?
Make action easy. Every call to action should be clear and convincing, and the conversion points — the places where users take those actions —should be easy to find and respond to.
Cross all those Ts. Every area of your website should be an extension of your brand. The design should be mobile-responsive, accessible from any device. It also needs to be ADA-compliant.
Establish metrics. Without a way to measure success, who’s to say if your efforts are paying off? We know it can be tricky to identify objective markers — but it can be done, and it’s essential.
When it comes to choosing an agency, there are two options: the conventional route, and the streamlined route.
Scan for strategy. Many creative professionals make beautiful work — but the point isn’t just to look pretty. It’s to accomplish the goals of your organization and meet the needs of your stakeholders. How do your candidates propose to do so? Do they have a proven process for delivering results?
Invest in discovery. Your partner should talk to internal and external stakeholders, perform a brand audit and competitive analysis, and research your history, values, goals, and competitors. Up-front research is the necessary foundation for getting started and will guide decision-making throughout the project.
Avoid death by committee. When collecting initial input, ask everyone. Make sure key stakeholders and representatives from every target audience have an opportunity to be heard. But when making decisions, establish a small, tight-knit team with the judgement to weigh conflicting perspectives and make the call.
Be bold. Today’s degree-seekers aren’t looking for the same old / same old. Don’t be afraid to look and sound different. We know standing out can be scary — but when you do, great things can happen.
The tips above may seem simple, but make no mistake: they’re game changers. After researching and auditing countless higher ed websites, we’ve seen these principles bear out over long and close observation. We hope they help you achieve excellence in your website, too.
This article is also published on Medium.
All branding and marketing projects start with questions. Lots of questions. In order to uncover unknowns and proceed with confidence, we recommend starting with a Discovery phase. Learn all about Discovery for your next branding project in this free, 8-page illustrated guide.
All website development projects start with questions. Lots of questions. In order to uncover unknowns and proceed with confidence, we recommend starting with a Discovery phase. Learn all about Discovery in this free, 8-page illustrated guide.
From positioning statements to elevator pitches to taglines, here are eight messaging elements you can use to define and promote your business or nonprofit.
Icons often get overlooked. This is probably because their job is a thankless one: Enhance the content without being too distracting. After all, your audience wants to be able to get information as quickly as possible and an overly-complex and beautifully detailed illustration can often distract rather than help. When it comes to icons, they tend to discreetly enhance a layout rather than be the belle of the ball.
(Not sure what the difference between an icon and illustration is? Check out our article.)
Icons are a functional and important part of any marketing piece or website. Being functional doesn’t mean they can’t be beautiful, but icons need to remain simple and, most importantly, clear. Icons are used to quickly draw attention, clarify copy, or point a customer to a certain action or goal.
Icons are also a great way to save on space, particularly for mobile devices where space is at a premium. Think about crazy-long navigation menus. Not great for cramming onto a mobile screen, right? To circumvent this issue, UI and UX designers rely on the beloved “hamburger” menu (three lines stacked on top of each other). Tap the simple three-bar icon and it reveals the navigation menu that, without the collapsible menu, would have cluttered the screen. The adoption of this icon initially grew from the necessity of needing space on mobile and has since found its way onto larger desktop screens (a practice that is widely debated by UX experts to this day).
Same idea with the good ol’ “search” icon. Rather than have a box that says “search,” which is perfectly acceptable for the large real-estate of a desktop screen, a simple magnifying glass works for mobile and is a widely understood space-saver.
But don’t forget, if you can say something simply with words, maybe an icon isn’t needed. Yes, they can be very useful, but when used inappropriately they can cause visual noise. Don’t put icons on a page just to have icons. Make sure they have a purpose.
First, think about what your icon is being used for. An icon can take many different forms: Is it an icon supporting an important piece of content? A social media icon? An icon that is universally understood? An icon calling for an action, such as “play” or “refresh?” Is it a Favicon (those handy little icons you’ll see on the tab associated with your website in your browser window)? Each icon needs to be treated differently depending on its purpose.
Let’s say you have a brochure with a lot of copy. It’s a marketing piece that explains the exciting breakthroughs your company has been involved in. Problem is, the customer is confronted by a big wall of text. That’s not very exciting or interesting.
Icons can be a great way to break up large amounts of text while giving the reader insight as to what they will learn before diving in. In cases like this, icons can be a little more detailed than, say, an icon that is trying to quickly direct you to an action (more on that below).
For example, if a customer sees an icon of a briefcase on your site, they will likely assume it is indicating something about “business” or “work.” Based on common icon conventions, it is quickly understood and there was no need to waste a bunch of verbiage to get the point across. If, however, the icon is supporting a complex idea put forth in the text, it may need another level of detail. This could be a briefcase on top of a globe with a heart over it. Unlike the simple briefcase icon, its purpose is not quite as clear without the text and yet it still needs to be quickly understood. When this happens, a clear title can tie the icon and copy together. Something like “promoting good business across the world.”
Above is an example of more detailed icons supporting copy. These are a great way to elevate the message on the page. They draw the reader’s eye in, and quickly support the copy in a simple visual way.
Ah yes, the ever-ubiquitous social media icon. Found on almost all websites and marketing materials, these icons are great indicators of a broader social media presence. There are, of course, the familiar social media icons such as Facebook, Instagram, or Twitter. In this case, check out the media kits and licensing provided by these companies. Often the icon files are free to download, but keep in mind you often cannot change their color (unless it’s black or white) or the icon itself. Let’s face it, you probably wouldn’t want someone changing your logo icon either. So, stick with the rules.
But let’s talk about creating your own icon for social media use. When creating an icon for application on various social media platforms, keep in mind it needs to be flexible and simple. Often icons for social media are designed in the shape of a square with ample room around the corners, since, depending on the social media platform, your logo icon could either be placed in a square, a square with rounded corners, or a circle. It’s also going to be viewed at large and small sizes, so this is where the simple part comes in. An overly complex icon is not going to be very recognizable in a Facebook newsfeed on your phone.
That said, social media icons are used for just that… social media applications. Whether they are linking TO a social media application, or it’s the appearance of your icon on the app itself, simplicity is key.
Icons can be used to resonate with a global audience when words can’t effectively reach such a broad group. Think about street signs across the world. Without knowing the language, you can clearly understand a warning or message. Same idea applies to a marketing piece or website. If a user sees a magnifying glass on your site, it is universally understood that means “search.” This doesn’t mean, however, that all icons work for a global audience. A great example of this is referenced in a Creativebloq article on icons:
“… in the West an owl stands for wisdom, while in the East it’s a symbol of stupidity. Poor old owl.” — Ruth Hamilton, Creativebloq
In fact, few icons work universally. Think about the Shopping Cart. Seems pretty universal, right? Wrong. That cart is also often represented as a bag, or even a basket. Same goes for the “heart” icon. It can mean “favorite, ” “love,” or “save,” which makes it difficult to understand right off the bat. On top of that, “favorite,” “love,” and “save” can also be represented as a star. When using icons, do your research. What will make sense to your audience? Is it really universal?
Found everywhere on the web, these are icons that hint at an action the user needs to take. Generally these are universal icons and therefore understood around the world without labels or introduction. A great example of this is the “play” button. Quickly understood and recognized, the “play” button just needs one click or tap, and the user knows that a video or song will start playing. The action is already implied in the icon. Another example is the “home” icon. Click on that icon to get “home.”
While these icons can exist without labels, it is wise to consider adding labels when you can for the sake of ADA compliance and overall clarity.
Favicons are a subtle icon that can solidify the branding of a web page. Take a look at the page tabs at the top of your browser window. See all those little icons next to the page title? That’s a Favicon. Favicons are a subtle reminder of where you are, especially if, like me, you have about 15 tabs open at any given time. Favicons also appear in your bookmarks bar as well as the icon that appears when you save a site to the home screen on your phone.
A nice cherry-on-top for any website, the Favicon can often get overlooked. A Favicon is actually a collection of many different sizes of icons, used for a variety of devices. There are a couple of ways to approach the Favicon. First, there is the ICO file. An ICO file contains multiple files, all set up to conform to the multiple applications needed for the Favicon. This method works great because all the files needed are contained in one tidy ICO file.
The other option is to save the multiple files yourself or via a generator. Often, my approach is to create a high-quality PNG (in a 64px x 64px square). I then use a favicon generator that takes this PNG and saves it in the 24 sizes needed to appear in bookmarks, URL bars, tabs, and Apple and Android screens. A nice added bonus to this latter method is I can take a few of these files and customize them to be more ideal for their application. Sometimes an image that looks great in a tab won’t work as well as the icon on your Android or iPhone home screen. This flexibility makes this my preferred method of creating Favicon files.
Clearly icons have a variety of ways they can be used. On top of determining which kind of icons you need and why, you need them to match the look and feel of your brand.
There are vast banks of pre-created icons. Whether they are free or charge a fee for use, these icons can be an excellent time-saver for a quick print or web piece. The key is making sure these icons remain consistent throughout as you pick and choose icons that suit the messages you are trying to convey. Or, if you have a designer handy, they can take these icons and adjust them as needed. Not too shabby. Below are a few resources for free icon sets, just be sure to check licensing and crediting:
Often, however, there isn’t an icon that quite matches the message your piece needs to convey in those pre-made sets. Or maybe you have a very particular look you are after in order to match your overall brand. Or maybe your competitor is using the same free icon set (yikes). In such instances, custom is the way to go.
When thinking about custom icons, consider if you need just a couple icons, or an entire icon set. A few icons? Okay. A designer can create a few for your brochure or web page and you are on your way. But what about future print pieces? Future web pages? It might be a good idea to have a repository of icons custom-made to suit all of your business needs for present and future work.
While creating an entire custom icon set is a large chunk of work, it can be a time-saver in the long-run. Any future marketing pieces or presentations already have a ready-to-go repository of icons. This allows for brand consistency and ease-of-use for employees.
Next time you find yourself perusing a website or printed marketing piece, take a moment to look at the icons. Are they clear? Are they consistent? Are they taking too much away from the content on the page? How are they enhancing the content? Are they distracting? See what is working and what is not. Chances are, you didn’t look all that closely at the icons before, but now you can see the subtle brilliance of a good icon set. Even better, you can apply these insights to your next marketing piece or website.
This handy infographic will take you step-by-step through our branding process.
It happens all the time. In just about every meeting with every client there’s a point when words stop working as expected. You say one thing; your client hears another.
Miscommunication with clients is particularly frustrating because as branding designers we are in the business of communication. We pride ourselves in our ability to simplify the complex. We leap at the challenge to transform a mess of disjointed inputs into an elegant output. We labor long hours, fine-tuning our client’s communications in order to ensure their message is easy to understand and easy to act upon.
But then, inevitably, it happens. While you’re pitching that all-important big idea to a new client—or even just trying to describe the thing on your screen to someone over the phone — the understanding of a word gets in the way.
It happened the other day at our office. A couple members of our design team were meeting with an important client who works in the online security space. Our work for this client includes the development of a branding toolkit that includes about thirty icons for them to use in presentations and on their website. In addition to this expansive set of simple icons, we’re also developing a handful of more detailed illustrations for their website. These larger illustrations are being used to support paragraphs of written content about our client’s services and target industries. Together, the icons and illustrations come together to form an infographic we’re designing to communicate the various methods and tools our client uses to keep the Internet safer for everyone.
Problem was, several words kept getting mixed up as our conversation with the client bounced around between different pages of the website and other branding elements we were discussing. When one of our designers began talking about adding texture to the illustrations, it took a minute to realize the client was actually talking about the iconography. And when someone on the client side mentioned the logo could be bigger, we suggested increasing the logotype but keeping the size of the logo’s icon unchanged, given the space restraints. Now wait, which icon are we talking about again?
Backtracking to untangle the word jumbles cost everyone in the meeting extra time and resulted in a wee bit of frustration on my part. But the problem wasn’t a lack of listening. The problem was a lack of agreement about what these words meant by those sitting around the table.
So I asked myself: What could we have done better, in advance of this client review meeting, to make sure everyone was in agreement on the basic definition of terms?
One way could have been through the development of a more comprehensive brand book. In fact, whenever a client hires us to develop a branding system we always recommend including an identity guide or brand book as part of our deliverables. Whether it’s just a few short pages (we call this an identity guide) or something longer and more elaborate (we call this a brand book), the document is a valuable tool that can — when done correctly — improve communication between our firm and the various stakeholders on the client side.
The brand book we initially created for the client described above included some information about the various types of artwork we developed. Unfortunately, we missed an opportunity to clearly define the difference between “icon” and “illustration.” These are illustrations. Those are icons. This is how we use the illustrations. That is how we use icons.
An early draft of the brand book didn’t do this, but we’re now updating the document to make sure everyone is on the same page.
Another way to get in sync with a new client is to give them a list of branding terms, with definitions, that you anticipate will be used during your time of working together. Best to do this early in the process — well before you start designing anything.
Below is a list of nine words, with definitions, that in my experience get used (and misused) most often when branding designers and their clients attempt to communicate.
1 | Brand: A brand is a noun. It’s a thing. More specifically, a brand is how someone might describe your organization’s reputation. It’s what your customers think or feel when they think of you. Example: Apple’s brand is about style, while Dell’s brand is about … meh.
2| Branding: The ing tells us that branding is an action. Developing your organization’s logo is an act of branding design. Likewise, the act of applying your brand identity elements (your logo, color palette, fonts, etc.) to say, a brochure or a website, is an act of branding application.
3 | Logo: Unless we’re specifically talking about the mark a branding iron burns into the hide of cattle, your logo is not your brand. Conversely, your brand is not your logo. These two words shouldn’t be swapped around willy nilly. A logo is a distinctive visual mark that represents a brand. It visually identifies the brand in a similar way that a name, when spoken, audibly identifies the brand. Most logos include two elements: 1) typographic letterforms called a logotype; and 2) an illustrated component called an icon.
4 | Logotype: The letterforms of a logo, especially when distinctly designed to represent your brand, are called a logotype. Examples of stand-alone logotypes are Coca-Cola, FedEx, and Samsung. Another word for logotype is wordmark.
5 | Icon: If your logo has an illustrated component that is separate from its letterforms, this part of the logo is often called an icon. It generally will communicate a singular idea, although designers often enjoy packing multiple (sometimes hidden) meanings within a single icon. Synonymous terms are symbol and mark. My advice: whatever word you choose, pick one and stick to it. Big brands with household names like Nike, Apple, and McDonald’s can get away with using an icon alone as a recognizable substitute for their full logo. In these instances, the icon may be referred to as a brandmark.
6 | Iconography: A collection of icons — separate from the logo— used within a brand’s visual identity system can be referred to as iconography. A defining characteristic of the individual icons is that they’re simple. Iconography, therefore, is a set of simple illustrated icons.
7 | Tagline: This is a descriptive statement. It’s a short, useful phrase that’s tagged onto your logo. Its purpose is to describe what your organization does, how people can benefit from your services, or something else that differentiates your organization from others. Below is a logo and tagline developed by the MAC for a company that produces heirloom-quality furniture with a lifetime warranty.
8 | Slogan: This is a marketing statement. There are significant differences between a slogan and a tagline, which I’ve written about in more detail here. Slogans are catchy phrases you could lead marketing campaigns with, and when at their best will make you feel something. Many big brands will change their slogans often (remember Food, Folks, and Fun?), but others (e.g. Just Do It) stick around for years.
9 | Lockup: When a logotype, icon, and tagline (or marketing slogan) come together as a single piece of artwork — and delivered say, as a single JPEG or EPS file —you’ve got yourself a lockup. This word can also be used to describe multiple logos, such as a parent company logo and a sub-brand logo, that are used together.
Well, those are the big ones. Did I miss something from your list of misunderstood design terms? Feel free to copy/paste the definitions above and drop them onto your own company letterhead. Then, pass it around the table at the beginning of your next design review meeting.
This article is also published on Medium.
Let’s come right out and say it: technology branding strategies are undervalued.
In an industry racing to define the future, the short-term rush of product marketing too often steals focus from the slower wheel of brand development. It’s easy to see why. The big picture, the deeper story, the overarching audience relationship feels less urgent by comparison. Less important.
Major tech brands like Google, AT&T, and Microsoft would disagree.
“When I first started my career in high-tech B2B marketing, I didn’t know what branding was,” said Juliette Rizkallah, CMO at SailPoint. “I was trained in product management and product marketing, and in my mind if the product was good, that was all the company needed.”
The same mistake is common in Silicon Valley, where it’s easy to “think that the best product will beat out all of the competition,” said Samantha Warren, Experience Design Manager at Adobe Stock + Typekit. Problem is, the best products don’t always make the most successful companies, Warren said.
In fact, according to entrepreneur Larry Alton, “not having a brand” tops the list of mistakes that tech startups are prone to make.
Your technology branding strategy deserves at least as much attention as the evolution of your tech. Strategically, it’s the foundation that supports everything you aspire to do — so how to make it a good one?
To answer that question, let’s see what we can learn from some of the strongest technology branding strategies out there. Microsoft, Google, and AT&T are counted among the top 25 “biggest technology brands of the world.” They each invest significant energy in their branding, using it to unite many disparate offerings into a coherent family while expressing a focused emotional undercurrent that draws customers to their door.
There are many aspects of the example they set that we could highlight — but one secret they all have in common is simply this:
A brand promise is one, at most two, core concepts that express your basic value proposition and sum up why your customers choose your brand.
These promises look simple, right? And so they should. A brand promise needs to represent a clear, simple idea that’s easy to wrap your mind around.
But defining a promise of your own is usually harder than it looks. Working with technology firms here at the MAC, we’ve found that when you’re deep in the weeds in product development and internal company dynamics, it’s not easy to zoom in on the one true idea that effectively distills your identity into a few words — the core, unifying, emotionally-resonant promise that’s strong enough, important enough, and authentic enough to provide a lasting foundation for your brand.
Nonetheless, it’s a challenge that all technology branding strategies must overcome in order to succeed. Following are a few tips to get you moving in the right direction.
Our client Shadowserver is a nonprofit organization working quietly behind the scenes to make the Internet more secure for everyone. Their vision of “a more secure Internet” provides focus for everything they do. Thanks to the altruism that drives it, Shadowserver has built credibility with cyber security teams across the globe and pioneered a radical shift toward collaboration and transparency in their field.
That’s the power of a vision. If you know what you’re aiming for and why, your tactical efforts can converge upon a goal that not only makes you more effective internally, but gives your external audiences a reason to rally with you.
Ask yourself this: how does your company vision benefit your audience? Articulate the answer, and you’ll be one step closer to a strong brand promise.
What are you doing well, that no one else is doing at all?
Your unique selling proposition (or USP) is a fundamental component of your brand. It defines who your audience is and why they care about you: vital information when claiming your position in the heavily saturated technology market.
Defining your USP is a principal goal of our discovery process at the MAC. We unearth it through a thorough competitive analysis, informed by extensive interviews with internal and external stakeholders. Once we’ve defined your USP, we build on that with your visual identity and essential messaging components — not the least of which is your brand promise.
When a customer purchases your product, does it give them the power of a magician to transform reality? That’s the storyline behind the Apple brand, and it’s a good one.
Does it turn them into a rebel, subverting expectations and rewriting the rules? In past decades, Apple tried that story on for size, too.
Does it make your customer a creator who reenvisions the world around them? Sony told that story when advertising its cameras.
There are many ways to tell a compelling story with your brand. The point is, all great technology branding strategies tell one.
Think of it this way. If your brand story defines the relationship between your company and your audience (who are you to them? who do you help them become?), your brand promise drives the plot. It’s the kernel at the center, around which the rest of the story spins.
There’s a silver lining to the fact that technology firms tend to undervalue branding. It means that by defining yours, you can develop an edge on your competitors.
In that spirit, we encourage you to step back from the lemming rush on the short term, and pause for a moment to reflect on what you do and why (your vision). Identify what’s unique about your offerings, a quality not shared with anyone else in the world (your USP). Figure out why your customers care; then brainstorm who that makes you by extension (your story).
Out of these exercises, your brand promise will emerge.
Need a hand? We’ll be here for you.
This article is also published on Medium.