Our Marketing Blog

Our industry is ever-changing. Get insights and perspective from our experts as we share our knowledge and experience on how to successfully navigate the marketing landscape.

CREATING USEFUL STYLE GUIDES FOR WEB PROJECTS -PART 1

Today's post is a two-parter. In this post, we are exploring the use of style guides and how they can help in all aspects and phases of a digital project by minimizing ambiguity and setting definable parameters that can be validated and tested against. A good style guide will help reduce hours spent by all parties throughout the phases of the project. In a future post, we'll take a look at some examples of style guides, what works about them, and explore some tools that can help the creation of these guides.

What is a styleguide?

A styleguide sets rules around how things look and behave. Styleguides are the projects visual source of truth for both user interface (UI) and user experience (UX). More focussed than brand guidelines, a styleguide is intended to be the visual and functional requirements definition for websites or applications.

A styleguide will pull in components from its parent design system which may include overall brand guidelines, design system or an established pattern library. If a brand has very specific and strong brand guidelines, design system or an existing pattern library, a project's styleguide will be derived heavily from it or may not need to be developed at all. However, if these parent documents do not define every component in the project, a styleguide should be created to cover these cases.

 

Via A List Apart

Style guides exist in different formats - anything from a static PDF or image, to a single web page or an entire microsite or cloud-based prototype can be used for host the styleguide. Of course, they're more useful as univerally accessible documents that are easily updated, so web-based styleguides are popular for a reason. Thus, the best styleguides are built as a collaboration between the design team and the development team. Not only will they define how things look, they'll also define how to build those things with the correct code. This example from Lonely Planet exemplifies this full-fledged approach, covering both the visual aspect of components and layout but also specifying a code pattern for how to build the components.

The main point is that it is a visual tool that can be referenced by multiple people playing their respective roles. There may be a written component to it, but it is primary visual. A styleguide can be developed in conjunction with the main layouts, or as a template before the main layouts are defined. Ideally, the guide is a deliverable that the client approves with the designs.

Via Lonely Planet

Why use a style guide?

While front-end technlogy seems to change on a monthly or weekly basis, the phases that a project goes through often do not. Whether your business practices waterfall, agile, hybrid, or some other methodology to get the job done, at some point, there is a handoff between creative and tech. A layout has to get out of a designers head, into a document, approved, and handed off to the developers for implementation. This could happen once, or it could happen many times over the course of a single project, but the transition point and hand-off process is always there. This handoff process is a crucial step and it is important to minimize abiguity so that specifications can be met.

Via Barricade

Developers love specification and requirements (maybe not actually _writing_ them, but that's another topic). By putting rules and definitions behind everything from how the user is supposed to interact with something on screen to the way the layout changes at a particular breakpoint, a specification can be met - and tested against. These requirements become the acceptance criteria that define whether the task was completed or not.

Without these set of rules, ambiguity creeps into the picture. Ambiguity is a developers — and ultimately, a user's — worst nightmare. Ambiguity allows room for error, leaves things open to interpretation and subjectivity, and ultimately, cannot be tested against. Much nature abhors a vacuum, developers abhor ambigutity.

Design, however, can be more comfortable in the realm of the ambiguous. Sometimes this is intentional. Art, by definition, is open to interpretation and can be intentionally unintentional (if that makes sense). More often than not, though, it's a result of shifting business requirements (see Peter's post) or a pressing time or budget constraint that does not allow the team to fully flesh out how some new component will function or look.

Since one of the styleguide's purpose is to fulfill the role of a requirements document for UX and UI, it forces designers to design to the requirements. This is particularly useful after a project has been deployed and there are enhancements or iterative changes to be made, particularly by another designer.

Via Auth0

When to create a styleguide

While we don't always have the luxury of endless budget and time, I would argue (and so would Brad Frost) that spending design hours to create a styleguide before high-fidelity design even begins will pay off on the back-end of the project.

By starting with the styleguide, designers are taking into account the UX decisions done in wireframing phase, along with any brand standards to apply. The styleguide will lay down the groundwork for the high-fidelity design. The completed styleguide should be handed off to the client for approval, which can then be given to production designers *and* to front-end developers.

In a web project, while the designers are beginning their high-fidelity mockups, the developers are using the completed and approved styleguide to write base CSS that will drive the majority of the site's look and feel. Since the client has already approved the style guide, there should be no danger in having to "re-do" anything in rounds of revision.

What's in a good styleguide?

