Social Video Styleguide by Peter Guasace

Local Social Styleguide

1.0 Logo

4.0 Video

5.0 Static

2.0 Color

Type Use 4.1 Header & Subhead 4.2 Name & Title 4.3 Setting 4.4 Text Boxes 4.5 Captions & Legal Templates 4.7 Intro 4.7 Name, Title, Captions 4.8 Setting 4.9 Text Boxes 4.10 Captions & Legal 4.11 CTA 4.11 Outro

Type Use 5.1 Margin 5.2 5.3 Setting Templates 5.2 Name & Title 5.3 Setting 5.1 Overlay Text

2.1 Local Palette

3.0 Graphics 3.1 Local Maps 3.2 Linear Elements

6.0 Best Practices 6.1 Video 6.2 Static

Logo 1.0

Primary Logo

Secondary Logo

Abreviation

Intro - Logo Is either the Primary or Secondary logo without an endorsement, depedning on the length of the publication. When the Secondary is required make sure the last line sits on the logo baseline.

Outro - Logo In video the primary logo will only have an endorsement in the utro animation. This is subject to change depending on the latest template that is developed. Secondary is required make sure the last line sits on the logo baseline for outro.

Bug - Logo The bug will never have an endorsemnt and depending on the name of the publicatoin it will either be primary, secondary or abreivated. The bug will always be core white at 70% opacity. It will be flush right and aligned to the right margin or the templates.

Logo

The only time that the endorsement will be included is in the outro animation for video. The endorsement will never be seen in static.

Color 2.0

90%

80%

70%

60%

50%

40%

30%

20%

10%

HEX# 404040 R 64 G 64 B 64

Color

HEX# ffffff R 255 G 255 B 255

Local markets will utilize the core gray and standard white as their primary palette with the core blue used only as an accent. The core gray opacity can be changed to create more tone and variation. Change the opacity by increments of 10.

HEX# 009BFF R0 G 155 B 225

Our Core Blue unifies the local, national, and network brands. The Core Gray adds a strong pairing that is especially sophisticated in digital formats. Local brands should adhere to the use of the Core Blue and Core Gray colors, tints and accents. For branded materials, copy should be Core Gray, rather than black, whenever possible.

Graphics 3.0

Gray

Blue

White

Dont

1. Don’t Stretch

Line

Plus

2. Don’t Change Color

Corner

3. Don’t Change Opacity Circle

Linear Elements

In static posts or animated, they help to reinforce the tone of the content. In the instance of news, one particular design expresses the informative and unbiased function that news embodies, by being stripped of frills or folly. In contrast, these elements can be used to capture a wide range of expression, such as diagonal movement symbolizing energy for sports.

How To Use These elements can be scaled up or down and rotated however you feel is appropriate, as long as the color is one of the three approved colors, the opacity is 100%, and they aren’t stretched.

03 02

Map Texture

These local maps are one of the most recognizable images of our local communities. These location specific map textures helps audiences relate and connect with our content.

Each set of local maps are available in three colors from the local palette listed here by preference: 01. White 02. Core Blue 03. Core Gray

Static 4.0

120 px

Logo Baseline

Static Graphics Grid

Elements such as text and logos, in a static post, shall be contained withing the 120px all-around marning

Linear Elements

Linear elements such as these seen above can be used to frame ones content whatever these might be, images, quotes, etc.

Headline the maximum size of text on static posts is 60 pt. For headlines consider using as few lines as possible.

Text the maxium amount of text on static posts is four lines, the minimum is one. Adjust the text point size accoring to your copy, and haev on mind that the less lines, the better.

Minimum text size Logo should always seat on the logo baseline, aligned to the text on screen

Text Use Unify Sans and for the most part in set in sentence case. Use all caps sparingly

Type

Logo placement Logo should always seat on the logo baseline, aligned to the text on screen

Static posts use mainly Unify semibold, different from video which uses

Long Pull quote

Short Pull quote

Event

Breaking News

Type

Pull quote + Image

Inforgraphic

Video 4.0

Intro (2-3 Sec)

Video Segment (2-15 Min)

Media Kit: Intro_Template

Color

Footage

Outro (2-3 Sec)

Media Kit: Outro_Template

Exclusive

Inside the municipal court cash machine

Type Use Header & Subhead

Header is used to explain what the video is covering. It should be as short as possible. It should always be sentence case and should never exceed 38 characters.

Subhead Unify Sans Regular 60 pt size, 80 pt leading

Header Unify Sans Bold 90 pt size, 94 pt leading

Subhead is used as a general description. It should be used to describe the type of content i.e. exclusive, breaking. It should always be sentence case and should never exceed 38 characters.

Name Unify Sans Bold 50 pt size, 45 pt leading

Padding 30 px

BRIAN TIERCE Padding 30 px

Inmate Padding 30 px

Type Use Name & Title

Padding 30 px

Title Unify Sans Bold 40 pt size,35 pt leading

Name and Title can be anywhere on the Y axis as long as it is aligned to either the left or right margin. The placement of it will vary depending on the content and should be placed in a location for best legibility. Name are always uppercase and the title is always sentence case.

Template Margin 1920x1080 has a 120 px margin on both sides 1080x1080 has a 70px margin on both sides

Padding 30 px

Florence, AZ Padding 30 px

Type Use Setting

Location, Date, Time Unify Sans Bold 40 pt size, 35 pt leading

Padding 30 px

March 4, 2017

Padding 30 px

Setting is the location, date, or time of the footage. It can be anywhere on the Y axis as long as it is aligned to either the left or right margin.

Location, Date, Time Unify Sans Bold 40 pt size, 35 pt leading

Location is always sentence case Date should follow the month, day, year order ex. (March 4,2017) Time is based on the 12-hour notation with suffix (a.m. and p.m.) written in all caps with no periods. ex(7:00 PM).

Padding 30 px

Padding 30 px Padding 30 px

Padding 30 px

Around 150 horses a year are

Padding 30 px Padding 30 px

adopted from the Florence Prison Wild Horse Inmate Program Padding 30 px Padding 30 px

Type Use Overlay Text

Overlay text Unify Sans Bold 75 pt size, 120 pt leading

Overlay Text is used whenever captions are not and will help narrate the story. It can be anywhere on the Y axis as long as it is aligned to either the left or right margin. The placement of it will vary depending on the content and should be placed in a location for best legibility. It should always be sentence case and should never exceed 85 characters.

Padding 30 px

Padding 30 px Padding 30 px

Type Use Captions & Legal

Captions are used whenever an individual is speaking. It can live anywhere on the Y axis as long as it is aligned to either the left or right margin.

When To Add In contrast, these elements can be used to capture a wide range of expression, such as diagonal movement symbolizing energy for sports content.(FPO)

Bug Baseline 88px from Top

Legal Disclaimer Baseline 60px from the left

Padding 70 px

Bug Baseline Max Height: Padding 90 px

Outro Logo Baseline 60px from the left

Intro Logo Baseline 60px from the left

Bug Baseline Max Height:

1080X1080

1920X1080 Padding 120 px

Facebook Media Player Youtube Media Player

Padding 120 px

Video Graphics Grid

Margins are used for alignment. All of our elements align to it.

Padding 90 px

Facebook Media Player

Padding 70 px

Padding 120 px

Padding 70 px

Padding 90 px

Padding 120 px

Logo Baseline 237 px from Top

Legal Disclaimer Baseline 60px from the left

Logo and Title Baseline 235px from Bottom

Title Baseline 196 px from Bottom Padding 120 px

Facebook Media Player Youtube Media Player

Map Background 120 px

Video Graphics Intro

Padding 120 px

Padding 90 px

Facebook Media Player

Padding 190 px

Padding 70 px

Padding 120 px

Bug Baseline 88px from Top

Padding 120 px

Padding 90 px

Legal Disclaimer Baseline 60px from the left

Legal Disclaimer Baseline 35px from the left

Name & Title 540 px from Bottom

Captions Max Height 217px from Bottom

Captions Max Height 188px from Bottom Padding 120 px

Facebook Media Player Youtube Media Player

Map Background 120 px

Bug Baseline 70px from Top

Padding 70 px

Video Graphics Name & Title, Captions

Padding 120 px

Padding 90 px

Facebook Media Player

Padding 70 px

Padding 120 px

Padding 90 px

Padding 120 px

Legal Disclaimer Baseline 60px from the left

Legal Disclaimer Baseline 35px from the left

Location 540 px from Bottom

Padding 120 px

Facebook Media Player Youtube Media Player

Padding 120 px

Bug Baseline 70px from Top

Padding 70 px

Bug Baseline 88px from Top

Video Graphics Setting

Padding 90 px

Facebook Media Player

Padding 70 px

Padding 120 px

Padding 90 px

Padding 120 px

Legal Disclaimer Baseline 60px from the left

Legal Disclaimer Baseline 35px from the left

Overlay Text (Center, aligned left) 540 px from Bottom

(Center, aligned left) 540 px from Bottom

Padding 120 px

Facebook Media Player Youtube Media Player

Padding 120 px

Bug Baseline 70px from Top

Padding 70 px

Bug Baseline 88px from Top

Video Graphics Text Boxes

Padding 90 px

Facebook Media Player

Padding 70 px

Padding 120 px

Padding 90 px

Padding 120 px

Legal Disclaimer Baseline 60px from the left

Legal Disclaimer Baseline 35px from the left

Overlay Text (Center, aligned left) 540 px from Bottom

(Center, aligned left) 540 px from Bottom

Padding 120 px

Facebook Media Player Youtube Media Player

Padding 120 px

Bug Baseline 70px from Top

Padding 70 px

Bug Baseline 88px from Top

Video Graphics Captions & Disclaimer

Padding 90 px

Facebook Media Player

Padding 70 px

Padding 120 px

Padding 90 px

Padding 120 px

CTA (Centered) 540 px from Bottom

(Centered) 540 px from Bottom

Padding 120 px

Facebook Media Player Youtube Media Player

Padding 120 px

Bug Baseline 70px from Top

Padding 70 px

Bug Baseline 88px from Top

Video Graphics CTA

Padding 90 px

Facebook Media Player

Padding 70 px

Padding 120 px

Padding 90 px

Padding 120 px

CTA (Centered) 540 px from Bottom

(Centered) 540 px from Bottom

Padding 120 px

Facebook Media Player Youtube Media Player

Padding 120 px

Bug Baseline 70px from Top

Padding 70 px

Bug Baseline 88px from Top

Video Graphics Outro

Padding 90 px

Facebook Media Player

Padding 70 px

Curration 4.0

Cover Photo 820x360 px Local logo centered on white local map texture Profile Avatar Local Badge 170x170 px Keep 23 px of clear space between blue dot of the badge and the edges

Profile Curration

Best Practices 4.0

Facebook: • Maximum time 45 minutes • 1 Gigabyte • 1080 x 1080 or 1920 x 1080 • Options to add captions

YouTube: • Maximum time 15 minutes • Can request more time • 1920 x 1080 • Option to add captions

Twitter: • Maximum file size is 512MB • You can record up to 2 minutes and 20 seconds

Instagram: • Maximum time 60 seconds • 1080 x 1080 • Manually add captions

1920x1080

Social Practices

Size guide: 1080 x 1080:

• Instagram and Facebook 1920 x 1080:

• Facebook, YouTube, and Twitter

Facebook: • Maximum time 45 minutes • 1Gigabyte • 1080 x 1080 or 1920 x 1080 • Options to add caption

1080x1080

Subtitles/Captions:

Short-form: Stories under a minute • Manually add captions Long-form: Stories over 2 minutes • Upload to either Facebook, YouTube, or Twitter • Above platforms provide options for adding captions

Suggestion: Build out videos for Square format, 1080x1080. Keep videos under a minute, and add captions in manually. Any video that exceeds 3 minutes, post it to Facebook and Youtube, use their built in caption tool. In adition create a snippet video that is under a minute that directs them to view it.

General Just like tagging a photo, you’re able to tag accounts on Instagram and Facebook. Simply type @ and the account’s handle to tag your posts. Curate your content, be sure to post well composed photos, well lit images.

Facebook Facebook automatically resize and format your photos when you upload them. To help make sure your photos appear in the highest possible quality, try these tips: • Resize your photo to one of the following supported sizes: Regular photos: 720px, 960px or 2048px wide Cover photos: 851px by 315px • To avoid compression when you upload your cover photo, make sure the file size is less than 100KB • Save your image as a JPEG with an sRGB color profile • You can also changes your settings so that your photos are uploaded in HD by default.

Instagram

Facebook: • 720px, 960px or 2048px wide • add caption and tags mannually • Keep file size less than 100KB

Instagram: • Size 1080px by 1080px and a resolution of 1 44 Pixel/inch • Manually add captions and tag images when necessary

When you share a photo on Instagram, regardless of whether you’re using Instagram for iOS or Android, we make sure to upload it at the best quality resolution possible (up to a width of 1080 pixels). • Download the most recent version of the Instagram app. • Upload a photo with a width of at least 1080 pixels with an aspect ratio between 1.91:1 and 4:5. • Make sure you’re using a phone with a high-quality camera as different phones have cameras of varying qualities.

Best Social Practices

1080x1080

It’s best practice to upload photos and video natively to each social platform. Though at times sharing content from your Instagram to Facebook and/or Youtube can be a great way to cross promote your platforms. Nowadays services have great In tagram and Facebook integrations, by sharing you let your followers know where to find more of our content

1080x1080