How a Style Guide Impacts Your WordPress Website

Having a style guide provides several benefits to businesses and other organizations. It helps maintain credibility by establishing clear standards for design elements, such as colors, fonts, and formatting.

Additionally, a style guide streamlines the content creation process, saving time and effort by providing designers with a reference point for creating cohesive and polished materials, such as sales collateral and your WordPress website. Overall, a well-implemented style guide enhances brand recognition, strengthens marketing efforts, and reinforces a cohesive brand identity.

Consistency in Branding and Messaging

A style guide ensures that all branded materials, whether digital or analog, maintain a consistent look, style, and visual identity. This consistency helps reinforce brand recognition and trust among the target audience by presenting a cohesive and unified brand image across various platforms and touchpoints.

Streamlined Content Creation Process

A style guide facilitates content creation by providing clear formatting and design elements guidelines. Content creators can refer to the style guide for direction, which helps save time and effort, ensuring that materials are produced efficiently and effectively.

Professional Standards

With a style guide in place, businesses can uphold a high standard of professionalism and credibility in their marketing efforts. Clear branding and design standards ensure that your WordPress website is polished and error-free, enhancing the overall quality and perception of the brand.

Enhanced Collaboration and Consensus

A style guide serves as a reference point for all stakeholders involved in creating and approving your WordPress website. A common set of standards and guidelines promotes collaboration and consensus among team members, ensuring everyone is aligned on the brand’s messaging and visual identity.

This is especially important when enlisting the help of a WordPress agency. As WebDevStudios COO Lisa Sabin-Wilson recently stated in our monthly newsletter:

Without a style guide, developers can end up playing a game of ‘Guess What the Client Wants.’ And trust me, that game never ends well.

Improved Brand Recognition

Consistent use of branding elements, such as logos, colors, and typography, as outlined in the style guide, helps strengthen brand recognition. When consumers encounter materials that consistently reflect the brand’s identity, they are more likely to remember and engage with it, ultimately contributing to its overall success and growth.

What a Style Guide Is Not

Now that you understand the importance of having a style guide for your WordPress website and your marketing strategy let’s go over what a style guide is not. You might be under the impression the following pieces qualify as a style guide, but they do not. Whether working with your internal team or an outside WordPress development vendor, the following items do not constitute a style guide and will not be helpful:

• Verbal Descriptions: While helpful for conveying ideas, verbal descriptions can be subjective and open to interpretation, leading to inconsistencies in style.
• Mockups: Mockups are visualizations of a design concept, not a set of rules for applying styles across different elements.
• Previous Design Samples: Previous design samples might not be relevant to the current project’s specific goals or target audience.
• Mood Boards: Mood boards establish a general aesthetic direction but lack the specifics needed to ensure consistent stylistic choices throughout a marketing project and your WordPress website.
• Someone Else’s Designs: Your brand is distinctive, so your style guide should also be unique. Designs from another source might not align with your brand identity or resonate with your target audience. They also do not convey your specific standards and brand identity to your internal design team or WordPress agency partner.

Style Guide Checklist

A well-defined style guide is your secret weapon for marketing and WordPress website consistency. It empowers designers and developers with clear direction, saving time and getting everyone on the same page. This translates to high-quality, consistent marketing and content strategies that effectively deliver your brand’s message and values. Keep reading for the elements to include in your style guide.

Brand Identity

Nail down your mission, vision, values, and brand personality. Doing so helps guide every strategy and design choice you make.

Logo Usage

Provide guidelines for logo usage. Include size, spacing, placement, and acceptable variations. Specify when and how the logo should be used in different contexts, such as digital display versus tangible sales collateral.

Color Palette

Establish your brand’s color palette. Define primary, secondary, and accent colors with hex or RGB codes for use across all digital and print materials. Consistency is crucial.

Typography

Define the primary and secondary typefaces for headings, body text, and other elements. Specify font sizes, line heights, and styles (e.g., bold, italic) for different contexts.

Imagery Guidelines

Outline guidelines for using photography, illustrations, icons, and other visual elements. Specify preferred styles, image sources, and any brand-specific imagery requirements.

UI/UX Design

Provide guidelines for user interface (UI) and user experience (UX) design, including layout principles, navigation patterns, and interactive elements. Specify design patterns, button styles, form fields, and other UI components.

Accessibility

Include guidelines for designing accessible content and interfaces, following web accessibility standards (e.g., WCAG). Provide recommendations for ensuring readability, usability, and inclusivity for all users.

Print and Digital Guidelines

Differentiate guidelines for print materials (e.g., letterheads, business cards, brochures) and digital assets (e.g., websites, social media graphics, email templates). Specify dimensions, file formats, and printing requirements.

Need a WordPress Website Now, But Don’t Have a Style Guide?

No style guide? No worries. At WebDevStudios, we build custom style guides for clients needing our help with WordPress design and development but who don’t have a style guide. Contact us, and let’s chat about your new style guide and website.

The post The Importance of Having a Style Guide for Your WordPress Website appeared first on WebDevStudios.

Improve Your User Experience (UX)

User experience is critical to the success of your website. A good UX will help visitors navigate your website, find the most important content, and understand the actions they need to take. A poor user experience will frustrate your visitors by preventing them from seeing what they want and tripping them up when they submit a form or purchase. You can solve this problem by redesigning your website every five years.

Visitors who encounter an optimized user experience are more likely to engage with your content. Meanwhile, visitors who have a terrible experience will become frustrated and leave, never to return.

When redesigning your website, you can improve UX using modern, well-researched design principles. A well-designed website that is easy to navigate can increase engagement and conversions.

Achieve Better SEO Results

Search engine optimization (SEO) is essential to driving traffic to your website. Websites that aren’t optimized for search engines are unlikely to appear in the top results for relevant search queries.

SEO is a field that’s constantly changing. If your website was optimized for search engines years ago, it might not achieve the same results today that it did in the past. Search engines like Google and Bing constantly tweak their algorithms, and website owners must keep up with those changes to stay relevant.

When you redesign your website every five years and keep SEO in mind, you help to improve your search rankings, increase traffic, and generate more leads and conversions.

Mitigate Costs

Are website redesigns cheap? No.

But it’s much costlier to redesign a 15-year-old website than a 5-year-old website.

