SharePoint Design Tips for Pages

hey it's dougy wood and in this video I'm going to be showing you some SharePoint page design tips so starting off I'm going to actually go and create a brand new page to do this I'm going to go from the homepage of my SharePoint site click on new and then click on page now there are some default page templates so if you're looking to style up your SharePoint Pages then you could take a look at some of the examples that Microsoft offer you completely for free so the first one is visual so you can see we've got a very large kind of header area up here and we'll explore a bit more of this later in this video further down we've got a bit of text and image on the right hand side a full width image as well as these boxes here um using what I assume is an image web part because it's got some text over it as well um and then further down we've got another image as well so there's a nice kind of visual layout so this is really good if what you're trying to communicate to people is using a lot of images if it's not you might go with a bit more of a kind of basic text layout where we've got again a header option at the Top This is actually a different header you'll notice to um what is in the visual layout again we'll take a little look at a couple of different options that we've got cuz there are more layouts for the headers as well that's available again in this we've got a kind of two column layout where we've got two um columns with just text in here um but I'm actually going to start completely from blank I'm going to start from this blank option and build my way up so I'm going to select on blank and then click on create page and the bottom right hand corner and this will present you with a page like this now I see a lot of SharePoint pages that just look like this essentially so they have a title they have a bit of text maybe some images but that's it they don't actually try and break it out and make it look any different but as we've seen from those templates that Microsoft is offering us we we can make them look totally different we can make them look very unique and stand out so the first things that we're going to look at is actually how do we change his header area so across the the top we've got the ability to edit the the header so it's it's a bit like a web part in the sense that it's got that little uh pencil there that we can edit the properties of it we can browse images and we can change the background image which is going to look different depending on the type of layout that we use uh we can set focal point for the image and we can reset the overall design so what are the different layout options that we've got for our header of our page so if we click on this drop down here we can see we've got image and title which basically is very much like the default but instead of It kind of sticking out the the title is sitting over the image we've got plane which basically means there's no background image at all now this is sometimes used if people don't want to kind of take away from the information of the page they just don't want any distractions they lit just want a simple bit of text maybe this is part of a knowledge base or a Wiki that you're building and you just don't want any distractions on the page so sometimes that is used or it might just be that um you don't have enough kind of branded imagery sometimes people don't like to use the Microsoft stock imagery um they only use their own branded imagery and there's not enough of it to go around so rather than having repetitive headers on every single page they choose just not to have them at all um we could have a color block now this is actually my favorite but it's a little bit of a difficult one to work with and I'll show you why in a moment once we start putting things together um but you can see we got a text area here um we've got a much bigger image background so if you've got some images and you want to make it nice and visual like that visual template that Microsoft was displaying then this is the layout for you the last one is overlap so this is essentially where we started off with so we got the text which is overlapping the background image um which again is just where we kind of start off from so the way we edit them all so the way we add the titles the way that we add the background images and any of the properties of them are all exactly the same no matter which of the the the layouts we choose so I'm going to choose as I say the slightly more complicated one uh which is a color block um because I just I just really like the the look and feel of this particular one so the first thing that we need to do is we need to add a title now bearing in mind this this is the title of the actual page um and it's also going to be the title when you can't quite see the URL that's just off the screen but um inight Pages this is going to be the name of the page as well now the reason why I say this gets a bit complicated is because this box almost demands like a lot of text um so if I put into here to say this is a page title that's already a very long title for for a particular page we can see that it almost wants to have more text like that to fill up the this space that's as far as we can go with it um so that would be a very very long title in that particular case um so I'm just going to say that maybe this is going to be a kind of almost like an FAQ page so I'm going to call this say how to complete an XY Z form for a request or something like that okay now the next thing that you can do is if you click on this edit web part button across the top you can see well for a start we can change the layout again so don't need to use that that drop down and you can see what that title would now look like if I was to go with the playe option the image and title option or the overlap option I'm going to stick with color block for now now we've got some options here for alignment so we could align this box to the left or we can align it to the center if I'm totally honest I don't really like lining it to the center I do see people using it like that but to me it just feels like a bit of a kind of drop in the ocean in the fact that it's kind of just sat in the middle of the page a lot of people nowadays have very wide screens and all of this is responsive so it's going to feel even even more stranded as a kind of little box in the middle of a page um so I actually do prefer to keep it on the left hand side if I'm totally honest again it will slightly depend on what the background image that you we change in a moment depending on what we use there that will also sort of help determine whether we Center our line or not now this next box is something that you I think you only get actually if it's I don't know we get it in a couple of these different options now I eat my own words but we've got this text title option so I tend to use this as a kind of label for the page uh maybe like what it relates to or a category or let's say for example that this is a I'm building this as a knowledge base or Wiki or something like that and this particular page relates to a department maybe this one relates to HR for example or marketing or sales and now you can see it's changing this box every time time that I change that that that text above title there we go so now we've got our um text above the title I can choose whether I want to show the text block above a title so I can just choose this to show on and off if I wanted to you can also show the publish date now this could be quite useful again if it was a Wiki page or knowledge article just to show essentially when it was um origin kind of published because it might be that you create this page and if no one comes back to after a year or two then maybe the information is no longer so relevant so people want to know when it was published so that they can act accordingly um whereas if it's something that's going to be countless sort sorry Timeless information um maybe you turn that off because again it makes it look like it's older than it is even if it's never going to actually be outdated the next box down here is the accessibility box so this is where we can provide alternative text for people who are blind or have low vision so you can briefly describe how this image is uh relevant to the page now if it is just for sort of decorative reasons this background we don't necessarily need to um provide that accessibility text but if it was something that was going to give a bit more context to the page um obviously we want to be inclusive and make sure that everybody that's using this page finds it as accessible as possible so you can just untick that and you can provide a bit of a description alternative text for your image here if not Mark is decorative and we don't need to use that box Okay so we've now got our title we've got our um s label or text above the title um now we want a background image so we're going to set the background image of this particular um page so if I click on this browse image option again we've got things like we can see recent images that we've used we can use a web search which is actually powered by Bing now I know it's Bing is Microsoft but to be honest with you the web search not so great from from Bing for for images um you got one drive so you can get anything from your one drive this SharePoint site so any images that were stored on the SharePoint site you can get from a link or you can upload your own options from your own computer or something I really advocate for people to use is this stock image library now I know I was just kind of like saying there that Microsoft's web search is terrible from Bing but they really brought it back back and uh and balance things out by giving us this stock image Library this stock image library is really really good there's hundreds if not thousands of different stock images in here and I know a lot of my videos I do bang on about this but it is really good and it kind of pains me to see quite often that people go out and they pay for thirdparty stock image libraries to use images inside of SharePoint when actually this stock image library is here and you tend to find sometimes a lot of the imagery are very the same if not the same in in some of the places that you're looking so use this and you can you can search it by color so if I to search say say our brand color was red I could look in here and find some different Reds in here I think I'm going with a kind of purple color but let's say for example you can also look for a Contex thing so if I look for like say office I can find real pictures of people in an office setting and things like that um I'm actually using kind of Purple colors in in this particular design so I'm going to look for purple and let going to find so I quite like this actually this is pretty cool unless there's going to be anything else which is going to stand out to me any different No in fact actually I quite like this's let's go with this one I think this will look good as a big image so the good thing about these images are they're very large very high quality so they look really good so when you put it into the page here you can see this is looking great now so I was saying before you could set an image focal point so by selecting on this we can drag this around so I can find whereabouts in the page that this is going to look best um now actually I want more of the kind of purple in here so I'm going to drag this right down so we got more of that kind of purple kind of um Vineyard in the background of this cool so there we go um so that is the kind of setting the background image the final things that we can then think about for this particular page is whether or not we want the page author to appear now the next thing I'm going to tell you some people get a little bit freaked out by um but actually I would suggest don't worry at all about this I'm going to talk you through it but first I wanted to ask a favor please do subscribe to my channel and like the video If You' got any questions at all use the comments for you below also go and check out the membership on my channel so the membership allows you access to specific unique videos that are only for members so you can see here I've got a full SharePoint training fundamentals which is a six-part course which is only available to members there's also a how to build a SharePoint internet um which is a three-part series which again is only available to my members we have a polling area so you can request what new trading courses you'd like to see and there's also a membersonly Q&A as my channel grows I'm finding it more and more difficult to stay on top of everybody's questions inside of these videos so we've got a dedicated um Q&A area which is got a priority answering um board for any questions that you might have the membership is only 99p per month so it's not going to break the bank and there's new content this is coming out on a weekly basis Okay cool so let's get back into the video so the final thing I wanted to mention then about these header sections was this page author now you can remove it by clicking on here now people tend to remove this again if it's going to be something which is uh Pages which have been created by a generic kind of SharePoint administrator who isn't necessarily going to be the main contact for this page if anyone's got any questions you can also remove if for example you don't want anyone to be contacted um about the about this particular page now by removing this page author you can actually even replace it with somebody else you can type in somebody else's name into this and then that replaces them inside of that that particular box now some people get a bit freaked out by this now this is what I was saying about people getting worried because people think well what about if someone was to create something maliciously and make it look like it was me that created that page that that that isn't the case because actually we're only changing the kind of the aesthetic the the kind of um the page um sort of author in the front end of this you can always see by going into site content by the C going into site Pages like in a library view of the pages you can see who originally created the page and who last modified it so you can always see that and actually that has no correlation between who is this this kind of page author as well so if someone did create something that you thought was unsavory or you didn't want them to do and then put that your name against it um you would always be able to see from the Modified by or the created by columns who actually Chang that page um but essentially this page auor box is more used for say for example um these are q&as or FAQs or a Wiki or knowledge base related to human resources and actually there's a particular contact for this particular question they might not have even created the page themselves it might be a generic SharePoint admin an internet manager comm's manager someone like that has created that page on their behalf and then they're putting that person's contact uh there so once they click on them they can see their contact information email address phone numbers things like that which are going to pop up when they they click on that to make it easier for people to contact them okay so that's the page headers um there's a couple of extra bits and Bobs when it comes to page designs that's worth knowing about as well so in terms of the pages uh layouts they're all made up of these sections so by default you get this one column width section but we can add new sections by click on this little plus button here now there are some templates that we can use so we've got here for example a three column image text so this is now providing us the ability to add in images into these three columns with some text underneath I would suggest taking a look at all these different templates because it will make sure that you're varying the kind of types of pages that you're using and keeping it engaging and interesting for people so again we got this 1/3 left with an image two columns one column image uh which is much wider one third Right image and text two column image and text so you got all these different types of layouts that you can use to make your page look really engaging now if you don't want to use their templates you can also create your own sections and then build completely new layouts yourself so we could add in say for example a full uh so let me walk through them so one column is just what we get by default two columns is that kind of two column layout so you got um content on left content on the right three columns of course it would be three columns 1/3 left just means that the um box on the right hand side is bigger than the left and vice versa 1/3 right would mean that you would have a box bigger on the left hand side than on the right hand side so essentially that is um the different types of layouts that we can use we can then add web Parts into these particular layouts by clicking on this um plus button on the right hand side and then we can see all the different web parts that we can add now I'm not going to go through all the different web Parts in this but I would suggest take a look at the different ones because they will all um essentially allow you to build different kind of functionality into your pages engaging with different Microsoft products um or embedding external things like Twitter or YouTube videos in there as well so there's all different ways that you can add your content but I want to make this video more about the design because I see a lot of the kind of layout looking very similar very default very stock but as we can see we can change the design the layout of the page and a lot of different ways I hope you enjoyed that video and if you did please do like subscribe to my channel and go and check out the membership area for exclusive content thank you for watching

Channel: Dougie Wood (MVP)

Views: 12,809

Keywords: sharepoint, sharepoint tutorial, sharepoint design, sharepoint online, how to use sharepoint, microsoft sharepoint, sharepoint tutorial for beginners, sharepoint intranet, sharepoint pages, sharepoint site, sharepoint for beginners, sharepoint office 365, sharepoint online tutorial, sharepoint for designers, sharepoint intranet examples, create sharepoint site, sharepoint tips and tricks, sharepoint site design, ms sharepoint, sharepoint design templates, Dougie Wood

Id: JNa4MsNQI2A

Length: 17min 49sec (1069 seconds)

Published: Wed Dec 20 2023