Join Over 20,000 Designers and Get My Free Design Tools

Get access to my email newsletter and all of my exclusive design tools, assets, Genesis child themes and more.

Get Free Access
Get Free Access
The Essential Web Design Handbook

Learn to Design Beautiful and Simple Websites

using my simple and proven methods.

The Essential Web Design Handbook is a complete guide to designing simple websites from initial ideas to the final Photoshop project files.

Get The Ebook


  1. Thanks Rafal for giving away the PSD template. Your ethics seems to be concentrating more on typography and yes it is important but how long for a news website. I have seen this around the web that modern typography is replacing 14px font to 16px. How much that affects on news website where lot of content needs to show up on screen rather than filling up screen with 16px fonts.

    • It all depends on the website layout. I found many news sites that are 100% wide these days. It helps to use a large body font on wide screens and of course scale it down responsively for smaller screens.

  2. Really great post, Rafal. Thank you! I have a similar work style when I design except I’m not as proficient in front end. The guidelines help me all the way through the project!

  3. Awesome job Rafal. I would really like to understand if you use a grid when developing the overall design and layout? Thanks.

  4. I am re-learning the design process and realize how badly I need to update my workflow. So glad I came to your blog (and read this post), tucked away in my bookmark tabs from yesteryears 🙂

    Of course Rafal, I have a question! 🙂

    You have this PSD, you have the fonts downloaded onto your PC for this?
    And also, do you use a grid system to get going?

    All the best man, good luck and God bless.

  5. Thanks for psd but i have a question that if i am converting a psd to responsive html which option is better bootstrap framework or self made css and media query.

  6. I agree with you. Typography plays an important role in a webdesign. Many website seem to exactly lack this quality which leads to cluttered or an unappealing website. Moreover, I feel a website since has equal weightage to its content and the design, I strongly feel that the typography used can bring clarity in the message and the information shared. I am pleased to read your post and thanks for sharing the PSD templates. I guess will try out the option of designing in the browser directly, but not too expert at that.

  7. Great work and thanks for sharing!
    Would you consider adding a section referencing components visual styles (Buttons, Form Elements, Iconography, … )? Or is it preferred to keep it separate?

  8. I’m a web design beginner. I just started my first project about a week ago. Your blog posts are very helpful especially to an newbie like me. Thank you very much.

    However, I’m at a loss. I can’t find the web style guide PSD template. I have signed up and found resources in the Designer’s Area but there’s no web style guide.

    • Regil,
      There are now two templates in the Designers Area: Web Typography Style Guide and Web Color Palette Guide.

  9. Great resource to have on-hand as I’m about to start a new project. I needed something to help in creating uniformity – much appreciated!

Leave a Reply

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