Processes, such as a website redesign, require more labor and time on old interfaces. As software evolves, your old website gets further and further behind.

When a redevelopment project is underway, more of the website must be rebuilt from scratch. Here are some examples.

• Data Migrations: More work will need to be done to migrate old content into a new system because the old and new databases don’t match up.
• Old Code: Old technologies, plugins, and code libraries will no longer be applicable and must be replaced.
• Information Architecture: The website’s structure, such as its information architecture, URLs, and navigation, might need to be reworked entirely.
• More significant Design Project: A complete website redesign, rather than a facelift, will be necessary to refresh the look and feel.
• Editorial Experience: New systems must be implemented to meet your editorial needs, which will have evolved in the years since your last website development project.

You’re better off having a website redesign performed every few years rather than every 10-15 years. But suppose you get to the point where you haven’t redesigned your website in a long time. In that case, it’s an excellent opportunity to do a significant overhaul and rethink all aspects of its design and functionality.

Take Advantage of New Features and Technologies

If you haven’t redesigned your website in 10 or 15 years, you’re missing out on the latest developments in web technologies. Here are some examples of technologies you can take advantage of now that your old website isn’t capable of.

• Headless WordPress: You can use WordPress as backend software to manage your data and content while using other technologies for the frontend display of the website.
• React and other JavaScript Libraries/Frameworks: JavaScript has evolved at a breakneck pace over the past 10 years, and libraries like React are used to build interactive user interfaces and web applications quickly and efficiently.
• Blocks and Site Editing: WordPress is undergoing a significant shift and now includes a block editor that allows content to be easily arranged and edited in a whole new user experience.
• CSS3: The latest innovations in CSS give developers access to tools like media queries, CSS Grid, and Flexbox that significantly improve responsive layout and design. CSS is now capable of animations, which could previously only be done with JavaScript. Designers and developers can create interactive and visually appealing websites with less work.
• WordPress Plugins: You can accomplish much more with your WordPress plugins. In the last 10-15 years since you overhauled your website, new plugins will have been developed that solve your business needs, and existing plugins will have been updated with new features.

Updating your website more often will allow you to keep up with emerging technologies and trends in web development. You don’t have to keep up with everything, but you also don’t want to miss out on technologies that would benefit your business.

Move Away From Old Tech

As new technologies are developed, old technologies are discontinued, fall out of favor, and become security risks.

• Discontinued Code: Flash is an excellent example of a web technology no longer used. Flash was popular before JavaScript evolved enough to replace everything it offered, and it eventually reached an official End Of Life and is no longer supported.
• Discontinued Browsers: Internet Explorer was once frustrating for web designers and developers because it was so difficult to support. Microsoft has permanently disabled it and discontinued all support, so it’s no longer necessary for your website to keep it.
• Security Patches: Whether or not you completely redesign your website, keeping up with security updates is essential. WordPress themes, plugins, and WordPress itself regularly release security patches. You’re opening yourself up to many well-known security holes if your website is significantly outdated.

Security is critically important to keep on top of, and developing your website using new features can also eliminate old headaches and streamline your development processes.

Stay Ahead of the Competition

Finally, redesigning your website every five years can help you stay ahead of the competition. If your competitors have recently redesigned their websites and you haven’t, you could be falling behind.

A website developed recently with a modern design and updated technologies will look and operate noticeably differently than a website from 15 years ago. You can either be the business with the current website or the business left in the dust.

A redesign can help you stay on top of the latest trends and technologies and ensure that your website meets your customers’ needs. Now that you know contact WebDevStudios. Let’s chat about your new website redesign.

The post Why You Should Redesign Your Website Every Five Years appeared first on WebDevStudios.

See, color can manipulate the way we think and feel and hold different meanings for different cultures. No wonder it’s such an essential foundational aspect for any website design.

If you aren’t a graphic designer or artist, choosing the right colors might seem like a daunting task. You might be able to tell whether or not a color combo looks good when you see it. However, successfully creating a great combo requires a lot of experience. Thankfully, we live in a digital age where you can find just about anything online. That includes color tools for web design.

There are lots of color tools for web design available, and many of them have similar functionality. These are my five favorite online color tools that I use on all of my web design projects.

Extracting Colors from an Image

The Extract Theme option on Adobe Color is my go-to when I have no specific colors to start with but do have an image for inspiration. All you have to do is upload the image and let Adobe Color perform its magic.

Let’s use a nice beach scene, complete with blue water, green trees, and light brown sand as an example. Once the image is uploaded, we get five automated color palettes to choose from: colorful, bright, muted, deep, and dark.

Each of these palettes has five colors which are pulled from specific points in the image. You can move the spots around the image to choose a different color if you prefer.

The hex codes, which are used to specify the color in web design, are displayed below each color swatch and will be copied to your clipboard if you click on them. If you have a free Adobe account, you can save your palette and get access to different types of color codes and additional functions.

Finding Complementary Colors and Inspiration

Whether you are starting from scratch or have a couple of colors but need to find more to form a broader palette, Coolors has a fun generator to help. When you land on the Generate page, it displays a random palette of five colors that work well together.

To see another palette, simply hit the space bar and voilà! Five new colors magically appear. Each of the colors is identified by its hex code and its name.

Hover on a specific color and you get some useful options, like choosing a different shade of that color or marking the color as a favorite. If you find a color you like but want to see what other colors might complement it, you can lock in that color. Hit the space bar again, and you’ll get a new group of colors including any in which you locked.

Another really neat option can be found by hovering between two colors. Click on the plus sign to add a blend of the two colors. When you are happy with the color palette, you can export it in a variety of ways for sharing and using directly in your project. A word of caution with this site: it’s very easy to spend hours hitting the space bar and playing around!

Expanding Your Color Palette

Now that you have your main colors selected, it’s time to start using them. Often these main selections will be all that I need for a site, but what if I need a variation of a color?

For example, if all the colors are pretty dark and bold, I may want to use one for just a hint of a background color. Enter Tint & Shade Generator!

This site lets you enter in your base colors and displays 10 tints through to white and 10 shades through to black for each color. As with the other tools, the hex code is shown for each color swatch.

While you can get similar information from the previous color tools mentioned, the Tints & Shades Generator is great for having all of the options readily available at the same time.

Color Conversion and So Much More

