{"id":20460,"date":"2019-02-12T11:38:26","date_gmt":"2019-02-12T06:08:26","guid":{"rendered":"https:\/\/www.fatbit.com\/fab\/?p=20460"},"modified":"2025-11-17T12:46:24","modified_gmt":"2025-11-17T07:16:24","slug":"techniques-in-designing-website","status":"publish","type":"post","link":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/","title":{"rendered":"Using Traditional Art Techniques In Designing Classic Website"},"content":{"rendered":"

It\u2019s easy to assume that the challenges facing a web designer are completely unique and novel. Despite being based on technology that is still relatively new in the grand scheme of things, web design nevertheless shares a lot of DNA with pre-existing forms of art and design.<\/span><\/p>\n

For hundreds and thousands of years of human history, brilliant individuals have been developing tricks and techniques to make drawings, paintings, photography, graphic design and other forms of visual media beautiful or arresting – and arranging elements on a web page is as much an act of artistic composition as the creation of an oil painting.<\/span><\/p>\n

Let\u2019s look at some classic visual art techniques that have stood the test of time and consider their usefulness for web design\u2026<\/span><\/p>\n

Structural composition<\/b><\/h3>\n

One fundamental compositional technique that has been in use since at least the eighteenth century is known as the <\/span>rule of thirds<\/span><\/i>. <\/span><\/p>\n

\"<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Image: Wikimedia\/Moondigger, licensed under Creative Commons 2.5<\/span><\/i><\/p>\n

The crux of the rule is that a great way of composing a compelling image is to divide it into thirds (both horizontally and vertically) and align the most important element(s) either along the lines themselves or at the points of intersection. In the example image above, the tree is located exactly at the lower-right intersection of lines, and the horizon is aligned with the line of the lowest horizontal third. This creates a composition that is deliberately asymmetrical and yet satisfying, with a kind of \u201cwell-balanced tension\u201d or dynamic appeal.<\/span><\/p>\n

Of course, a website isn\u2019t exactly the same as a painting or photograph, because the user can scroll – but this is a great rule of thumb to consider for the above-the-fold portion of the layout, especially that which might include a hero image and some key floating elements.<\/span><\/p>\n

Greeting the website\u2019s visitors with a striking, beautiful composition when they first arrive is a great way to impress them with your client\u2019s style and professionalism – and you can ensure that key elements such as logos and call-to-action buttons are placed in compositionally strong areas where users will notice and respond to them.<\/span><\/p>\n

Another aspect of good composition is to not start with too many competing elements and to try to arrange only those few elements that are key to the communication of the idea. <\/span>
\n<\/span><\/p>\n

\u201cComposition is the art of arranging in a decorative manner the various elements which the painter uses to express his sentiments,\u201d the artist Henri Matisse once said. \u201cIn a picture, every separate part will be visible and… everything which has no utility in the picture is for that reason harmful.\u201d<\/span>
\n<\/span>
\n<\/span><\/p>\n

Colour theory<\/b><\/h3>\n

Classic color theory is as relevant for web design as it is for any other visual media. Pairing colors that complement one another, \u201cpop\u201d vibrantly or evoke specific emotions is a vital skill for any designer.<\/span><\/p>\n

\"Colour<\/p>\n

Claude Monet, Sunset in Venice, 1908<\/span><\/i><\/p>\n

Image: Public Domain<\/span><\/i><\/p>\n

One essential color theory idea is the concept of <\/span>complementary colors<\/span><\/i>. The above painting by Monet seems vibrantly colorful because it juxtaposes cool blue with warm orange – colors which are technical opposites.<\/span>
\n\"color<\/p>\n

Complementary colors are easily selected by picking those that directly oppose each other on a color wheel. So, blue complements orange, green complements red, yellow compliments purple, and so on. <\/span><\/p>\n

Complementary colors paired in any composition will seem to \u201cpop\u201d vibrantly, which can be very useful for web designers looking for the perfect color for a call-to-action button or any other important element. Designers should be careful not to over-use this technique, however, and should be aware that over-saturated and overdone color pairings can sometimes seem garish.<\/span><\/p>\n

\"\"<\/p>\n

The hero image on this Lego website pairs a yellow-orange Lego character with a purple-blue background, for a vibrant color effect.<\/span><\/i>
\n<\/span><\/i><\/p>\n

While complementary colors are excellent for projects that require vibrant colors, others may require more muted combinations. Another color theory approach is <\/span>analogous colors<\/span><\/i>, which are those that are clustered closely together on the color wheel and provide a more harmonious blend of hues when used together.<\/span><\/p>\n

\"\"<\/p>\n

The imagery on Coca-Cola’s website predominantly features analogous shades of red through to dark purple.<\/span><\/i><\/p>\n

Colour association, too, is an important part of any design. The Russian painter Wassily Kandinsky once said, \u201cColor provokes a psychic vibration. Color hides a power still unknown but real, which acts on every part of the human body.\u201d<\/span><\/p>\n

The <\/span>psychology of color<\/span><\/a> association is probably too broad a subject to be covered in this post and is a fascinating topic in and of itself. However, it is worth considering at least in general terms, as the color choices you make should ideally reflect the \u201cmood\u201d you would like to convey to your visitors. If the vibe of your client\u2019s business could be expressed as a color, would it be warm or cool? Light or dark? Saturated or muted?<\/span>
\n<\/span>
\n<\/span>There are plenty of sources online attempting to ascribe specific moods or associations to colours (i.e., purple equalling wisdom, luxury and creativity, whilst brown means earthiness, and so on). These can be useful for general guidance, although they should perhaps be taken with a pinch of salt; it\u2019s seemingly quite rare for any two analyses to actually agree.<\/span><\/p>\n

Colour association is also heavily influenced by the viewer\u2019s cultural background in any case – for example, white generally means purity, clarity, and peace in the West, but is the color of death to the Chinese.<\/span><\/p>\n

Leading lines and negative space<\/b><\/h3>\n

\"Leading<\/p>\n

Image: Public domain<\/span><\/i><\/p>\n

A \u201cleading line\u201d is a straight or slightly curved line in an artistic composition that serves to draw the viewer\u2019s eye to an area of key interest – otherwise known as a <\/span>focal point<\/span><\/i>. In the above example, the viewer\u2019s eye is first drawn to the large and comparatively dark shape of the nearby brick wall on the right-hand side and then travels along the length of the wall to reach the distant lighthouse.<\/span><\/p>\n

\"\"<\/span><\/i>Jaguar\u2019s website makes use of lines that draw the eye into the illuminated central space with the cars.<\/span><\/i><\/p>\n

\u00a0This technique can be used in web design to focus the viewer\u2019s eye on a specific element, either by utilizing leading lines in the hero image or by employing interesting geometry in the page layout itself. This could be used to draw attention either to the imagery of the product itself or otherwise to a key element of the website such as an important textbox or action button.<\/span><\/p>\n

\"\"<\/p>\n

The use of negative space<\/i> in the composition can also be used to draw attention to an element in a dynamic way. Negative space is defined as the \u201cdead space\u201d around the subject of the image and can be used to make an element seem to be of critical, absolute importance. It is also sometimes used to create ingenious effects in text and logos.<\/p>\n

\"\"<\/p>\n

The negative space between the \u2018E\u2019 and \u2018x\u2019 of \u2018FedEx\u2019 famously forms the shape of an arrow pointing to the right.<\/span><\/i><\/p>\n

In conclusion, the most important takeaway might be this: there are many techniques and possibilities, and it\u2019s always best to consider each project on its own merits and decide which approach will be the most appropriate for communicating the essential points. After all, in the words of Michelangelo, \u201cA man paints with his brains and not with his hands.\u201d<\/span><\/p>\n

Having a broad understanding of traditional art and design techniques could be the key to putting your website designs on another level to your competitors. By learning the tricks of the old masters, you could produce websites that are not only modern and clean but are also classically beautiful works of art.<\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Artists from ancient history have been developing techniques and tricks to make paintings, images, etc. stand out from the rest. As fierce competition in the online world has increased, web designers are making use of these art techniques for designing purposes. Read ahead to check the unique art techniques<\/p>\n","protected":false},"author":68,"featured_media":20482,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45],"tags":[1882],"acf":[],"yoast_head":"\nTraditional Art Techniques To Design Classic Website<\/title>\n<meta name=\"description\" content=\"Traditional art techniques contributing to website design and enhancing UX. Learn how ancient art techniques can be used to engage customers to complete their buyer's journey.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Traditional Art Techniques To Design Classic Website\" \/>\n<meta property=\"og:description\" content=\"Traditional art techniques contributing to website design and enhancing UX. Learn how ancient art techniques can be used to engage customers to complete their buyer's journey.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/\" \/>\n<meta property=\"og:site_name\" content=\"FATbit Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-12T06:08:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-17T07:16:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2019\/02\/FINAL-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abhishek Kataria\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@FATbit_Tech\" \/>\n<meta name=\"twitter:site\" content=\"@FATbit_Tech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Kataria\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Traditional Art Techniques To Design Classic Website","description":"Traditional art techniques contributing to website design and enhancing UX. Learn how ancient art techniques can be used to engage customers to complete their buyer's journey.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/","og_locale":"en_US","og_type":"article","og_title":"Traditional Art Techniques To Design Classic Website","og_description":"Traditional art techniques contributing to website design and enhancing UX. Learn how ancient art techniques can be used to engage customers to complete their buyer's journey.","og_url":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/","og_site_name":"FATbit Blog","article_published_time":"2019-02-12T06:08:26+00:00","article_modified_time":"2025-11-17T07:16:24+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2019\/02\/FINAL-1.jpg","type":"image\/jpeg"}],"author":"Abhishek Kataria","twitter_card":"summary_large_image","twitter_creator":"@FATbit_Tech","twitter_site":"@FATbit_Tech","twitter_misc":{"Written by":"Abhishek Kataria","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/","url":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/","name":"Traditional Art Techniques To Design Classic Website","isPartOf":{"@id":"https:\/\/www.fatbit.com\/fab\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/#primaryimage"},"image":{"@id":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2019\/02\/FINAL-1.jpg","datePublished":"2019-02-12T06:08:26+00:00","dateModified":"2025-11-17T07:16:24+00:00","author":{"@id":"https:\/\/www.fatbit.com\/fab\/#\/schema\/person\/776b35dc62f4fa1fcd658d3bcacde261"},"description":"Traditional art techniques contributing to website design and enhancing UX. Learn how ancient art techniques can be used to engage customers to complete their buyer's journey.","breadcrumb":{"@id":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/#primaryimage","url":"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2019\/02\/FINAL-1.jpg","contentUrl":"https:\/\/www.fatbit.com\/fab\/wp-content\/uploads\/2019\/02\/FINAL-1.jpg","width":600,"height":400,"caption":"Traditional Art Techniques In Designing"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fatbit.com\/fab\/techniques-in-designing-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fatbit.com\/fab\/"},{"@type":"ListItem","position":2,"name":"Using Traditional Art Techniques In Designing Classic Website"}]},{"@type":"WebSite","@id":"https:\/\/www.fatbit.com\/fab\/#website","url":"https:\/\/www.fatbit.com\/fab\/","name":"FATbit Blog","description":"FATbit Blog- Software development, eCommerce marketplace solution, Web and mobile app development and marketing insights. Get expert insights!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fatbit.com\/fab\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.fatbit.com\/fab\/#\/schema\/person\/776b35dc62f4fa1fcd658d3bcacde261","name":"Abhishek Kataria","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fatbit.com\/fab\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d447fc12ce8ec859be05928aeb54cb2f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d447fc12ce8ec859be05928aeb54cb2f?s=96&d=mm&r=g","caption":"Abhishek Kataria"},"description":"Abhishek Kataria is a business consultant at FATbit Technologies. He assists entrepreneurs and business owners in developing viable digital touchpoints and marketplaces. Abhishek is curious about exploring and analyzing new business trends and has a keen eye for the latest developments in the eCommerce sector. Apart from consulting, you can find him practicing French and exploring his creativity in Photoshop.","url":"https:\/\/www.fatbit.com\/fab\/author\/abhishek-kataria\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/posts\/20460"}],"collection":[{"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/comments?post=20460"}],"version-history":[{"count":1,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/posts\/20460\/revisions"}],"predecessor-version":[{"id":35657,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/posts\/20460\/revisions\/35657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/media\/20482"}],"wp:attachment":[{"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/media?parent=20460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/categories?post=20460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fatbit.com\/fab\/wp-json\/wp\/v2\/tags?post=20460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}