SLASH MEDIASTYLE GUIDE 2015

WHO WE ARE

Slash Media is the voice of USC’s Annenberg School of Journalism.

We are a digital multimedia publication by millenials, for millenials.

We push past the outdated traditions of print media into the next frontiers of online and mobile storytelling.

Slash journalists think different, dig deep and confront the issues other news publications on campus (ahem) shy away from.

We’re fresh-faced, smart and unafraid to say what’s on our mind.

DESIGN MANTRA TONE OF VOICE

Hey, we’re not the DT. We like it when our writers break step. Slash is a sea of diverse (and sometimes contradictory) voices – you do you.

Just ‘do you’ within the AP Style rules, unless you have a damn good reason not to. After all, rules are meant to be tested.

Slash Media is smart, zingy and rebellious. A ‘slash,’ if you will, through traditional journalism design.

OUR LOGOS

MEDIASLAS

This is our main logo. It is the cornerstone of our identity. Therefore, we feature it on our cornerstone “products” - our web-site, Facebook and Twitter, for instance, as well as any special reports and important messages we sent out into the world.

It is also the most buttoned-up of all our logos. If what you’re designing is something that actual professionals will be look-ing at - like a resume, business card or letterhead - use this one.

/The slashed “S” and slash mark circle symbols are shorthand for the main logo. Use them where the main logo won’t fit - an Instagram profile photo, for example - as well as on our more casual products, like social media images and t-shirts. It works great as a “stamp” on photos and graphics to mark them as ours.

The mini-logo is a middle ground between the main logo and the circle symbol. Use it if you’re not sure the circle symbol works on its own, or if you need something more chill than the main logo.

For audiences that are familiar with Slash Media already, the circle symbol is usually enough. If your audience is less familiar with Slash, use the main logo.

(Unless you’re going for an element of “Ooh, what’s that?” mystery; the circle alone can be a great “teaser”).

SLAS/

USING THE LOGOS

MEDIASLAS

H

H

H

H

The circle creates a sacred rectangle of blank space around our main logo. Don’t put anything within an H-space of it.

The Slash circle symbol is always one color from our designated color palette plus black, white or grey. Never put two colors in direct contact.

X Combining colorsX Black and purpleX Grey and blackX Anything but black on whiteX Inconsistent use of “S” and “/” together

// /

/

1 2

3

5 6

4

1-2

3

4

5

6

X

ENTS/

SPORTS/ARTS/SOUTH LA/

NEWS/

OPINION/

SLAS/

The mini-logo also comes in a flavor for each section of the publication. Use these on section-specific things.

COLORS AND TYPEFACES

Headings:

Pistilli Regular*FRANKLIN GOTHIC CONDENSEDSubheadings:ITC Franklin Gothic MediumITC Franklin Gothic Book Condensed

Body text:Century

black#000000

charcoal#323232

lime #ceff00

purple #542d8c

orchid #8f00d5

*Use Pistilli sparingly. One- to three-word headlines.

Remember, never put two colors in direct contact.

PHOTO USAGE

Is the picture dynamic? Does it show the most important moment of whatever event you’re covering?

X

Is the picture crisp, well-lit and high contrast?

X

Does your picture immerse the reader in the scene?

X

Is the picture helping you tell the story, or just filling space on the page?

X

WHAT WE DON’T USE

X Images with no clear focal point

X Images from the “I’m too shy/lazy to get up in the action and get a good angle” angle

X Terrible generic stock photography

X Pictures the PR rep gave us

X Logos and anything pixelated/blurry

ILLUSTRATIONS:INSPIRED BY THE NEW YORK TIMES

If you don’t have any actual photography of what you’re talking about, i t’s far better to use a custom illustration than a stock photo. Same rules apply for illustrations as for photos: make sure they’re high-quality , high-contrast images.

If you scan your illustration in, doctor it up in Photoshop to remove paper ripples, darken pencil lines etc.

X Images are too muddy.

X Images lack strong black lines/forms .

X Images show paper smudges + ripples (can be removed in Photoshop).

X X

PUTTING IT ALL TOGETHER:THE PROJECT TAG

ELECTIONUPDATE

/

WHAT’S

WORKING

CULTURE FOR CHANGE

JUSTICE IN THE U.S./

You can make icons for special projects using circles and rectan-gles with the bottom right corner slashed off.

The angle on the slash is 45 degrees, and the slash should start halfway down the short side of the rectangle.

If the tag is going somewhere other than on our site or social media accounts, put in a small slash circle symbol 3/4 the size of the text at the bottom of a circle or at the left of a rectangle (centering the icon between the edge of the rectangle and the text).

15

Climate Change in California

LGBTQIN THEMEDIA

X Only use Franklin Gothic Condensed .

X Only put text on one line.

X Only use all-caps.

X Fit box snugly around text.

X Corner “chop” must be at 45 degrees.

X Only use one color + one neutral.

X Give text enough room to breathe inside the shape. Shape should be snug, but not suffocat-ing to the text.

1

2

1 2

X

PUTTING IT ALL TOGETHER:THE EVENT PROMO

BASICSWITH ALAN AND MARAL

Location: meeting room above the Media Lab

The Annenberg Digital Lounge Presents:

/Thursday, November 205 p.m.

Photo

Want to make your photos look 30 times better in 30 minutes? Beginner and wannabe photojournalists, this is the workshop for you. We’ll give easy tips for shooting with a DSLR camera and an iPhone.

Use a grid.

Use colors sparingly. Black, white, and shades of grey are your friends.

Give text, logos and images lots of breathing room.

Don’t make the logo too big.

Stick to the typefaces in this guide and use them only in a few sizes.

If you use a vector graphic, keep it simple and in the same color family as the rest of the compo-sition.

Location: meeting room above the Media Lab