If I have been given a palette to work with and the color codes provided don’t include hex format, I hop on over to Colorhexa. You can look up a color by any format type you can think of (eg RGB, HSL, CMYK), as well as formats you didn’t even know existed.

Each color has its own page that lists out how the color is represented in 14 formats. So, you can grab whichever version suits your needs. But as they say on late night TV, “Wait! There’s more!”

There is a wealth of information about your chosen color, including suggested color schemes, alternative options, and a color blindness simulator. If you like one of the new colors you see, you can click on it to go to its information page, or hover over it to display the hex and RGB codes. This is another color tool for website design that I could spend hours on, if I’m not careful.

Check Contrast

No list about color tools for web design would be complete without addressing accessibility. Most of the tools I’ve mentioned have some accessibility options within them. But there is an extra tool that I find really helpful: the Accessible Color Palette Builder.

This site lets you enter up to six hex codes, and it will create a visual table of accessible color combinations. This table indicates which colors can be paired together as text and background, based on a contrast ratio of 4.5:1, and shows what the combination would look like.

Please note, the options provided should be considered a guideline, not hard and fast rules. Some components or larger text might be okay to implement combinations with less contrast. On the flip side, some of the passing combinations might be a poor choice for specific font styles and sizes.

Conclusion

I hope you enjoy playing around with these color tools and find some fantastic palettes to work with. Bonus tip: you can use these tools for inspiration for anything that uses color, not just websites. Find colors to decorate your home with or choose pencil crayons to color a mandala.

If you’d rather leave color selection and design to the professionals, get in touch with us at WebDevStudios. We love color and would be happy to help make your brand shine online!

Want more inspiration? Check out this Spotify playlist. These tunes are sure to stimulate your palette.

The post Color Tools for Web Design appeared first on WebDevStudios.

It’s not every day I get to work on a project for someone who isn’t just known by me but is also beloved throughout the WordPress community. When I found out I would be working on the rebrand for Do the Woo, I was naturally excited, albeit a little nervous.

That’s because Do the Woo is a WooCommerce builder community run by Bob Dunn, aka BobWP on Twitter. The goal of the website is to help WooCommerce builders across the globe by elevating, connecting and guiding them, while helping to grow their skills and businesses. This is done through podcasts, blog posts, and a membership community of Friends.

Logo and Branding

The first step of this website redesign project was to create a new logo. From there, a new brand identity for Do the Woo was born.

Bob provided some general insight into his visual desires. Then Jennifer Cooley, our talented UX Designer, set to work. First up: pinning down the look and feel for the brand with color and typography. This enabled Jennifer to ideate on several designs to really hone in a logo that distinctly represents Do the Woo.

Many people are familiar with the Do the Woo podcast, but Do the Woo is more than that. It’s about community. The new brand is clean, modern, vibrant, and fun, just like the WooCommerce community it serves!

“Working on the branding for Do the Woo was a really fun challenge,” says Jennifer. “The audience is so wonderfully varied, with designers and developers alike. Keeping all of that in mind when choosing colors and styles was both demanding and a neat exercise in creative thinking.”

With the new logo and branding established, Jennifer created various designs to ensure a cohesive look for Do the Woo across the web, including:

• Poster artwork for the podcasts
• Style elements used on the website to pull it together
• Creative assets used for other future design elements

Website Redesign

With branding ready to go, the website redesign and development began. As part of the discovery process, Bob walked me through the different parts of his current website and explained what he was hoping for with the new site.

There were different categories of podcasts, blogs, and Friends (the community). These categories were used in a variety of ways on the site pages.

It was my responsibility to determine efficient ways of integrating all of these features, in addition to creating a new visual design. I considered the functionality of the whole site and found ways we could improve editorial workflows for Bob.

Leveraging Post Categories and Other Post Meta

Looking at the podcast as an example, there is the main podcast and WooBits, which is a shorter episode specifically about WooCommerce news. Within the main podcast, there are a variety of categories an episode might fall under, like Roundtable or DevChat. These subcategories indicate the type of content. The categories Site Builder or Product Builder reference the guest’s role in the WooCommerce community.

We used the Advanced Posts module by Ultimate Addons for Beaver Builder to display podcast episodes in different ways throughout the site by modifying options like the category and other variables. On the Podcast page, the first row is the most recent episode of the main podcast; the second row is specifically selected episodes, and the remaining rows are each pulling in episodes from a specific category.

All of these rows are using the same module, but with different options selected to display the correct content. When a new episode is added to the site, the corresponding sections will automatically update to include it.

Dynamic Templates

Themer is a really powerful and useful Beaver Builder tool. We made good use of it on Do The Woo.

Using Themer allows us to create dynamic templates and connect them with specific post types to ensure there is design consistency from one post to the next within a specific category. Podcasts, Profiles in Woo, and the blog all have different layouts, with different content in each.

By setting up one Themer template for Podcasts, another for Profiles in Woo, and so on, all Bob has to do is choose the appropriate category and add the content. He doesn’t need to get bogged down in remembering which layout is needed or have to create it from scratch. More efficient content management means Bob can spend more of his time doing the things he loves.

Reusable Elements

Beaver Builder makes it really easy to set up clients for continued success. Newly created pages, rows, or modules are saved as reusable elements and used on any page or post—new or existing.

I set up numerous reusable elements while building the site, which were just as handy while I was developing the site as they will be for Bob when he has develops new types of content.

Rather than starting with a blank page, he can apply a saved template and add or remove elements as needed. Or, he can create a new template by starting with the saved Page Header and Call To Action (CTA) rows and adding some other modules in between.

The Page Header row will automatically add the textured blue background image and the page title, complete with font size, color, etc. Bob can edit the title or add a line of text if he wants to customize it a bit more. The CTA row is similar in concept to the Page Header row, with an added bonus of being a global element.

This means that any customizations that might be done to it would affect every instance of the CTA row across the site, which is helpful for keeping messaging consistent without having to remember every page that includes it.

Editable Friends Pages

The Do The Woo membership consists of three levels of Friend: Builder, Community, and Pod. Community and Pod Friends get their own profile page which includes information about their company and products/services. Before the website redesign, new Friends filled out an intake form with their information and then Bob manually transferred that information to their associated profile page.

