Category: Design

Drupal is an open-source content management system (CMS), free to download, and offers an impressive amount of baseline functionality that users can leverage right from the get-go. From there, it’s easy to expand your Drupal system and customize it to your heart’s desire with over 47,000 modules, almost 3,000 themes, and high-level custom coding capabilities.

Along with its robust features and scalability, Drupal is a great platform for web design.

Here at Kanopi, we know that Drupal development and maintenance is an ongoing process. When it comes to designing your Drupal site, you may feel as if the work is never done. Is your web design effective for your organization’s current needs? What do you need for a well-designed Drupal website? All of these questions and more will be answered in this guide.

The Components of Effective Drupal Web Design

When it comes to determining how effective your web design is, ask yourself these three questions:

1. Can supporters easily navigate to their target destination?
2. Is your website telling a clear story?
3. Do the visuals support the character and tone that your organization wants to present?
4. Can visitors find/know what the main call to action is?

If you answered yes to all four, then your Drupal website and its design are probably in good shape. If you answered no to all four, then it’s time to rethink your web design strategy. However, it’s more than likely that your answers fell somewhere in between—or you aren’t sure exactly what your answers are at all!

To help you walk through each of these questions and how web design can affect your answers, we’ll review these essential components: structure of information, wireframes, visual & interactive design, accessibility.

Structure of Information 

Let’s imagine someone wants to find your organization’s contact information on your Drupal website. They check the menu, click around a bit, and land on your About Us page. But there’s no contact information to be found! They then go back to the homepage and scroll to the footer for more information. When they realize the contact information isn’t there either, they decide to quit the page and move on.

This process of navigating a website, going to different pages, and clicking on various links is all based on your website’s structure of information, otherwise known as its information architecture.

Your website’s information architecture describes the physical structure and layout of your website’s content. Think of it as the studs a house is built on— the studs determine where your kitchen, living room, and bathrooms will be. Once that’s determined, you can then choose where your kitchen island and cabinets will go.

For your website, your information architecture helps choose how many pages there are, what type of page it is (i.e. article or list), and how these pages connect to each other. 

When it comes to web design, it’s critical to determine the structure of information if you want to answer yes to our first question: “Can supporters easily navigate to their target destination?” Before launching your site or during a website redesign, make sure you outline the information architecture and sitemap so that your information architecture makes sense and flows logically for the user.

Wireframes

Along with the structure of your entire website, you also need to consider the flow and functionality of your individual pages. That’s where a website wireframe comes in.

Website wireframes are basically a visual guide representing the framework of each page type. They aim to arrange elements in the best way to ensure your website accomplishes a particular purpose and the organization’s goals. In particular, your wireframe might depict a page layout including:

• Paragraphs
• Different media types (images, video, audio, gifs, etc.)
• The menu and footer navigation
• Calls to action placement
• List filter functionality
• Visual description of interaction points, like buttons, accordions, etc.

Along with the actual items on your page and where they’ll live, your wireframe will need to address how these components work together to tell a specific story. When it comes to wireframes, think less about the visual content and think more about user flow. For instance, will users be using one long scroll page to explore different content? Will they need to actually click on elements to engage with certain graphics?

With your website’s wireframe finalized, it’s much easier to answer yes to our second question, “Is your website telling a clear story?” This is because your wireframe ultimately dictates how you tell the story of your content. When visitors click on a web page, it’s up to the visual design to facilitate their journey.

Visual & Interactive Design 

When you think of the term “web design,” it’s not uncommon to first think about the visual aspects of your website.

Your website’s visual design refers to the aesthetics and branding of your site. This can include graphics style, logo, colors, fonts, and other visual elements. To ensure that your visual design is consistent, it’s recommended to create a brand or style guide to ensure that visual elements are used consistently throughout your site.

And, while the visual design is critical for how your users respond and engage with your site, make sure you don’t fall into the mistake of overusing visual elements and distracting users from the actual purpose of the page.

Related to visual design is interactive design. This type of design is specifically focused on the visual elements that users engage with. This includes buttons, links, slideshows, videos, and more. When it comes to visual interactive design, brainstorm the different ways you can create a visual cue. Common ways to indicate to users that a visual element is interactive are using color, shapes, underlines, and other elements that make it stand out on a page.

