How Attention to Detail will enhance your design skills

If you want to take your design skills to the next level then the first place you should start is with the look and feel. While raising your coding skills and getting into the latest trends of CSS3 and html5 will make you feel all warm and fuzzy in your skill-set, its the visual side of your work that will capture the eye of your next customer.

So what can you do? Crazy layouts? As much movement as you can fit in? Actually no. You need to work on your common elements in design and let the content speak to its audience. You need to apply attention to detail and raise the standard of your design skills.

I will run thought some common elements and how you can improve them.

1: Forms
Forms are one of the most common and important interaction with your audience you will have. This is a great place to start styling into your own custom manor. Everyone knows that text boxes and textareas are bland and buttons grey and ugly. You might already be styling your forms with some color and borders but why not add some custom backgrounds and make your forms come alive. The simplest way to do this is just applying a background to the element with CSS. Here are some examples.

*note, IE has a issue with text-indent so if you want to offset the button text try this method:
background-image: url(‘buttonBackground.png’);
line-height: 999px; /* Set the line height higher than your image height */overflow: hidden; /* Hide the text */

2: Backgrounds
This is an area where you can really lift the look of your website. By designing a large background you can easily create an atmosphere for your website and give some visual depth to your work. Be sure to keep the file size as low as possible and you will enter a whole new style of design. Take a look at how a website can be transformed with large detailed backgrounds.

3: Menus
When it comes to navigation you don’t want to over complicate it, make sure that it is still usable by the average user. What you can do to spice up your navigation is use background images and stylish dropdown menus where they are needed. Here are some examples of great navigation design that is both clear to understand and visually pleasing.

4: Images
A simple way to add life to your content is to add images. But don’t settle for images with a single border, why not add an overlay to make the image more in line with the overall design of the website. These effects are generally a PNG image that is positioned on top of the image using CSS. Take a look at these great examples.

6: Video
When embedding video into your website it is often preferable to use YouTube as the host. This is for many reasons but the most important is you don’t want to put the drain of streaming media onto your client and leave them with a huge bill at the end of the day.

YouTube’s default embed code is far from pretty so what you want to do is use their API to make your own player.
Using the YouTube Player API you can make yourself a chromeless player. From there you can style your own player and adding the functions that you want. These can all be controlled via javaScript and Actionscript if you wish to control the movie with flash. By using this method you would be able to create player controls to any style.

5: Footers
We all know that a footer is a great place to store quick links and contact info. But if you build on the theme of your website and make the footer a feature in itself you then keep the user from feeling like they have hit the end of the page. Instead you open them up to another sub section of the website where they can navigate to other content. Take a look at these fine examples of footer design.

If you apply these practices and attention to detail then you will create far better website design that don’t interfere with the content that is being delivered. Instead you will create a rich user experience for your audience.

1 votes