Blogging is easy! You just buy a domain, hosting and start writing. If you can’t afford to buy a domain name you can use WordPress or BlogSpot or Tumblr and many more. I am a professional blogger. I am blogging for almost 6 years now & I have written a lot of articles in various topics. Bloggers need to work with different tools. The main priority of a blogger is writing but he also needs to know how to setup a Blog, Buying a nice domain name, Host it on a good server than install a CMS he wants to use, If you are using WordPress as CMS then install a theme and customize it accordingly, Design a logo for the Blog etc. So it seems that a blogger becomes a WordPress customization expert when working with his/her blog and also a logo designer and he is an Article writer as well. So many things he must know to start a Blog! But what I wanted to talk about is how from a Blogger I became a web designer and what difficulty I faced and how to cope up with those.

breezi_placeit3

First of all the reason I wanted to be a web designer is simple I wanted to design a website in Photoshop, I saw many designers sharing their design in Social Media, Dribble, Behance and in other sites. I always wondered how they design such wonderful websites using photoshop where I can’t even design a nice logo for my Blog. So I started reading how to start web design and then came to learn that I have to know how to use all the Tools in Photoshop first. Cause if you don’t know how to use all the tools you might finish designing a website but you will suffer in the long run.

 

So I started looking for video tutorials on Youtube to learn all of this tools in Photoshop after surfing for a while I found this Youtube Chanel called thenewboston which is the best learning youtube channel you can find. Robert Bucky does the tutorials for the channel and he is like super cool. The describes everything so well.

Video Playlist Link : TheNewBoston

You can also see other tutorials which you like also there are various Paid tutorial site like TutsPlus or Udemy.

 

After getting to know this tools and use them for a couple of months I started designing a website and after finishing it I was like WTF is this, this is so bad I deleted it immediately. I started surfing around the web and see other people’s designs and I had one designer friend he said take inspiration from the other peoples design and try to copy them, I said why copy i want to design a unique one. He replied if you can copy their work it will give you confidence and you will learn a lot when copying it’s like an intern period for you. So I started copying other peoples design. After one month or so I learned a lot of things but still it wasn’t good enough. So I again talked with him about this and he gave me another suggestion he asked me to design a one page website for a company and before starting the design he said take a notebook design it by your hand first, write some note there what color, what is the font size etc. So I started again and it was better this time. Everything was good, but I couldn’t align them properly I was confused what’s wrong so I downloaded a premium PSD from ThemeForest and gone through the PSD to see what’s wrong in my one. I saw they used some kind of grid I had no idea what is that so I asked in a facebook group and they gave me proper knowledge what is a grid and how to use it. After that, i again made a wireframe and my design now looked much better. I was quite happy with my progress. But still I was far behind to be a good web designer. One day I met one of my community designer friend in a conference I talked with him about this design issues of mine. He told me when designing something there are things you need to keep in mind first choosing the color combination, then what font will you use – you can’t just pick a font and use it. It has to look good, you need to design a wireframe before designing and take your time when design, he told me to do some research on Visual Hierarchy – what is F pattern, what is z pattern, spacing issues in design, Typography, using icons, etc. So it was a lot for me and I kept doing search on the web to know more about these things and finally I learned some of them. He also told me to do a lot of designs for practice and if possible take some projects and work on them. Which will improve my designs. That’s how I became a web designer from a complete noob of Photoshop who didn’t even knew how to use the tools. It’s just doesn’t matter if you don’t know anything it matters did you tried to know or not. It’s not like I am a great designer now, but I can call myself a good one at least I can now design a website.

 

So here are some steps you can follow based on my experience:

Tutorials:

  • https://www.youtube.com/playlist?list=PLqEB9TT9wSdjFfsZIP7pnxuc5oZXuYdcw
  • https://www.youtube.com/watch?v=givuYd_cKm0&list=PL6gx4Cwl9DGD25IGk9Xf7oC3wiT9gC75x
  • https://www.udemy.com/master-web-design-in-photoshop/

 

Blogs:

  • http://webdesign.tutsplus.com/
  • http://design.tutsplus.com/
  • https://webdesignledger.com/
  • http://www.webdesignerdepot.com/
  • http://pmcneil.com/
  • http://speckyboy.com/
  • http://www.smashingmagazine.com/

Icon:

  • https://www.iconfinder.com/
  • http://www.flaticon.com/
  • http://themify.me/themify-icons

Font:

  • http://www.1001freefonts.com/
  • http://www.fontsquirrel.com/fonts/list/popular
  • http://www.dafont.com/
  • http://www.urbanfonts.com/free-fonts.htm
  • http://www.fontspace.com/
  • http://www.fontpalace.com/

Grid:

  • http://960.gs/
  • http://pixel-industry.com/freebees/1170_GS_PS_Action.rar
  • http://webdesign.tutsplus.com/articles/choosing-a-grid-system–webdesign-14490
  • https://helpx.adobe.com/photoshop/using/grid-guides.html

 

Free Image:

  • http://www.stockvault.net/
  • https://picjumbo.com/
  • http://www.photl.com/
  • http://www.studio25.ro/EN
  • http://www.freephotobank.org/main.php
  • http://www.freephotosweb.com/freephotoswebhttp://www.freephotosweb.com/freephotosweb
  • http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design–webdesign-84
  • http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html
  • http://webdesign.tutsplus.com/series/web-design-theory–webdesign-2002
  • https://visualhierarchy.co/blog/
  • https://visualhierarchy.co/blog/typography-design-rules-that-you-should-follow/
  • http://www.sitepoint.com/3-text-spacing-principles-every-designer-needs-to-know/

 

Inspiration and Showcase:

  • dribbble.com
  • behance.net
  • http://www.deviantart.com/

 

That’s it for today, I will update the post with some more info when I can manage some time. There are a lot more resources in the web you just have to do some search.  I am not a Pro in Web Design but this are the things I faced so I wrote this post I hope you can get some help from this and if there is any mistake do let me know so I can update with for the others.

 

Leave a Reply

Your email address will not be published. Required fields are marked *