Determining your visual and interactive design can help you respond positively to our third and fourth questions, “Do the visuals support the character and tone that your organization wants to present?” and “Can visitors find/know what the main call to action is?” As soon as someone lands on your site, your visual and interactive design should immediately connect them to your organization and let them know which elements they can engage with.

Accessibility & Design

Accessibility isn’t necessarily a component of web design, but the concepts go hand in hand. After all, having a well designed website doesn’t mean much if it’s inaccessible. 

Inaccessible web content describes when, whether due to technology or ability, users cannot engage with or contribute to the online world. In fact, your web design is the first stage in which a site becomes accessible to all users.

Interested in learning more about web accessibility? Take a deeper dive into demystifying website accessibility compliance in our guide.

A properly designed website needs to be accessible for all users, including those with low vision, color blindness, seizures, cognitive impairments, and those dealing with situational impairments (such as a broken arm or carrying a crying baby). The great thing about Drupal is that all features of its core platform comply with WCAG 2.1 and ATAG 2.0. Drupal also has built-in accessibility features like custom color contrast and intensity and form labeling to help screen readers.

Make sure to also consider accessibility for those in different countries (Drupal 8+ users can take advantage of its multilingual capabilities) and those using different screen sizes (Drupal can account for both desktop and mobile users.)

Get Inspired: 3 Drupal Websites

When talking about web design, it can be hard to visualize exactly what these components and concepts will look like in reality. The best way to learn? By looking at well-designed Drupal websites for inspiration! Here are three examples (the first two being Kanopi clients) of Drupal websites displaying effective web design.

1. National Council for the Blind: Drupal Web Design Example

The National Council for the Blind (NCBI) is an organization that aims to decrease visual impairment reading barriers and provide digital opportunities for both learning and literacy.

A core value of NCBI is creating accessible learning and literacy, and their Drupal website does just that. Their website is AAA compliant with considerations for users with visual impairments, including color contrast, font families, and even font size.

Along with accessible design, NCBI’s website has these effective web design best elements:

• An embedded search tool with a convenient form label letting you know the content you can find.
• Bright yellow and rounded buttons that stand out from the rest of the more angular visual components.
• A sticky navigation system so users can click on the most popular landing pages whenever they want.

Read our dedicated NCBI case study to learn more about Kanopi’s role in building their website.

2. San Francisco Conservatory of Music: Drupal Web Design Example

The San Francisco Conservatory of Music (SFCM) aims to provide comprehensive music education that prepares artists for the rest of their careers. They wanted a website to reflect their exceptional education and chose the Drupal system for its visual beauty and streamlined content.

As soon as you land on the SFCM website, you’re met with an interactive logo and an audio button that plays a symphony performed by students of the conservatory. Site visitors are immediately invited in and introduced to the prestige of this musical institution—all within the homepage!

Here are some other standout web design features of this Drupal site:

• Homepage timeline that is easy to scroll through and presents SFCM’s rich history and accomplishments in a streamlined way.
• Image links that zoom in slightly as you hover over them to show that they are clickable.
• Clear branding with consistent colors of red and gold.

Read our dedicated SFCM case study to learn more about Kanopi’s role in building their website.

3. Rainforest Alliance: Drupal Web Design Example

The Rainforest Alliance (RA) is an organization dedicated to conserving biodiversity and ensuring sustainability in rainforests.

This website is beautifully designed and easy to engage with, introducing visitors to all of the progress the RA is making. As you scroll down the homepage, you’re met with posts on an embedded social media feed, recent news articles, the RA’s main mission, and what supporters can do to help!

In particular, the RA website boasts these web design features:

• Graphic links that change colors as you hover over them to indicate that they are clickable.
• A menu in the footer to switch languages with ease, from English to French to Chinese and more.
• Dynamic graphics and images that blend seamlessly together to create a visually engaging homepage.

Curious to learn more about this project? Check out Drupal’s dedicated case study on the Rainforest Alliance.

How a Drupal Web Design Agency like Kanopi Can Help

Your Drupal website’s web design is not something you want to take lightly. If you find yourself needing more extensive web design help or you work with a larger organization with more complex needs, partnering with a Drupal web design agency like Kanopi might be exactly what you need.

