Wireframing

Wireframing

Wireframing your project can be helpful to your team. What may feel like an extra step will help in the long run to communicate purpose, placement, and action.

TABLE OF CONTENTS

$

What is wireframing?

$

How to make a wireframe?

$

How to read a wireframe

$

Key takeaways

What is wireframing?

A wireframe is a two-dimensional creation of a digital or print design that focuses on content, call to action, placement, spacing, and functionality. Wireframes also establish the interaction between the user and the page.

Making a wireframe is important to your project because it helps you plan ahead what your project needs to work and what it should include before you think about aesthetics, branding, and imagery. Wireframing needs no special software, just a place you can quickly think out ideas and identify your key elements of the page.

Wireframing is a tool that a team of designers, developers, and users can use as a blueprint for their project.

Wireframes include but are not limited to:

  • image placement
  • call to action button
  • location and placement of copy
  • navigation placement
  • logos
  • search field
  • breadcrumb
  • headers, including page title as the H1 and subheads H2-Hx
  • navigation systems, including global navigation and local navigation
  • 1234
  • body content
  • share buttons
  • contact information
  • footer

How to make a wireframe?

This is a hot topic with lots of suggestions on the internet for software and technology, but the only thing you need to make a wireframe is your brain. Low fidelity wireframes can be sketched out on a piece of paper. High fidelity wireframes can be more thoughtful on a digital platform, but the results are the same. Digital software allows easy collaboration and duplication, but starting with sketches may help you think through your customer’s journey. There isn’t a wrong way to make a wireframe, but below are the steps I typically take.

  1. Sketch out a low fidelity wireframe to think through the customer journey, needs, and channels.
  2. Recreate the sketch in a high fidelity wireframe using a collaborative software such as Adobe XD.
  3. Illustrate the user experience above the scroll, and connect any interactions in the prototype tab.
  4. Try making wireframes using a phone first, since this is the most typical digital use and the most challenging for accommodating information.
  5. Share the wireframe with your team or client, making sure they have a place to give feedback and adjustments.
  6. Revise and approve.

Once your wireframes are approved, start working on design and development.

How to read a wireframe?

Remember—wireframes are meant to provide just a little information, so make sure you are asking the right questions when you are looking at a wireframe. Make sure you can navigate through the customer journey and make sense of placement.

Rectangles with X often represent photos, and buttons are symbolized with a rectangle. Below are some awesome resources from Adobe that identify the symbols and uses: {Download these Free Resources from Adobe.}

Summary—Don’t be afraid of wireframes. The time they require can be intimidating at first, but the time they save in communication will be essential in later levels.