With the new site, Bob wanted to allow Friends add and update their profiles themselves. With the help of Frontend Engineer, Adam Bates, we created customizations to allow for this.

Our team considered options and decided on using Advanced Custom Fields, paired with a dynamic template created specifically for these Friends. The template contains the style and layout elements. The information supplied from Friends feeds content.

Now, these Friends are able to log into the website, navigate to the Public Profile section of their account, and easily add or update their details, including:

• Logo
• Company description
• Product/service information
• Social media links and other URLs
• Blog feed URL to show up to five of their most recent posts

Bob still has full control over these profile fields. However, now there’s one less manual step for him to complete when a new Friend joins the community.

A Success Story

In the end, it turns out I had no reason to be nervous. Working on this project was as fun as I anticipated, and Bob has been a pure delight to collaborate with.

Most importantly, we delivered a great product for Bob. In his own words, Bob says:

When I needed a major rebranding and website redesign, I chose WebDevStudios as they are an iconic agency in the WordPress space that brings experience, talent and a commitment to their clients. Not only did they deliver a final product that exceeded my expectations, but working with their team members was an absolute joy. They brought a combination of professionalism and creativity to the project, with the perfect human touch.

I count that as a win!

New Sites and Website Redesigns

WebDevStudios considers every project to be unique. We take time to understand the goals of your website and build your customized website with the appropriate solutions.

Do you need a new website? Maybe it’s time for a fresh new design. Contact the WordPress experts. Reach out to WebDevStudios and let’s start the conversation.

The post Client Success Story: Do The Woo Website Redesign appeared first on WebDevStudios.

“After having been a part of their website project over eight years ago, it was a treat and a compliment to have them return to us for a new redesign,” says Brad Williams, WDS CEO and Co-Founder. The project itself was a heavy one that included a multi-network data migration, global elements, content modules, and a new, modernized look.

“We did a bit of CSS magic,” reports JC Palmes, WDS Frontend Engineer. “The design called for layering images as a part of the background, as well as intricate details, such as texture and transparent imagery.”

Founded in 1921, Rockbrook Camp provides a supportive community of kindness, respect, and care. It is a place for girls to explore nature, develop their confidence, forge friendships, and learn new skills.

“We love our new site,” Jeff Carter, Rockbrook Camp Owner and Director, states. “We’re now proud of its design, and very happy with the flawless technical transition. The site loads fast, generates zero errors, and looks fantastic.”

Data Migration

While every data migration is important and complex, the migration for Rockbrook Camp was especially heavy because it included the migration of a multisite network to a single site installation. Previously, there were three websites as a part of the camp’s WordPress Multisite (WPMU) network: main, staff, alumni.

Our WordPress agency created a custom script to migrate all necessary data from the existing WPMU install into the new WordPress single-site install. This included:

• 1626 blog posts
• 150 pages
• 767 tags, 33 categories
• 13 plugins
• 23 users
• Media
• Post types

Website Redesign

The objective of the website redesign for Rockbrook Camp was to balance a new, modern design with sprinkles of fun and tradition to appeal to both kids and adults. We relied on content modules and global elements to create a system that would be simple for Rockbrook Camp to sustain.

Content Modules

The new Rockbrook Camp website features content modules, which can easily be populated dynamically, with little or no user input required, or manually managed by the site administrators, allowing for content flexibility and ease. These modules included:

• Hero
• Title and text
• Video
• Image and text
• Testimonial
• Category
• “From the Blog”
• Single post
• Newsletter signup
• Related posts
• Image gallery
• Camp sessions
• And more!

The “From the Blog” module was particularly interesting to build because it is a WDS-custom Gutenberg block that gives the admin the power to customize subtitle (displayed as “Latest”), title (displayed as “From the Blog”), and the last three blog posts (ordered from newest to oldest).

Global Elements

The most beneficial aspect of global elements is they can be reused across the website. So, when you edit a global element, those changes are made site-wide at very point where that global element is being used. Basically, global elements allow for the power of efficiency.

Rockbrook Camp required easy configuration of global elements. Specifically, the client needed the following:

• Site header and site header logo
• Top navigation menu
• Search form
• Primary navigation menu
• Global footer and global footer logo
• Global footer countdown
• Fallback hero image
• People post form submission
• And others

The global footer countdown was an interesting global element to implement because its purpose serves as a literal countdown to the first day of camp. With this element, the website admin can easily enter that upcoming, important date in the customizer and the countdown element will be displayed in the bottom right corner of the footer.

Additionally, the people post form submission was another standout feature because it involves user-submitted content. With this global element, users submit a form via Gravity Forms containing fields for post content and post meta. Upon submission, the post will immediately be published to the “people” custom post type created specifically for Rockbrook Camp. There is no moderation process, however, site admin has been given the ability to edit or delete posts in order to keep the content up-to-date and accurate.

Ongoing Maintenance

After launch, Rockbrook Camp transitioned over to Maintainn for ongoing maintenance under the company’s Standard Maintenance Plan. Maintainn is the WordPress support and maintenance arm of WebDevStudios; so should Rockbrook Camp find themselves in need of small development projects here and there, they will have access to the WebDevStudios team, as our partnership continues to grow and flourish.

Success!

“Our experience throughout this project was outstanding,” Jeff says, describing what it was like to have WebDevStudios work on Rockbrook Camp’s website redesign and data migration. “Our every expectation was met or exceeded, with the tricky technical issues handled with assurance and the design work pleasing everyone on our team. We appreciated the attention to detail at each step in the process and were happy to see timely progress unfold according to the estimated schedule.”

Contact the Website Redesign and Data Migration Experts

WebDevStudios treats each website project as its own unique experience. No two clients are alike, and our WordPress agency respects and understands that by customizing every single website design and development project to specifically meet the needs of each individual brand.

Do you require a full website redesign and data migration? Contact the experts. Reach out to WebDevStudios and let’s talk about it.

The post Website Redesign and Data Migration:<br>A Client Success Story appeared first on WebDevStudios.

Interactivity is a major player in the field with technologies like artificial intelligence (AI), voice commerce, and augmented reality (AR). These new features, though they may sound a little scary, are actually helping to reshape the way we look at, use, and develop websites.

Artificial Intelligence