With Kanopi’s team, you gain support from professionals with years of experience developing, supporting, and designing Drupal websites. Consider the following benefits of partnering with Kanopi:

• Each of Kanopi’s Drupal team members has, on average, 11 years in Drupal Development, and several of our team members are Acquia-certified. 
• Many Kanopi members are also considered thought leaders in the industry and speak regularly at DrupalCon and Drupal Camps in North America.
• Kanopi is a supporting partner to the Drupal Association, contributes regularly to the Drupal Project, and is one of the main organizers of BADCamp.

We’re not only fully updated on the latest website best practices, accessibility trends, and Drupal updates, but we also take a continuous improvement approach to site development, ensuring that your web design always serves your organization and meets your customers’ needs.

And, we help teams avoid the dreaded “Swoop and Poop” management phenomenon by aligning senior-level stakeholders on expectations and goals. We create open lines of communication within your team to ensure everyone is on the same page and working to support your main objectives.

Kanopi Drupal Web Design Services:

• Mood Boards – We work closely with your organization to create mood boards that act as design ‘snapshots’ to help convey your site’s overall feel and aesthetic. We use any existing brand signals and can create new ones if needed. This allows your organization and other stakeholders a chance to give input on the ground level prior to the heavy lifting of design.
• Design Mockups – Want to see what your website might look like? Here at Kanopi we can create design mockups of your site once all the building blocks are pulled together. This way, you can ensure the web design reflects your brand and meets all expectations.
• Style Guides – To ensure your web design remains consistent and true to your brand, we work together with your team to create the ultimate style guide. Your style guide will contain elements of brand voice and tone, typography, colors, logo usage, and more to create standards to guide our web design team.
• Research Discovery – When it comes to web design, user flow and interaction play a large part in what media elements you use and how you organize them. To make sure that your website serves your audience, we undergo user research and even create user personas. Doing so illuminates similarities and differences in how site visitors act to ensure your site meets your goals and reaches the right audience.
• Design AA Accessibility Standards – Our accessibility standards are built into our system and are a top priority for all of the sites we help design, develop, and support.
• Prototype Interactions – Along with design mockups and style guides to address the more visual design aspects of your website, our designers also can help you map out the interactions. We don’t just design what you see in a screenshot, but also how each element clicks, swipes, scrolls, and more. We work closely with you to determine the UX layout that best serves your audience with different wireframes and prototypes you can explore.
• Testing And Support After Launch – Our work doesn’t stop once your website is live. As soon as it is launched, we will continue to test the site to make sure user interactions and the design of your site moves users forward to their goal. If support is needed after launch, our Kanopi design team is still there to assist, answer any questions, and ensure your site is set up for long term growth.

No project is too large for our Kanopi Drupal team. Whatever stage your site is in, we’re ready to jump in and assist with web design, development, and support to get your Drupal site where it needs to be.

What works when it comes to user experience (UX) is constantly evolving as our behavior online shifts and changes over time. A web design feature that delighted your site users ten years ago could now inadvertently conceal valuable content that you want to take center stage. Or worst-case scenario, it could be driving folks away from your site. 

To help you keep on top of the latest UX design trends, we’ve pulled together the five most common UX mistakes made in the past year and explain why each is causing issues when it comes to the user experience. We also suggest better options for each design mistake to ensure your site remains as accessible and sustainable as possible:

1. Problematic carousels 
2. Intrusive pop-ups 
3. Unnecessary side-bars 
4. Distracting auto-play videos 
5. Too many buttons 

Problematic carousels

Home page carousels are a trendy design feature on many websites as they are thought to provide a clever way to condense a lot of content into one screenful.

What’s the issue? 

If the carousel auto-rotates, users may not have enough time to read before the slide changes. And our tendency to scroll down the page is increasing. A study conducted by the Nielsen Norman Group found 57% of site users stay above the fold of a webpage compared with 80% of website users over a decade ago. 

Content can be missed as website users often scroll past the carousel and miss vital information that doesn’t appear on the first slide.

If the content on the first slide doesn’t align with the organization’s values, it can give website users the wrong impression and even be misleading. 

