Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing [Part 1]

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:

  • planning
  • wireframing
  • 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:

Wireframe: Download!
Finished PSD: Download!

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.

Wireframing Tools:

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.

Peace!

Michael John Burns

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.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Luai says

    You’re best tutor, keep up. I’m going to make my website and I gotta put ur name into it, Thank uu!

  2. Sinbad Konick says

    Thanks for this awesome tutorial .. Hope i will be able to learn web design this time.. Thanks again..

  3. Greecy says

    how do you always find such perfect topics? I search many times on your site to find interesting inputs. Compliment!

  4. says

    great blog .. helpful to create in easy way. looking for a future article dude. This would make it far easier to see the detail when you are editing in Photoshop or any other application; as it is it feels like my glasses aren’t working properly! LOL
    Keep up the good work

  5. Grace says

    Hello Mike, I quit my job and enrolled for a web designing class. The class hasn’t started yet but I am really excited on the knowledge I will acquire. In the meantime, I’m looking around for additional information regarding the matter. Thank you for posting your tutorials which I think will be an additional help for aspiring enterpreneurs on this field of work. My question is ,you frequently mentioned in the designing using photoshop about pixels. How important is this ?

  6. says

    Wonderfull, in a easy way the dummy and the expert Excellent! Hoping that you keep in mind the start of everything simple and straight. Keep in that way Congrats I follow up your courses

  7. says

    Hi Michael! It’s brilliant!!!
    I’m learning webdesign in Hungary. I am a beginner now and your tutorials are really really helpful. Thank you for making and presenting!
    And I am looking forward to your future work.
    Thank you! It’s awesome!!

  8. Joe says

    Hello, it was indeed a great tutorial you’re giving and for me its been really helpful. Thanks, i look forward to seeing more on web design technicalities and graphics designs.

  9. LaTrice says

    This is awesome! Thank you so much for sharing your knowledge!! Just what I’ve been looking for!!!

    Thanks

    LaTrice

  10. says

    Firstly I am a new visitor on this website came through Facebook.
    And secondly I like your blog, about the post its awesome :)
    Now, I will visit daily because I want some designing skills.

    Thanks for all this,
    Regards,
    Sohil Memon.

  11. John Abramovic says

    Hey, can u use some framework like Foundation to make it responsive and show us how to use frameworks in next tutorial? This one is great, thanks! :)

  12. John says

    Great. :) Can you use some framework like foundation in next tutorial to make it responsive and to show us how to do it? Thanks.

  13. Ananthi says

    Hi,

    Thank you so much for the tutorials and looking forward to the second part. I’m also trying to be a freelance web designer/developer and this tutorial teaches the basics, especially photoshop basics as I’m used to gimp. Thanks again.

  14. Franz Reischl says

    Hello Micheal,

    thanks for your effort and this nice tutorial, it´s very easy to follow. Do you have a suggestions for those beginners who do not have photoshop just yet? It´s very expensive software and for me as a beginner it would seem like learning to drive on a ferrari.
    Can one achieve similar results with a cheaper software, i.e. Gimp? Or would you say Photoshop/Fireworks is the way to go because Adobe offers something others dont?
    Feedback much appreciated. Looking forward to Part 2.

    Thanks, Franz

  15. says

    Hello Michael (I must say – GREAT NAME!! :D),

    Thanks for the article and videos. I appreciate the time and effort you have undoubtedly put in to them. I am just starting to build up my own business/career as a freelance web designer and still have a lot to learn, so it always good to just refresh myself with the basics, whether a beginner or more experienced.

    Look forward to more inspiring and informative articles & videos from you and the 1WD team. You guys are doing a fab job!

    • says

      Hi Mike, your name too. Sounds great! :)

      Really appreciate your comment Mike and Good luck. Part 2 is coming and it’s on HQ.
      Forgive me if this video is on 480P only. I’ve mistaken to record this.

  16. karthi says

    really nice tutorial…simple & elegant…
    Anyway i have a silly ques to ask!!!!
    right now thought of tryin a web template for my portfolio… Is there any specific size i should use like 1280X1024??? or jus i can try any size i want!!!! Pls answer this….

    • says

      Hello Paul, Yep Fireworks must suite in design a web layout.

      But it’s a matter of choice and most of the people have Photoshop than Fireworks.
      Honestly when I started in web design I don’t know about this Fireworks stuffs.
      Since most of the tutorial regarding to graphic used Photoshop. I hope you understand.

  17. Danny Campbell says

    thank you Michael, this has been very informative, and helpfull, I am not about to criticise your resolutions etc as I am thanful enough that you took time to post these free lessons, I am an A+ certified technician who recently qualified as a web designer, I have only done a couple of designs/ sites till now but Iam always looking out for hints and tips ,and your tutorials have (so far ) given me just that. again thank you, I look forward to any future tutorials

    Danny

    • says

      Hello Danny,

      Thanks for understanding and you’re welcome. I’ve mistaken to record this that’s why. Promise on the part 2 all videos are HQ.

      Congratulations! Danny, Good luck and keep on learning.

  18. Wendy says

    Hi Michael,

    Thank you for posting this tutorial. I’m anxious to see the html and css end of the video series. I’m going to jump over in Photoshop and see if I can practice some of the things you have talked about. I may have questions for you later.

    Thanks,

    Wendy

  19. John Gagiatsos says

    awasome tutorials, if the videos was in a better quality(720p or higher) it would be perfect.

  20. says

    Hi Michael
    A nice tutorial but if I may make a suggestion. Is it possible for you to record your tutorials in a higher resolution? This would make it far easier to see the detail when you are editing in Photoshop or any other application; as it is it feels like my glasses aren’t working properly! LOL
    Keep up the good work.

      • says

        Thank you for bothering to answer. It is great too hear that the video resolution was just a case of dyslectic fingers! I am really looking forward to the next part of the series.

        Regards

  21. Khaled Mosli says

    Thanks for sharing such an awesome tutorials and making this process easier and manageable!! I look forward to the next part and more tutorials to strengthen my designing and coding skills!! :)