In creating a styleguide, the bare minimum should be included, for all required breakpoints:

LAYOUT

  • Responsive breakpoints
  • Grid system

DESIGN COMPONENTS

  • Icons
  • Image Galleries
  • Thumbnails

TYPOGRAPHY

  • Font Faces
  • Heading Styles and Type Sizes
  • Paragraph / Body Styles and Type Sizes
  • List Styles (ordered; unordered) and Type Sizes
  • Any other specialized definitions, like form label styles or subheading styles

INTERACTIVE AND NAVIGATIONAL ELEMENTS

  • Buttons - rest, hover states
  • Links - rest, hover states
  • Main Nav - rest, hover, active states
  • Breadcrumb Nav
  • Togglers - on, off states
  • Tool Tips - on, off states
  • Alert boxes
  • Modal / overlay boxes
  • Custom form elements (checkboxes, radio buttons, selects, etc)

COLOR PALETTE

  • Primary colors and when to use them
  • Secondary, tertiary colors and when to use them

ANIMATION

  • Loading icons
  • Progress bars
  • Any other animations the layout may require

Resources and Citations

Stay Tuned for Part two of this post, where I will evaluate some helpful tools to streamline the process of creating a styleguide, as well as take a closer look at more examples and why they work!

Related Posts

In the Era of “Finstagram”, Snapchat Remains a Haven for Authentic Social Sharing  As marketers and brand strategists, we get a lot of questions about specific channels and how best to use them. Recently, we’ve been hearing the same set of questions quite frequently: “What’s the deal with Snapchat?”  “Is Snapchat dead?” “Why are they still around – who is even using them?!”   Surprisingly, Snapchat is not dead.  Yes, you heard that right – the app is still alive and thriving.  53% of all internet users aged between 15 and 25 years still actively use Snapchat. More fascinatingly, among this population, Snapchat is their most popular app, closely followed by Instagram. The average daily active user opens the app’s camera more than 30 times a day, spending at least 30 minutes on the app.  Users turn to the app for playful and silly content with their friends. 95% of Snapchatters say the app makes them feel happy, more than any other app tested.  This begs the question: How are so many people (in a coveted target demographic) using this platform and yet, so many people keep asking if it’s dead? The Answer: The reason people think it’s dead is actually the reason people like using it. It’s relatively free from advertisements and brands, it’s harder to track people and it offers a more authentic place to be yourself with your friends.    So, Why Snap? Think about the last time you were scrolling through Instagram. You see a post from your cousin, then one from your college friend, and then an ad about the shirt you were browsing 30 minutes ago. Nowadays, it seems like scrolling through social media has become a new form of never-ending advertising.  Now, enter Snapchat. Unlike other social platforms, Snapchat allows users an escape or ability to hide from targeted media, which is attractive to a subsection of consumers and, in our opinion, is the reason Snapchat is still very relevant for Gen Z and younger Millennials.  With Snapchat, users are able to directly share videos and images with their closest friends and choose how and when to share moments to a wider friends list. (Yes, we know Instragram added the close friends function in stories but it’s somehow not the same). Unlike Instagram or Tiktok, Snapchat users don’t appear to feel the pressure to look a certain way or feel a certain way about the amount of content they receive or share. Users are more likely to express their authentic self, not constantly comparing themselves to others based on post engagements or feed aesthetics. Snapchat also eliminates the surrounding influencer persona which surfaces on other platforms and removes the constant barrage of paid media. In other words, on Snapchat you don’t feel like you’re constantly being sold something. A Refinery 29 article points out “A big part of Snapchat’s appeal is the lack of commitment it takes to enjoy it: Stories fade after 24 hours, messages disappear, and, even if you leave Snapchat, you can always connect with people via at least three other platforms”- users do not have to feel pressured by the living content aspect of other platforms.  Essentially, Snap is a “cleaner” more authentic experience free from influencers and brands and that’s exactly why people like it.    Does this mean brands should avoid Snap all together!? By no means is Snapchat an untouched platform by brands. Brands do have targeted ads on Snapchat however, these don’t interrupt the way users engage with the app. Users only see sponsored content when looking through the wider audience stories and they know that’s the only place they’ll see ads.  Brands that use Snapchat well have become skilled at hiding their ads amongst other organic stories so much so that users sometimes don’t know they’ve clicked through a paid placement. TEVA, Sam Edelman and The New York Times are all currently running promotional campaigns on Snapchat in which users would briefly tap through the ad as if the brand had its own Snap story.                                       Additionally, through its filter feature, brands have been able to promote new products or promotions, however these filters can be seen as “tired” for Snap's core consumers.    What Should a Brand Do? How Should They Think About Snapchat? Be Purposeful & Authentic - Snap requires a lot of attention, strategy and dedication to do it well. Think About One to One - Snap is all about direct interaction. Think about adjusting your brand voice to be personified - help people feel like they’re talking to the people behind the brand, not a nameless faceless logo.  Don’t Copy & Paste Other Social Strategies - If you’re thinking about getting involved with a Snapchat presence - be prepared for a slow, long road. You can’t reuse your Instagram or TikTok strategy on this platform. Get to know how it works and then act accordingly.  Community before Mass Reach: “Going Viral” isn’t so much of a thing on Snapchat so it’s less about mass appeal and more about relationship building with a passionate group of friends and fans.  When in Doubt, Don’t - If you’re on the fence about jumping into Snapchat or reigniting your Snap presence, it’s better to be smart than be fast. No one is going to fault you for not having a Snap presence but there could be negative consequences if you do Snap poorly.    A Parting Thought From an advertising standpoint, brands can capitalize on the fast FOMO opportunities that Snap creates to promote new products or campaigns. At the same time, brands should strategically think about how to speak to consumers on the platform, especially when knowing most users turn to the app for playful and silly conversations with their closest friends. As both a user and a strategist,  Snap allows me to feel free of the social pressure felt across other platforms. However, if I were to advise a client interested in Snap, I would advise to proceed with caution as authentic social sharing seems to be harder and harder to replicate as for brands these days.  Brands are always welcomed to create a presence on Snapchat, although enticing to try to reach target audiences, the level of attention, dedicated resources, content curation and focus required to authentically join that space remains high.  Brands looking to engage may need to weigh the risks vs the possible rewards before launching campaigns on the platform or face potential blowback as consumers feel their “brand neutral space” becomes invaded. 