Finally, in many cases, you cannot simply scale down to a mobile device. Content may get cut off or become too small to read when a user views your content on their mobile device.

A better way 

Instead of using a carousel of images, choose a single, impactful hero image and display key goals of both your users and your business to guide the user journey.  

You can also try using a card design pattern to get across two or three key messages on your homepage. 

Examples of good card design:

• Names for Change
• Ideo
• Try Caviar

Intrusive pop-ups

Pop-ups held a reputation as a great marketing tool in the past. They were proven to be very effective at generating leads, for example.  

But with Google’s January 2017 update, sites that contain pop-ups or interstitials that make content less accessible are penalized in their search rankings. And Google has identified what is good and what is a bad pop-up.

What’s the issue?

Pop-ups can interrupt the natural flow of the website user by hijacking the current webpage to highlight new information on an additional screen.

Pop-ups also affect the accessibility of your website. They create keyboard traps and unnecessary screen reader content that can confuse and distract users trying to navigate your site. 

Aside from making your website accessible to more users, there’s also a business case to be made for making your site’s popups more accessible.

A better way 

Make sure you comply with Google’s guidelines when it comes to pop-ups to avoid being penalized by Google. 

Google explains the following techniques make content less accessible to a user:

• popups that cover the main content, either immediately after the user navigates to a page from a search result, 
• Displaying an interstitial that the user has to dismiss before accessing the main content, and 
• Including a layout where the above-the-fold portion of the page is too similar to an interstitial, and the original content is inlined underneath the fold.

Displaying content you’re inclined to include in a pop-up in a sidebar instead is best practice (as outlined in the Neil Patel example above), as is delaying the opening of pop-ups on your website if you must have them. 

Lastly, If you have to use pop-ups, design your pop-ups so that they take up less than 50% of your web page’s space.

Unnecessary sidebars

On-page navigation via a sidebar provides links to related content or provides pathways for a deep content dive.

What’s the issue?

With unnecessary sidebars, some of your most valuable content can quickly become inaccessible. Remember, clicks are valuable. You risk losing potential customers if users have to click around to find the content they are after. 

In addition, if your website’s on-page menu changes once a link is chosen, your site users can end up feeling lost and confused while trying to navigate your content. 

And finally, in many cases, many sidebar menus are not adequately designed for interacting with content through mobile devices, affecting the responsive design of your site.

A better way 

Source: Craigslist Redesign by Aurélien Salomon for Orizon

Instead of having important content buried in a sidebar, combine similar content together onto one long page. Your website visitors are naturally conditioned to scroll.

A nudge to scroll provides a handful of other benefits:

• It delivers content more quickly because there is no need to wait for pages to load
• It doesn’t require a commitment by forcing users to choose a button — or pick between multiple buttons — and abandon their current page
• It allows visitors to digest information at their own speed

Besides providing a scrolling option, try using a drop-down menu design pattern that passes usability testing with flying colors and creates an enhanced user experience, guiding the user journey in the process.

Examples:

• Asana
• Khoros
• Evernote
• Figma

Distracting auto-play videos

Auto-pay videos use sights, sounds, and moving imagery in an attempt to create emotional connections with site visitors.

What’s the issue?

Auto-play videos can trigger your site visitors to experience dizziness and nausea. And if that auto-play video is accompanied by sound, it can be loud and confuse your website visitors.

Videos assume that your site users can see. They can have a negative physical impact on those sensitive to movement and ultimately limit the accessibility of your website.

In addition, large video files can slow down site speed, impacting the overall UX of your website and your site’s Core Web Vitals, which now affect where you end up in search engine results. 

And finally, videos tend to distract your site visitors, grabbing more of their attention than you intended. They do not support the immediate consumption of information.

A better way 

Video and sound content is helpful only if your site visitors have control over it, fully understand what’s contained within it, and are provided with an alternate way to access it. 

Give your website visitors the ability to decide how they interact with the video and sound content on your site by literally putting the controls on the video area for an improved user experience. 

Too many buttons

Buttons are a common UX design feature for ensuring your site visitors have all the available options at their fingertips.

What’s the issue?

We aren’t against the use of buttons, but too many buttons can harm. If you force too many options on your site visitors, they may opt for the path of least resistance – to leave your site. 

