Hello everyone, this is Mike and welcome to my Basic Web Design Video Course.
In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.
You’ll learn all the steps I use including:
- using basic tools and panels in Photoshop
- basic HTML and CSS
- and after learning these we will apply our knowledge and create our very fist website from scratch.
Resources in this tutorial:
Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles
For our valuable readers we will be pushing the basics here. So it’s your chance to learn and become a web designer for free. Are you excited? I hope that beginners can follow through, if anything is unclear just reach out to me in the comments section.
I will do my best to walk you through everything slowly and clearly. So let’s get started!
Planning and Wireframing
What is a wireframe?
A wireframe is a visual presentation of how a website’s layout will look when it’s finished. It’s about structuring the overall layout without any graphics, placing the various elements where you believe they will look and work best. Wireframing is a great step to start before jumping on to Photoshop because it allows you to focus on the important components of the website without all the visual clutter of a finished design. Wireframing also saves you time when designing a website because wireframing acts as a sketch, and instead of having to do things more than once in Photoshop, you can just adjust your ‘sketch’ until you’re happy.
Your wireframe should include boxes that represents images, header, footer, sidebars, text blocks, navigation and other content aspects of your website.
You don’t have to worry about drawing them yourself, since there are many wireframing tools available on web.
Tools Used: Go Mocking Bird
Photoshop Basic Tools and Panels
Some beginners know the functions of specific tools, take the Ruler Tool(I) as an example. The problem is they don’t know how to look for the distance when they measure and how to turn the guides on and off. Especially those who are using earlier versions of Photoshop. Like this question in Quora What is the shortcut to display the distance between two guides in Photoshop? So in this part I will walk you through the basic Tools and Panels in Photoshop, talk about how important they are and how each tool will help you create your design in Photoshop.
Designing In Photoshop
Now that we have the general idea for our website’s layout, it’s time to tone this up and make it more presentable in Photoshop. Let’s make this design as simple as possible.
In the next part we will be talking about the basics of HTML and CSS and with this knowledge we will convert our simple design into a working website.
So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestion regarding the videos or how I presented it please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.