{"id":652,"date":"2005-10-05T23:00:00","date_gmt":"2005-10-05T17:30:00","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/05\/15-popular-web-designing-tips-tools\/"},"modified":"2026-10-15T14:01:10","modified_gmt":"2026-10-15T08:31:10","slug":"15-popular-web-designing-tips-tools","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/","title":{"rendered":"15 Web Design Tools and Tips for Beginners (2026)"},"content":{"rendered":"<p>Why hire a consultant when you can design a good website yourself? Back in 2005 I went looking for popular web designing tips and tools and shared my 15 favourites here. This 2026 update replaces that list with the <strong>web design tools<\/strong> and tips that matter today, for layout, fonts, colour, code and speed.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-67152\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/web-design-tools-2026-1024x538.webp\" alt=\"Web design tips and tools\" width=\"1024\" height=\"538\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/web-design-tools-2026-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/web-design-tools-2026-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/web-design-tools-2026-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/web-design-tools-2026-768x403.webp 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/web-design-tools-2026.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> The most useful free web design tools today are Figma or Penpot for mockups, Google Fonts for type, Coolors or Adobe Color for palettes, and the WebAIM Contrast Checker for readable text. Use MDN and Can I use to check CSS, your browser&#8217;s DevTools to debug, and PageSpeed Insights to test speed before you launch.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6aeff1ac49f72\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6aeff1ac49f72\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#15_web_design_tools_worth_bookmarking\" >15 web design tools worth bookmarking<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#Design_and_layout\" >Design and layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#Fonts_and_icons\" >Fonts and icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#Colour_and_accessibility\" >Colour and accessibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#Code_testing_and_speed\" >Code, testing and speed<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#Web_design_tips_that_still_work\" >Web design tips that still work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#What_happened_to_the_original_2005_list\" >What happened to the original 2005 list?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#What_is_the_best_free_web_design_tool_for_beginners\" >What is the best free web design tool for beginners?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#Do_I_need_to_know_code_to_design_a_website\" >Do I need to know code to design a website?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#How_do_I_pick_website_colours\" >How do I pick website colours?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/10\/15-popular-web-designing-tips-tools\/#How_can_I_check_if_my_site_is_fast\" >How can I check if my site is fast?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"15_web_design_tools_worth_bookmarking\"><\/span>15 web design tools worth bookmarking<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Design_and_layout\"><\/span>Design and layout<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a><\/strong>: browser-based design tool for wireframes, mockups and prototypes, with a free plan.<\/li>\n<li><strong><a href=\"https:\/\/penpot.app\/\" target=\"_blank\" rel=\"noopener\">Penpot<\/a><\/strong>: an open-source design and prototyping tool you can use online or host yourself.<\/li>\n<li><strong><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap<\/a><\/strong>: a popular CSS framework for responsive grids and ready-made components.<\/li>\n<li><strong><a href=\"https:\/\/csszengarden.com\/\" target=\"_blank\" rel=\"noopener\">CSS Zen Garden<\/a><\/strong>: one of my picks from the 2005 list and still online. The same HTML styled by many different stylesheets shows what CSS can do.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Fonts_and_icons\"><\/span>Fonts and icons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a><\/strong>: a large library of free, open-licence web fonts you can preview with your own text.<\/li>\n<li><strong><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a><\/strong>: an icon set with a free tier, usable as a web font or SVG.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Colour_and_accessibility\"><\/span>Colour and accessibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener\">Coolors<\/a><\/strong>: a fast colour palette generator. Lock the colours you like and regenerate the rest.<\/li>\n<li><strong><a href=\"https:\/\/color.adobe.com\/\" target=\"_blank\" rel=\"noopener\">Adobe Color<\/a><\/strong>: builds palettes from colour-wheel rules or from an uploaded image.<\/li>\n<li><strong><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM Contrast Checker<\/a><\/strong>: checks whether your text and background colours have enough contrast to read.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Code_testing_and_speed\"><\/span>Code, testing and speed<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/developer.mozilla.org\/\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a><\/strong>: the reference for HTML, CSS and JavaScript, with examples.<\/li>\n<li><strong><a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener\">Can I use<\/a><\/strong>: shows which browsers support a CSS or JavaScript feature.<\/li>\n<li><strong>Browser DevTools<\/strong>: built into Chrome, Firefox, Edge and Safari. Inspect elements, edit CSS live and test mobile layouts.<\/li>\n<li><strong><a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener\">W3C Markup Validation Service<\/a><\/strong>: finds HTML errors that can break layouts.<\/li>\n<li><strong><a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener\">Squoosh<\/a><\/strong>: compresses images in the browser and converts them to WebP or AVIF.<\/li>\n<li><strong><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a><\/strong>: Google&#8217;s free test for page speed and Core Web Vitals on mobile and desktop.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Web_design_tips_that_still_work\"><\/span>Web design tips that still work<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Many of the 2005 tips (avoid Flash, fix browser incompatibility, simplify forms) have turned into everyday good practice. These are the ones I would give a beginner today:<\/p>\n<ol>\n<li><strong>Design for mobile first.<\/strong> Most visitors arrive on phones, so start with a single-column layout and add columns for wider screens with CSS media queries, Flexbox or Grid.<\/li>\n<li><strong>Keep text readable.<\/strong> Use a comfortable font size, short line lengths, generous line spacing and strong colour contrast.<\/li>\n<li><strong>Limit fonts and colours.<\/strong> One or two font families and a small palette look more professional than many.<\/li>\n<li><strong>Make images light.<\/strong> Resize images to the size they display at, compress them and use modern formats like WebP.<\/li>\n<li><strong>Keep forms short.<\/strong> Ask only for what you need and label every field clearly.<\/li>\n<li><strong>Test before launch.<\/strong> Check the site on a real phone, in more than one browser, and with a speed test.<\/li>\n<\/ol>\n<p>If you want a very small CSS framework instead of Bootstrap, see our guide to the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/11\/chota-micro-css-framework\/\">Chota micro CSS framework<\/a>. For speed, compare the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/02\/best-web-page-speed-tests-online\/\">best web page speed tests<\/a> and learn what <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/05\/core-web-vitals\/\">Core Web Vitals<\/a> measure.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_happened_to_the_original_2005_list\"><\/span>What happened to the original 2005 list?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The first version of this post linked to bookmark lists, CSS trick collections, Typetester, Nifty Corners, Little Boxes, Listamatic and early colour scheme generators. Most of those pages are gone or no longer updated, and techniques like rounded corners and drop shadows that once needed clever hacks are now single CSS properties (<code>border-radius<\/code> and <code>box-shadow<\/code>). The tools above cover the same jobs with current, maintained options.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_best_free_web_design_tool_for_beginners\"><\/span>What is the best free web design tool for beginners?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Figma&#8217;s free plan is a good start for mockups. Penpot is a free, open-source alternative.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_I_need_to_know_code_to_design_a_website\"><\/span>Do I need to know code to design a website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Not to sketch a design, but basic HTML and CSS help a lot when you build or customise a site. MDN Web Docs is a good free place to learn.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_pick_website_colours\"><\/span>How do I pick website colours?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Generate a palette in Coolors or Adobe Color, then check text and background pairs in the WebAIM Contrast Checker.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_can_I_check_if_my_site_is_fast\"><\/span>How can I check if my site is fast?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Run your pages through PageSpeed Insights and fix the biggest issues it reports, usually large images and render-blocking scripts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why hire a consultant when you can design a good website yourself? Back in 2005 I went looking for popular&#8230;<\/p>\n","protected":false},"author":4,"featured_media":67152,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":67157,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/652\/revisions\/67157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/67152"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}