How To Make A Website | Step By Step

this is my friend Nick Nick makes these awesome handmade decorative drums he sells them on Etsy but he doesn't have a website so I decided to make him one this video is gonna go step-by-step through making Nick's website I'm gonna show you how we went from nothing to this a beautiful fresh and modern website along the way I'll share lots of secrets about web design things like where to find free stock photos that don't suck what to write on your website and how to write it and I'll give you the honest truth about SEO and why telemarketers are lying when they call and they promise you the number one position on Google I'll also explain the weird little technical things that can trip you up things like how to make your logos transparent or how to customize your favicon how to set up your domain name and even how to set up you know on that domain name it's a lot easier than you think my name is Steve Benjamin's and I've been designing websites for over 20 years I've had my websites featured in Wired The Next Web Forbes and Huffington Post this video took me forever to make seriously I've been working on it for like a month but I think it's worth it because I'm certain if you watch the video fully you'll be ready to get your own website up and running and it'll be a great website you don't need to code to build a website anymore I'm a professional web designer and I don't code small websites anymore I think it's it's overkill it's stupid these days I just use Squarespace to build small websites I use Squarespace for my mom's therapy website for my band's website and for my personal music website we're gonna build NICs website with Squarespace though this video will still be helpful if you're using something else there's a link to try squarespace in the video description if you use that link you can also use the offer code partner 10 to get 10% off and I'll also get an affiliate commission from Squarespace now I'm not recommending Squarespace just because I get an affiliate kamesh almost every website builder offers affiliate commissions in fact I've had other website builders offered to pay me four times what Squarespace pays me but I always turned them down I turned them down because I sincerely believe Squarespace is the best option for small websites it has beautiful themes and an intuitive interface plus they have honest upfront pricing which isn't always true of their competitors and plus if that's not enough Elon Musk uses Squarespace for the boring company his newest company so I mean that's a pretty big endorsement start by clicking this link to Squarespace in the video description then click get started the first step is to choose a template for your website don't stress too much about finding the perfect template here you can always change it later we're going to use a template called jaunt it's found under the online stores category then let's quickly register and we're in welcome to Squarespace Squarespace is editor has two important parts the home menu and the website preview so let's start by adding NYX logo from the sidebar click design and then logo and title we all right in NYX site title and you can see the site title has changed in the website header if you don't have a logo you can just leave it like this but Nick has a logo so we're gonna upload it then we hit save and boom we got nick's logo up so there's one thing that trips people up here what happens if your logo is not transparent here's an example of what the logo would look like if it wasn't transparent this isn't the best example because the background color is actually pretty light but you can see the white on the logo image still here's what to do if that happens to you and you can totally just skip ahead if this doesn't apply the first thing to know is that JPEG files do not support transparent backgrounds PNG files do support transparent backgrounds so I'm going to show you how to change your logo into a transparent PNG file we're going to use a free tool called Luna pic there's a link to it in the video description with Luna pic you just upload your image and then click the color you want to make transparent we'll scroll down and actually I'm still seeing some white in the logo so scroll back up and change the mode to transparent color and hit apply alright that did it that's a transparent logo so save that image and then head back to Squarespace and add it as your logo save and look at that a nice transparent logo so now that we've added our logo let's create our first page so from the sidebar click pages and click the plus button to add a new page you can choose from pre-built layouts for pages but we're just going to use the blank layout we're going to call this page home we want this page to be our home page which basically means it's the page we want to show when someone types in Sargent Nick drums calm so I'm going to click this icon and then I'm gonna scroll to the bottom and hit set as home page now Squarespace well no this is our home page now Squarespace automatically fills your site with demo pages that show off what it can do but we're not going to use them so we're just gonna delete them if you want to save them for later reference you can just drag them into the not linked section okay let's quickly delete them by the way if you ever accidentally delete a page you can always find it with squarespace's deleted pages option it's at the bottom of the pages sidebar so nix site is going to have four pages home my story shop drums and contact so let's quickly add these four pages each one as a blank now I have to say I find our logo and navigation a little small so let's make it a bit more emphasized so let's go back to the sidebar home click design and then click site Styles site Styles is where you make style customizations and there's two ways to do it you can scroll through this list and find the element you're looking for or you can click an element in the website preview to reveal style options available for that element since we want to style the navigation let's click the navigation first let's change the font to próxima Nova which is the font we're going to use across Nick's website then let's change the upper casing by changing the text transform to none let's increase the font size to 23 and finally let's remove all that letter spacing so things are looking good I just want to increase the logo size a bit so click the logo to reveal the style options for it and I'm just going to change it from 150 to 180 and you know what I think we've got a pretty nice looking header next we're gonna add some social media icons to the navigation but before we do that I want to talk about social media broadly Nick is super active on Instagram and Facebook and he does an awesome job of it this is great because Nick's customers aren't just buying a drum they're buying a handmade artisanal drum and it can tell that story through Instagram he shares about the process he shares cute pictures of his dog and his kid and of course he occasionally shares his drums so adding social media icons to Nick's website makes sense but it may not make sense for every business because guess what not every small business needs to be on social media don't do social media just because you think you need to do it do it because it does something for your business so don't add social media icons just because you think you need to know social media is better than anime and in social media account okay rant over let me show you how I added Knicks social media icons the first step is to connect our social media accounts to Squarespace so click settings then social links from the home sidebar then we just add any links to social profiles for Nick we're gonna add Instagram and Facebook now let's go back in open sites styles scroll down all the way to header layout and then set the social position to top right and then this is important click Save and then reload site styles so lets style these icons click into them and we're going to start by making them a darker grey then let's change the style to solid and you know what let's actually make the color just a little bit lighter finally I think it's just a little too big relative to the navigation so let's take the size from 40 to 32 and there we have it our navigation is styled in looking good [Music] next up let's build our first page my story so navigate to my story then hover over the page content and click Edit then let's add a heading center align it and then change it to heading 1 then we'll add a little spacer underneath it and make it a bit smaller next we're going to add a bio that I wrote from Nick I'm going to arrange this bio into two columns to give it a readable newspaper style feel okay and editing this video I realized I actually copy and paste at the same paragraph twice but of course on the real website these are two distinct paragraphs I just didn't want to reshoot this because ozzie this video took me a long time to make okay let's get back to it now I feel like the text is a little wide so let's add spacers to both sides here that's better now I just paste it in a bio that I had written previously you're gonna have to write the content for your own website and here's a few tips for doing that to write Nick's bio I just interviewed him for 15 minutes I recorded the interview as a iPhone voice memo and then I used the interesting bits from it to form a story I think this is preferable to asking Nick to write his own bio because I wanted it to sound conversational most people use jargon like industry leader or outstanding customer support when they try to write content for the website we don't want to be those people good website writing is conversational and clear imagine you're having coffee with a friend and they ask you to explain your business how would you talk what words would you use that's how you should write for a website don't hide behind jargon just be human because human works on the internet I tried to distill Nick's story down to the essentials because people don't read websites they scan websites a long wall of text won't get read here's another tip don't write about yourself instead write about your audience what do they care about what problems are you trying to solve for them admittedly I don't do a great job of this with sergeant Nick's drums in part because I'm trying to play up the artisanal handmade angle so rather than show you with Nick's website let me demonstrate with the example of a cleaning service here's the cleaning service writing about themselves we are a professional house cleaning service in the Toronto area with the best rates in town our cleaners are professional and punctual we offer the highest level of service to all our customers it's okay but they didn't mention the customer once it was all about them here's an example of writing for the audience this is better tired of cleaning our Toronto cleaning service helps busy professionals like yourself we get your house squeaky clean so you have time to focus on the things you need to do it's just better okay back to the my story page because Nick makes handmade drums I thought it'd be cool to add a handwritten signature under his story thought I'd give a human feel so I got Nick to write out his signature on a piece of paper with a marker and I cropped the signature out of the image then I use a tool called Luna pick to cut out the background and turn the signature into a transparent image there's a link to Luna pick in the video description and Luna pick I just started by uploading Nick's signature then I clicked the color I wanted to make transparent and Luna picked got most of it but there still is some of it so I changed the mode to transparent color and boom that got it so save this image and jump over to Squarespace and we'll add the signature here now it's quite large so we're gonna add spacers on either side to Center it and make it a little smaller but let's add another spacer just to give it some room and oh I think I need to extend this just a bit more perfect and we'll save and preview and look at that next signature is on the website next I wanted to add some testimonials to this page the best testimonials address fears and concerns in order to build trust fortunately Nik had lots of great testimonials on his Etsy page so I just grabbed a few and edited them down before adding these testimonials I added a spacer just to create some distance between the signature and the testimonials then I added a small header I made it a heading two and I Center aligned it finally I added the three testimonials as quotes using the quote element and let's do this really quickly then I snapped all three in two columns boom done look at that the last thing I want to add to this page is an Instagram feed an Instagram feed may not be necessary for your website but like I've said Nick has a great Instagram account so it's just another opportunity to add a human touch so I add another spacer and then I add another heading and we'll make this a heading 2 and will centre align it then let's add a grid photo gallery so I went to NICs Instagram page and saved 12 photos I liked using gram save a free tool for saving Instagram photos I could have embedded an Instagram feed but this lets me curate the photos that we choose so let's upload those 12 photos and I'm just going to rearrange them do this quickly and I'm gonna change it to six images per line just to space it out a little bit so it's not too big finally I'm gonna add a button below the gallery that will link to NICs Instagram in case people want to follow him at Sargent Nick drums on Instagram and we'll link that to his Instagram and let's make this a large button and with that we have all the content for the my story page here's what it looks like so far it looks okay but next we're gonna style the page to make it look nicer so let's navigate to site Styles and let's start by customizing the heading one so if we click the heading one this will reveal the style options I'm going to change it to a font I like it's called Libre Baskerville and let's remove that upper casing let's bring the font size down right now our body text isn't very readable it's too small and low contrast text is meant to be read after all so let's click it and I'm gonna change the body text color to 3 3 3 which is a very dark grey but not quite a pure black pure black tends to be a bit too intense and let's change the weight to 400 let's bring up the font size substantially and there we go that's looking nicer so let's go down the page and let's style that heading 2 so click it and we'll click the fonts and lets increase the font size let's get rid of this font we're just going to use proxy manova that's what we keep using and then let's remove this letter spacing which basically puts spacing between letters and remove the up casing and let's just reduce the weight hair there we go that looks nice now we're gonna change the quotes so click the quote font and let's change that again próxima Nova and let's bring down the size just a little bit and then let's change the source font again próxima Nova and let's bring up the font wait just a little bit and looking good finally let's just make sure that the font in the button is using próxima Nova there we go my story is starting to look a lot tidier I'd say it's almost beautiful now you might have noticed we have a substantial amount of padding right here we can actually get rid of this now that the navigation is so big so let's go back into site styles and let's start by taking the header top padding from 30 to 15 and then let's take the content section let's take that padding from 90 to 30 and that just tightens up the design a little bit now Squarespace websites are responsive which means they expand and they contract based on the viewport size because of this websites can get really wide on a large screen but I'm going to show you how to prevent the site from getting too wide I'm going to do this by changing the design to constrained width under site change to constrained width and we'll set it to let's say 1400 pixels this will transform this to this by setting a maximum width so that I can't get too wide all right now we've got our page styled and finally starting to look good I think we're on our way [Music] we've moved pretty quickly through this design but in reality it took me a couple of hours spread out over a few days to find this design those hours were spent doing lots of little tweaks just trying to get things to feel right and that's what design mostly feels like it's constant iteration the real work is often in refining and redesigning over time it's not in the big dramatic redesigns here are some more tips for designing your website there should be purpose behind everything make important elements obvious visitors aren't gonna use something they can't find important elements should be consistent and obvious this nonprofit does a great job of making sure the donation button is always close paragraphs should be double-spaced give your text room to breathe paragraphs should be between 40 to 70 characters per line don't let them get too wide Wikipedia does a bad job of this you don't want your paragraphs to look like Wikipedia avoid system fonts for a long time websites could only use system fonts for example Times New Roman Georgia Arial or comic sans but unfortunately those days are over you can choose from a variety of web fonts today you're not sure how to choose colors and honestly who can blame you it's one of the most intimidating parts of design I'd suggest using a preset palette for example I use the material design toolkit for any color I use on any of my websites here's my final tip find real people and watch them use your website the best way to know if your design is working is just to see a real-life person use it ask a friend to browse your website but don't step in to show them how to do things just watch what they do you're gonna learn so much web sites are really just text and images when you think about it those are the building blocks the right image or photo will really elevate your website a great example of this is Apple look at how they put their product photos front and center it helps that their photography is stunning Apple understands you don't tell people you show people the right photos is critical and this is doubly true if you're selling a product online like Nicky's Nick was shooting product photos on a wall in his house and it looked decent but I thought we could improve it luckily I already had a photo box studio from Amazon in these things are amazing for product photography and they only cost $100 if you're doing product photography don't bother buying a new camera just get this Photography is all about lighting and you could shoot great product photos with Chester iPhone and this photo box I'm not a professional photographer but I am really happy with how these turned out if you're not selling a product try to find something you can take a photo of a great photo will make designing your website a hundred times easier so even if you're like a service provider maybe you can get some professional photos of you working whatever you do don't be afraid to be human and show yourself it's really easy to hide behind stock photos but people trust humans on the internet don't be afraid to put yourself out there that being said if you do use stock photos you're in luck there's a huge selection of free stock photos on the internet these days I'd suggest checking out stock up bursts or pixels I've got a link to them all in the video description just try to avoid corny stock photography corny stock photos are typically the ones trying to be a metaphor for example a handshake to signal customer service studies have proven that these types of photos are mostly ignored but we don't really need a study to tell us this we all know those photos suck okay now that we have some product photos of Knicks drums it's going to be really easy to make our shop dramas page so navigate to shop drums and let's add a heading one and then below that let's say we love making custom drums to get in touch and we'll make this a link to the contact page and let's Center align that and let's make it a heading to next let's add two product photos and the second one let's drag them into columns I like that side-by-side look then directly below it let's add the product name we'll add a little dot and a link to NYX Etsy page let's bold this change it to a heading two and center align it and this is the basic product listing now you may have noticed that I use two icons within the text of our drums I used a middle dot and a double arrow these are called Unicode characters and you can copy and paste them into the text of any website they don't need to be added as an image or anything I've put a link in the video description to top tell which has a whole collection of Unicode characters you can just copy and paste into your website now let's move really fast and add a couple more products in this style boom there we go for more products now the last thing I want to add is a button at the bottom of the page to NYX Etsy store he has more products available there and I just want to make sure that visitors know they can find more there so shop more on Etsy we'll give it a link make it large and you know what let's change this browse more crumbs on Etsy I think that's a little clearer so let's save and here's our shop drums page pretty nice right so next up is the home page you keep it the home pages to make your website purpose cleaner you want visitors to understand what the website is about so let's make a very clear heading 1 to start the page I favour clarity over cleverness I could have made this headline something like marched to the beat of your own drum or something but I'd rather be clear than clever next I add a simple photo of 3 drum sitting side-by-side now I wanted this heading1 to all sit on one line and I couldn't figure out how to do it what I realized is all you have to do is add a spacer to each side and that it would expand the width of the heading one finally let's add two buttons to the bottom of the page the first button we're gonna link to my story and we're gonna make that aligned right the next button will link to shop drums we'll make it a large drum and we'll line that on the left then snap them into columns now we have this nice centered button effect let's take a look at our homepage looking pretty good I just I think I just want to make the three drum image a little skinnier so edit and let's add a spacer on either side perfect I like that there we go that's it's just a little nicer and there we have our homepage I only regret with the homepage is I don't have a photo of Nick on it I believe websites should always be human but I honestly just couldn't find a photo of Nick that worked here oh well web sites also can't be perfect it's better to just to launch than seek perfection the homepage still communicates the purpose of the site and moves visitors on to the next step either learn our story or shop drums okay now let's move on to our final page the contact page contact pages are workhorses there are a small but critical part of lead generation visitors often come to the contact page to find information so make sure it includes the following if necessary hours of operation holiday hours directions map address phone number email a contact form since the contact page is responsible for lead generation it should be site wide and obvious don't make visitors search around for it by hiding it in the footer so let's start by adding two headings and ask me anything I replied within one business day I and I'm gonna add a heart emoji here for a bit of playfulness art custom drums and let's Center align this and let's make it a heading to so Mac users just so you know you can always bring up the emoji keyboard by pressing control/command space next let's add a contact form alright we'll call this our contact form and the one thing to know about your contact form is you want to check storage it should be emailing to your email address but you might also want to connect it to Google Drive Squarespace doesn't store submissions to this form so you want to connect it to Google Drive that way you have a backup of all form submissions in case you accidentally delete one this is not actually ideal so hey Squarespace say form submissions by default now Nick has decided he'd rather not include his address or phone number on this page so instead I'm going to add a photo of him again we just want to keep putting him front and center to show that there's a real life human behind this business and it snapped this into a column with the form come on come on there we go and let's add a spacer and we've got a nice contact page let's take a look at it yeah I like that that's really nice now the last part of our website we need to touch up is the footer so let's go back into the editor and click Edit and let's just clear out all this content delete delete' and we're gonna make it really simple two columns of texts that frame the website again we're gonna use the mac emoji keyboard to add a little heart made with love in toronto we're gonna add another line with some copyright information and we'll align that to the right we'll snap these into a column and let's say now the text is a little light so let's just quickly turn that into a darker color so we'll open side styles will click the footer and we'll change that to our 333 dark gray we'll save and just like that the design of our website is done we still have to do some SEO work and make sure our website is responsive but man take a step back and just appreciate the beauty of this website so your website needs to be mobile friendly the best way to do this is with a responsive template fortunately all Squarespace templates are responsive all you have to do is open this toggle to see how your site looks on desktop tablet and on phones though it looks like our menu is just in the wrong place so let's fix that let's go design site styles and we'll scroll down to our mobile style settings and yeah position top left let's change that to top right and that fixes it and that's it honestly everything else is just automatically mobile-friendly navigation becomes a drawer and if we browse down we can see all our content is we can see all our content is broken down into a mobile-friendly view now we just need to tackle the favicon favicons are small icons representing your website that you see in a browsers tab to add a favicon and Squarespace navigate to design logo and title scroll down and upload your favicon and click save and let's drag down the browser hit refresh and boom there you go you can see it in the browser tab now let's talk about SEO SEO or search engine optimization just means you're optimizing your website to rank in search engines like Google one important tactic around that is customizing how your website appears on search engine result pages for example here's what site builder report my website looks like in Google to customize this in Squarespace we need to adjust the title of our pages so navigate to marketing and click SEO and we're going to change the SEO title format to be honest this might seem a little intimidating so if it is don't worry you can skip it really I'm just telling Squarespace that I want to write my page titles completely myself so let's navigate to pages and write custom page titles we'll start with the shop drums page so you can see Squarespace gives you a little preview there of how you look in the search engine result page and ideally your title is descriptive and includes an important keyword for the page but don't try to shoehorn a bunch of keywords here the title should make sense and be readable to human beings shop handmade decorative drums and will include NYX name to be honest this is really just the start SEO is a whole discipline unto itself I've actually had like a good amount of success with SEO for example my web site site builder report is ranked number one if you search best web site builders in Google on beating companies like GoDaddy and Wix that have like hundreds of millions of dollars in marketing budgets so how did I do it honestly here's my advice avoid shortcuts I'm sure you've had like telemarketers call you and promise the number one spot on Google but they're lying what they mean is they'll buy Google Ads to promote your website on Google Google ads are the ads that appear above the organic results the truth is no one can guarantee you the number one organic spot in Google that's just nonsense the way to rank in Google is simple but it's just hard comes down to a few key ingredients one keywords keywords are the search terms your target audience is searching these are what you're targeting what you hope to rank for to content Google wants to reward the best content so go overboard creating outstanding content I have a written version of this video and it's over 10,000 words it honestly took me weeks to write but I'm trying to rank this video in that article for the term how to make a website and that's a really competitive keyword so the content needs to be outstanding three links having other websites naturally linking to your website is critical for SEO don't try to manipulate this Google is really good at weeding out unnatural links I've linked to some SEO resources in the video description if you'd like to learn more if they're important thing to know is that there's a sub-discipline for SEO it's called local SEO and it's super important for a lot of small businesses local SEO is SEO done for searches with local intent you've probably seen these before if you search for a local business on Google or if you use Google Maps local SEO is a discipline unto itself and if you'd like to learn more about it I've included a few links in the video description below they're a good place to get started ok now that's all done I'm gonna show you how to publish your Squarespace website on your own domain name and I'll even show you how to set up your own email address on that domain name so we'll start by hitting subscribe on this button in the bottom and this will take us to a plan selection page now we can pay annually or we can pay monthly you'll save a little bit if you pay annually and you'll also get a free custom domain so that's what we're gonna do we're also going to use the personal plan it's definitely good enough for most websites the business plan adds some third-party integrations and commerce basic and commerce advanced are for e-commerce stores so let's select that plan which takes us to the billing page and this is where you enter your credit card details but I'm gonna skip this page so my credit card details aren't on YouTube for anybody to just use and then we'll confirm this purchase and boom we're good to go now let's set up that free domain name that Squarespace gives us on our annual plan so click get a domain and fortunately Sargent Nick drums comm is available so we're just gonna grab that so click add click proceed to checkout and I'm just going to hide this is just contact information and then we place the order and then we have to wait around for about ten minutes for a confirmation email that come from Squarespace after ten minutes here's the email you receive and you want to click this link and we'll verify our contact information and once that's done go back to Squarespace and let's refresh the page and should tell us that yes okay yes our domain name is successfully set up next we're going to add a custom email address for Nik that will be hosted on his domain name the email address will be Nick at sergeant Nick drums comm so let's click the domain and scroll down and click Add email so Squarespace email hosting is provided by G suite and G Suite is Google's product that lets you host your email address with Gmail cost six dollars a month but it's definitely the best email service so let's select monthly and we're gonna create an account here and I'm going to move really fast keep this private and when I'm done click continue and then we're gonna purchase and boom we've purchased one email address now there's still a few steps left to do so press done and we have two things we need to do Google couldn't verify domains let's just hit try again that'll probably go away pretty quick yeah next we have to sign the G sweet Terms of Service and we do that in the G sweet dashboard accept and now it's gonna ask me to create a password for this email address some more agreements to accept and boom all right we should be done so let's refresh this page and yeah there's no more prompts which means our email address is set up so if we go to Gmail awesome we're automatically signed in as Nick at sergeant Nick drums comm and now this email is just a working gmail email awesome ok there was one last step we just need to publish our site so now click publish your site in the bottom and we're gonna change it from private to public and our site is live so copy that URL paste it in your browser wait for that website to load there we go Sargent Nick drums calm we are alive we did at a website in less than an hour [Applause] and I gotta say it's a pretty nice-looking website it's simple but it's fresh and modern holy cow did you get through this entire video that's amazing leave a comment and say hi you just spent an hour with me if you'd like to buy one of Nick's drums I've included a link in the website below I have one of the drums myself and I can attest that they're pretty awesome and remember if you'd like to use Squarespace you can use the link in the video description and if you use the offer code partner 10 you'll get 10% off alright thank you for watching and best of luck making your website [Music]

Channel: Site Builder Report

Views: 68,929

Keywords: how to make a website, squarespace, website creation, website builders

Id: ptG1CvIIP2M

Length: 44min 59sec (2699 seconds)

Published: Thu Nov 14 2019