How to make beautiful websites without coding or templates | Tom Appleton | Skillshare

How to make beautiful websites without coding or templates

Tom Appleton, Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (29m)
    • 1. Intro

      1:08
    • 2. Semplicelabs

      1:58
    • 3. Full page home page

      5:45
    • 4. Making a portfolio

      2:46
    • 5. Full page cover

      8:37
    • 6. Constructing a page

      6:55
    • 7. Final

      1:38

About This Class

Make beautiful websites from scratch on Wordpress without knowledge of coding or the use of templates, using the plug-in; Semplice.

In this class I give an overview of Semplice and explain different ways of how to get started building pages and constructing the website.

Transcripts

1. Intro: Hey, guys Broken? But some of the video in this video I want to talk to you about a website. So this is the website that I used for everything. I have a portfolio on here. I have my buyer. This is my main connection. So I made this website entirely and wordpress completely from scratch. Designing the different elements and illustrating photo shop and putting them together is the final webpage to WordPress. Didn't know any coding. Didn't use a template. Built the whole thing in Taliesin. Scratch and see. This is just used to plug into called simples. It's an amazing plugging is designed and created by TBIs Van Snyder. There is an amazing art director and designer worked as the great director Spotify in New York. So in these tutorials, I'm going to show you some ways to get started. Some more advanced tips and then any further questions? Anyone has high recommend this software. I really recommend learning what you can do. That if you're interested, let's get started 2. Semplicelabs: Okay, So just to give you an idea of what Simples is, this is the simplest website. It's the simplest labs dot com and you just have to go on it for yourself. I'm just see what it is, but it's a huge clients that use this. People have made some really nice websites for just if you have a look on the showcase, Simples is made for designers. It's made of the freedom that you want to be able to design the website, how you want to look, but without having to spend the time learning how to code you can. There's more advanced features you can use CSS. You can use coding within it. But to get styled, connect some really nice websites. A slightly is too simple websites and everything's fully customizable. So definitely just before he gets died, it's Kuneva. Look on the website, so Simples isn't free, but it's worth whatever you spend on it. There's three different versions of simplest. You can buy the single version, which is what I have just to work on one website or, if you're a studio, our business and you want to use Simples as a way of becoming a Web designer, which is entirely possible. With this, you can invest into, Ah, the most substantial version. Two lights work on more than one domain for the single version, although it's 8 to $9. If you are a student, you can email simplest with an image of your student I. D. And I got mine for I think it was about £40 gone, down from $89 so is really worth it, and I really recommend checking it out. Unfortunately, there's no trial, but if you just watch this video, I'll go through a couple of things that you can do it, and you can see for yourself whether you think it's worth that. 3. Full page home page: s so once you've downloaded inactivated simples and you've installed it is a plug it and just gonna plug ins and out new. You'll see simples down here at the bottom. They should just to cut us. Okay, so this is just the welcome paid. This isn't really something you'll use very much. There are a couple of things on here saying this way set your home page. But in all honesty, it us about it. So with Simples, because I've only got the single license I can can't make a website from scratch to show you. So what I will do is go through. How have made my website in the hope that will be beneficial. So start with the background that someone I've made New Australia, and you can learn how to do that in my abstraction from image video. And it's just the same technique. That's just a background. And it's just made to a standard websites. So to make it a full page image as your home page, it's really easy. You want to go on pages section, so there's my pages and there's the pages that you see. Yeah, except have only chosen to display a few of them. So the homes, my front page. So if I go on here, so at the top, you've got a couple of options. You've got this page just to show that you're using the simplest again. You can use the would press default, but obviously using simples so you can choose your Brandon for the page. Visibility, navigation, but text cooler. Okay, the full screen cover. So this is the first thing we're gonna get into for designing a home pays. It looks like this. So the co visibility wants to be invisible Background color, but ground type this image videos and then I definitely want to try. And that's mean for the future. But for now, just image, so I'll have done is selected my image. And it's just a full sized image. The opacity nist beyond full image scale that wants to be on full screen. That's important for some full screen. It means that no matter what browser, urine or what size the monitor is that the person's June it on it will always be to the full size of that monitor rather than if you displayed the actual size, it can mess up a little bit. The zoom. I'm disabled it. It's automatically zooms in on you pay. It's definitely try out. I'm just not King. The preloaded Bakula. I've got mindset as Ah, why? For refresh on my website, you'll quickly see it dot crosses. The website leads. No. So that's just that's really cool. That's what I like about the software was plugging even is that you can just at it every single time, a little bit of it. So the cover headline This is this. This is the type. Now you want it visible of you say I've come for plain text as opposed to image. If you had an image of a piece of typography that you like, you have to make sure it was really crisp before using it. Just so when you going from browser to browse amounts to monitor it didn't lose that quality. So I'm going with grid wit. So a simplest website is made out of 12 columns. If you can imagine it so eventually you're able to manipulate your text to fit. Exactly. We wanted to based off these Collins, whereas the fluid width takes up the full page. So this is the actual text and you couldn't just right in with no code. And obviously that's perfectly fine. But for me to have exactly like this have invented their toe, have it exactly how is I've just used a bit hasty mail, and that's literally case HTML copied off Google after just googling how to do a certain thing. So it's nothing complicated. All headline color is just the color, so I'm just going by that Texaco headlined Font size self explanatory. The weight. I've just gotten bold, you know, every little bit you can modifying change. Can even the scroll down arrow for the page if you had more content below. So this is just a really good way to get started on your first page. So once you're happy with your full page website to set that as your home page seem to go back on the simples, I won't be back on the welcome page, and then you just don't set up your home pages. Click on that and you can choose your latest posts. Or if you're just using it for a website, chances are you want a static page, and from they just click the page. That's it 4. Making a portfolio: So one of the things I like about simplest so much is because it's built by designers. Four designers, all by creative people for creative people is that it makes making a portfolio incredibly easy. So this is my part further, and I've got some like my logos and have just got a selection of pages. So if you click on one of these, obviously takes you straight to the project, this just project it for escape, huh? So to add to make this grid and tow have each of these a link to a different page that doesn't appear appear. It's really easy, and one of the reasons I like this software so much. So to do that, we'll go back into simples. So if I go into the pages section, I've got my tutorials, which is a link to the skill show whips I got about, which is my links my bio page on have Got My Heart Failure. But none of those are on the pop failure page that answer the portfolio paid. You go into this section here the part for earlier, so I do these air just the's air, the pages, the on this put failure. So it's add a new on and it'll automatically be added into that grid is you just simply add new work. So I've been working on this abstraction. Syriza persist. Sary's just ah experiment and just exposed to my ideas. And just excuse to make some cool things, Really? So I want to make a page on my website in the pot failure for that. So that's what I'm gonna do. Ghost spirits. You may have to smooth to the side a little bit. My if I'm on a smaller Mac book, so the public spoons a little bit hidden, so that's just there. So published this page already, so I'm selling it so that from now. So the thumbnail is this. This is what you'll see on your part very a page. So it's important to have it a sensible size so that it doesn't take a while for the website to load it. And to do that, you discover thumbnail on add image 5. Full page cover: so set the thumbnail image. I'm going to keep the width this fall, so the project panel is a little icon when you're already in a project. So if I got my logo part for you in the top, right and corner here, it's like a little hamburger menu, but it's made out of nine squares. If you click on that, this is your project panel, and it's just, ah, quick, extra way for people to just nip around your portfolio. Obviously, there's nothing that makes have not published the newest one yet, but it's worth adding one anyway just to use it. And then as you go down this old different, you get your typography options all minus set. So just play around with there's not gonna go into everything in depth. Everything is pretty self explanatory. It's just a case of sort of learning what you can dio. So I'm just gonna update this for now. Now that we've got a from now on, not go back into here, my process go back and smart, both of their it should be there. So go. This is what I've just started the abstraction, Siri's number five poster, and I think that looks pretty cool that these bounced out quite well. That's quite just fortunate, really? So if you click on this, it should be totally empty. So this is the simplest navigation bar. This is the project panel as well. This is at the bottom. I usually tend to hide it, but you can keep the project panel at the bottom of your page. So I'm going to show you how I'm gonna build this page from scratch. So it's going to the Brandon. So in navigation bar visibility, you obviously want invisible, and you can select select your custom navigation. But so I've got all these different navigation bars that I've made to make a navigation. But you want to go enough Byron menu on the side just enough by many. So you can add a new navigation, but so you can add a new navigation bar or you can cite one that you've already made. So if I go on God knew, and I'm just gonna get through this, I would use one already made, but I just quickly get through this. So the logo former text image I spg So the logo form out. They expect a logo here. You don't have to have one. I've got mind use that you're gonna want either image rsv g. You probably want a PNG back groundless image. I've used nsv G, which is the code version of my image, which you can export from illustrator and just, uh, you can. Then once you've done that, you can change the color of the low guy. If you're gonna svg, you just purse the code in here and then you can change the wit, the height, the color and it's really good. Accuse it really Chris to the navigation by itself, so you can have it sticky or normal. Sticky would just mean it stays at the top. And then if you can see where the share goes underneath that we have a fluid. Choose the pattern. You can choose everything about you navigation by can choose the icon cola so on. You can choose to drop where you won't drop down on no drop down. And then you've got all you type options, your alignment options and social icons bar as well, and you can choose the colors on the patterns in the size and everything, and it's really simple, Which is why I'm not going through all. It's just a case of known It's that So that's how you make a navigation by. So it's set this navigation bar gonna go back on some apart further Yeah, I go into the page, I wanna be on branding. I'm going to set one up creation, but I'm gonna set to block And that's what I've made previously going to send my footer is a foot of that I made and you make it in the exact same way that you make the navigation bar. So keep going. What I don't want is these because I have my I don't want this share icon because I have this on my foot already. And so if you don't want that this the share box visibility a and you put that was hidden and that hides it completely on the back to top iro color I'm going to keep this is this is this color for now because I don't know exactly how page gonna look. I haven't seen all are persons together yet on one page so I can come back and changed at the end. Maybe I was put on black For now, I just update best another day. This if I just refresh. So I've now got this black navigation bar that I've made. I've got my footer that I've made and put back in. But I have no concept yet, So the full screen covers the next thing. The full screen cover is exactly the same as the home page. The full page home page so you can have it is hidden or visible. I haven't actually made anything as a cover just to give you an example. I used these covers quite a lot. So this is not 32 x stated type 3 to 65 days of type cover, and about a little lower down here. Yeah, and I think I use this on just about every pays. Not really. I've got again on here. It's often a good way just toe Macon image. Just have the logo on. Give the idea of what the project's gonna bay, and then you can choose to go further down and learn more about that project. So just for now, I will make full screen. I will use the full screen, covet just a za placeholder just to show you again. So I'm just gonna put a background image. And I just use exact same as they used as it's already in my media library. She's the same images. Meth. Um, now the image of past 100%. You can again full screen actual size, full screen will crop the image like this so it scales it perfectly to the browser. Whereas the actual size will be whatever actual size you made out, which could be, it might not be the best for different browsers. If you see, I mean, put this as I go whites, the preloaded bar, the headline exactly the same as on the home page. It's just any text that you want. Full screen text. Ah, a good example of where I've used this is just on the home page. Or, you know, this is the headline. This is edible tech stuff other than and you got your phone and you weigh in your size. Okay, so just carry on going through there and get that exactly as you want. So I'm just gonna update this for now to see what is looking like. It's really good. Once you've made your website, you've up that you've uploaded it to your server. However you doing it, you can just update real time. And every time they could change instantly updates the whole website. There's no there's no files ill or anything like that, just instant of day. So we'll just see how it's look into now. But the post failure. Okay, so this is the full screen color. You can see why you would want to design something especially for this purpose. This is literally the poster file, and you can see where it crops it so designed something, especially by the time this is posted. I'll fix this, but I'm not gonna make something for it specifically right now so you can see how this is looking for now. This is your arrow, so you can choose what colors make sure it's really visible. So it started some content. The next thing is content. So you just click this big yellow plus 6. Constructing a page: so the way I wanted display and purses for now, I'm just gonna so of one here on one next where I just say that looks for now. And then we can go into working into it further so that we're gonna do this. I wouldn't use the image function, but I'd go straight to the columns. So the first thing I'd do is want out to call him. So the call Name this. You might start wanting to name stuff as you go along. Especially. It's gonna be a big page. Just helps the organization similar toe layers in In the design of Social Princeton like that, The width it's again the same 12 columns. So if you have it six columns that's always going to take a half the page. The offset is obviously how many columns it's gonna be offset by the background to the Post . So when we have some content into this column, so I'm gonna add an image. So the image scale I could go non full wits on it, aligned left. I'm gonna have no image scale because I have the width off the column. And that's the scale I do want intervene in the lightbox, and I'll show you what that means in a second. The image doesn't need a link. Nothing now, anyway. And they just I've played the image Stig know the or could pitch that May. So this is my first poster. This is personal for one se Just save that and that's how it looks on the page. So I'll save this and you can see I know up day and you got to see exactly what that looks like. So refreshed this page. So we're on the obstruction Siri's page, and this is how it looks for now. So my issue now is that is too big because I can't fit that all in my browser, anyone Time wish isn't great. So I'm gonna go back into it going to go back into the content. And then it was quick in it, and I can make any changes that can change just this column or can change the whole all the Collins. So I'm just gonna go on oh, and expand this. So gonna make it half the size. I'm gonna have it. Three. I'm going to save that to that looks a bit better, but I don't want it to be touching this. I want this gap to be the same. That so to do that you have. You are padding so you can have padding top compounding at the bottom. So if I had 60 pixels, the padding on the top save than that. Is this here? So it's pretty nice. So I'm gonna have to know the one I could I would know the column. So I'm gonna call in my dad, gonna add new column, and I'm gonna do exactly the same. So when it three, I don't even offset yet to have seen it. I'm not sure what it's gonna look like. Get out of my image. I want no scale left lines. Find for now. I want light box, sir. Sighs. So it's pretty good. They're exactly the same. So I could have you know? No, the two. Probably. So it's got those incentive, the pace together. So we've got six Collins until between these each one's ace of three. And we know that there's 12 altogether. So if we have set the 1st 1 by three, put some directly in the center. So we've got in a three column 33 and three with a padding in between each one. So that's the in center. So it's safe. That and you always have to updates it in this on the side. You know, that was refreshed. This page I never go is pretty good service that you couldn't dio. This is just that simple. How Teoh just put your content in Simplest possible. But you can work into this and just to compositions, and you have total control of where everything is. It's just about using the 12 columns. So if I wanted to add a little bit of text say next to this one here, I want to go back into the content editor. I want a click. I want to add it to call him. So I've got the two here so I can add 1/3 column. But I could drag this using this. The three line here and I could drag it to the top, circumvent out of paragraphs of text. So this is a poster, Yeah, but still one. And then this time it's fun. I'll work into it properly, is on designing the page. So we just say that, See what that looks like so because we drag to the top, it's so first in the grid always works from the left. So I'm going and we let it this. So this is six columns in the rest of three. Obviously, that's why it's so big. So I'm gonna make this three columns as well. I want to expand it. Andi, I'd like to align it all to the right just for why not safe So the middle ones throughout the officer, which means it would now have a massive gap down the middle of three columns. So we take the offset off here and other and just have known anywhere save Vega. So these are still in the center and all of this text is disgustingly bag. This is how you do it. So you could then make the text smaller and you could caption everything. So it's safe that date that fresh and they go. So it's exactly here on the life page, as is in the edit content, which is really great, really great. Really save this not day and see exactly the world seeing it 7. Final: Okay, so that's about it. For this introduction to Simples video, there'll be a lot of questions, I imagine, because I haven't gone through it particularly thoroughly. I just wanted to show you how to get started. And then if questions arise, I lived to go in more debt and how you can make a website using this. I just love the freedom. This is exactly what I wanted as a graphic designer to make a website. I didn't want Dreamweaver. I didn't want Adobe Muse, and I certainly didn't want to somebody else's template with this mill to make my own website exactly as I want. So if you are interested in Simples and you would like me to look into it further, we can go over mobile sites, how to change the size of the text and the layout of the text based on what device drawn, whether it's an iPad or a desktop or a phone, we can look further into making a background for your website navigation bars. Any questions that come up, just let me know because they just wanted this to be a quick introduction to get anyone that wants to make websites started just to see how easy it is to use. I know there's a couple more things in the content 1/3 and go through, so that's all in the next video. So I hope this is helpful. If you view simplest before or you're going to use it from this, then Shea websites below or Shea websites anyway because I'd love to say and thanks to watch, and I hope this was useful.