Boy Scouts of America Brand Guidelines: Last Revised July 2019
Boy Scouts of America Brand Guidelines: Last Revised July 2019
Brand Guidelines
Last revised July 2019
BSA Brand Guidelines
Table of Contents
Corporate Brand Scouting Sub-Brands Digital Guidelines
Scouting Architecture 6 Scouts BSA 32 Guiding Principles 44 WEBSITES 69
Prepared. For Life.
®
7 Position and Identity 33 Web Policies 45 Information Architecture 70
Vision and Mission 8 Cub Scouting 34 TYPOGRAPHY 46 Responsive Design 71
Brand Position, Personality, and Communication Elements 9 Position and Identity 35 Typefaces for Digital Projects 47 Forms 72
Corporate Trademark 10 Venturing 36 Hierarchy 48 Required Elements 73
Corporate Signature 11 Position and Identity 37 Best Practices 49 Real-World Examples 74
The Activity Graphic 12 Sea Scouting 38 Typography Pitfalls 50 MOBILE 75
Prepared. For Life.® Trademark 13 Position and Identity 39 DIGITAL COLOR PALETTES 51 Interface Design 76
Preparados para el futuro. ®
14 Primary Boy Scouts of America Colors 52 Using Icons in Apps 77
15
BSA Extensions 53
Trademark and Logo Protection Secondary Boy Scouts of America Colors Mobile Best Practices 78
BSA Corporate Fonts 17 BSA Extensions Brand Positioning 41 Cub Scouting 54 Resources 79
PHOTOGRAPHY 18 Council, Group, Department, and Team Designation 42 Scouts BSA 55 Real-World Example: BSA Camp Registration App 80
Photography 19 Venturing 56 EMAIL 81
Living Imagery 20 Sea Scouting 57 HTML Email 82
Doing Imagery 21 Choosing the Correct Color Palette 58 Email Signatures 83
Best Practices 22 IMAGERY 59 Email Best Practices 84
Image Pitfalls 23 Texture 60 ONLINE ADVERTISING 85
Resources 24 Icons 61 A Better Banner 86
REAL-WORLD EXAMPLES 25 CONTENT 62 Online Advertising Best Practices 87
Stationery and Signature 26 Tone and Voice 63 Real-World Examples 88
Signage 27 Tables and Charts 64 SOCIAL 89
Patches and Branded Products 28 LAYOUT AND DESIGN 65 Social Considerations & Standards 90
Uniforms 29 The Basic Recipe 66 Branding Social Sites 91
Presentations 30 The Overlay Effect 67 Share Images 92
The Diagonal 68 VIDEO 93
Cinematography 94
Title Cards 95
Music 96
BSA Brand Guidelines Real-World Examples 97
Introduction
Consider this your compass to the Boy Scouts of
America brand.
Let’s set a course for success. Together we’ll find the best path
to maintaining the Boy Scouts of America® brand. For more
than 100 years, Scouting has been a symbol of adventure,
excitement, and achievement. Providing once-in-a-lifetime
experiences that prepare the next generation of boys and
girls for a lifetime of opportunity is serious business that
couldn’t be more fun.
In that same spirit, we present to the world a unified look and feel in our brand “uniform.”
If we follow these guidelines, parents whose Scouts pick up a flier or visit one of our websites will know they can trust it when they see its distinctive color palette. Scouts will know exactly which
button to press when they want to share a photo with a fellow Scout. Donors will see their money spent efficiently, and without waste.
High-Adventure Bases
The Boy Scouts of America corporate brand is used for those projects and
properties which concern Scouting as a whole, or multiple sub-brands. Some elements of the
corporate brand are inherited by the four main BSA sub-brands shown here. Order of the Arrow
• Boy Scouts of America Brand Promise: For people who care about what is happening to kids, Scouting is the fun,
exciting program that builds better young people.
• Unique Selling Proposition: Scouting’s programs and outdoor adventures prepare young people for
a lifetime of character and leadership.
• Boy Scouts of America Brand Mission: To prepare young people to make ethical and moral choices over their
lifetimes by instilling in them the values of the Scout Oath and Law.
Prepared. For Life.® is the culmination of the effort that goes into delivering on the brand promise, vision, and
mission. It embodies the fun experiences and life lessons that only Scouting provides. Most important, it conveys
the confidence, dedication, and passion each Scout discovers to lead a successful life.
• Timeless • Patriotic
Leadership: Scouting builds leaders. Former Scouts sit on the boards of global corporations, walk
• A unifying element that leads • Faithful the halls of the White House, and have been known to occasionally go hiking on the moon. The life
to strong ideas that can be lessons they learn in Scouting help them make good decisions throughout life.
If a Scout walked up to you on the street, these are
executed across
the words you would use to describe his appearance
the marketing mix Learning: Many Scouts achieve more before the age of 18 than some people do in a lifetime. Best of
and attitude. Not to mention the fact that he’d offer
all, they do it to not only improve themselves, but also their communities and country.
• Differentiation to help you across the intersection and show you the
• Staking out a unique path of least resistance to your destination. These are Service: There are many paths to follow in life. With the invaluable guidance of adult leaders,
territory among competitors the human qualities that will forever make Scouting Scouts are better prepared to enjoy their lifelong journey that leads them to personal success.
in which to operate truly unique among all youth organizations.
One Color Two Color Four Color (CMYK) Screen Usage Reversed
The gold fleur-
de-lis has been
retired and
should not
be used.
Black or any dark color may Red: PMS 186 Red: 0, 100, 81, 4 Red: #CE1126 White must be used.
be used. Blue: PMS 294 Blue: 100, 58, 0, 21 Blue: #003F87
The following are acceptable ways of reproducing the Boy Scouts of America corporate signature:
One Color Two Color Four Color (CMYK) Screen Usage Reversed Do not reproduce in a tint or screen.
Black or any dark color may Red: PMS 186 Red: 0, 100, 81, 4 Red: #CE1126 White must be used.
be used. Blue: PMS 294 Blue: 100, 58, 0, 21 Blue: #003F87
The activity graphic should always be anchored at the bottom of the page when used on letterhead, general stationery items, and business cards.
Acceptable Usage
Two-way graphic split: can be cropped to a piece of the folio Four-way graphic split: can be cropped to a piece of the folio Positive Reversed
graphic, but must run from side to side. graphic, but must run from side to side.
The Prepared. For Life.® tagline is available in three versions: stacked, horizontal, and text only. It should be placed on all
BSA communications, literature, and products.
Do not reproduce in Do not add effects,
The following are acceptable ways of reproducing the Prepared. For Life.® tagline: a tint or screen. including a drop shadow,
bevel, or glow.
Horizontal Lockup
Text Only
Black or any dark color may Red: PMS 186 Red: 0, 100, 81, 4 White must be used.
be used. Blue: PMS 294 Blue: 100, 58, 0, 21
Preparados para el futuro.® tagline is available in three versions: stacked, horizontal, and text only. It should be placed on
all Spanish-language BSA communications, literature, and products. Do not reproduce in Do not add effects,
a tint or screen. including a drop shadow,
The following are acceptable ways of reproducing the Prepared. For Life.® tagline: bevel, or glow.
Horizontal Lockup
Text Only
Black or any dark color may Red: PMS 186 Red: 0, 100, 81, 4 White must be used.
be used. Blue: PMS 294 Blue: 100, 58, 0, 21
An attribution statement must be placed at the bottom of any advertisement or poster that clearly indentifies
trademarks or design marks of the Boy Scouts of America. This might read as follows: “BE PREPARED is a registered
trademark of the Boy Scouts of America.” For additional guidance, visit www.scouting.org/licensing.
If you have any questions concerning correct trademark usage, please contact Brand Management at the National
Council for further guidance.
DO DO DO DO
Use candid, authentic Showcase Scouting’s Use imagery that Use interesting
imagery. diversity in age, makes Scouting look camera angles and
gender, and race. fun and interesting. cropping for effect.
Staged photos and Dated or historical Photos without a clear Clichéd stock
AVOID forced smiles. AVOID scouting imagery. AVOID focal point. AVOID photography.
BOY SCOUTS
OF AMERICA
COUNCIL NAME HERE
First Last
Corporate Title
P 972.580.0000
C 972.580.0000
F 972.580.1000
first.last@scouting.org
Address 1
Address 2
City, State, Zip
www.URL.org
First Last
Corporate Title Line
P 972.580.0000 Address 1
C 972.580.0000 Address 2
F 972.580.1000 City, State, Zip
www.scouting.org first.last@scouting.org
E-Signature
Envelope
When it comes to standing out in a crowd, sometimes less Location and building signs should use approved fonts and Office signage follows the guidelines set forth in the Brand
truly is more. Keep signage simple by using approved brand colors, and the Boy Scouts of America corporate signature. Identity Guide for Building Signage.
identity elements, fonts, and photography. The Prepared. For Signs may be matte-finished in approved colors or rendered
Life.® trademark and Boy Scouts of America signature should in metal or stone. The sign should include the name of the
be used appropriately to strengthen the message and brand. building or facility and the Boy Scouts of America corporate
PMS 294 blue
trademark, separated by a vertical line or stacked.
Welcome to
Medicine
YOUR COUNCIL NAME HERE
Mountain
Scout Ranch
Council patches. Patrol emblems. Merit badges. While Scouting insignia seems countless, there is only one method
for approved manufacturing. The Boy Scouts of America requires that all patches be manufactured by the Supply
Group or an official Boy Scouts of America licensee.
The Boy Scouts of America reviews each request for embroidered use of all brand trademarks as submitted by
its licensees. Licensees will facilitate all authorizations with the Boy Scouts of America. Any trademark that is
used on a patch not created by the Supply Group or an official Boy Scouts of America licensee is considered an
unauthorized use of the BSA’s trademarks. For more information, visit www.scouting.org/licensing.
Branded Products
Any use of the Boy Scouts of America’s trademarks by any third party on any product, including patches, pins,
and T-shirts, requires that the manufacturer of these products be licensed by the Boy Scouts of America National
Council. For more information, visit www.scouting.org/licensing.
For detailed information on proper uniform wear and placement of badges and
insignia, consult the Guide to Awards and Insignia. Also, visit the official BSA
uniform website for an interactive source for uniform essentials.
The Boy Scouts of America uniforms and insignia are considered proprietary by
the organization and unauthorized use is prohibited.
Presentations
By its nature, Scouting is fun, bold, thrilling, daring,
and adventurous. PowerPoint is not. That’s why it’s
important to make every effort to capture the exciting
brand personality in your public presentations. Follow
these guidelines when creating dynamic presentations:
• The Boy Scouts of America corporate signature and Prepared. For Life.® tagline should appear on each
screen of the presentation.
• Both elements should be no less than 10 percent of the screen height and may appear either over white or
reversed on a black or a dark background.
• The signature and tagline should appear in approved colors and not be screened back or distorted.
• To avoid confusion, other logos or brand elements should not be mixed with the signature or tagline.
• Large-screen, high-definition (16x9) templates, shown at right, are available in addition to standard format.
Large-screen format
These are invaluable experiences that can be had in Scouting. These are
life lessons that transform today’s youth into tomorrow’s leaders.
Brand Platform
Identity
The Boy Scouts of America universal emblem is generally used to indicate the Scouts BSA program and
may be licensed for use on products or services for boys and girls ages 11–17. It consists of a fleur-de-lis
with eagle, shield with 13 stars and stripes, and two five-pointed stars, and is presented in a three- Do not reproduce in a Do not truncate.
The Universal Emblem Trademark
dimensional format. The ® registration mark should appear at the lower right corner of the trademark. tint or screen.
The following are acceptable ways of reproducing the Scouts BSA program trademark:
One Color Spot Color Four Color (CMYK) Screen Usage Reversed
Black or any dark color may Yellow: PMS 116 Yellow: 0, 20, 100, 0 Yellow: #FFCC00 White must be used.
be used. Brown: PMS 463 Brown: 50, 80, 100, 30 Brown: #996633
Blue: PMS 294 Blue: 100, 58, 0, 21 Blue: #003F87
Red: PMS 186 Red: 0, 100, 81, 4 Red: #CE1126
Brand Platform
Identity
Consisting of the Wolf, the words “Cub Scouts,” and a fleur-de-lis, the emblem represents the Cub Scout CUB
B SCOUTS
OU
UTS
UTS
helping the pack go and the pack helping the Cub Scout grow. ®
Do not reproduce in a Do not alter the
tint or screen. signature in any way,
The following are acceptable ways of reproducing the Cub Scouting program trademark: including changing
the typeface
or colors.
One Color Spot Color Four Color (CMYK) Screen Usage Reversed
Do not add effects, Do not use the Wolf
including a drop element outside
shadow, bevel, or glow. of the approved
trademark.
® ® ® ®
Black or any dark color may Blue: PMS 294 Blue: 100, 48, 0, 44 Blue: #003F87 White must be used.
be used. Yellow: PMS 116 Yellow: 0, 10, 100, 0 Yellow: #FCD116
Every person playing their role. No one more important than their
partners. No challenge achievable without cooperation. These
are invaluable experiences that can be had in Scouting. These
are life lessons that transform today’s Venturers into tomorrow’s
responsible adults.
Brand Platform
Identity
• Trademark: Consisting of a snow-capped mountain, crossbar, and “V” on a field of green,
the emblem represents the challenges and achievements experienced in Venturing. The ®
Do not reproduce in a Do not alter the signature
registration mark should appear at the lower right corner of the trademark. tint or screen. in any way, including
changing the typeface
• Signature: The space between the elements should not be modified, and the ® registration mark or colors.
should always appear.
The following are acceptable ways of reproducing the Venturing program trademark:
One Color Spot Color Four Color (CMYK) Screen Usage Reversed Do not add effects,
including a drop shadow, Do not reproduce
bevel, or glow. in color on a
dark background.
Black or any dark color may Green: PMS 349 Green: 100, 0, 90, 40 Green: #006B3F White must be used.
be used. Yellow: PMS 116 Yellow: 0, 10, 100, 0 Yellow: #FCD116
Brand Platform
Identity
This trademark is used to represent Sea Scouting. The trademark consists of a blue anchor, a gold fleur-de-lis with
eagle, shield with 13 stars and stripes, and two five-pointed stars. It is represented in a three-dimensional format.
Do not reproduce in a Do not alter the signature
The registration mark should appear at the lower right corner of the trademark. The following are acceptable ways tint or screen. in any way, including
of reproducing the Sea Scouting trademark: changing the typeface
or colors.
One Color Spot Color Four Color (CMYK) Screen Usage Reversed
Black or any dark color may Blue: PMS 294 Black: 0, 0, 0, 100 Black: 0, 0, 0 White must be used.
be used. Red: PMS 186 Dark Brown: 0, 61, 100, 3 Dark Brown: 51, 0, 0
Light Brown: 0, 21, 38, 34 Light Brown: 179, 148, 117
Dark Blue: 100, 72, 27, 33 Dark Blue: 0, 51, 102
Light Blue: 34, 17, 0, 7 Light Blue: 154, 179, 213
Dark Gold: 0, 33, 98, 36 Dark Gold: 153, 102, 0
Gold: 0, 26, 98, 16 Gold: 204, 153, 0
Dark Yellow: 0, 25, 100, 100 Dark Yellow: 255, 204, 0
Light Yellow: 0, 14, 75, 3 Light Yellow: 255, 204, 102
Red: 0, 100, 100, 50 Red: 154, 0, 0
The National Scouting Museum is committed to preserving the Scouting’s national honor society recognizes Scouts and Scouters who
rich, 100-plus-year history of the Scouting movement by collecting, exemplify the Scout Oath and Law in their daily lives and provide
organizing, preserving, and displaying some of Scouting’s greatest encouragement for others to live these ideals as well.
treasures.
Mission
Mission The mission of the Order of the Arrow is to fulfill its purpose as an
To preserve the legacy of Scouting and promote the movement to future integral part of the Boy Scouts of America through positive youth
generations. leadership under the guidance of selected capable adults.
Making our country better Develop leaders with the willingness, character, spirit,
and ability to advance the activities of their units, our
Brand Personality Brotherhood, Scouting, and ultimately our nation.
Legacy, historical, whimsical, fun
Brand Personality
choices over their lifetimes by instilling in them To do my duty to God and my country
and to obey the Scout Law;
the values of the Scout Oath and Law. To help other people at all times;
To keep myself physically strong,
The work we create should follow the spirit of mentally awake, and morally straight.
these values.
Scout Law
While taking this oath the scout will stand, holding his
right hand raised level with his shoulder, palm to the
A Scout is: Digital Implication
front, thumb resting on the nail of the digitus minimus
(little finger) and the other three fingers upright, pointing
Trustworthy Privacy, personal safety, and data security matter. upwards: This is the scout’s salute.”
Loyal Scouts support each other. Be sensitive to those whose abilities differ. — From the original 1908 Scouting for Boys
by Robert Baden-Powell.
Helpful Create projects that are useful.
Friendly Use open, everyday language and imagery to communicate.
Courteous Respect others’ time with simple, intuitive processes.
Kind Remember the Golden Rule: treat others as you would like to be treated.
Obedient Follow guidelines set by the BSA. They exist for the benefit of all.
Cheerful Stay positive. Be constructive, patient, and pleasant.
Thrifty Don’t reinvent the wheel — use design and software that exist.
Brave Do the right thing, even when it’s hard.
Clean Keep it simple. Avoid clutter in language, design, and features.
Reverent Acknowledge and respect the viewpoints of others.
To better ensure security and privacy, all councils should follow these guidelines: Honesty is one of the BSA’s trademarks. Do not plagiarize or use copyrighted material.
• Council websites must be hosted off-site at a hosting facility and may not be connected in
any way to the local council’s network. Safety is paramount within Scouting. When identifying youth members on your website, use first
name and last initial only. Don’t provide too much identifiable information.
• The council must have direct control over the content of its website.
• The content of the council site must be appropriate for Scouting. YouTube videos provide a great way to increase the interest on your site. When embedding videos,
do not show related content after the video. The related videos are determined by a YouTube
• The council site cannot contain links to any sites that may contain material deemed
algorithm that takes control out of council hands.
inappropriate for Scouting.
Secondary Items
Use the primary or secondary font at medium sizes
(24–32px) for items within a section (H3). Titles can be a
word or two longer, and should be descriptive. Avoid
all-caps treatments. When relevant, use imperatives such
as “Sign Up for Xxxx” or “Camp at Xxxx This Summer.”
Body Text
Use the tertiary font at small sizes (9–12px) for body
copy (p). Remember to use plain, everyday language,
short paragraphs, and lots of bulleted lists to make the
text scannable and easy to read.
A U G U S T 1 — 3 1, 2 0 1 7 • B O O N E , I O WA CANOE CANOE
Adelle Regular
Adelle Bold, 38 pt.
Alternate Gothic No. 1
Alternate Gothic No. 2, .100 em
DO DO DO
Mix typefaces to Use font size and weight to Use capitalization to emphasize important words.
create interest. emphasize important messages. Pair type with icons for greater impact.
RGB:
The Boy Scouts of America corporate
206, 17, 38
button gray.
HEX: #D6CEBD
These five colors may be used by any of the sub-brands, especially the red
White
and blue colors, whose use throughout will serve to unify disparate brands.
HEX: #FFFFFF
palette, are also available and can be used RGB: 0, 51, 102
Scouting Blue
HEX: #003F87
On the web, projects specific to Scouts BSA should use a similarly RGB: 214, 206, 189
neutral palette composed mainly of tan, gray, and olive hues, with
color coming in with the use of imagery and illustrations.
Scouting Red
Scouting Red should be used as an accent or action color.
HEX: #CE1126
The BSA corporate palette may be used in a limited way, with blue,
yellow, and tan reserved for BSA required elements such as footers. Venturing Green
HEX: #006B3F
The BSA corporate gray hues pair well with Venturing Green and RGB: 0, 107, 63
Yellow; white is an important part of all BSA palettes.
Venturing Yellow
HEX: #FCD116
The tan and red of the BSA corporate palette should be used only Scouting Dark Blue
in a limited fashion. HEX: #FFCC00
With five brands working together, choosing the correct color palette for your
LINK Is the project for
project can be somewhat confusing. Use the chart below to make your decision. Scouts BSA ONLY?
No.
LINK
As a rule, avoid creating original icons. Instead, use approved Boy Scouts of America icons
(e.g., the fleur-de-lis as an app icon).
You may use universally recognized third-party social media icons (make sure you comply with
the license holder’s terms of service).
You may use icons in the development of mobile apps, but try to leverage icons already created for
app developers by software manufacturers, rather than sourcing or creating your own. Reference
the mobile apps section in this document for more information.
The National Sea Scout Support Committee is pleased to introduce the New Century
Universal Sea Scout Uniform (“NCUSSU”). The NCUSSU is an alternate uniform to
the current adult and youth dress and work uniforms. It is intended to make it easy
“A Scout is trustworthy….” With this phrase, for members of newly formed Sea Scout ships to outfit themselves in a Sea Scout
uniform and may be chosen by any unit, new or existing. When chosen by the unit,
millions of Scouts over the decades have begun this universal uniform is worn by all youth and adult ship members and may serve
as both a dress uniform and a work uniform. The New Century Universal Sea Scout
their oath. “Friendly, courteous ...” Uniform will be included in the next edition of the Sea Scout Manual, No. 33239.
These are powerful words that govern the way we speak when we speak for Scouting—and
whether we like it or not, when we speak, we do speak for all Scouting, especially in today’s internet- AFTER
enabled world.
New Sea Scout Uniform Available Now
• Be direct. Web readers tend to be task-oriented—they are looking for specific information, The uniform combines dress and work uniforms in one, making it easier for
and they want it quickly. Use active, not passive, voice. members of newly formed Sea Scout ships to get started in sailing.
• Be succinct. Attention spans are shorter online. Use short paragraphs of no more than Dubbed the “New Century Universal Sea Scout Uniform,” or “New Century
three–five sentences. Keep word counts to 250 words per page or less. Uniform,” the new uniform is:
• K.I.S.S. Acronyms and technical terms may be second-nature to you, but a new Scout or • Designed for youth and adult ship members
prospective parent won’t necessarily understand insider language. Keep it simple, Scout. • Both a dress and work uniform
• An alternate to the current uniform
• Write for “scanners.” People tend to scan digital screens, rather than pore over every • Suitable for all units, new or existing
word. Use bulleted lists, short headlines, and relevant imagery to provide quick entry
points to content. The new uniform was produced by the National Sea Scout Support Committee. For
more information, consult the newest edition of the Sea Scout Manual (No. 33239).
15%
Caramel
50% BSA Popcorn Sales
Tables and Charts 30%
Cheese by Flavor
Source: 2015 Sales Data
Butter
UNITS SOLD
Panther: $1532 32 buckets PATROL SALES ($) BUCKETS OZ.
4. Use plenty of whitespace. Give your content and images some breathing
room — there’s a reason art galleries have white walls.
5. Use color to enhance the content. Choose the appropriate color palette (Cub
Scouting palette is being used in the example). Use the accent color with
restraint so it retains its power of attraction.
The overlay color is determined by the brand color palette being used. In this case, a AFTER 1: The image at left was converted to black and white, and both images received a “multiply” effect, allowing the blue
BSA Pale Blue is being used for a BSA-branded project. It can cover the entire image or background of the image container to show through. These images now have a consistent look. While somewhat less legible, they
just a portion of the image. are ideal for setting a mood as a background image in layout.
AFTER 2: A variant treatment leaves the left image in color, while the right image is black and white, but they now appear related
thanks to a common BSA Pale Blue color overlay effect used to de-emphasize the right side of both images, along with a highlight
multiply stripe of BSA Red. In this treatment, the right halves of both images could be overlaid with text or other content.
The Diagonal
Inspired by the distinctive angled pockets
on the front of BSA uniforms, the diagonal
VERTICAL DESCENDING: This layout has VERTICAL ASCENDING: This layout has
the diagonal descending from left to right. the diagonal ascending from left to right.
This is best used on the left side of the This is best used on full-width pages, as
overlay offers a more dynamic, active take page to draw the eye into the layout. the eye naturally reads from left to right.
72 DEGREES
Information
and describe those areas with
simple language that the end
user will understand.
Architecture
Include as few items in your
main navigation as possible –
no more than seven or eight.
Organizing a document
containing hundreds of
pages is no easy task —
in another medium, that
document might be called
a “book,” and an editor
would help organize and
maintain its contents.
When planning your website, spend time organizing
the site’s content — it will pay dividends as you write,
design, and build. Footer
Begin by creating an inventory of the content your
Important Documents may
site will need to house. Then, try to sort it into a few be promoted in “touts” in the
named “drawers.” Show it to someone who hasn’t been site’s footer, making them
visible on every page.
involved, and see if the drawer labels make sense.
These will become your site’s main sections, appearing
in navigation throughout the site. Footer links are usually a
replication of the main site menu,
but can also include additional
BSA Brand Guidelines links (e.g., a link to a privacy 70
policy, council website, etc.).
Responsive Design
Consumers today have many choices
when it comes to devices they use to
consume web content.
For website designers, it can be a challenge to design websites that ScoutingWorks.org works well on any
screen, as it was designed and built on
adjust to fit the unique dimensions and aspect ratios of each screen. a responsive grid layout.
Required
your website’s home page.
Descriptive ALT tags should
be present on every image.
This is especially important for
images that contain text.
Elements
The needs of every
website will be different,
depending on audience,
location, brands served,
and many other factors.
But a few universals do
apply.
Do your very best to Clear contact information
should appear somewhere on
include them in your web every page in your website. A
phone number and/or email
Venturing
But at the end of the day, it’s a colors sparingly. This Cub
Scouting app uses Cub
or decorations.
use clear language.
Choose one action
color and use it
throughout the app.
So too with a mobile app. Good apps are but one tool out of many on
a user’s device. Intuitive design and simple, singular functionality are Use design patterns from
best, especially when the app’s use is occasional or infrequent. the devices you are using
— no need to reinvent the
wheel. This is a standard iOS
Keep your interface design as close as possible to design conventions table view, enhanced with a
custom music icon.
the user will already be familiar with by nature of using other apps that
follow the same conventions (which are typically established by the
device’s manufacturer).
As stated earlier in this document, you should instead of using the standard iOS version,
it’s not hard to imagine the custom icon
generally avoid creating original icons in mobile looking an awful lot like the official
apps, since there is a high degree of likelihood Archery merit badge, causing potential
confusion for the user.
Leverage development work that’s already been done by the device Forget to test your app on many devices in different operating
manufacturer — use existing toolkits for mapping, interface, and other conditions. Not every user will have the latest hardware or fastest
common tasks, rather than developing your own versions. internet connection.
iOS (Apple) Human Interface Guidelines Android Design Patterns Design for Windows Runtime Apps
HTML Email
It should link to the sender’s the newsletter for those
home page — in this recipients who may have
example, it would link to trouble viewing the message
the troop’s website. on an older device.
Follow permission-based marketing best practices. Make sure the Use “spammy” words like “Free” or “Offer” too frequently. This can
recipient has actively opted in to your mailing list. result in your message being sent straight to a spam folder.
Use an invalid “reply-to” address. Make sure the email you use to
Test your HTML emails on multiple devices (computers, tablets, and
send from can receive email. And check that mailbox frequently.
phones) before sending to a large group.
Write too much. Keep your content short and to the point. Link to
Test your emails with images turned off. Make sure all images have
a website with more details if necessary.
clear and meaningful ALT tags included.
Send mail regularly. Regularly sent mail keeps your organization Send mail too frequently. If you have a lot of content to get out,
familiar to the recipient and helps keep your list up to date. consider a regular “digest” format sent on a regular schedule.
Use interesting imagery that meets BSA photography guidelines. Use complex or intricate imagery that takes more than a moment
Simple, easy-to-read images are best. to read. Avoid cliché stock imagery — it recedes and is off-brand.
Keep your message short and sweet, with straightforward copy that Use commercial phrases like “Free Shipping” or “Act Now” too
gets to the point quickly. Online ads are not a good venue for “clever.” frequently. It is OK to be direct and clear, but not intrusive.
Design your ad using BSA-approved colors and design conventions. Deviate from approved brand standards. Use BSA-approved
Online advertising is great for awareness and visibility, and we want to typefaces, color palettes, and design conventions.
present a uniform look and feel across our ads for maximum impact.
Despite its small size, this leaderboard attracts the eye with an
interesting image. Simple, clear words and high contrast get the
message across.
and family. color. See the following page for more tips on creating
shared images.
These Scouts are having a great time, and the composition is Vary the camera angle — not all the action is at eye level in the Create a more interesting video by cutting in “B-Roll,” detail
dynamic and interesting, with nice depth of field. The leftmost real world. A lower- or higher-than-usual angle creates visual footage that can add visual interest. An arrow going into a target
Scout, slightly out of focus, draws your eye from bottom left interest. Get creative — the camera can be handheld at a low is a nice way to follow a scene where we see a Scout letting an
to the middle Scout, who is in focus. A pan right would further vantage point for a casual look, or use a Steadicam to add a degree arrow fly. It’s much more interesting than seeing the same arrow
reinforce this natural motion. of polish. A drone can get a nice high-angle shot, but a ladder, hill, hit the target from far away, over the Scout’s shoulder.
or tree works just as well.
Running high-contrast type against a relatively Very large type on a very blurred background is A long hold on a more complex design element The most reliable way to include legible type
still background ensures that the type is legible another way to preserve legibility. Alternately, — in this case, the BSA logo — allows the viewer in your video is by setting it on a solid-color
while the story told by the imagery remains in consider a contrast-reducing color treatment to comprehend it without sacrificing image background. Black or white work well as a way
progress. In this example, the picture moves on the image (e.g., adjusting hue, contrast, or quality. Note the URL discreetly set on an area to close out a video. This treatment is especially
subtly (the man reeling in his line), while the saturation). Do not add drop shadows to text. of low interest (the boy’s solid-color shirt) in effective for complex logos or longer text.
type remains in place. the image, bottom right.
of traditional American blues, folk, and rock. percussion provided by an unseen group of polyrhythmic
hand-clappers, giving this vibrant song a modern folk feel.
Cub Scouting, “Do Your Best. Have Fun Doing It.” Venturing, “Build an Adventure” Scouts BSA, “Rocketman”
Energetic, big type and quick cuts combine in an interesting Widely varied camera angles, focal settings, and film speeds Slow motion and a myriad of interesting camera angles create
and engaging overview of Cub Scouting. make a visually interesting story that captures the experience a cinematic and dramatic snapshot of a day in the life of a
of Venturing on screen. Scout, and where that path eventually may lead.
takes alone. Please reach out if you need assistance or have ideas for 1325 W. Walnut Hill Lane
Irving, TX 75038
improvement. Millions of young people thank you in advance. Karen.Rash@scouting.org