View Full Version : What is this type of website look called?

12-24-2011, 12:29 PM
I'm soon going to invest on a website that is actually decent. I recently came across this site http://www.trapcall.com/signup and I really like that simplistic look and the color shading.

There's just something that grabs my attention about this design and I'm thinking this would grab the attention of my future visitors too.

Do you think this would fit a computer tech site's needs? or does it look to "kiddy" (because of how colorful it is). Lastly what is this style called? (So I can start shopping around for a good price)

ps I dont know much about website design.

Cambridge PC Support
12-24-2011, 02:19 PM
I don't what it's called, but I like it.

Myself and a lot of techs here use this:


12-24-2011, 02:20 PM
It's just a simple good, better, best comparison page. I don't see why this wouldn't work for a computer tech site as I do it all the time when giving my customers options. They can pick based on their needs and budget and either way I get a sale.

12-24-2011, 03:02 PM
If you can customize colors according to yours, it is all good :)

12-24-2011, 03:11 PM
If you can customize colors according to yours, it is all good :)

If you can put together CSS or inline tags you will do good and it's one way of improving your code when the page/site is written.

12-24-2011, 07:11 PM
Wordpress templates designs have this kind of style built in.

12-24-2011, 07:42 PM
I'm soon going to invest on a website that is actually decent. I recently came across this site http://www.trapcall.com/signup and I really like that simplistic look and the color shading.

Basically its just a CMS with a price table. The eye-catching feature thats the 'bling' which is so appealing is simply the smart use of colour.

There's no magic to it: colours work to rules. In this instance its a 'colour triad' of specific complimentary shades of blue, green and orange.

If you look at any amount of advertising material, you will see this combo come up quite frequently. You will also see the colour diad of blue and orange, or blue and green, orange and green, etc. The concept has been around for ever and has been followed by artists and designers for a long time.

This can easily bee seen by doing a Google image search for "logo (http://images.google.com/search?q=horizon&biw=1858&bih=948&sei=uy72Tr7kCIuaiQe4sdDOAQ&tbm=isch#hl=en&tbm=isch&sa=1&q=logo&pbx=1&oq=logo&aq=f&aqi=g10&aql=&gs_sm=e&gs_upl=122802l123064l0l123344l4l3l0l0l0l0l406l687l 2-1.0.1l2l0&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&fp=75fec1445d9811bb&biw=1858&bih=948)"

So for example if you grab the orange from the page you are asking about in your original post, which is roughly #ff6500 (hard to be precise because all of the colours are gradients - not flat, but for this example close enough is good enough :) )

Then go to a site like http://colorschemedesigner.com/ and put in this value, then click on 'diad' or 'triad' and you will get a mix for each thats 'ideal' in terms of colour theory (shades that are complimentary)

Another way to see how this works is to look at a "colour wheel" like this one


If you look at any colour on the wheel - its complimentary colour ('diad') is on the opposite side (see particularly "blue" on the left and "orange" on the right) - and you can see where the basis of colour scheme from the page you are interested comes from.

Note: this is not 'a' colour wheel - its not how one individual sees colour. Google the concept and you will see this is a set of rules which will always work if applied correctly.

A neat way to play with this from your desktop is to grab a little app like 'colour cop (http://colorcop.net/)' which has a wee eye-dropper tool which you can drag onto any page you like the look of and it will show you the HEX colour code of the colour you like and then provide the a set of complimentary colours to go with it. You can, of course, play around with the hues a little bit to get the look you want. The rules are not absolute, just a framework to start from.

But, yeah, this "blue" "orange" "green" triad is actually very common - and I agree, it looks great! :)

WHY does this particular combo look so good? - here's a hint - pop outside to a wide open space and check out the horizon - the ground is usually green - foliage, and the sky, blue. This combination is actually fundamental to the natural environment. Now, add a sunset (orange) and you can see why it works so well - its an encapsulation of what we see in the best examples of our natural environment :)

For more examples of this in action, just do a google image search of the word "horizon (http://images.google.com/search?q=horizon&biw=1858&bih=948&sei=uy72Tr7kCIuaiQe4sdDOAQ&tbm=isch)"

In design terms, advertising copy works best using the KISS principle. Grab a primary and secondary with a neutral (any shade of black, white, or grey - these are tones, not colours and will go with any colours) and you have yourself the basis of a killer logo or image or website page. Additional colours can be added, - a tertiary is ok - but the more you add the more likely you are to detract from the strength of the initial contrast. (ie there's a reason that most logos use only a couple or a few colours). In this instance only THREE colours are used with three neutrals in the background. Note also the repetition of the colours from the Trapcall logo, and in the buttons on the top right. No new colours are introduced - its not necessary. Just three complimentary colours for the whole page. This is also the formula repeated throug the rest of the site (see HOME also).

Cambridge PC Support
12-24-2011, 08:07 PM
Jeez that Jim knows his stuff! :)

12-24-2011, 09:46 PM
Adobe's kuler is a good tool for finding complimentary color schemes:


12-24-2011, 09:56 PM
It looks like your generic web hosting WP template with bright colors.

If you search for WP templates using "web hosting" and then "price comparison" you'd probably end up with quite a few in that style.

12-26-2011, 02:00 AM

That's some really good stuff there. Got my research hat on now, thanks!