enavu webdevmania tutsvalley psdestination
visit the enavu network
2 Comments Article Title Overlay Article Title

7 Design Elements and Techniques that will make your Website stand OUT!

Introducing some of the most used and well known design elements that make websites stand out and look better.

I design so many websites nowadays, I keep realizing that no matter what, I like to stick with techniques proven to make a website stand out, and look good at the same time. It is really interesting [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Introducing some of the most used and well known design elements that make websites stand out and look better.

I design so many websites nowadays, I keep realizing that no matter what, I like to stick with techniques proven to make a website stand out, and look good at the same time. It is really interesting how some of those have lasted the years and some have simply left us within months. Today I want to talk about the ones that have lasted, and you should try using to make websites that will grab users attention.

typographyBeautiful Typography to summarize the website within a sentence or two

  This technique is used very often in today’s designs. Here is how it works. I find myself opening websites and taking time to find out what they actually do, but I do this because I am very interested in knowing why they did not make this obvious to me as a user, however users are not usually so nice. When someone enters a website they need to know why they are there. So using this technique will allow you to grab attention and help your user understand what you are showing to them and maybe what they can expect. Also inside that text you can bold/change color/italize the words to make them stand out. This technique can be used for more than front pages of course, for example title of the most important thing on the page should be the biggest. Also making words bold will increase their chance of being read.

 

colors

Creative Colors that work Together and Stand out

Using the right colors can sometimes be half the battle. I have noticed when I show off websites to friends their reaction will vary depending on the color scheme of the exact same elements. Coming up with the best colors for your websites can be vital. Currently in the company I am working for I create advertisements seen by hundreds of thousands of people, so it’s very important to not only get great click rates but also to leave a lasting impression in the mind of whoever sees my ads. For example making an AD that features mainly the color red is 99% of the time a BIG no no. Except now that the holiday season is approaching the red color has a completely different meaning, if in February you couldn’t stand a red AD comes November you are looking for holiday gifts, seeing that red can be the best reminder of the holidays. So pick colors that work well together. Make sure they summarize the content, or at least attract the users attention.

 

simplicity

Simplicity Can be Your Friend

Okay I admit this one is not self intuitive, you may ask yourself why would i want to make very simple and clean websites if i’m trying to grab attention. Well because if you use simplicity in the right way it can be a factor of how much your website stands out on its own. The page i have here in the sample uses a lot of white space, and very clean typography with great navigation and explanations to keep you hooked. Why does it keep you hooked, because it doesn’t make you stand on your chair and itch your heard to figure out what you’re looking at and what you need to do. All the white space allows for easy content separation which makes it easy on the eyes. You make it easy on my eyes, I stay on your website!

 

content

Content Separation using high Contrast/ Different Colors

I personally find overusing this one… it looks so good, and it works so well. As you can see in the example we have the dark blue at the top of the page, and then we go right into a white block. This helps our users SO much, they don’t have to separate the content because it’s already done visually. Okay so first I look at the blue, then at the white, than at the black footer, great this website is awesome. This also helps you show importance to certain elements, and take importance away from others. Also sometimes you can use a sharp line in between then of a third color, I’ve seen this done very successfully with gray colors. Dark almost black block on top and a completely white 1 pixel line under then a 1px solid gray line and then the white block.

 

transperancy Transparency is very future-like

It may be hard to see in the preview thumbnail so i suggest opening it to see the image. Transparency is a great little way to make an amazing design. The first time i really saw transparent design elements that really spoke to me in the first design of Mint.com. Even today the mint website has some great transparency going for it, but now it’s more common to see the use of transparent blocks in a website. In the example there is a great background repeater and some black transparent block elements on top of the repeater. This works great with big background images that have a lot of detail in them.

 

background-pattern

Background pattern that really sticks out!

In modern design there are a lot of great designs with really nice background patterns. This one for example is a wooden wall/fence that works really well with the color choices on the page. Another great example you should look at for sure is http://www.outlawdesignblog.com/ they make great use of a repeater. But the idea is that when you have a very catchy background  the web elements don’t need to shine as hard to achieve a great impression. There are some great websites out there that offer nice free patterns, such as http://www.brusheezy.com/patterns and http://speckyboy.com/2009/01/05/36-must-have-backgrounds-and-patterns-resources-for-all-designers/

 

light_on_light

Light on light

Personally this is one of my favorites, but it does have its cons. This effect looks amazing, you use very light colors, and you make elements that are even lighter. It makes your viewer feel at ease, the website looks very clean and simple. In the example the background is a very light gray, and the main content element is one shade off of white. As I said this method does have it’s problems, for example on a few monitors (maybe 20% or so) the difference between the shades will be close to invisible, hence the website will look as if it were white. That’s why it’s nice to have a few monitors (laptop, and dual different monitors) so you can view your website in a few different brightness levels and know how it will look in the worst case scenario.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. 52 Inspiring Website Elements You Must See [pics]
  2. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites
  3. How to plan out a new website – Definitive Guide
  4. The most influential web designs today, and why they work!
  5. Inspiration – An outside the box approach to getting inspired

Did you absolutely LOVE this article... share it!

Comments

  • Really it is nice post, The post is clearly highlighting the values of law. It is now being necessary for all of us to understand law and its values.
    montreal exotic massage

  • This one is fantastic, i m new to the field, thanks for the help…

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting