Design for Social Media
-
Upload
mohammad-hijazi -
Category
Technology
-
view
108 -
download
1
description
Transcript of Design for Social Media
![Page 1: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/1.jpg)
Design for
Social Media Mohammad Hijazi | @mhijazi
#BeirutDW
![Page 2: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/2.jpg)
Quality Matters
![Page 3: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/3.jpg)
Visuals make a difference
![Page 4: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/4.jpg)
Original Images
• Images are a great way to emotionally connect your audience. When you use photos, always aim to
make them original and true to your brand.
• People tend to react well to pictures of "real" people, but we distance ourselves from stock photos
because they are associated with advertising and spam.
Clean, simple images from a decent camera
are best.
• If you are going to overlay text on the image, shoot with
this in mind, so compose your image to incorporate white space.
![Page 5: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/5.jpg)
Original Images
• Always keep consistency with your
identity and branding.
• When you create your own images, always include
your logo. This shows it's your original image and
increases brand awareness.
![Page 6: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/6.jpg)
Original Images
![Page 7: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/7.jpg)
Keep It Relevant
• Something many brands do is post images of irrelevant content for the sake of likes. All your
images should deliver your brand message and hopefully have your own unique
style.
• The most highly engaging graphics have a sound strategy behind them and aren't just jumping on the "cute animal pics" bandwagon for the sake of it.
• Choose your words and colors carefully and you'll be rewarded by your community.
![Page 8: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/8.jpg)
Keep It Relevant
![Page 9: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/9.jpg)
Know Your Target Group
• People engage with brand pages to express their
opinions and individuality, and if you understand
your users, you can use that information to make
content that they will relate to, and if
it's clever, share as a statement.
![Page 10: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/10.jpg)
Cover Photos
• Cover photos are the new Facebook Wall (at least
as far as attention goes).
• Everyone will notice your cover photo. It's larger
than anything else and at the top of the page for a
reason, and 100% of viewers looked at it.
• Only 65% to 92% of viewers noticed profile photos
on Brand Pages.
• Cover photos with faces attract the most attention.
![Page 11: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/11.jpg)
![Page 12: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/12.jpg)
![Page 13: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/13.jpg)
![Page 14: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/14.jpg)
![Page 15: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/15.jpg)
The Importance Of Color
• When selecting the colors to use in your graphic, always consider your target audience.
• It's important to select colors to stand out, while staying on brand.
• It’s a good idea to choose colors that differ from the Facebook-blue to draw more attention to the image.
• It's a great idea to color pick from your logo and image, if you're using one.
• Consider the general psychology of color theory. For example, studies show that both men and women tend to really like blue and dislike brown.
![Page 16: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/16.jpg)
Choose The Right Font
• When choosing your font, it's essential to stay consistent with your branding and identity.
• Examples of places you can source free fonts for download are:
• FontSquirrel.com
• Google.com/WebFonts
• DaFont.com.
• When placing text, add a comment or question that encourages users to interact and add comments of their own.
![Page 17: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/17.jpg)
Keep Up To Date With
Graphic Dimensions
• Keep in mind that these are constantly changing as
each site updates their layouts, so it's a good idea to
regularly check for new dimensions.
• Always remember to resize your images for social
media.
• When people aren’t in front of a computer, they’re in
front of a smartphone or tablet. The larger the photo
and the greater the resolution, the longer it takes to
process.
![Page 18: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/18.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 19: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/19.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 20: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/20.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 21: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/21.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 22: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/22.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 23: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/23.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 24: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/24.jpg)
Keep Up To Date With
Graphic Dimensions
![Page 25: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/25.jpg)
Facebook Guidelines
For cover photos:
• All covers are public. This means that anyone who visits your Page will be able to see your cover.
• Covers can’t be deceptive, misleading, or infringe on anyone else’s copyright.
• You may not encourage people to upload your cover to their personal timelines.
• Covers may not include images with more than 20% text. Use the grid tool to identify the % of text in your photo: https://www.facebook.com/ads/tools/text_overlay
![Page 26: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/26.jpg)
Facebook Guidelines
Text in Images:
• Images in your ads, sponsored stories and cover photo for your Page may not include more than 20% text in the image.
• Using images with minimal text makes your content engaging and ensures that people only see high quality content in News Feed.
• Allowed in the 20% text policy:
• Pictures of products that include text on the actual product
• Photos of products in real situations or photos of products with a background
![Page 27: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/27.jpg)
![Page 28: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/28.jpg)
Infographics are in!
• Infographics are
visual
representations of
information, data or
knowledge intended
to present complex
information quickly
and clearly. Users
love them and
they’re shared often
on social sites.
![Page 29: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/29.jpg)
Tools to create infographics
1. Piktochart (pictochart.com)
2. Easel.ly
3. Infogr.am
4. Visual.ly
5. Tableau (tableausoftware.com)
![Page 30: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/30.jpg)
Add Text to Your Photos
• Do you want to get more mileage out of the photos you share on your social sites? You can, when you add text to your images.
• Adding text to a photo can help you get your message across faster. And these messages are more likely to be shared by others on social media.
![Page 31: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/31.jpg)
Create a Collage
• When you have several great
images to choose from and can’t
decide, why not create a collage?
• Collages communicate a number
of brand messages and offer a
simple yet effective way to
engage users.
• Think about your different social
media outlets and see if there
are places where a collage
would work well for you.
![Page 32: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/32.jpg)
How-to Images
• Photos are a powerful way
to show your readers a step-
by-step guide on how to
carry out specific tasks.
• Users respond well when
you show how to carry out a
task that may otherwise
seem complex to them, even
with simple screenshots.
![Page 33: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/33.jpg)
User-Generated Content
• User-generated
content (UGC) covers
a range of media
content.
• How can you solicit
creative ways for
users to submit
photos of them using
your products or
services?
![Page 34: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/34.jpg)
Design Templates
• Before you start creating a social media graphic from scratch, set up several templates for future use.
• Add a border or a simple background. Include your logo or web address. Be sure to use existing brand colors, themes, images or other graphic elements.
![Page 35: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/35.jpg)
Optimize Images for User
Experience
• High Quality. People will be more likely to spend additional time on an image that is high quality in terms of composition and image resolution.
• Maintain Relevancy. It is even more essential that your imagery is relevant for your audience. An image that is disconnected from the text will put people off and they will be discouraged to visit again. An example would be a photo of a cute dog sleeping when your article is about love for cats, or their rocky relationship with their boyfriend.
• Don’t Make Them Work Too Hard. While some journalists or PR representatives may lean toward using abstract images, it is important to always keep the end user in mind. An abstract image may be interesting to look at but does it really help you sell your story?
![Page 36: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/36.jpg)
Optimize Image Sizes
• The time a page takes to load is something every
designer worries about, or at least is something that
every designer should worry about.
• It doesn’t matter if the layout is nice and beautiful if it
doesn’t function properly. Since images can be
pretty heavy, this is certainly an issue to keep an eye
on.
![Page 37: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/37.jpg)
Image Optimization Tools
• TinyPng.org
• TinyPNG uses smart lossy compression techniques to
reduce the file size of your PNG files.
![Page 38: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/38.jpg)
Image Optimization Tools
• ImageOptim.com
• ImageOptim optimizes images — so they take up less
disk space and load faster — by finding best
compression parameters and by removing
unnecessary comments and color profiles. It handles
PNG, JPEG and GIF animations.
![Page 39: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/39.jpg)
Image Optimization Tools
• Smush.it
• Smush.it uses optimization techniques specific to
image format to remove unnecessary bytes from
image files.
![Page 40: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/40.jpg)
Good Examples of
Design for Social
Media
![Page 41: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/41.jpg)
![Page 42: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/42.jpg)
![Page 43: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/43.jpg)
Heinekin
• A very simple, but creative wall image from
Heineken shows a green bottle on the left, a pint on
the right with white space in the middle to create a
clever Irish flag.
![Page 44: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/44.jpg)
Oreo
![Page 45: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/45.jpg)
Subway • A great way of showing of your
product is to create a shape or
image using your product. Here,
Subway cleverly built a rainbow
out of their sandwich fillings.
![Page 46: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/46.jpg)
McDonald’s
• Here's a similar example in which McDonald's
created the text "Hot 'n'Spicy", to describe the
product by building the words from the chillies!
![Page 47: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/47.jpg)
Clarks Shoes
• Again, Clarks shoes have ingeniously created a
flower from its product for Mother's Day. Also worth
noting is its consistent branding and font as well as
the use of white space in the graphic.
![Page 48: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/48.jpg)
Bulmers • Another method that brands use
to engage their fans is by creating
simple but engaging 'game'
graphics. In this example, Bulmers
selected this beautiful product
image and altered one of them for
a 'Spot the Difference' game. An
idea like this ensures retaining fan
attention as they try to complete
the task.
![Page 49: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/49.jpg)
Fairy
• A similar idea here where Fairy created a maze in which the user has to figure out which route leads to the Fairy pack. A very straightforward idea, but the excellent use of branding and color and time spent looking at it will help enormously in increasing brand awareness.
![Page 50: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/50.jpg)
Nike
• Many brands also go down
the route of posting nicely
designed quotes.
• Here, Nike remain
consistent with its brand
authenticity with its font
choice and colors. As it's
such a well-known brand,
even without the logo
below, it's likely that you
could guess what brand it
is.
![Page 51: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/51.jpg)
The Body Shop
• Again, staying consistent
with its identity through the
use of font and color
choices, The Body Shop
created a simple inspiring
quote with its logo taking
prime place below.
![Page 52: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/52.jpg)
Domino’s Pizza
• Another excellent way to
engage your audience is to
ask a question. Here,
Domino's create a great
graphic with a question.
The background texture
looks like a pizza box and
the colors used are very
much in keeping with its
branding, as well as the
subtle logo in the corner.
![Page 53: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/53.jpg)
Malibu
• A great way to overlay text nicely on an image is to blur out your photo. Here, Malibu created a beautiful graphic, again posing a question, with a great composition of the elements. The colours in the photo are again complementing its logo while creating that warm relaxed Caribbean vibe emanated from its advertising.
![Page 54: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/54.jpg)
Red Bull
• One of the top goals for a great
landing tab is to get people to like
your fan page. Here, Red Bull
uses a combination of drawing
attention to the Like button with
the promise of unveiling hidden
video content. It certainly has
worked for them and their 25+
million fans!
![Page 55: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/55.jpg)
Disney’s Pixar
![Page 56: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/56.jpg)
Coca Cola
![Page 57: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/57.jpg)
Nissan
![Page 58: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/58.jpg)
Questions? Thank you!
![Page 59: Design for Social Media](https://reader036.fdocuments.in/reader036/viewer/2022062511/54c73ca94a79590c6e8b4835/html5/thumbnails/59.jpg)
Sources
• The ridiculously exhaustive social media dimensions blueprint [Infographic], TentSocial. http://j.mp/19izqJs
• How to Design Amazing Images For Your Social Media Profiles. Simply Zesty. http://j.mp/15wPkZr
• Graphic Design + Social Media. Erica Bogdan. http://j.mp/15wQV1p • Text in Images. Facebook. http://j.mp/1aGh1ob • Essential Graphic Design for Social Media Managers: An Introduction.
Adobe. http://j.mp/19iDzgI • 10 Tools for Creating Infographics and Visualizations. The Moz Blog.
http://j.mp/12YiULr • Facebook Timeline Changed the Way We See Brand Pages; Here's How.
Mashable. http://j.mp/19iHf1U • 26 Ways to Use Visuals in Your Social Media Marketing. SocialMedia
Examiner. http://j.mp/12k5zGU • 3 Ways to Optimize Images: Search, Social Media & User Experience.
Top Rank. http://j.mp/17wPqXG • On Image Overload? Try These 4 Easy Steps to Create Social Media
Graphics. The Daily Egg. http://j.mp/12k5LWH • Facebook Timeline Cover: 40 (Really) Creative Examples. Hongkiat.com.
http://j.mp/1aHbJsw