AI allows smart machines to learn from experience and perform human-like tasks, such as production and recycling. Websites incorporate AI in various ways, including chatbots and algorithms, to help create a more personalized user experience. AI is a hot website trend, and chances are you’ve interacted with an AI bot in some fashion, whether it’s getting support on your favorite site, ordering goods online, or even watching your favorite streaming service. 

By the year 2025, the global artificial intelligence market is expected to reach $60 billion. Comparatively, in the year 2016, that same market was $1.4 billion. (Source: Accenture)

Chatbots

If you’ve ever interacted with the chat feature on a website, chances are you’ve dealt with a chatbot. These almost human, but not quite human, chatterboxes can feel straight out of the digital Uncanny Valley catalog. Chatbots have become increasingly popular as the underlying technologies, like language processing, have continued to evolve. Today’s bots are more informative, responsive, and more useful. Love them or hate them, this is a website trend that is staying awhile.

User Experience

In times like these, online shopping has become an integral part of our daily lives, from groceries to clothing and household necessities. This $600 billion industry continues to grow year over year, and it’s only going to increase as AI becomes more affordable for smaller companies and organization. Business owners use AI on their websites or eCommerce stores to analyze how users interact and research. Customized filters and recommendations based on a user’s preferences and image enhance the user experience, increase sales, and decrease returns. 

Recommendations

Have you ever noticed the recommendations that apps like Netflix or websites like Amazon suggest whenever you use them? It’s that awkward feeling when Netflix somehow just knows what you’re into watching even when you don’t? These recommendations are powered by AI, continually adjusting algorithms to better serve the consumer through implicit data (user behavior) and explicit data (user activity). Through a system called a “recommendation engine,” companies can build associations between users, items, and content to serve up suggestions on products to the user. This website trend is especially beneficial for companies who depend on upselling to boost profits.

Voice Commerce

It feels like you can’t toss a rock these days, not that we’re throwing rocks all willy nilly, without hitting a smart speaker or someone talking about how great having smart speakers is. These mini geniuses are all the rage, powered by AI and integrating themselves into our lives and homes. Without the use of a browser, screen, or any hardware other than your phone or assistant, these devices allow you to conversationally interact with a company’s brand and make online purchases through a series of voice commands. Which brings me to the next website trend to consider: voice commerce.

What’s all the fuss?

Roughly 60 million people in the U.S., or 24% of the population, own a smart speaker, such as Google Assistant or Amazon Alexa, which is up from 7% in 2017, according to the Smart Audio Report survey conducted by NPR and Edison Research earlier this year.

Over 1.5 billion devices are used as voice assistants, with that number expected to increase to 8 billion by 2023. (Source: Juniper Research.)

As online sales continue to increase, brands are struggling to build a voice commerce presence, as Amazon is leading the race and shifting power to the users. eCommerce consumers are looking for unique experiences that come from a well-designed system that leaves them feeling valued. This helps build rapport between consumers and brands. 

What does this mean for retailers?

As technology continues to advance, brands who take advantage of this website trend will be able to:

• Find a new stream of revenue – Voice commerce could be another channel to sales and new leads.
• Improve search – Creating voice-first search options will provide an optimized user experience.
• Invent new ways to engage – As voice assistants continue to rise in popularity, we could see the emergence of conversational commerce where brands can more actively engage with users throughout the sales process.

Augmented Reality

Gotta catch ’em all! Pokemon Go took the world by storm in 2016, and since then, we’ve seen AR technology rapidly spreading across the digital world through videos, mobile apps, and even eCommerce websites in innovative ways. AR provides a captivating, interactive experience where real-world environments are enhanced with graphics and overlays that bring imagination to life literally right before your eyes.

Augmented Reality in the Wild

Here’s a few examples of where you can see AR in action:

• IKEA – This beloved furniture and interior decor brand uses augmented reality to place their products into the user’s space, like a couch or a vase.
• Football Games – Broadcasters rely on augmented reality to show viewers the visual trajectories of a ball or player or lines on the field to enhance discussions on strategies and plays.
• Navigation Apps – Enhanced apps can lay the route on top of the street view making navigation a more powerful experience.

The future of these technologies is looking so bright you’re going want to wear shades. You can watch them grow by keeping an eye on big brands like Amazon, Google, and Apple. When you’re ready to implement these technologies on your website, contact us! 

Vector images used in this article were sourced from Vecteezy.

The post 3 Website Trends to Consider Now appeared first on WebDevStudios.

If your website looks like the one above you either have really, really, really particular brand following… or it might be time for a website redesign.

There is never a perfect checklist or milestone your website needs to meet in order to justify a redesign. It varies from person to person and even site to site. In this blog post, I’ll cover some of the most common reasons that I’ve experienced first-hand from over ten years in the web design space.

While your website may not check all the issues, I hope to make it broad enough to equip you with enough evidence to convince your stakeholders (even if it’s yourself) that you are due for a makeover.

For content breakdown, I’ve split reasons for change into the following buckets:

1. Obviously scary warning signs
2. Increase in traffic
3. Being compliant with laws

Preface: A redesign doesn’t have to be scary.

To start off it’s okay to feel overwhelmed or perhaps scared to redo your website. This can be due to limits on your time, fear from past site rebuilds that went south, or perhaps you simply fear losing your content. The following list of concerns isn’t exhaustive but it serves to say that we understand why you may be hesitant.

Throughout the rest of the article, I help to demystify some of your concerns and offer some, hopefully, compelling examples that may convince you that the time for change is now.

Limits of Your Time

This is the easy part. Simply by partnering up with a website company that already has established relationships in place, you can count on them to handle the strategy planning and take it from there. If you don’t already have a WordPress agency in mind, I highly recommend us at WebDevStudios. If your business is on the small to medium side, a website redesign from Maintainn, which is owned by WebDevStudios, will be a perfect fit.

Being burnt in the past

In my ten-plus years of web development experience, I’ve heard countless horror stories of projects going wrong. Though you can’t control everything, joining forces with the right design and development partner with a proven track record should help to put to ease your concerns. Don’t allow the past to deter you from creating a successful future.

Fear of losing your content

Unlike other platforms in the past, WordPress is what is known as a content management system, not just simply a website builder. The way your website looks and feels is handled through themes on your website. This is the part you are redesigning, not your content. Think about it like this: if your website content is an engine in your car, you can swap the body and still keep the same engine. All your pictures, posts, products, and more will migrate just fine. (Whew!)