CTA—Need help planning your next project or wireframe? Let Root and Roam help you plan your next customer journey. Call today for a consultation.

    Send Us A Message

    Ensuring your website ADA compliant

    Ensuring your website ADA compliant

    TABLE OF CONTENTS

    $

    What is ADA compliance, and why does it matter?

    $

    How do I make my website ADA compliant?

    What is ADA compliance, and why does it matter?

    The Americans with Disabilities Act (ADA) is the United States’ most important law regarding accessibility and civil rights for people with disabilities. Signed into law in 1990, the ADA prohibits discrimination against anyone based on ability or disability.

    The ADA is a broad piece of legislation covering many aspects of accessibility for people with disabilities. The part of the ADA that affects how businesses serve customers is called the “ADA Title III.” The ADA Title III covers public areas and accommodations that apply to businesses, restaurants, hotels, theaters, doctors’ offices, libraries, parks, and almost every other place of work.

    All types and sizes of businesses have to comply with ADA legislation—for their customers and employees—if there are over 15 workers. The ADA affects places of entertainment, restaurants, large enterprises, small to medium businesses, retail stores, government offices, employment agencies, and more.

    As the internet and websites have played a bigger role in how consumers interact with businesses, the way that the ADA applies to web accessibility has changed. In 2017, a clear consensus emerged that the ADA also covers the online world. Today, U.S. courts apply ADA accessibility requirements to the internet, meaning websites should comply with ADA rules.

    Ensuring your website is ADA compliant is the responsible and right thing to do. But, in recent years, ADA title III-related lawsuits have skyrocketed. There were at least 11,452 federal filings in 2021, which is a 320% increase over a short, eight-year period. And, as of 2020, 265,000 demand letters were sent to businesses that operated inaccessible websites.

    Approximately 85% of ADA lawsuits in federal and state courts during 2018 were filed against small-and medium-sized retail businesses. Since it’s almost inevitable that the court would find in favor of the plaintiff, small business owners feel that they must settle out of court. The cost of defending a lawsuit could destroy even a medium-sized business, as the average ADA website lawsuit settlement comes to $35,000.

    How do I make my website ADA compliant?

    Web accessibility is essentially a set of rules, behaviors, code standards, and design guidelines that were created by the W3C and are called the WCAG 2.1.

    The WCAG 2.1 is a massive 1,000-page guidebook that encapsulates a range of disabilities, from hindering internet use to making internet use impossible without adjustments. This spectrum comprises 20-25% of the general population, depending on if we’re going with the CDC or WHO.

    There are many disabilities covered, and the primary categories that require attention are

    • blind people using screen-readers,
    • the motor-impaired using only the keyboard to navigate,
    • epilepsy, color blindness,
    • cognitive and learning disabilities,
    • visual impairments, and more

    With a 1,000-page guidebook to follow, it is obvious that making your website accessible and compliant is no easy feat! Here’s are a few of the simpler things you can do to work towards full compliance:

    • Every page should have a single H1 title, and titles should follow a consistent hierarchy (H1, H2, H3, etc.);
    • Images should be thoroughly described in image alt tags for assistive technology;
    • Fonts should be large and legible with enough contrast between background and foreground colors;
    • The entire website should be navigable via keyboard.

    With that said, simply following the guidelines above will not make your website fully ADA compliant. The current options in the market today are either free or low-cost plugins that do not provide you more than 10-15% of the accessibility you need in order to become compliant.

    You also have manual accessibility services that do bring you up to full compliance, but they cost 20-40 thousand dollars per site, and they take several weeks or months to implement.

    Those options, as you can imagine, leave 99% of businesses without a feasible solution, making them easy targets for lawsuits and preventing them from helping people with disabilities. To solve this impossible situation, Root & Roam Integrated Marketing Agency has partnered with a leading AI accessibility tool. This interface includes both accessibility profiles and enhancement features.

    Let’s touch on a couple of the profiles first. These profiles enable users with disabilities to instantly adjust the entire website to their specific disability. For example, enabling the epilepsy safe mode immediately stops all moving objects and tunes down potential dangerous colors. Enabling the visually-impaired profile scales the content by 100%, increases the website’s saturation, and also activates a text magnifier window using mouse hover.

    In addition to the profiles’ functionality, users can choose specific enhancement features, like increasing the font sizes if they are too small. They can also emphasize titles and links and set their preferred scaling, spacing, height, and alignment. The interface also enables people with color blindness to change the website to a dark mode or monochrome mode. These are just a handful of features included.

    We know that ensuring your website is ADA Compliant can be an overwhelming task. Root & Roam Integrated Marketing Agency is here to help! Contact us if you’d like a website audit or more information.

    Send Us A Message

    Building your Brand

    Building your Brand

    Table of Contents

    $

    What is branding?

    $

    Why does branding matter?

    $

    What are the elements of branding?

    When you hear the word, “brand,” what comes to mind? The name of a company? A logo? Many business owners spend very little time creating a meaningful brand and instead jump right into marketing and sales after naming their business and designing a logo. Unfortunately, most of these owners discover that they have a difficult time connecting with the actual market that could benefit the most from their products or services. Skimming through the branding process leads to inconsistencies within your brand, which makes it difficult for your target market to recognize you.

    What is branding?

    We’re not talking about cattle here, but we are talking about truly owning everything in your business, from the fonts you choose to the products or services you sell. ALL of it matters. Branding is essentially creating consistent, purposeful messages to connect you with your target market and to build a lasting impression within your industry. Every detail of imagery, every word you use, and everything you stand for—it all contributes to the strength of your brand.  

    Why does branding matter?

    Think of some of the most popular brands out there—Nike, Ford, Target, Hallmark, Amazon, just for starters. Now think of some of the unknown competition…you can’t! They’re unknown for a reason. That’s why branding matters. Companies with strong, consistent branding will build brand recognition with their target audiences. You want to be like these companies. You want to be known.

    What are the elements of branding?

    While much goes into branding, there are a few elements that absolutely must be incorporated into your branding strategy:

    1. Voice and tone
      Yes, this is a 2-for-1 special. All of your copy (your mission statement, company description, taglines, text on your website, or anything written by your company), both internal and external, needs to have a consistent voice. It should tell your audience who you are and who you’re not. Ask yourself, “whose voice do I hear when I think of my company as a person?” Maybe it’s Morgan Freeman or your Uncle Fred. Ideally, every bit of copy your company produces will sound as though written by the same person—and the right person. Your tone should attract the audience your brand is meant to serve. When creating your tone, determine how you want your brand to make people feel and what you want them to think of when they hear your company’s name.  
    2. Logo
      Your logo is essentially a visual symbol to represent your company. It can include images, copy, or both. It should match your voice and tone and convey the emotion of your choosing. Eventually, when a person hears the name of your company, this symbol will come to mind, so it’s important to already have a clear purpose behind your business (including voice and tone). Some logos that we like are Amazon and Tour de France. They have great symbols and messages hidden behind them! 
    3. Fonts
      While it’s fun to play around with fonts to convey specific emotions for each message, it’s more important that all of your materials, both print and digital, be consistent. Consistency helps people form connections and retrieve memories, even memories about companies they’ve encountered. Just as with a logo, the fonts you choose should add to the purpose of your business and the emotions you are trying to elicit from your target audience.
    4. Colors
      Again—consistency and emotions can’t be stressed enough. Our design experts understand how colors work together to convey specific emotions, and we’re happy to help you choose the best combinations for your company. 
    5. Styleguide
      Your brand styleguide is literally a document that outlines your company’s voice and tone, logo, fonts, colors, and anything else you choose to add. This document can be shared with your entire team and should be referenced and followed for every marketing effort. If you outsource your marketing (like maybe to Root & Roam), be sure to share your styleguide. This is how you achieve consistency and, ultimately, brand recognition. 

     

    If you’re interested in making lasting connections sooner rather than later, let our experts here at Root & Roam walk you through a structured process of building your brand from the ground up. Already have a business but need help rebranding? We’ve got you covered, too. Contact us today, and let’s get your brand on. 

    The History of Marketing

    The History of Marketing

    The history of marketing – Marketing is defined as the action of promoting and selling products or services. For as long as there has been something to trade, barter, or sell, there has also been marketing. From the first example of branded materials to the invention of the printing press to modern technology, let’s take a trip through time and discover the history of marketing.

    The_history_of_marketing, The history of marketing goes back thousands of years. In this image, we explore the history of marketing from 1450 (the first appearance of printed advertising) to the more recent boom of social media in the early 2000s-2010s. This timeline of marketing history takes you through the major events that made the industry what it is today.

    Looking Forward

    As we step into the new year, marketing looks a bit different than it did 200 years ago. Cutting-edge technology and business practices, coupled with new consumer habits, require brands to step up with new marketing techniques in 2022. Forbes magazine predicts that this year consumers will be more inclined to purchase a brand than a product. Buyers want to do business with brands that share their values. Forbes also predicts that consumers will prefer to be taught, rather than sold on the ethics of a business. They understand that company X may have the best customer service around, but they are looking for companies to educate them on their biggest questions.

    Why Adobe Libraries is a Key Feature for Designers

    Why Adobe Libraries is a Key Feature for Designers

    Why Adobe Libraries is a Key Feature for Designers Designers often need to maintain consistency across different projects and brands, using the same graphics, colors, fonts and vector graphics. But, before Adobe Libraries came along, there was no easy way to store all of these elements in one convenient place. The library feature allows designers to easily create templates that can be accessed from anywhere within the Adobe Creative Cloud and used in any of the applications it supports. In this article, we’ll examine the benefits of using Adobe Libraries and why it’s so important for graphic designers of all levels who use the Adobe Creative Cloud suite of tools.

    TABLE OF CONTENTS

    $

    What are Libraries

    $

    How Do They Work

    $

    What Can I Put Into a Library

    $

    How Do I Use a Library?

    What Are libraries?

    Adobe Libraries is a panel within your Creative Cloud account where you can store your design elements. These may be graphics, colors, fonts or vector graphics and images. When you add content to a library, it becomes available across all of your Adobe products that support Libraries and to anyone who has access. So when I create an element in Adobe InDesign, you can then access that object in Illustrator or Photoshop because they share my Creative Cloud libraries.

    How Do They Work?

    Adobe libraries are a great way to organize all of your assets, whether they are in Adobe products or not. The library links the element and allows you to access it from the Cloud quickly. This gives you access to them faster and easier with less effort, while helping you and your team stay organized. You can organize by any folder structure or by automatic groups that typically group by colors, vector graphics, images, character styles.

    What Can I Put Into an Adobe library?

    The good news is that you can put almost anything into an Adobe library. The bad news is, well, there isn’t any bad news!

    How Do I Use a Library?

    You can simply drag an asset into the library panel from whatever program you are working in. Once you save an element into your library, it will automatically sync with Creative Cloud, allowing access anywhere there is internet connection. Using Adobe Libraries simplifies brand consistency by keeping artwork items consistent from one project to another.

    Adobe Libraries is an awesome tool for our team. We are still learning our favorite perks from this Adobe tool.

    Below are the top 5 reasons I love to use Adobe Libraries.

    1. Togetherness—Keeping all our brand assets together has always been a challenge. Having one library that our whole team can access is key. Having one place to store and use universal graphics is super handy. Whether we’re working on an email, project brief or website, it’s all right there in one place. No more hunting through emails and files to find that brand asset you need. With Adobe Libraries, you can search by type of file or artwork (vector graphics, colors and fonts) across your library. That means everyone always has access to all assets they may need while designing and creating projects. In addition to giving us a place to store and use our brand assets, it gives us guidance when we’re designing new pieces of work. We use Adobe Libraries as inspiration during concepting phases of projects.

    2. Web, Print, and More—The constant growth of channels and tools keeps our head spinning. Adobe Libraries can access any of the Adobe programs, so we can easily utilize any output needed. Combining all of these platforms gives us a library that is limitless with opportunities and options to create beautiful art pieces! Also, it organizes our projects, making them easier to find—a designer’s dream! Efficiency at its finest.

    3. Logo changes—You can make universal changes, and if linked correctly, the change will apply anywhere you use the library element. If you use the library element by dragging it into the document you are working on, an icon appears in the top left letting you know it is linked.  If you have a change to make on the linked graphic or image, you can double click on the library element, make your change in its native environment, then save.  That change is then made anywhere that graphic was linked.

    4. Color consistency—Sometimes a color will change in the branding, and we never know where the new color originated.  Having a library of colors across all Adobe apps allows all users to apply color with confidence.

    To save a color in your library, follow these steps: 

            • Click on + at top left of window. 
            • Click on New Color Swatch. 
            • Fill in name (optional) and hex value. 
            • You can also add RGB or CMYK values. 
            • Confirm & click Add.

    5. Organization—Adobe Libraries makes it easy to rename artwork and organize it in a visual way. I love how it will create groups for you, including Colors, Typography, Vector Graphics, and Images, so you can quickly identify what you need.

    You can create an Abode library and organize your most used elements in a way that makes sense to you. You can customize colors, fonts, images and graphics using your library icons, so they’re easy to locate when working on projects. Since everything is linked, changes to one element will be updated across all documents where it appears, ensuring consistency of style throughout your work. Organizing elements visually in libraries also helps reduce errors by helping you find what you need faster and allowing more room for creativity. If everything looks good visually, then it will look good design-wise too. Adobe Libraries also helps manage large amounts of content—especially color swatches.

      Adobe Creative Cloud and Adobe Libraries are robust tools. We at Root & Roam are constantly using Adobe to improve our collaboration and teamwork. We find these tools help us become more efficient and consistent. Below are a couple of links that we find interesting from Adobe. 

       

      https://www.adobe.com/content/dam/acom/en/products/creativecloud/business/enterprise/pdfs/productivity-gains-of-using-creative-cloud-libraries.pdf

       

      https://www.adobe.com/creativecloud/libraries.html

      Choosing a Graphic Designer

      Choosing a Graphic Designer

      Choosing a Graphic Designer Quality graphic design is a vital element of your business. A quality graphic designer can help your company’s visibility, sophistication, efficiency, and desirability over the competition. It is essential to stand out effectively with your products and services in the marketplace, so it is essential to choose a quality graphic designer who can meet your needs.

      5 factors to consider when choosing a graphic designer

      1. Skills

      It is important that the graphic designer is on top of the latest design, marketing, and Web trends. Knowledge is power, and a quality graphic designer will be able to apply their knowledge to help your company succeed. Another element in their skill set should be efficiency in the latest design software. The more efficient and knowledgeable they are in these programs, the more confident you can be, knowing they are using the best software to create great designs.

      2. Experience

      No matter if you are choosing a freelancer or design firm, industry experience is also important. A reputable graphic designer will always be up to speed on the latest strategies and best practices. A quality graphic designer or firm should be able to present their work experience to you. This can come in the form of a presentation of their portfolio or customer testimonials.

      3. Portfolio

      A strong portfolio can give you an idea of the designer’s sense of style, capabilities, and whether they are a good fit for the projects you need. Look for work that shows freshness, creativity, and attention to detail.

      4. References

      If a designer is able to provide you with references or testimonials from clients they have worked with successfully, this is a good indicator of a positive attitude and dedication to presenting quality, professional design to your business.

      5. Personality/Professionalism

      A quality graphic designer will take pride in the relationships they form with a client. They should be responsive, knowledgeable, and active listeners. You should get a good sense that they are on your team, consistent, and are understandable to your company’s vision.

      Not all designers are created equal. With these five factors, choosing a quality graphic designer can be a long, but worthwhile, process. Adding a quality graphic designer to your design and marketing efforts will not only improve your brand identity but will also help you stand out against the competition.