The Annenberg Digital Lounge Presents:

/Thursday, November 205 p.m.

Photo

Want to make your photos look 30 times better in 30 minutes? Beginner and wannabe photojournalists, this is the workshop for you. We’ll give easy tips for shooting with a DSLR camera and an iPhone.

BASICSWITH ALAN AND MARAL

X Never put colorful text on a colorful background.

X Think carefully about hierarchy in the graphic. There are way too many things - the green text, the logo, the camera - all competing for the viewer’s eye here. There should be a clear order in which the elements in the graphic attract the viewer’s attention.

X Bright, light colors come forward. Dark, more dull colors recede. Pick colors with contrast-ing values and saturations so the graphic has multiple levels of depth.

X Don’t use bigger text or logos than necessary for the sake of using big text or logos.

X

WANTED: ONE EAGER AND IMPRESSIONABLE GRAPHIC DESIGNER

Send resumes to gastevic@usc.edu.

We’reHiring!

PUTTING IT ALL TOGETHER:THE SOCIAL MEDIA GRAPHIC

WANTED: ONE EAGER AND IMPRESSIONABLE GRAPHIC DESIGNER

WANTTO WORK

FOR SLASH?

We’ll pay you!

Send resumes to gastevic@usc.edu.

X Too much in Pistilli. Never use all caps in Pistilli.

X Never put anything on top of the logo.

X Give the logo room to breathe!

X Too many typefaces and sizes.X Content is too close to the bot-tom edge of the image.

X Haphazard, imbalanced struc-ture and alignment. Use a grid, dudebro.

X

Abbie Stellar / NT Flickr

HOW TO GETTHE MOST

OUT OFYOUR

COACHELLATICKET

ENTS/

PUTTING IT ALL TOGETHER:THE HEADLINE GRAPHIC

When using a photo, pick a pic-ture that isn’t too high-contrast and that you can easily place text over without covering up anything important (asymmetrical compo-sitions work well).

Consider layering a black 30-50% transparent rectangle over the photo to darken it so that the text is more readable.

When putting text over photos, always use a heavy weight type-face that’s easy to see on the photo ...and keep it simple.

Pinterest images should ALWAYS be vertical.

CoachellaHits And

Misses

X No landscape pictures.

X Picture is too high-contrast to act as a “background” to the text.

X Text color and background color are too similar to be readable.

X Text goes right over the import-ant part of the photo.

X All-centered text looks tacky. Easier to do right-and left-aligned text well.

X Always put our logo somewhere on the image so people know where it came from.

X

In more complicated graphics, us-ing the same green and purples over and over would be repetitive and boring. Plus, infographics are meant to be engaging over a long period of time, not brazenly attention-grabbing. Therefore, we have to be careful in our use of neon colors.

When you’re constructing a more complex composition and need more color variation, you can use a couple hues from this second-ary color palette.

Colors in more intricate graphics can also be used in combination with their tints and shades (but

only use the tine/shade when the original color is also present).

pool#2bbbdb

orange #ff7219

pink #f508f2

red #f5080c

aqua #8ffcfb

Includes the logo (tastefully).

Uses limited palette of black, white, shades of grey, colors from the key and secondary color palettes and their tints and shades.

Has a big, easy-to-read headline.

Has a nice sense of detail and depth without being overwhelming.

Gives shapes, graphics and type room to breathe - no crowding or tiny margins.

Uses as few typefaces, weights and sizes as possible to convey the information in a clear, hierarchical, compelling way.

Is aligned carefully and regularly, if not actually on a grid.

Reads top-to-bottom in clear vertical blocks (don’t only align sections left-to-right, also align them vertically).

Is clean, crisp and easy to read.

Ensures sufficient contrast between type and back-ground through color and weight.

A good infographic:

Infographic modeled off of this one from Fast Company:http://www.fastcompany.com/3035856/hit-the-ground-running/why-were-more-likely-to-remember-content-with-images-and-video-infogr

PUTTING IT ALL TOGETHER:THE INFOGRAPHIC

94%

20%

HERE’S THE IMPACT OF VISUAL CONTENT:

VISUALS ARE PROCESSED

CONTENT WITH VISUALS GETS

THE AVERAGE PERSON READS ONLY

ON A REGULAR WEBPAGE

MORE TOTAL VIEWS

NINETY

OFTEXT

PERCENTOF INFORMATION SENT

X FASTER THAN TEXT

TO THE BRAIN IS VISUAL

80% 20% 10%OF WHAT THEY OF WHAT THEY OF WHAT THEY

WE LIVE IN A

VISUALWORLD.

HERE’S THE IMPACT OF YOUR VISUAL CONTENT:

VISU

AL C

ONTE

NT

MORE LIKELY40 X IS NOW

MORE LIKELY TO BE SHARED ON SOCIAL NETWORKS

600000

WHAT PEOPLE RETAIN

SEE READ HEAR

SLAS/

HOW IT LOOKS ONLINE

FALL MARKETING CAMPAIGN

SLAS/

WE DON’THAVE ISSUES/

SLAS MEDIA/NOT THE DAILY TROJAN.

SONOT THEDAILYTROJAN

T-SHIRTS

WEDON’THAVEISSUES

BANNER FOR THE OUTSIDE WALL OF ANNENBERG

STICKERS STUCK AROUND CAMPUS

NOTECARDS/POSTERS

MAKE ASLASH

@SLASHMEDIA

JOIN THE REVOLUTION.@SLASHMEDIA

/SONOT THEDAILYTROJAN@SLASHMEDIA

COMEWRITEREALSTUFF@SLASHMEDIA/

JOIN THE REVOLUTION.@SLASHMEDIA

COMEWRITEREALSTUFF@SLASHMEDIA

Gigi Gastevich, 2015.