Bucket One: Scarily Obvious Signs

It’s difficult to make content updates.

If you can’t update your website, what good is it for? As a content management system, WordPress should make editing your website be as easy as riding a bike. Something to consider is that if you have an older WordPress installation, major advancements have been made towards how you can design and manage your website, be it Gutenberg for custom websites or Beaver Builder for smaller businesses. A newly redesigned website will provide you with the latest tools to allow you to feel empowered to make content updates when YOU want.

It just doesn’t express who you and your company are anymore.

Let’s face it: many of the fashion trends from the early 1990s don’t look so great in the 2020s. Saying your website doesn’t express who you are today doesn’t admit that your old website was bad when it came out; it’s just time to update your digital wardrobe.

Other Scarily Obvious Reasons

• You have a new product line.
• You have a new company direction.
• It looks like an amateur made it.
• It takes a long time to load.
• It’s difficult to use.
• The words “flash is required” are anywhere on your website.
• It lacks a friendly mobile experience.
• It’s lacking key features, like the presence of social media integrations.

Bucket Two: Increase Traffic and Conversion

If your website was on Tinder, would visitors be swiping left?
– Laura Coronado, WebDevStudios Marketing Strategist

More traffic = More Customers = More Sales = More $$$

The golden rule of a website’s value, from a business perspective (even if you are a nonprofit), is more traffic means more users served. There are a countless number of ways to drive more traffic to your website, be it SEO, ad campaigns, guerrilla warfare, or a magic ritual. One thing for certain, an outdated and poorly designed website will impact how much money you make at the end of the day.

How Design Affects Traffic

Did you know that your site’s design can make an impact on your SEO and thus affect your traffic? Since 2015, mobile-friendliness has been among the many factors that Google uses when it ranks websites in search results. Another design element that affects your search ranking is your site’s load speed, while this can be influenced by your site’s hosting. Also, a poorly designed website that uses unnecessarily large graphics can cause people to abandon your website in as little as two seconds! To read more on this topic, check out “5 Ways SEO & Web Design Go Together” by Search Engine Journal.

How Design Affects Conversion

The internet has matured past the point of anything truly being first to market for any standard consumer goods or services. With that, your average customer is savvy and aware that if they don’t like what you are offering, they’ll just go somewhere else. To keep visitors browsing and ultimately converting them to paying customers, your design needs to create a pleasant user experience by making content easy to find and visually pleasing. It’s not just the product or service your site is offering. It equally matters as much how you are offering it.

Bucket Three: The Law Forces Me to

If you aren’t convinced by now that you may need a new website. perhaps civil law may convince you. For the better part of 35-plus years, laws dictating how websites are to be designed and behave were mostly absent at any large scale. This is no longer where we are today. You know you need a website redesign when compliance with the law dictates it.

Accessibility

I recently wrote a blog post titled, “5 Ways to Make Your WordPress Site More Accessible.” In it, I covered not only tips to better deliver your content but also legal and monetary considerations you should be aware of if you are ignoring accessibility in your website’s design.

Since 2017, accessibility lawsuits related to website accessibility, which is directly impacted by your website’s design, have doubled every year with as many as 3200-plus in 2019 alone. I highly recommend you give my article a read, but in summary, by not coming into compliance with good site design, you could leave yourself liable for punitive damages.

Cookie Compliance

Even if you have a nice-looking website that meets your needs and is accessible to others, that still may not be enough. Starting October 1, 2020, any website that has European Union (EU) consumers needs to conform to enhanced cookie compliance laws. It’s quite common for third-party themes to include third-party tracking cookies that are not compliant with EU regulations. Any redesign should take this into consideration what tools and resources are used in your website’s build.

The End

Whether the need for a website redesign is obvious, stems from a desire to boost traffic and sales, or compelled by legal reasons, I hope you found this post informative. Just remember that with the right partner, a redesign doesn’t have to be so scary! If you’re ready to get started, reach out to us at WebDevStudios, or for smaller businesses, contact Maintainn.

The post Scary Warning Signs Your Website Needs a Redesign appeared first on WebDevStudios.

If you’ve never heard of a design system before, you’re not alone. For those of us not dabbling in graphic design or pursuing it as a career, you can think of it essentially as a design template for websites. A design system sets out the building blocks that a graphic designer will use to build websites with. In this article, we’ll cover the basics of a design system and touch on design systems specifically for WordPress.

A design system might be very generic blocks—i.e., wireframes, a group of font styles, some button styles, logo usage, the header and footer design, etc. Or, it may be very specific, such as the entire brand and style guidelines for a company from top to bottom.

History

As web development has matured, it became apparent that while print designers had Illustrator and InDesign, there really wasn’t a comparable tool with which to lay out a website, visually. Many designers used Photoshop, but that was very much like using a sledgehammer to hang a picture. Sure, it would probably work, but you’d most likely end up with a very large hole.

Then along came Sketch in late 2010. Sketch, a software built solely for MacOS computers, completely changed the landscape. Now don’t get me wrong, design systems existed long before Sketch did, but they were awfully difficult to envision for the web. Sketch made it easy to develop a visual design specifically for website development, unlike any other software. On top of that, their timing was excellent. Just as designers started to use Sketch en masse, smartphones and tablets became commonplace, making Sketch’s ability to simply design for multiple screen sizes even more valuable.

Since then, several other software tools have come along. Instead of just building a single mock-up, designers want to be able to integrate consistency, have access to all of their font stacks, design with a brand palette, and be able to prototype animations and user flows. From these demands, design systems were born.

So… what does one look like, exactly?

By and large, like a lot of little blocks of things you’ve seen on websites, such as some search boxes, menu layouts, fonts in a variety of weights and sizes, have different names, like pattern library, design language, atomic design.

These will often be displayed in multiple screen layouts: desktop, tablet, phone. Occasionally, there will be a flow illustrated, much like in a flowchart. This will sometimes show a user flow, but will also sometimes allow for a fully animated mock-up, within the app.

Oh yes, plus there’s always buttons—lots and lots of buttons.

What are the benefits of having one?

First and foremost, a design system is about reusability. By breaking an overall design down to its core components, colors, fonts and styles, it allows a designer to build many different designs with just a few items.