In our continuing series of examining Google Search Trends to gain insights into the top keywords queried in the USA, we present our findings for September 2021. Every day, we capture the top three keyword phrases in terms of search volume as reported by Google Trends (US Only). Each term has an estimated query volume attached to it, which we also record. The number scale tops out at 10,000,000+ with a lower limit of 200,000+. After the conclusion of the month, we look at the phrases we collected along with their volumes to get an understanding of what drove queries for the month.   A Return To The Typical For September 2021 After a weird August 2021, last month’s queries looked more like the ones to which we are accustomed. There were a few phrases that were queried over 10 million times.  Deadly weather events weren’t a top search topic - thank goodness - and the return of the NFL brought back many of the top team names back into the daily top 3. September did have its unique qualities too. We noticed some intriguing reporting on some Google Doodle clicks - phrases that were in the top 3 one day and then gone the next. Also, the sad story of Gabby Petito can’t be ignored as her name appeared in our capture 6 times last month. Lastly, coffee had a moment in September as a national day held in its honor was searched a bunch on the 28th. With that, let’s get into the top searched phrases of September 2021.   The Curious Clicks of Google Doodles When Google changes the logo on its homepage with what they call a Google Doodle, people click. When people click, it leads them to search results. When they are led to search results, it’s counted as a query. Here are three queries that we counted because they were attached to a Google Doodle; Christopher Reeve - 9/24/2021 - 10,000,000+ queries Google - 9/27/2021 - 10,000,000+ queries Rodolfo 'Corky' Gonzales - 9/30/2021 - 2,000,000+ queries Two of last month’s Doodle were published to celebrate the lives of people of note, the actor Christopher Reeve and political activist Rodolfo Gonzales.  The other Doodle, noted by the query “Google” was posted to celebrate the company’s 23rd birthday. One thing we noted as a team was the reporting of Google Doodle clicks on September 5th.  Since we check the daily search trends from Google Trends every day, we saw that it was initially reported that Google’s 2021 Labor Day Doodle had driven over 10 million clicks. It appeared as a query for “Labor Day” on Monday.  But since we know there is an adjustment period for these results, we recorded the top 3 queries for Sunday on Tuesday and found the Labor Day query was no longer there.  We didn’t know what to make of it. Since there were no Google Doodle-related queries in August, we wondered if Google Trends was changing how it reported Doodle clicks. If there was a change, it was temporary as we saw more Doodle clicks and the queries related to those clicks late last month.   The Non-Doodled Holidays Putting the cryptic Labor Day Doodle query aside, here are the holiday related terms that people searched for the most in September:  Rosh Hashanah - 9/5/2021 - 500,000+ queries Labor Day meaning - 9/6/2021 - 200,000+ queries 9/11 - 9/10/2021 - 1,000,000+ queries Yom Kippur - 9/15/2021 - 500,000+ queries National Coffee Day 2021 - 9/28/2021 - 200,000+ queries “Labor Day meaning” did make the top 3, interestingly enough. We interpret this query and the number associated with it are connected to a genuine interest of learning more about the holiday. The Jewish holidays of Rosh Hashanah and Yom Kippur both occurred in September this year as did the 20th anniversary of the September 11th attacks. Lastly, and we love to see this type of “holiday” query appear in the daily top 3, National Coffee Day 2021 had a resurgence as compared to the last 4 years.  The peak for this holiday may have happened in 2015 but it’s clear that more of us were searching for a way to celebrate coffee this year.   The Films and TV Shows We Watched To gauge the popularity of video entertainment, AMP Agency takes note of the search volume behind movie and television show titles.  The film industry has taken a hit and we are not sure if going to the movies will ever come back to the way it was but here are the films that drove the most search volume in September. Shang-Chi - 9/2/2021 - 1,000,000+ queries Matrix 4 - 9/9/2021 - 500,000+ queries Malignant - 9/10/2021 - 500,000+ queries Cry Macho - 9/17/2021 - 500,000+ queries Venom - 9/30/2021 - 1,000,000+ queries With the exception of Matrix 4 (that film’s trailer dropped on the 9th), all of these films were released last month.  Dancing With the Stars 2021 - 9/8/2021 - 200,000+ queries Ted Lasso - 9/19/2021 - 2,000,000+ queries Dancing with the Stars - 9/20/2021 - 500,000+ queries For TV shows, people still love Dancing With The Stars as it began its 30th season. The cast announcement and its premier episode drove people to search.  Interestingly enough, Ted Lasso is the only query related to the Emmy Awards that were held on the 19th. That show won 7 awards and may have picked up a few more viewers after the Emmys.   September 2021 News Events For these monthly analyses, we typically do not report on queries related to celebrity deaths or other tragedies unless the search volume dictates that it can’t be ignored.  Queries related to  Gabby Petito’s disappearance and death made the daily top 3 of 6 days in September. Gabby Petito - 9/15/2021 - 1,000,000+ queries Gabby Petito found - 9/16/2021 - 500,000+ queries Gabby Petito found - 9/17/2021 - 1,000,000+ queries Gabby Petito found - 9/18/2021 - 500,000+ queries Gabby Petito - 9/19/2021 - 10,000,000+ queries Gabby Petito Autopsy - 9/21/2021 - 500,000+ queries The other big news story that drove millions of queries was related to the California recall election.  Californa recall election - 9/13/2021 - 2,000,000+ queries California recall election - 9/14/2021 - 5,000,000+ queries It’s interesting to see the number of queries increased the day after the election as people wanted to learn of the results.    Gaming  Keywords related to video games make the top 3 rarely so we thought it was a treat to see three phrases last month. Deltarune - 9/16/2021 - 100,000+ queries Nintendo Direct - 9/22/2021 - 200,000+ queries New World - 9/27/2021 - 200,000+ queries The second chapter of the Deltarune game was released on the 16th and New World was released by Amazon Games on the 28th.  Nintendo Direct announced all the games updates for their Switch console that are rolling out this winter.   Just the Top Sports Keywords Of the 90 phrases we collected in September, 37 were related to sports.  Since there were so many, let’s just keep it to the keywords that were queried 2 million times or more: Dallas Cowboys - 9/9/2021 - 5,000,000+ queries Georgia football - 9/4/2021 - 2,000,000+ queries Parkers - 9/12/2021 - 2,000,000+ queries Cleveland Browns - 9/12/2021 - 2,000,000+ queries NFL - 9/12/2021 - 2,000,000+ queries Raiders - 9/13/2021 - 2,000,000+ queries Thursday Night Football - 9/16/2021 - 2,000,000+ queries Ravens - 9/19/2021 - 2,000,000+ queries Packers - 9/20/2021 - 2,000,000+ queries Christian McCaffrey - 9/23/2021 - 2,000,000+ queries UFC - 9/25/2021 - 2,000,000+ queries Dallas Cowboys - 9/26/2021 - 2,000,000+ queries Packers - 9/26/2021 - 2,000,000+ queries Chiefs - 9/26/2021 - 2,000,000+ queries Bengals - 9/30/2021 - 2,000,000+ queries Yes, gridiron football is back and the stadiums are filled with people. You can see the NFL dominate the number of sports keywords in this list.  The Dallas Cowboys and the Green Bay Packers seem to be winning the popularity contest so far this season.   Apple News A new iPhone?  Oh, you know people want to know more about that.  The iPhone 13 series was unveiled on the 14th and the latest iOS version was released on the 20th.   iPhone 13 - 9/14/2021 - 2,000,000+ queries iOS 15 - 9/20/2021 - 500,000+ queries All in all, a good month for Apple. If they ever launch a search engine, they can celebrate their company’s birthday with a doodle of their own. Thanks for reading. If you liked this article, we utilize search trends data for all of our clients and we invite you to learn more about our SEO services. Until next month.