Too many buttons competing for the attention of site visitors makes it difficult for the user to focus on individual pieces of content on your website.

A better way 

Less is more when it comes to great UX design. Focus on making your main call-to-action (CTA) as straightforward as possible and make it easy to find with one stand-out and consistent button design. If you have secondary CTAs, use a smaller, less flashy button or link design.

Prefer to see this in a video?

I presented this talk at the NTC Conference in March 2021 and provided a bit more information. Check it out.

Avoid these common UX mistakes to make your site a joy to navigate   

Building a sustainable website that’s delightful to use is about catering to your users’ wants and needs while assisting you in achieving your business goals. A powerful way to ensure your site meets the needs of your users is by avoiding common UX mistakes. 

These common UX mistakes made in 2020 were first presented at the Nonprofit Technology Conference (NTC) earlier this year. You can watch the presentation in full on YouTube. 

As a designer, it’s always exciting when a client says “Let’s start from scratch.” You are the unicorn, the holy grail, in other words, a designer’s dream client.

But this is where your project can get into trouble. Without a framework, there’s a high chance your team is presented with a design that neither represents your voice nor (and more importantly) speaks to your target audience. 

Mood boards are an essential step towards creating any visual language in this type of scenario. At their core, a mood board is a curated collection of images that visually represents the creative direction of a project. They will typically include existing elements of your brand such as color palettes, typography, illustrations/iconography, and image style direction – all wrapped up to meet a particular mood, voice and tone. Style tiles take this a step further and include user experience elements like form fields, component layout direction, etc. 

These all will feed into your Pattern Library. Learn more about pattern libraries here.

These directional deliverables are typically conceived during or after the strategy phase, once a solid approach is derived from various activities like stakeholder and user research, content evaluation and competitive analyses, and can be done simultaneously with information architecture (IA) work and wireframing. 

But to be clear, style tiles are NOT Layouts. They are meant to be used as a means to evoke a specific emotion or style within the design parameters of your brand, giving the design team a visual path forward when creating your website. The mood set will be applied to the layouts once the user experience approach is approved. And those layouts will be carried forward into development. 

Below are four reasons why mood boards/style tiles are an essential step in design development.

They aid designers to hone your concept in a low stakes environment. 

This practice allows a designer to explore various style concepts quickly without burning through your budget. By focusing energy on one aspect at a time, a designer is able to create more efficiently because they don’t have to consider all design elements at once. 

They communicate design vision in a valuable, shareable format.

It can be very complicated to express your visual ideas using words alone. Style tiles give you an idea of what their finished product might look like and avoid any misinterpretations. It creates a shared vocabulary to use when discussing design concepts that can be used by both client and designer.

They allow us to collaborate on designs early.

Using this iterative approach, designers create opportunities to jumpstart invaluable aesthetics conversations. Getting your feedback and buy-in early and often provides space for the designer to ask followup questions and allows you to brainstorm ideas as the design progresses. In this approach, we’ve opened communication lines that give you more ownership over your designs.

Demonstrating and maintaining trust with you is critical. 

The beginning of a client/designer relationship is the most tenuous when both parties are building their relationship. A style tile educates a designer on your aesthetic preferences while you gain trust in your designer’s vision.

Without style tiles, a lot of time could be sunk into designed web pages that do not work for your needs. At this point it’s difficult to backtrack because a lot of decisions — layout, colors, graphics, imagery — have been decided and will need to be re-considered. This can have a cascading effect on other designed elements which will negatively impact your budget and timeline. 

For example, let’s say you wanted to change a button’s color from blue to orange. Seems like a simple color shift! But a designer would have to consider how that affects secondary buttons, tags, text links, etc. to ensure the user experience is still intuitive: if orange is the new link color, then anything else that needs to be a link should also be changed to orange to manage user expectations.

The only time we feel comfortable skipping this useful step is when branding guidelines have been established and you are not looking for any design refresh. Otherwise, style tiles are an integral part of our design process. It helps to build a strong  collaborative relationship with you through a holistic, visual definition for your organization. The design process will feel less nebulous as you are consulted during multiple touchpoints throughout the process. 

And if you need help creating the mood for your site, contact us. We’d be happy to help.