Secondly, it ensures consistency. By reducing a whole page down to logo, menu, search block, hero block, content block, call-to-action block, footer, etc., it means that a more generic design system can be reused to build a new design, with the same consistency, but with a modification of the styles to obtain a different look and feel. From a developer’s perspective, that’s referred to as staying DRY, which means, “Don’t repeat yourself.”

This consistency and reusability adds several other major benefits. For example, it saves time and money! The less time it takes to create a new design from scratch, the better. Wireframes for a new design or layout can be developed simply and rapidly, allowing a client to see how a page might work without having to wait for an entire design to be built.

Additionally, it allows for very easy documentation. When a system has been documented once, any new design built from it will mostly work the same way for the developer or the client. Only new elements or new components need to be documented moving forward.

As a developer or a client, how does this help me?

Depending on the tool, it allows for easy collaboration and signoff with clients. Figma, for example, is completely web-based. Because of that, every design built in Figma is shareable, allowing non-designers to view and comment on the wireframe, design, or mock-up. This also helps developers to visualize the designs and easily export a lot of the CSS right from the design itself.

It’s even more useful once a designer integrates user flows and prototyping. A developer will be able to see the expected result in the app before writing any code, ensuring a high level of consistency with the approved templates.

What about WordPress?

Applying a design system specifically to a WordPress-oriented development process is pretty new, so some of this is just conjecture. As I see it, a design system could very much help a team of developers by allowing them to visualize very specific WordPress templates in a new way.

Specifically, the designs could include:

• The components to be included in the header, footer, sidebar
• Components that build each template part, such as:
  • Content
  • Content archive
  •  Content page
• Content blocks in the Gutenberg editor, such as:
  • Hero
  • CTA
  • Carousel
  • Recent posts

By highlighting the components used in each of these files, it would simplify and speed up the process of building out a new theme.

Which tools are best for developing a design system?

That depends on who you ask. That said, three names are going to be mentioned a lot: Sketch, Figma and Adobe XD. Despite the initial dominance of Sketch in the web visual design space, Adobe XD and Figma have come a long way. All three offer a very similar level of functionality and features.

• Sketch has a free 30-day trial with a $99/year price structure after your trial expires.
• Adobe XD is free with limitations. If you want to use it on more than one project, it’ll cost you $10/month. If you want to use it collaboratively with your team, it’ll cost you $23/user/month.
• Figma is free for two users and three projects. For more functionality, it will be $144/year per user (and up).

Specific recommendations

• Define a grid spacing unit early on, then never ever change it
• Separate each brand’s components into their own library
• Build your blocks separately from mock-ups
• Reuse common elements by taking advantage of symbols/components (each tool calls them something different)
• Start out by sticking to the basics:
  • Headers, footers
  • Multi-device mock-ups
  • Buttons, forms, typography, menus
  • Colors, styles, states
• Once the basics are laid out, add the extras:
  • Prototyping
  • Animations
  • User personas
  • Flows

Resources, References, and Examples

• What Is A Design System?
• Proposal: a consistent spacing system for WordPress
• Atomic Design
• Design Systems as a Shared Product Language
• Designing for Design Systems
• Build your design system with these 8 real-world lessons
• How to build your design system in Figma

The post How to Build Design Systems for WordPress appeared first on WebDevStudios.

CTAs are important because without them you’re leaving it up to users to find things they need (or worse, leave your website). Your aim should always be to reduce the cognitive load on users by making things simple and easy to execute. A successful CTA should be succinct, well-designed and accessible to users with a wide range of experience and abilities in order to maximize the amount of people who can see and interact with them.

Now that we have a bit of a foundation, let’s dive into ways you can maximize the effectiveness of your call-to-action buttons.

CTA Text

The text for your CTA button is just as important (if not more) than how it looks. Some users may be more likely to engage with a button that includes actionable text such as “Now” or “Today” as it generates a subtle sense of urgency.

Letter case in buttons

Another thing to take into consideration is the letter casing of your call-to-action buttons. In most cases (pun intended), you’ll want to decide on a single format (all-caps, lowercase, sentence case, etc.) for consistency. This should also align with your brand voice. Using all capital letters (aka, all-caps) may be too aggressive for a dog-boarding website but could fit in with a more serious-toned brand or more urgent CTA (like donations for a nonprofit).

The case of your button text should also influence the text itself; for example, using actionable phrases like “SIGN UP NOW” combined with all-caps could be perceived as too forceful. If you do choose to go with all-caps text, you should also make sure the CSS styles for the text are optimized. Take the following example where we’ve added some letter spacing and reduced the overall font size to make the button feel more professional and less forceful.

Test, adjust, repeat

Just because you’ve written a seemingly effective and concise CTA doesn’t mean your work is done, either. There are lots of case studies of high-profile websites that tweak their CTA messaging based on data such as analytics, user testing, and heatmaps. Former Mailchimp designer, Aarron Walter, discussed in his book, Designing for Emotion, how Mailchimp saw an increase in signups by simply changing the button text in their header from “Sign Up” to “Sign Up Free.”

Accessibility

When designing your call-to-action buttons, you should also be considering the various accessibility issues involved. In terms of the actual code of buttons, there are a lot of things to consider such as aria-labels and other functionality for users navigating your site via keyboards, screen readers or other forms of assistive technology. We’ll stick to design considerations for this blog post.

The first thing I check when designing buttons is color contrast. There are free tools like the WCAG Color Contrast checker that allow you to plug in your hex code values to check the contrast. Poor contrast means that users with less-than-perfect vision (a lot of people), color-blindness (about 8% of the male population in the US), or other forms of impairment, will have a hard time reading your button text. This can be tough when your main brand color is on the brighter end of the color spectrum (such as yellow, orange, red, green, etc.). You should always aim for at least passing AA contrast. You can see the buttons so far in this article pass for everything except normal-sized text for AAA contrast. If we want to shoot for AAA, it’s as easy as selecting a slightly darker button color or changing the text color.

This was a pretty easy example, but what if you have a tough brand color such as yellow? Let’s look at some ways of working within that constraint. We can see that out of the gate, this yellow fails all the checks for color contrast, but fear not; we can apply some creativity and have this passing contrast checks in no time!

Here are four potential ways of using the yellow brand color from before but in contrast-friendly ways. We can use an outline (or ghost) button style with the brand color as the border, text and icon combination, or a combination of both. You can get creative and come up with even more variations.

Design

Lastly, let’s look at some overall design considerations for your call-to-action buttons.

Padding

One of the most common mistakes I see with CTA buttons is simply not having enough spacing (or padding) for the button. This leaves the text feeling cramped and awkward, while also making it harder for users to click or tap due to the small amount of real estate. Not to mention, it makes your CTA seem less professional or legitimate. Aside from these items, the button on the right just looks more “clickable” than the other button, wouldn’t you agree?

Spacing

The spacing and proximity of your CTAs to other elements on the page is incredibly important in drawing attention to them. Make sure that your CTA has plenty of breathing room (white space) to increase engagement and so it doesn’t get lost in a sea of elements vying for attention. You should also take care not to overload any given CTA section with too much content. One sure-fire way to turn off users is overloading them with text. Sometimes, communicating an idea with a single, snappy heading and nice image will draw far more attention than over-describing an idea with paragraphs of text.

Multiple CTAs

There will be times when you will want to display a primary and secondary CTA in the same component. When you need multiple CTAs so close together, it’s important to consider the spacing rules we already covered. You’ll also want to make sure that you’re giving visual priority to your primary CTA, as opposed to giving equal visual weight to both (i.e. you need to make it clear to the user that one is more important).

Closing

Whether you’re running an enterprise-level corporate website, a large-scale media site, or a consumer goods website that helps people track down their favorite products, the design decisions you make in regards to your CTA buttons can either convert your visitors into loyal customers or provide no impact at all. Use these tips and guidance to ensure you’re making the right choices for your CTA buttons.

Ready to improve the CTA buttons of your website? Talk with our team. We’d love to strengthen the design elements of your call to actions and improve your conversion rates.

The post 3 Design Tips for Call-to-Action Buttons appeared first on WebDevStudios.

Why Start Now?

It’s still 2019, so why should you be concerned about what will be on-trend next year? The planning process is pivotal in successful website builds, which takes time. You want to ensure your site is at the forefront of the the changing landscape of the web and not playing catch-up against your competitors. The sooner you start planning, the faster development can begin to get your site become a trailblazer in the new year. 

Why Do Trends Change and Why Are They So Important?

It probably feels like it’s a never-ending cycle to keep up with the new trends and updates that come yearly for WordPress and the web in general, and you wouldn’t be wrong. With so many talented developers (many of which we have here at WDS) contributing to open-source platforms, trends and necessary features will always be changing in an attempt to find the next big thing for developers and consumers alike.

Some of these trends may be purely aesthetic, which are still very important in maintaining your brand’s image on the web, but many of them are imperative to ensuring your site remains secure, accessible, and provides a friendly user experience. You want to position your company as a leader in your industry, and your website is going to be the first reflection of that for many visitors. Let’s explore some of the ways you can improve your website for next year.

What Improvements Should You Make in 2020?

1. Make sure your website is mobile-first and thumb-friendly.

Due to the continued growth in the use of mobile devices, it’s not enough anymore to just make sure your site works on mobile. Since so many users will be interacting with your site on a mobile device (and in some cases, solely on mobile), it’s imperative to design for a mobile experience first. By keeping mobile at the forefront of your design, you’ll definitely see some of the following benefits.

• You’ll give users an improved customer experience with design elements meant to be displayed on a smaller screen utilizing touch interactions.
  
• Keeping the design “thumb-friendly” (since often times users hold phones in the palm of the hand using their thumb to scroll, click, and interact) ensures all the content is within easy reach.
• Search engines, such as Google, are starting to give preference in indexing mobile-first designs to serve up more relevant searches for mobile users.
  

2. Use motion in your design with micro-animations.

Users love feedback and emotional connections with websites. Micro-animations are becoming increasingly popular in providing users with a rewarding user experience while providing valuable user feedback. These may sound like small details to add to a site, but don’t underestimate how something so simple can help differentiate a site from ordinary to a stand-out. 

Micro-animations can provide beneficial feedback through elements such as:

• Showing visual progress – visually seeing the progression of a loading bar complete
• Directing user navigation – utilizing subtle direction arrows or colors to directional cues
• Making use of natural swipe tendencies – creating seamless transitions generate an interactive and smooth site flow
• Visual feedback for security – implementing a color bar illustrating the strength of a password
• And so many more!

3. Optimize your site for accessibility.

Just like many other facets of life, some individuals need to utilize the web in a different manner than as initially designed due to a disability. Therefore, although this one may be more difficult to implement than some other trends, upgrading the accessibility of your website is a crucial way to improve your website for next year because it allows you to reach a vast audience and, in some cases, makes sure you are in accordance with laws and policies.

Designing for accessibility includes a vast number of things to consider and can require some additional education in understanding proper code structures to do so. However, simple things can be done to make drastic improvements to your accessibility on your site, including:

• Adding closed captions to videos
• Using headers correctly
• Integrating tab navigation
• Utilizing high color contrast

4. Make use of audio and voice search optimization.

Going along with accessibility, users are exploring websites with more than just their finger tips now. With the increase in voice assistants, such as Siri, Google Home, and Alexa, more users are navigating the web utilizing their voice. 

Ensuring your site is set up for audio and voice optimizations comes down to how content is organized on your site and how easily a search engine is able to find it. Here are some key factors to keep in mind:

• Making sure that your important content is within HTML (not images)
• Use phrases similar to natural speech (not just keywords)
• Ensure your site has a quick load speed (since Google will search those first in its queries)

Positive Impact of These Trends

These are just a few of the trends to note, and by no means do you need to start incorporating every new one you come across. By keeping some of these in mind to plan for next year, you can ensure you are are positioning your site as a leader in the web landscape for 2020. Some of these improvements may give your site a visual edge that will attract a consumer’s eye. Some will ensure your site remains secure and safe, while others are working to make sure you are presenting the best user experience.

WebDevStudios Can Improve Your Website

Are you ready to make improvements to your website for the new year? We’d love to chat. Contact us today and let’s start 2020 right by building an updated and on-trend website for your business or nonprofit organization.

The post Ways to Improve Your Website for the New Year appeared first on WebDevStudios.