Slash Media Style Guide 2015
-
Upload
gigi-gastevich -
Category
Documents
-
view
219 -
download
1
description
Transcript of Slash Media Style Guide 2015
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 CODENSEDSubheadings: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 [email protected].
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 [email protected].
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.