In my neighborhood in Portland, Oregon, many of the sidewalks are original - built when the neighborhood was coming together in the early part of the 20th century. You can locate stamps at intersections that have both obsolete street names - Sprague Street is now known as Rosemont; Margarette is now 34th Ave - and the names the contractors who poured the cement, along with the year they were poured. These small reminders of the recent past are fun to find, but point out a glaring inequity in their construction: These old sidewalks are not accessible, and not safe. An unimproved intersection The city is in the process of converting each of the city’s intersections into curb cutouts that are friendlier to those who may require assistance (wheelchairs, kneeling scooters, crutches, probing canes) getting up and onto sidewalks from the street. The brand new curb cutouts include a yellow rubberized traction pad that signals the transition between street and sidewalk, and there are eight on each improved intersection - two on each corner of a standard intersection. An improved intersection. This effort is happening not because the improvements and bright yellow traction pads are attractive, or because the contrast between the fresh cement and the old cement is nice to look at - but because it is the right thing to do for the citizens of Portland and those who have mobility issues who might otherwise need to be in the street in order to avoid the curb. This abides by the regulations set forth in American with Disabilities Act of 1990 (ADA). The benefits go beyond supporting only people who have disabilities, though - anyone who has tried to use a rolling suitcase on the sidewalk, pushed a baby stroller over a curb, or can’t ollie on a skateboard can attest to that. By doing the right thing, Portland has chosen to make their city more accessible to more of its citizens. In our web development projects, we often support clients who need to do the equivalent curb-cutout improvements. Their sites may have been beautifully designed, but fall short in visual and technical areas that would help make their site more accessible. By bringing the site up to a baseline of accessibility standards set forth by the WCAG, the site becomes more equitable, inclusive, and usable for more people. The add-on effect for the client is that they have just widened their potential customer base by not excluding people who may consume web information in different ways. The improvement process also helps shake out other technical issues around markup structure, meaning the site may become more SEO-friendly and may render better in a wider range of devices after the improvements are implemented. While these efforts may be initially driven by legal justification (avoiding ADA lawsuits), or for marketing reasons (reaching more customers), improving your site’s accessibility is the just and correct thing to do. Our process begins by using a suite of tools that analyze the website to identify problem areas. This includes using voice-reader to read the website’s content - not everyone who browses your website will use their eyes to do so. We also see how the site renders without styles applied, validate the markup of the site to ensure the proper document structure & hierarchy is established, and closely scrutinize how interactive elements work. Particularly complex interactive elements like carousels or interactive navigation menus may require an entire rebuild in order to be accessible, but the goal is to maintain the current design or as close to it as possible. The end result of such an effort should not sacrifice visual design or interactivity, nor should it even be noticeable to those users who use standard means to interact with websites. But for those who need assistance, the improvements are welcome and appreciated. For sites that we build from scratch, we design and develop with this equity in mind from the beginning. By starting off with a requirement of accessibility, the new site enters the digital world already with accessibility in place. The level of accessibility, set forth by WCAG standards - “A” to “AAA”, with the latter being the most strict - may be dictated by the customer’s requirements. Projects for larger clients, non-profits, or government clients typically have a minimum accessibility level mandate for digital properties. But even for those without the mandate, doing the right thing results in a site that behaves nicely across different input types and allows for a wider audience to engage with the site. Do you need help with your site’s accessibility? Are you concerned your site is unintentionally excluding users?