Video Transcript:
Hey, it’s Al from Useractiv. And today I kind of want to go over the differences between web design and web development. So in a nutshell, web design is more or less the graphics that are designed usually by somebody who is a specialist in creating mockups and designs. But not necessarily somebody who is a coder and then web development is when you actually do the coding of the website. So just to give you an example, and I’m going to break the web design part of it up into two different types of sections, because probably the best process of creating a website involves, you know, the research phase the wireframing phase, the web design phase, and the web development phase.
So we’ll probably get into the research phase and maybe the coding aspect in other videos. But I wanted to give you an overview of what the design and web development, what are the main differences between the two. So after you’re done with the research phase where you’ve looked into what your target market is who your users are, what they’re looking for, how that relates to your product, and so forth you start to create something called a wireframe, and a wireframe is when you start to get elements that you want to have on the webpage, and you start to lay them out in a very simple way, using boxes and text.
So as you can see on this page by the way, this is Figma, which is what I use for pretty much all my wireframing and my web design mockups. So, it’s a great program. I recommend it highly. I think everybody should use it. It’s free to use you know, there are different tiers for Figma, but it allows you to quickly create these wireframes. So as you can see, this is very simple. This is just to illustrate to a client and to work out between the client and yourself on my end, at least, as a web developer, what goes where, so here, we’re looking at a blog wireframe. So the client requested, you know, the redesign of the blog and they had some ideas. So rather than designing everything and then saying, okay, I wanna move this here and move this. There you start off with a wire frame. So as you can see, you got the logo here, you’ve got some links, you’ve got a call to action at the top. And this is the hero section with you know, the headline, a static image here. And since this is the home of the blog, it’s going to have a listing of a bunch of different blogs based on a category. So here, you’ve got a dropdown for categories you could search, and then you start to see all the blog posts here, or at least snippets of them with, you know, a featured image and category title excerpt, and then call to action to read more. And this goes on and on. They could go ahead and load more. And then the simple footer is here. So this is kind of what we ended up with with the blog homepage. We moved a few things around, and this is where we ended up. So as you can see, this is much easier to grab and move around. Then if we were to fully skinned this lets you get an idea of the space and the content and how that gets laid out on the page. And it makes it much easier. Once you have this part of the design process approved to go in and design this fully into a mock-up.
And now if I move over here, you could see that this is the wireframe for the single page or a single post. As you could see here, we have a featured image. So obviously if somebody clicks on here, they go to this template here for the featured post or for an individual post, you could see a featured image, the title, the author, the text, and how this will be laid out. So this was also approved. So it, the wireframe just makes it easier for you to go ahead and start creating a design. It lets the client know that you want to position things in a certain place. All the content that they want to have is going to be in there and it’s going to be easily accessible for users that go onto the website. So once you have that, you kind of move on to the design part of it. So just to separate it out to give you an idea, this is what a full-fledged design look like, looks like. So this is for a homepage on a different site, and you could see all the graphics are already in here. All the text, everything has been kind of designed here.
And this is what we call a full mock-up of a webpage. And this is what the web is, and this is also in Figma. So this is what the webpage looks like live. Once this has been launched on the web. Now, if we take a look at the code for this if I right-click anywhere on here and have view source, you could do this for any webpage. If you go ahead and do that, it’ll show you the code. And this is really what the web development part is. The coding of the website is what goes, where you could see it’s got all this code is needed for the webpage to be able to be viewed this way for you to be able to scroll for there, to be interactivity for there to be links. This is what the web browsers view, what they see. They see this code and they translate this code into this, the markup or the full website page that all your users view. So again, I mean, I’ll get into how to create the code for this based on the design here. And this is what they call custom development, taking a graphic, and then turning it into code strictly from that graphic.
So I hope you enjoyed this video, please let me know if you have any questions and put those in the comments, please subscribe. And like this video, if you want me to continue to create quality content that helps you with your website design and marketing your website. Thanks.