Skip to main content

Platform Templates

Lesson 10 from: Social Media Design Toolkit

Janine Warner

Platform Templates

Lesson 10 from: Social Media Design Toolkit

Janine Warner

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

10. Platform Templates

Next Lesson: Twitter® Template

Lesson Info

Platform Templates

that I thought were worth sharing. I'll come back over here now, where I'm logged into the page and what I wanted to do before we go too much further. It's just show a little bit about these templates that I keep talking about. So have a couple templates here. I'm gonna show the Twitter template in a minute after I kind of explain some of the changes on Twitter. I think Twitter is by far the most complicated in terms of just having redesigned and really made it a lot harder to do a design. But we were just doing Facebook, and this is a Facebook page template. And just to give you a sense of how this is useful and what you get with these Onda also that much as I'm happy to share these and if you buy the class, you get all different formats and illustrator and photo shop and everything else. But basically what we did was just take screenshots of profiles across android IPhone, others and then put them all together. You can do this yourself if you want. Teoh want to make sure that people ...

understand that, um what I would suggest you do is you use these is to put some guides where you think they're useful. If you're using a Photoshopped and illustrated, the guides are already visible, and I may actually update these in Photoshopped. I'm showing Photoshopped, but that's a little easier to teach. But the illustrator versions of these templates are probably a little more useful. If you're a designer and you like illustrator hell, like the Illustrator version's better. So what you see here is this is where the profile is on the desktop. This is where it is. The profile picture on Android. This is where the profile picture is on the IPhone, and then we've got some company names and how they overlap on IPhone and IPad but show up down here on desktop. And so the goal here is to help you see what sort of the safe part of this page and where do things get covered up when I try to create a design on and these guys show the cutoffs on mobile above and below and the cut at the fold. When you first load the page, it's kind of cut off the top of it. So if you care about that this area right here is really the only area that's 100% visible all the time. Kind of makes sense what we're trying to do with these templates if you're trying to use one of these yourself and you want to see So I'm going to create ah mock Facebook page for the chocolate game because I'm so known for chocolate, I created a whole website, um, around chocolate for some of my WordPress classes. And so I have a WordPress site, and I've actually been thinking maybe I should developed a hole Facebook community around chocolate. Since I'm getting so well known for chocolate, it might be a secondary business for me. Who knows? But using that as an example that a little more interesting than just looking at more photos of me. Here's some pictures of chocolate that I brought in. I'm just copying and pasting three images into this template. So the same way you would open an image in photo shop. I'm assuming some knowledge and Photoshopped and going a little fast. But if we just go down to photos of chocolate, I could grab the photo of my chocolate taste tester off this picture full credit toe I stock for this one. But I just think it's such a clever photo. So just select all and copy. And I'm just pasting it into this template, and then you can resize it how you want. I'm holding down the shift key so I can keep the proportions locked. And I can move it into place here, where if I want it, And as you move things around, you can start to realize okay, if I put this here, she's probably gonna be pretty safe. Those words can cover up that part of the picture. It's not gonna be a problem in this version. I've actually cut those words out so that I could overlay them over the image in the illustrator version there like that. And I've moved the layers around. You know, in photo shop, you can click and drag layers in the layers panel and change the order. So if I want the words the company name words above or below those pictures, I just moved that layer up. So if she were way up here at the top of this list, she would obscure all of this and you wouldn't be able to see that overlap. If she's down below all that, then you see how the name overlaps there. And so, using these templates and whatever way you find most useful, you can cut them apart. You can layer them how you want, but it's designed so that you don't have to put that up. Go look at it in six different devices, see where all the cuts are, where all the overlaps are and then redo it. You've got a template here that shows all the things that are gonna overlap. Overlap this design so you can put the pieces into place there. So once I get this put together, I can say, OK, I've cropped these out so that I can have them over that Can I live with on the dust top? It's gonna look name these on the desktop. It's gonna look more like that. Well, that's gonna look pretty good on my desktop monitor. I can definitely live with that, but on mobile now, if I turn these back on, can I live with the fact that that much of those images will be obscured by the name or by the profile photo? Of course, this one will disappear on mobile, right? That one won't be visible anymore. So I can turn those off and you can see You can see that, um, with different layouts, it's going to be cut differently. So that line there represents where the mobile line is gonna be and this profile image for the IPhone, or if I turn back on the android, you'll see how that's gonna cover up a little bit of that. So if I had words on this, I would want to make sure that none of the words were gonna be obscured by where those profile images they're gonna show up. If they were an element in one of these photos that was absolutely crucial, like her eyes, I'd want to make sure that those weren't going to get covered up by any of these elements on any of these different devices. And I'd also want to make sure that even if you can see only half of her face, it's still gonna be kind of an interesting image, right? If half of her face is covered, you're still going to get that one. I pointing over on the mobile device and then on the full screen, you're gonna get the whole face. So the challenge today of designing for the social media platforms is that it's pretty easy to create something that looks great in your profile on the desktop, and you've got that nice big image across the top. What you have to keep in mind is that at any given time, all of these different things are gonna be obscuring different parts of the image. And that doesn't mean you can't create montages. That doesn't mean you can't create really creative designs. You just wanna watch for what gets obscured and what gets overlapped, and you can experiment if you decide that's a little bit busy, and maybe we'll put this over here. We need to turn that, um, and grab this one and bring it in, cause it's a little more neutral than maybe we only have this show up on the desktop. It doesn't appear if I put it all the way over here, it would Onley appear when it's on the desktop, and it would disappear on mobile. You see that line there that represents where the mobile comes out and I could maybe make this one bigger so that it fills more of this space so you can play around with what feels right, what looks right. Or maybe I want more of her so that she's I get her whole face every time. And I don't mind if that blue is visible or not visible. You see where that line crops off. But the thing that we're trying to save you with these templates is having to do all the testing on all these different devices and figure out where these breaks are, where the lines are gonna cut where things are gonna happen. So just clicking and moving layers around you can crop off edges. You can play around. Like I said, you'll find tons and tons of great photo shop construction here. Creativelive. I don't want to spend a lot of time trying to teach you the basics of Photoshopped. It's not my specialty to teach, and this is a relatively simple thing to do in Photoshopped to just take a few images and put them together. But what I want you to see is you have to be thinking about how you position things in relation to where they're gonna be cropped. How they're going to be cropped and how much you can live with things being overlapped or not overlapped. So let me show you some examples of how we've done that in Twitter. I've seen that done on Twitter with the new design that work. And then maybe I'll try again with the Twitter template and show a little more photo shop if time allows. And it seems like the best use of time. Okay, um oh, and I never showed you how to actually make a fan page again, just to make sure that everybody's getting at least the basics of social media on any on any page in Facebook, whether you're on your profile or you're on your own page, this little arrow here over on the right, it's a drop down, and that's where you create a new page. So if you want to create a new fan page and you've never done it before, you start there, the first thing have to do is choose what kind of fan page you don't have to worry a whole lot about this. This is more a categorization on Facebook than a severe limitation of features. It's not like if you pick something for a brand, it'll be totally different than if you pick it for a company. But you will find slightly different options about how things get categorized, depending on which of these. So you need to self select. Am I doing this for a cause or community for an artist or a band like the one we had at lunch today? Or is this you know, for a company or for a product? And that's the first choice you make. Once you do that, it walks you through the process pretty smoothly. Um, let's say I'm making something on cameras and photos, and then you can put the name in here. Obviously, there's already a creative live but creativelive love and just get started. What that would be like if I created that page, it's invalid. There's already, so you have to find a name that nobody else is using. That's probably the biggest challenge today with Creating new face of pages is that it has to be something that doesn't already exist. And there are how many people on Facebook anybody remember that number off the top of their head. One billion with a B so It's a little like trying to find an email address on Gino or a new domain name if you're just launching a new business. Honestly, one of the trickiest things is to to actually come up with a name that isn't already used. Once you create that page, you're gonna update your cover photo and your profile photo basically the same way you would with your profile. So if I switch over to my page here, um, you'll see if I want to update this as soon as I roll my cursor over the cover, I can change the cover when I create a new page. If there's no cover there, I just click on the cover space and it says, Upload the page. If you already have a cover, roll your cursor over change cover and then you can choose to upload a photo. Teoh, choose a photo that you've already uploaded to Facebook, or even to reposition the one you have there. Sometimes, when there are just minor design changes to these sites, if you notice like the pool are the, um, well, I love you one from KPCC. If she just repositioned that, I moved it over a little, she might be able to make that work. So sometimes a minor adjustment can help you deal with minor changes and design. Now Facebook has said that it's about to do a pretty major update to its Facebook page design. So another recent not to go too far today into all the intricacies of this design, but more to teach you the general practice off thinking about how to design for things that are gonna look different in different places and how to come up with designs that will work in different places. And that's really one of the goals of these templates is, and this is what I will be updating on a regular basis. Each time there's a new design, I will go and do screenshots across different things and come up with another layout like this one to try and show you where things will be obscured, where you need to watch out for different, uh, different positioning on the page. But I think the main thing to think about it you want to make your Facebook page beautiful, captivating, but not too distracting. Um, another thing I tryto guy people is funny is great but never be offensive again. You want to think about your audience and your personality if you are snarky and that is the way you always are. And Smarck is who you are and love me or not, I'm gonna be Starkey. Then you can probably get away with saying things on Facebook that I might get in trouble for, because that's not my consistent brought Brandon model. I tend to be too nice to the other side, so be consistent with that voice and make sure that your design kind of conveys who you are in that way. Professional, but not sales E. That's another thing to really watch out for. Informative is great educating people in the profile, giving them a tip, telling them you love them. But a direct sales pitch in your profile is not only against Facebook. Policy just doesn't tend to work very effectively. Most people want toe. They went to the curl up to him a while. Before you try and sell them something I like to say authoritative but not bossy. You know, another thing to think about. You want to look important and professional, but not kind of scare people away with too much of that. And I think more than anything, make it uniquely yours. You know what? What's different about you that I should know about? What? What do you do? What do you offer that you can convey in that design in that messaging that will help me get to know you right away. We did get one Schyman. Castor says I have the new Facebook page. One company name is on the cover image, and the top APS are no longer under the cover image, but down the left column. Interesting. Well, she key share the page. When we go look at it, we'll find out. All right. Please share that. That must have been within the last few days if you've gotten to do that. But that's awesome. That's the joy of live teaching and trying to do stuff in real time. I would love to see what you've come up with, so yeah, if you can take a look at that for me and see if I can show that on screen, I would love to. Cool. Thank you. See what happens. So you're all gonna go redesign your Facebook pages and profiles tonight again? My main goal in this is to inspire you with ideas to get you thinking creatively to get you thinking about how you're telling your story online and then to be prepared for the inevitability of slightly different displays on different platforms.

Class Materials

bonus material with purchase

Social Media Design Templates
Creating Animated GIFs with Adobe® Photoshop®
Social Media Design Template Guide
Syllabus
Facebook® Template Guidelines

Ratings and Reviews

Insoyum
 

I picked up some great tips about the different social media platforms. I found some of the social media templates a bit confusing to use, but the course was useful overall.

LOAF
 

amazing course

Student Work

RELATED ARTICLES

RELATED ARTICLES