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

Posted in Tips, Tutorials, Web Design • Posted on 45 Comments

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!

37 Written ArticlesWebsiteGoogle+

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.

45 Comments Best Comments First
  • vijay

    Tuesday, February 26th, 2013 02:28

    16

    very nice article… Enjoyed!! keep it up.

    +8
    • Michael John Burns

      Tuesday, February 26th, 2013 23:15

      28

      Hello Vijay,

      Hope you enjoyed the article.
      Watch out for the next part.

      Have a great day!

      +1
  • Sohil Memon

    Friday, March 1st, 2013 09:39

    34

    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.

    +2
  • Ananthi

    Wednesday, February 27th, 2013 10:47

    30

    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.

    +1
  • Greecy

    Friday, March 22nd, 2013 04:40

    42

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

    +1
  • Paul

    Tuesday, February 26th, 2013 06:47

    18

    Why Photoshop? Fireworks would be far mor suitable.

    0
    • Michael John Burns

      Tuesday, February 26th, 2013 23:12

      26

      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.

      0
  • Praveen Bhardwaj

    Tuesday, February 26th, 2013 06:48

    19

    Great videos. I’ve downloaded all of them. Thanks a lot for sharing.

    0
  • Anh Duc

    Monday, February 25th, 2013 09:26

    2

    Thanks for great videos. I’m a web developer and your tutorials is what I need.

    0
    • Michael John Burns

      Monday, February 25th, 2013 09:41

      5

      Hello Anh Duc,

      Glad that you like it. Hope this help you.

      -1
  • karthi

    Tuesday, February 26th, 2013 12:58

    21

    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….

    0
    • karthi

      Tuesday, February 26th, 2013 13:00

      22

      Sorry to mention i’m jus a beginner with lots of silly questions:):)

      0
    • Michael John Burns

      Tuesday, February 26th, 2013 23:10

      25

      Hello Karthis, the best way to start is follow the standard which is 960px.

      +1
  • Danny Campbell

    Monday, February 25th, 2013 21:40

    14

    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

    0
    • Michael John Burns

      Monday, February 25th, 2013 22:38

      15

      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.

      0
  • John Gagiatsos

    Monday, February 25th, 2013 10:26

    9

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

    0
  • Ian

    Monday, February 25th, 2013 10:14

    7

    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.

    0
    • Michael John Burns

      Monday, February 25th, 2013 11:09

      10

      Hello Ian,
      The first 3 take of the video is not on HD since I’ve mistaken to record it.
      For the next part I promised it’s on HQ.

      0
      • Ian

        Tuesday, February 26th, 2013 09:29

        20

        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

        0
  • PERCY

    Monday, February 25th, 2013 11:47

    12

    THANK YOU MICHAEL! really useful, practical and easy to learned. Keep up the good job.

    0
  • Khaled Mosli

    Monday, February 25th, 2013 09:27

    3

    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!! :)

    0
    • Michael John Burns

      Monday, February 25th, 2013 09:42

      6

      Hello Khaled,

      Watch out for upcoming part for basic HTML & CSS. I hope you enjoy watching the videos and I hope you learn something from it.

      0
  • Wendy

    Monday, February 25th, 2013 13:41

    13

    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

    0
  • Mike

    Tuesday, February 26th, 2013 13:16

    23

    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!

    0
    • Michael John Burns

      Tuesday, February 26th, 2013 23:09

      24

      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.

      0
  • Siglotel

    Friday, March 8th, 2013 10:28

    39

    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

    0
  • Trikszi

    Thursday, March 7th, 2013 07:19

    38

    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!!

    0
  • Artur

    Monday, February 25th, 2013 08:38

    1

    480px really ?

    0
    • Michael John Burns

      Monday, February 25th, 2013 09:41

      4

      Hello Artur,

      Sorry! I’m Not really sure which part you are referring to 480px.

      +1
      • Artur

        Monday, February 25th, 2013 10:16

        8

        Movies resolution

        -2
        • Michael John Burns

          Monday, February 25th, 2013 11:11

          11

          Forgive me of the quality for this 1st Part of this series ps on the 2nd part it’s on HQ 720p.

          +1
  • Grace

    Thursday, March 14th, 2013 19:39

    40

    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 ?

    0
  • charles

    Wednesday, March 20th, 2013 05:51

    41

    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

    0
  • Sonya

    Tuesday, May 14th, 2013 16:05

    45

    Oh my goodness!! Very helpful tutorials!! Thank you so much!

    0
  • Luai

    Saturday, May 11th, 2013 10:25

    44

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

    0
  • Sinbad Konick

    Tuesday, March 26th, 2013 16:40

    43

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

    0
  • Joe

    Thursday, March 7th, 2013 03:00

    37

    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.

    0
  • LaTrice

    Wednesday, March 6th, 2013 22:40

    35

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

    Thanks

    LaTrice

    0
    • Michael John Burns

      Wednesday, March 6th, 2013 23:34

      36

      Hello LaTrice,

      Hope it helps you and make sure to watch part 2 :)

      0
  • Franz Reischl

    Wednesday, February 27th, 2013 07:51

    29

    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

    0
    • Franz Reischl

      Wednesday, February 27th, 2013 16:29

      31

      … and I´m sorry for spelling your name wrong, only noticed just now.

      0
  • John

    Thursday, February 28th, 2013 10:07

    32

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

    0
  • John Abramovic

    Friday, March 1st, 2013 03:20

    33

    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! :)

    0
  • Edder

    Tuesday, February 26th, 2013 05:49

    17

    very good video !!!, is the next video about html and css out yet (part 2)?

    -2
    • Michael John Burns

      Tuesday, February 26th, 2013 23:14

      27

      Hello Edder, Zup?

      Yep! Got it right!

      -2
  • Sonya

    Tuesday, May 14th, 2013 16:05

    45

    Oh my goodness!! Very helpful tutorials!! Thank you so much!

    0
  • Luai

    Saturday, May 11th, 2013 10:25

    44

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

    0
  • Sinbad Konick

    Tuesday, March 26th, 2013 16:40

    43

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

    0
  • Greecy

    Friday, March 22nd, 2013 04:40

    42

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

    +1
  • charles

    Wednesday, March 20th, 2013 05:51

    41

    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

    0
  • Grace

    Thursday, March 14th, 2013 19:39

    40

    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 ?

    0
  • Siglotel

    Friday, March 8th, 2013 10:28

    39

    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

    0
  • Trikszi

    Thursday, March 7th, 2013 07:19

    38

    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!!

    0
  • Joe

    Thursday, March 7th, 2013 03:00

    37

    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.

    0
  • LaTrice

    Wednesday, March 6th, 2013 22:40

    35

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

    Thanks

    LaTrice

    0
    • Michael John Burns

      Wednesday, March 6th, 2013 23:34

      36

      Hello LaTrice,

      Hope it helps you and make sure to watch part 2 :)

      0
  • Sohil Memon

    Friday, March 1st, 2013 09:39

    34

    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.

    +2
  • John Abramovic

    Friday, March 1st, 2013 03:20

    33

    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! :)

    0
  • John

    Thursday, February 28th, 2013 10:07

    32

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

    0
  • Ananthi

    Wednesday, February 27th, 2013 10:47

    30

    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.

    +1
  • Franz Reischl

    Wednesday, February 27th, 2013 07:51

    29

    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

    0
    • Franz Reischl

      Wednesday, February 27th, 2013 16:29

      31

      … and I´m sorry for spelling your name wrong, only noticed just now.

      0
  • Mike

    Tuesday, February 26th, 2013 13:16

    23

    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!

    0
    • Michael John Burns

      Tuesday, February 26th, 2013 23:09

      24

      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.

      0
  • karthi

    Tuesday, February 26th, 2013 12:58

    21

    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….

    0
    • karthi

      Tuesday, February 26th, 2013 13:00

      22

      Sorry to mention i’m jus a beginner with lots of silly questions:):)

      0
    • Michael John Burns

      Tuesday, February 26th, 2013 23:10

      25

      Hello Karthis, the best way to start is follow the standard which is 960px.

      +1
  • Praveen Bhardwaj

    Tuesday, February 26th, 2013 06:48

    19

    Great videos. I’ve downloaded all of them. Thanks a lot for sharing.

    0
  • Paul

    Tuesday, February 26th, 2013 06:47

    18

    Why Photoshop? Fireworks would be far mor suitable.

    0
    • Michael John Burns

      Tuesday, February 26th, 2013 23:12

      26

      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.

      0
  • Edder

    Tuesday, February 26th, 2013 05:49

    17

    very good video !!!, is the next video about html and css out yet (part 2)?

    -2
    • Michael John Burns

      Tuesday, February 26th, 2013 23:14

      27

      Hello Edder, Zup?

      Yep! Got it right!

      -2
  • vijay

    Tuesday, February 26th, 2013 02:28

    16

    very nice article… Enjoyed!! keep it up.

    +8
    • Michael John Burns

      Tuesday, February 26th, 2013 23:15

      28

      Hello Vijay,

      Hope you enjoyed the article.
      Watch out for the next part.

      Have a great day!

      +1
  • Danny Campbell

    Monday, February 25th, 2013 21:40

    14

    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

    0
    • Michael John Burns

      Monday, February 25th, 2013 22:38

      15

      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.

      0
  • Wendy

    Monday, February 25th, 2013 13:41

    13

    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

    0
  • PERCY

    Monday, February 25th, 2013 11:47

    12

    THANK YOU MICHAEL! really useful, practical and easy to learned. Keep up the good job.

    0
  • John Gagiatsos

    Monday, February 25th, 2013 10:26

    9

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

    0
  • Ian

    Monday, February 25th, 2013 10:14

    7

    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.

    0
    • Michael John Burns

      Monday, February 25th, 2013 11:09

      10

      Hello Ian,
      The first 3 take of the video is not on HD since I’ve mistaken to record it.
      For the next part I promised it’s on HQ.

      0
      • Ian

        Tuesday, February 26th, 2013 09:29

        20

        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

        0
  • Khaled Mosli

    Monday, February 25th, 2013 09:27

    3

    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!! :)

    0
    • Michael John Burns

      Monday, February 25th, 2013 09:42

      6

      Hello Khaled,

      Watch out for upcoming part for basic HTML & CSS. I hope you enjoy watching the videos and I hope you learn something from it.

      0
  • Anh Duc

    Monday, February 25th, 2013 09:26

    2

    Thanks for great videos. I’m a web developer and your tutorials is what I need.

    0
    • Michael John Burns

      Monday, February 25th, 2013 09:41

      5

      Hello Anh Duc,

      Glad that you like it. Hope this help you.

      -1
  • Artur

    Monday, February 25th, 2013 08:38

    1

    480px really ?

    0
    • Michael John Burns

      Monday, February 25th, 2013 09:41

      4

      Hello Artur,

      Sorry! I’m Not really sure which part you are referring to 480px.

      +1
      • Artur

        Monday, February 25th, 2013 10:16

        8

        Movies resolution

        -2
        • Michael John Burns

          Monday, February 25th, 2013 11:11

          11

          Forgive me of the quality for this 1st Part of this series ps on the 2nd part it’s on HQ 720p.

          +1

Comments are closed.

54.167.41.199 - unknown - unknown - US