Thursday, March 11, 2010

50 ways to become a better designer

What is design? Design is both the process and the final product of an endeavour to fulfil a personal or professional brief. Whether you are creating a piece of graphic work, a website, or a design for a new product, the underlying principal is the same the creative process is everything. Bad design results from faults with this process poor planning, ignoring the conventions of the media, poor technical skills or poor communication. So how can you streamline your working methods?
How do you go from haphazard doodler to a well-oiled design machine? Listen to the experts.

We approached 17 leading designers working in print, video and on the web, to obtain their words of wisdom on every stage of the design process, from ideas and planning, through to best practice and software skills, and finally putting the finishing touches on their work. We also asked each of our experts to reveal their worst experiences, and how they turned them to their advantage.

Despite their very different backgrounds, many of our designers offered the same advice about reading the brief, and planning your work on paper. Design is a subjective thing, and we all have different ways of getting results, but take heed of the expert advice offered within the following pages and youre sure to improve the way you work.


The ideas stage
A blank canvas can be terrifying, so where do you start? Our experts reveal ways to force your ideas into motion

01  ROUGH COMPS
I put a rough composition together using scans or low-res images found on the web. This enables me to use the assets I like without worrying whether I have them at the right size or in the right colour. Once the rough is complete, I recreate it in a high-res format shooting, recycling or buying any photography I need to complete the piece.
SUPPLIED BY: DARREN FIRTH

02  METAPHORS
Themes and metaphors are great platforms for ideas and I try to develop them both from a holistic perspective (ie, basing a site around a playground metaphor) as well as a design perspective (colour schemes and layout styles, for example). If you can hit a decent theme that allows you to convey and house the content, its a good place to be.
SUPPLIED BY: LAITH BAHRANI

03  FROM WORDS TO PICTURES
When I receive a commission, the first thing I do is read it and underline key phrases. Then I draw some very small rough thumbs for each. Once Ive got a bunch of little thumbnails together, I look at them all and see which ones make good symbols and which are identifiable and relevant to the content of the story.
SUPPLIED BY: DEREK LEA

04  BRAND THINKING
I would recommend going on any brand courses run by the likes of the Design Business Association. Brand thinking is essential; it encourages you to develop a visual way of thinking and helps you develop keywords to hang everything off the essence of the idea. Above all else, keep it simple. If it gets complicated it isnt going to work.
SUPPLIED BY: JAY ARMITAGE

05   KEEP YOUR BRAINSTORMS REALLY SHORT
When coming up with ideas its essential to bounce ideas around with a colleague, but the secret is to keep the brainstorms as short as possible, otherwise theyll get stale. Its better to have a couple of smaller sessions than a single mammoth session.
SUPPLIED BY: JASON ARBER

06  USE A SKETCHBOOK
I usually plan my work in an A4 hardback book, which I carry with me at all times. Any ideas I have (often when on public transport staring out of the window) go in here, and they can then be referred to at a later date. Diagrams, sketches, thoughts, book titles and reference URLs go in, too.
SUPPLIED BY: OZ DEAN

07  GET AWAY FROM YOUR COMPUTER
I find the worst thing is to sit staring at a blank canvas on screen. Get out of your chair and take a ten-minute walk in the fresh air. If you cant do that, I find it helps to grab a Thesaurus and look up synonyms for the key words in the design brief.
SUPPLIED BY: RIGEL

08   JOIN A FORUM
Freelancers walk that lonesome road, but that shouldnt stop you from seeking feedback while in the concept stage. If you have creative friends, great! If not, join an art forum to bounce ideas off of your peers.
SUPPLIED BY: DAVE CURD

09  TAKE A SHOWER
I get a lot of my thinking done in the shower. Running water increases brain productivity, apparently, which explains why some of the best ideas are hatched in the shower. I try to read a brief well in advance of working on it, allowing ideas to gestate in the run up to the actual work.
SUPPLIED BY: OZ DEAN

10  SPECS!
Taking into account the different media that will be required in your project is really important. If there will be photography, illustration, 3D renderings, charts or diagrams then all this has to be taken into consideration and planned for. The printing spec should be explored as soon as possible with the printer its pointless waiting until the last minute, because some processes always take longer than others to complete.
SUPPLIED BY: JEFF KNOWLES

Best practice
Work smarter, not harder, with advice for best working practice

11  KEEP A LIBRARY
When working with Flash files, I always make a point of giving my layers and symbols relevant and self-explanatory names. I also keep a file called library, which contains timers, loopers, buttons, code snippets and symbols that I use regularly. This really speeds up production.
SUPPLIED BY: OZ DEAN

12   WEB STANDARDS
When designing websites you can save loads of time by using Firefox extensions such as Web Developer, HTML Validator and Fangs. Each will reduce the time it takes to create standardscompliant, accessible websites.
SUPPLIED BY: ODOG

13  KEEP IT CURRENT
Visit sites such as pixelsurgeon.com or designiskinky.com and read Computer Arts. Staying up to date with design doesnt mean just looking at the work of others, you should know the industry and stay ahead of the software curve. Dont fall behind as many designers do, but dont chase fads either.
SUPPLIED BY: JJ JOHNSTONE

14   KEEP IT SIMPLE
My illustrations can be quite complex, so I always place one limitation on myself. If I have an illustration with a lot of visual elements and textures, l force myself to use a simple colour palette. If I want to use loads of different colours I ensure that the illustration is kept simple. That way colour and design dont fight against each other.
SUPPLIED BY: DEREK LEA

15  RECORD YOUR ACTIONS
If there are procedures you do repeatedly in Photoshop, its worth recording them as an Action. I only learned this trick recently, and its a great time-saver.
SUPPLIED BY: RIGEL

16   SAVE, SAVE, SAVE!
Computers always seem to know when youre hitting a deadline and choose that moment to crash, destroying any unsaved work. So hit Save as often as possible.
SUPPLIED BY: JASON ARBER


17  STORE YOUR ASSETS
Everyone has their own way of doing things. I like to keep lossless versions of all the assets Im going to be using in a piece to allow for any last-minute changes of size/format by the client. This is helpful should someone decide to take a postcard design and turn it into an A0 poster. Keeping things at maximum editability is handy, too dont flatten layers in Photoshop until the very end, for instance.
SUPPLIED BY: JON BURGERMAN

18   COLLABORATE
Since there are only two of us, nothing gets released without approval from us both. If the other person thinks that it still lacks something, he/she will work on it. Or if one of us doesnt like the first draft, we start from scratch. Being on the same page makes the work easier and, more importantly, fun.
SUPPLIED BY: INKSURGE

19  GET IT RIGHT FIRST TIME
Even if you factor-in time for testing a website into your initial workflow, problems and client vacillations will inevitably eat into it, and its not unheard of for sites to go live with only cursory testing. For web designers, however, this quality assurance process is worth its weight in gold, even if project managers start sweating at the expense. Getting a site right the first time is the kind of cherry on top that can ensure you get more work from the same client.
SUPPLIED BY: JASON ARBER

20  PRACTICE ALWAYS MAKES PERFECT
The more projects you work on and the more time you spend using programs, the quicker and more efficient you become. You learn not only from your mistakes but also from your successes, and these will help raise your standard of production.
SUPPLIED BY: LAITH BAHRANI

Software skills
A bad workman blames his tools, so make sure your software works for you, not against you

21  ALPHA CHANNELS IN PHOTOSHOP
Take the time to experiment with Alpha Channel-based selections. I find that Alpha Channels are often the key ingredient to bringing real-world elements and textures into my artwork. Once you get into the groove of working with channels it changes the way you observe things in the real world.
SUPPLIED BY: DEREK LEA

22  BUY MORE RAM
My number-one tip would be to buy as much RAM as you can afford, because Photoshop will devour as much as you can throw at it. I tend to use lots of layers and so small jobs, such as designs for websites, can quickly grow into mammoth files.
SUPPLIED BY: JASON ARBER

23   GRADIENTS IN PHOTOSHOP
To prevent gradients from banding when printing, add a small amount of noise to the layer, varying the amount depending on the size and resolution of your canvas.
SUPPLIED BY: RIGEL

24  MORE LAYERS
From past experiences, my best suggestion when producing work in Photoshop (especially complex compositions) is to use as many layers as possible, avoiding merging objects together if you can. There is nothing worse than merging something together that later you wish to delete or change especially if you have gone past its History state.
SUPPLIED BY: DARREN FIRTH

25   AIRBRUSH IN ILLUSTRATOR
Lowering the Opacity of a path, adding a Gaussian Blur and combining them with a Clipping Mask in Illustrator allows for wonderful airbrushed styles to be built up with a level of control that isnt found in Photoshop.
SUPPLIED BY: INKWORM

26  EVIL FLASH
Never ever, ever, ever use the default Green-to-Black Gradient Fill tool in Flash. This is evil and will ultimately bring about the demise of humanity.
SUPPLIED BY: LAITH BAHRANI

27  NAME CONVENTIONS
Rather frustratingly, for me and everyone else, I always seem to approach projects in slightly different ways even naming files differently from job to job, with Photoshop versions named with 01, 02, 03 suffixes for one project, and then A, B, C for the next. So, no matter how smoothly the job goes, I admit that there is plenty of room for improved consistency in my approach!
SUPPLIED BY: JASON ARBER

28  GROUP LAYERS
Setting up Layer Group colours and Shy Layers in After Effects can be a massive time saver when it comes to client alterations and amends. I like to take the vector image into Photoshop for a bit of final colour tweaking. I usually do the same in After Effects using a Pre-Comp. I find it unifies the image colours just that little bit more.
SUPPLIED BY: JAMES WIGNALL

29  FORBIDDEN FRUIT
Weve all hit that stage when mastering Photoshop where we forbid ourselves certain filters or effects, but if you take some time to refresh yourself with these forbidden fruits, youre bound to discover some new tricks. For example, while you might not use difference clouds to make a blue and white sky, you can use it to make a selection while in Quick-mask mode, and you could exploit that selection to help render a more organic sky.
SUPPLIED BY: DAVE CURD

30  THINK ON PAPER
Use often-ignored tools called a felt-tip pen and sketchbook first, then a scanner, then various applications the usual suspects. My tip is to think with a pen and paper first, then use computers. It will lead to a stronger, more original voice.
SUPPLIED BY: JEREMYVILLE

Finishing work and finessing
An eye for the final details often makes the difference between a good and great piece of work. So read on and learn to how to put the cherry on top

31  WALK AWAY
I find that it is best to finish my illustration and then walk away from it for a day if I can. Sometimes by the time something is finished I am completely spent, especially when Im up against a tight deadline. Once Ive had a break (even a short one), Ill start up my machine and open up the finished file one last time. If I dont have any finishing touches in mind already Ill usually come up with some refinements that need doing after I look at the finished piece again.
SUPPLIED BY: DEREK LEA

32   ACROBATICS
For print designers, checking overprints, spot colours, trapping and knock-outs in Adobe Acrobat Professional is an often-overlooked step that can save you money and goodwill if your print settings are not right.
SUPPLIED BY: JASON ARBER

33   KERN!
and get a fresh pair of eyes to look at your work. I always ask my girlfriend to look at something Ive been working on. This is mainly because she is not a designer and sees things I dont look for she has a good eye for detail.
SUPPLIED BY: OZ DEAN

34   BACK TO THE BRIEF
Get feedback from the team as well as people not involved you need to stand back at the end and go back to your original notes and thinking. Check it still meets what you set out to achieve.
SUPPLIED BY: RALPH AND CO

35  ENOUGH IS ENOUGH
The most important thing with finishing touches is knowing when to stop. There is always a danger of pushing a piece of work too far. The advantage of computers is that you always have the undo options, but its all too easy to put some cherries on top for the sake of it, when all that it needs is a subtle sprig of parsley.
SUPPLIED BY: INKWORM

36   PRINT FINISHES
I find printing techniques a great way to enrich a project once it leaves the computer. Theres a multitude of ways to enhance a piece that cant be achieved in the digital world. Metallic inks, spot varnish, embossing, de-bossing, foil blocking, matt-laminating or diecutting can all be used individually or together to great effect.
SUPPLIED BY: JEFF KNOWLES

37   ADDING TEXTURE
I suppose most of my work has an organic feel, so for me the finessing is adding various textures and handmade marks such as pencil and crayon. Your instinct should tell you when the piece is complete although this does tend to be more tricky when it comes to personal projects!
SUPPLIED BY: KERRY ROPER

38   BE PREPARED
Working in the motion world can be tough. Print has tried and tested processes for high-quality work, but motion and video work is less predictable. Learn about your compressors and try to learn what works best for you and your projects. Make sure you stay lossless for the entire project a little bit of compression early on will just magnify as the project progresses. Save compression for the final output, and save lossless versions of your final version as well.
SUPPLIED BY: JJ JOHNSTONE

39   A LITTLE SHADING
The last things I normally add to my digital pieces are shadings, shadows and minor tweaks to the colours. These can help to solidify the piece and make it look all nice and polished.
SUPPLIED BY: JON BURGERMAN

40   BULGING EYES
Once a design, site or animation is virtually complete, its good to step back from the whole thing, take a deep breath and stare at it until your face turns blue and your eyes start bulging like that bit in Total Recall. During this time you should look for elements that could be tweaked, polished, scaled, added or removed to some effect. With designs, especially, Ill look for colours that could be made stronger or knocked back, and elements that could be nudged around to balance or otherwise complement the composition.
SUPPLIED BY: LAITH BAHRANI

Things to avoid
Finally, learn from your mistakes. Ten things you should avoid when working with clients

41   READ AND RE-READ!
When writing an email, do not fill the address bar until last. Go back and read what you have written at least twice. Too many people have horror stories about sending an email to somebody that it was not intended for. Dont become one of those people. Its not possible to undo a sent email.
SUPPLIED BY: OZ DEAN

42   BE SPECIFIC
Be specific when working with new clients, especially as far as revisions or changes are concerned. In my excitement to work with a client I didnt spend the necessary time going over the details of what was included in the fee. I received a call out of the blue from one of Canadas leading magazines. I simply said that minor tweaks and revisions would be fine.
SUPPLIED BY: DEREK LEA

43   DONT RELY ON THE SPELLCHECKER!
Dont rely on your computers spellchecker! Always proofread any text extremely carefully. Preferably, get someone else to proofread your work because you may be too familiar with it.
SUPPLIED BY: RIGEL

44   STICK TO THE BRIEF!
In the earlier days we used to do too much to try and win a pitch and produced way too much work on spec it made us look desperate when we were just enthusiastic. Stick to the brief and make sure you have answered it dont deviate, just answer it in the most creative way possible.
SUPPLIED BY: RALPH AND CO

45   WORK WITH CLIENTS
Everyone knows about thinking outside the box, but in creative circles, the real excellence comes from finding the best possible solution inside the clientmade box. Dont look at external direction as a damning prison wall, but instead as a clue to finding your solution.
SUPPLIED BY: DAVE CURD

46   STICK TO WHAT YOU KNOW
Definitely avoid briefs that are not your core strength and style. Ive been that hapless salmon trying to swim uphill with a terribly inappropriate brief on a few occasions, and I now avoid those types of jobs. Choose your clients as well as they choose you. Turn a bad experience to your advantage by not repeating the same mistake again.
SUPPLIED BY: JEREMYVILLE

47   DONT ASSUME ANYTHING
Once we had a very bad experience when we asked for a dummy mock-up from the printers for some packaging with the assumption that we were on the same track. They only showed us a blank mock-up and we assumed it was right, but when they started to print it, we noticed that the cover was on the other side! So never, ever make assumptions.
SUPPLIED BY: INKSURGE

48   JUSTIFY YOUR ACTIONS
I have worked with a few fashion brands recently and they can seem like the worst clients in the world, but I think if you provide valid reasons for your actions and maybe provide several solutions to their requests, you can steer things back into your control. I tried this recently and it proved successful.
SUPPLIED BY: DARREN FIRTH

49   DESIGN HISTORY
Ive never really had any problems, but one thing I always do is to have back-up files. Keep some of the original ideas that you may have presented sometimes people change their minds and this makes it much easier to revert back to earlier stages.
SUPPLIED BY: KERRY ROPER

50   MANAGE EXPECTATIONS
A good way to avoid client problems is definitely to be as up-front about what they can expect and when before the project is fully underway. If expectations are managed as early and openly as possible you can avoid misunderstandings and unreasonable demands. As a rule-of-thumb, a good way to deal with clients is actually to treat them with the contempt you would a small horned imp from the ninth layer of hells gate.
SUPPLIED BY: LAITH BAHRANI

Source: http://www.computerarts.co.uk

Wednesday, March 10, 2010

Difference between pixels and em.

Here I tried to describe difference between pixels and em. This text is for those specially who are new in css. As a designer I am always face a question about this topic. So I decide to share my knowledge here because from my view this is a common mistake make every designer at the beginning.
First of all need to know about css. CSS means "Cascading Style Sheets".
It is a system of properties which directly effect the display properties of your web page. By using css you can handle your web site design easily. I think css is not so hard to learn. Because at first I don’t know about web design,css,html. But now I can design a site by css. All I do is just study the syntax of css and learn about every property and value. And at last know how to use css in a site. That’s it you are ready to go. You don’t need to have programming knowledge to learn css. So don’t be afraid keep going.
Now focus all of your thoughts or mental activity in following text to understand difference between pixels and em.

Content is the main power of any website. Those site are good who arrange their content in a clean way. To do this you must need to arrange your text give them perfect font style,size,color etc. You can give font size by css in couple of ways. Here I talk about pixel and em.

Apply font size with pixels
By setting font size with pixel you can fully control over the font size.

Example:

h1 {font-size:60px}

h2 {font-size:40px}

p {font-size:16px}

Above examples allows Chrome, Firefox, and Safari to resize the text, but not Internet Explorer.

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).

Apply font size with em

To avoid the resizing problem in IE many web designer use em instead of pixel. And it is recommended by W3C.

The default font size in browser is 16px. And 1 em is equal to current font size it means 1 em is equal 16px.

Here is the formula to calculate pixel to em :

Pixels /16 = em

That means if font size is 60px it will be in em is 3.75em.

With the em size you can adjust the font size in all browser. But there is problem in IE . The problem is when you resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.

To solve this problem you need to set a default font size in percent (%) fot the body element.

Here is an Example:

body {font-size:100%}

h1 {font-size:3.75em} [is equal 60px]

h2 {font-size:2.5 em} [is equal 40px]

p {font-size:1 em} [is equal 16px]

Now our code works perfectly and shows the same text size in all browsers. It also allows all browsers to zoom or resize the text.

Hope this will help you guys. Enjoy and make something awesome.

Saturday, March 6, 2010

Web graphics tips for web designers

Here are some Web graphics tips and techniques for novice web designers which will help you create images that look good and are as compact as they can be... The main Web graphics formats are GIF, JPG, and PNG. It's important to know the differences and choose the best format for each images, so that pictures look good and are as compact as
they can be so they appear quickly on your site visitor's screen. Below I explain this three web graphics format. If you read this you will never make mistake to choose the right graphic format.

GIF - Graphic Information Format
GIF graphics format is best for images with only a few colors: charts, graphs, or text set as graphics.
The fewer colors you use, the more efficient GIF files are. GIF files....
  • can contain up to 256 colors.
  • support a feature called transparency, in which one color out of the 256 colors is set to be transparent. This keeps your graphics from looking as if they're in boxes, because the background of the file is invisible, letting the Web page's background show through.
  • can be animated. Inside a single file is stored many picture frames and an index telling how long each frame should be shown. Animated GIF is treated as a standard image file, so it is loaded with the standard <IMG> tag.
  • are lossless, which means the image quality is not degraded by the compression

process.
  • can be interlaced so they appear to fade in, from lower to higher quality, while loading. This gives your visitors something to look at while they're waiting.
  • are not good for photographs - you lose quality and the files won't be compact. Use JPG graphics format for photos.

JPG - Joint Photographic Experts Group
JPG graphics format is best for images with many colors, such as photographs or scanned artwork. JPG
files...
  • can contain up to 16 million colors.
  • support variable compression. You can apply more or less compression to each individual image. The more compression you apply, the more quality you lose. While file sizes can be made quite small with this graphics format, you often have to compromise between file size and picture quality. Newer graphics software gives you a preview before you save - this allows you to experiment with various levels of compression to choose the best compromise between quality and file size.
  • come in three types: baseline or standard, baseline optimized or standard optimized, and progressive. Baseline was designed for browsers that we'd consider to be ancient these days (such as Internet Explorer version 1). Baseline optimized offers more compression over standard baseline, and practically every browser today can read such an image. A progressive JPG, like an interlaced GIF file, builds as it downloads, going from a crude representation of the image to its finished look. While this is a nice Web graphics format, older browsers don't all support this format.
  • are not good for images with only a few colors, such as text set as graphics or images with areas of flat colors. If you use JPG for these graphics, they will be larger than necessary, and look "mottled."

PNG - Progressive Network Graphics
PNG is the newest Web graphics format. PNG files...
  • are supported by all modern browsers. These files may not appear in older browsers, so using this graphics format may cause some of your Web site visitors to be unable to see your images.
  • are compact and versatile and can combine the best features of GIF and JPG, such as the ability to have transparent backgrounds or the ability to contain images with millions of colors.
  • are still not widely used, mostly because they're not supported by older browsers.
When to use which?
Choosing the right Web graphics format can ensure that your images look good and appear quickly on your
visitor's computer. Choosing the wrong format makes your images look bad and take forever to download.
The most common graphics mistake people make on the Web is to use the wrong graphics format for their
images. But the choice is really quite simple...

  • If your graphics have a lot of colors (such as a photo), choose JPG.
  • If your graphics have few colors, choose GIF. When using GIF, try optimized palettes that contain only the colors used - they can cut file sizes in half.
I hope you understand now when and how you can use web graphics. If you still aren't too sure on which
format to use when see the chart below. Hope it will give you clear idea about web graphics.

    * JPEG:
          o Good:
                + Photographs
                + Game

screenshots
                + Movie stills
                + Desktop

backgrounds
          o Bad:
                + Windows

application screenshots
                + Line art and text
                + Comic strips
                + Anywhere

where fine lines or sharp color contrast is needed
    * PNG:
          o Good:
                + Text, line

art, comic-style drawings, general web graphics
                + Windows

application screenshots
                + When

accurate reproduction (lossless) is required (24 bit PNG)
                + When alpha

channel support is required
                + As a general

replacement for anything that is a non-animated GIF
          o Bad:
                + Photos,

in-game screenshots (only when quality is not important and you're looking for small files)
                +

Disappointing browser support for 32 bit PNGs from Microsoft and others
    * GIF:
          o Good:
                + Where

animations are required
                + Widespread

browser support
          o Bad:
                + Large file

sizes compared to PNG for the same quality
                + Often

limited to 256 colors (8 bit)

Friday, March 5, 2010

Redirect visitors to a new site or page by using HTML code.

Some times we need to change our web url for various reason. When we change our page or site url visitors don’t know new location. They already linked to this location. Another factor is search engine. Because search ingine is already indexed the page To solve this problem we need to redirect visitors to new location.
From my view to do this its a good habit to replace the page with a new page and put the following html code into new page header section I mean between head Tags of html code.


<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/index.html">

The content="0; means delay time of the redirecting the page. I prefer to show some message text for the visitors so that he will understand the reason of the redirecting the page. To show the message first you need to see how many second you need to read the message. If it needs 5 seconds the code will be look like this one :

<meta HTTP-EQUIV="REFRESH" content="5; url=http://www.yourdomain.com/index.html">

Hope it will helps those who are new to web design. At last I want to say one thing that it is not the only way to redirect the page. If you want to know more about this go to www.google.com and search for the details.

Example html code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta HTTP-EQUIV="REFRESH" content="2; url=http://www.yourdomain.com/index.html">
<title>Your website title</title>
</head>
<body>
Your message text here
</body>
</html>

Wednesday, March 3, 2010

SEO Basic - Search Engine Optimization Basic. Every novice web designer should know.

When I learn web design I don’t no more about SEO. But right now I know little bit about SEO. While I learning it I face some problem but it can’t stop me I continue my study and practice it day by day at last i overcome from it. So I write this note for those who want to know basic about Search engine optimization and want his site get indexed and listed in the major search engines. Here i discuss the most importance areas to get any website properly indexed by the search engines. The areas that we need to going through are the

1.Title Tag
2.Meta (Description and Keywords) Tags
3.Body text: a brief description of what you should write in the body text of your main (index) page.

This is just a very brief description, but it will nonetheless be very useful to the novice web designer to get a better understanding of the basics on how to get your website indexed and listed at the major search engines.
Below you can see  HTML code of a basic website. After This code I will give a brief description of each code tag you see.

<HTML>
<HEAD>
<title>Enter your Title here</title>
<meta name="keywords" content="Enter your key words here">
<meta name="description" content="Enter your description here">
</HEAD>
<BODY>
Enter your page's body text here
</BODY>
</HTML>

<title> Tag :
The first thing you need to do is identify the keyword phrases that are relevant to your company, products and services. When you have decided on your "keyword phrases" you need to put them in your page's <title> tag.
The title tag is definitely the most important tag in the header section of your web page. The title tag is displayed in the blue bar at the top of your browser window (SEO - Basic search engine tips - How to get indexed and listed at search engines). The title tag is a one-liner describing your business, and it includes the most important keywords. The search engines place a lot of relevance on the words contained
within the title tag, so be sure to include your targeted keyword phrases.
The title tag should not exceed 60 characters.

<META> Tags :
META tags are basically composed of the
description
<meta name="description" content="Enter your description here">
 and keyword
<meta name="keywords" content="Enter your key words here"> tags.

Description:
The description tag is used to describe your web page / business. Some search engines will use this
information to summarize your website in their search listings. It's again of utmost importance that you also include your keyword phrases in the description tag.
* The description tag should provide a 25-30 word description of your website.

Keywords:
 The keyword tag should of course include the "keyword phrases" that you are targeting in order of
importance. Start with the most important and then proceed to less important but still relevant keywords.

Do not include keywords that are not relevant to the theme of your site.
*  Do not repeat any word more than 3 times within the keyword tag.

<Body> Tag :
In the body tag section of your website, you should describe and explain the nature of your business, products, scope of the website, etc. You should generally include around 500-600 words in this area. Make
sure to repeat your "keyword phrases" a few times so that search engines will consider these to be very
important and relevant to your website. For nearly all search engines content is still king, and having lots of quality content will help you to increase your ranking with the major search engines.
After completing your site you have one last job to do. That is :

* Submission to Search engines
* and Submission to Directories.

SUBMITTING TO THE SEARCH ENGINES
Once your web page is fully optimized, it is time to submit it to the major search engines. Although there are hundreds of search engines on the Internet such as Google, MSN, Yahoo, USFreeAds, OPN, BusinessSeek, Searchwarp, Searchsight, National Directory, Quango, Homerweb, HiddenStreet, killerInfo, SearchIt, AdlandPro and many more., only a handful are truly important.

I know there must be a question arise in evry novice person how can i and where can I add my site url ?
Don’t worry Here I give you top three search engines add url link.
Google (Add URL)
Yahoo! (Add URL)
BING(msn of old) (Add URL)

It's recommended that you submit your website to the search engines manually instead of using any automated submission tool, because some search engines regard those as spam, and won't list your site. Keep in mind that it can take months before you get listed, so be patient.

SUBMITTING TO DIRECTORIES
Search engines need a starting point. That's why human edited directories are important to be listed in.

There are couple of major web directories at this moment:
       DMOZ - Free listings.
       The Yahoo directory  - Free listings for non-commercial sites.
If  any thing I miss here don’t hesitate. Share it by youre valuable comment.

Tuesday, March 2, 2010

My favorite inspirational quotes about design

I have always collected design and arts inspirational quotes because Simple quotes can hold timeless and moving lessons. We are so lucky that we have a lot of exceptional people who have this curious habit to inspire us with their tremendous quotes. So i read those quotes again and again and I think it makes my work more powerful. That’s why I share this quotes collection and hope you will be inspire as I am .


Brenda Laurel
A design isn’t finished until somebody is using it.

Frank Chimero
Good design is all about making other designers feel like idiots because that idea wasn’t theirs.

Steve Rogers
Designing a product is designing a relationship.

Henrik Fiskar
If design isn’t profitable, then it’s art.

Robynne Raye
For me, design is like choosing what I’m going to wear for the day - only much more complicated and not really the same at all.

James Randolph Adams
Great designers seldom make great advertising men, because they get overcome by the beauty of the picture – and forget that merchandise must be sold.

Charles Eames
Design is an expression of the purpose, and it may (if it is good enough) later be judged as art; design depends largely on constraints and it is a method of action (there are always constraints and these usually include ethic).

Clement Mok
Design, in its broadest sense, is the enabler of the digital era – it’s a process that creates order out of chaos, that renders technology usable to business. Design means being good, not just looking good.

Scott Adams
Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.

Freeman Thomas
Good design begins with honesty, asks tough questions, comes from collaboration and from trusting your intuition.

Milton Glaser
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.

Jenaiha Woods
Design is the contrast of the core of limitations therefore there are no boundaries. It is simply an interpretation of creativity.


Massimo Vignelli
The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is cure it somehow with design.

Steve Jobs
Design is not just what it looks like and feels like. Design is how it works.

Robin Mathew
Design is where science and art break even.

David Carson
Graphic design will save the world right after rock and roll does.

Thomas J. Watson Jr.
Good design is good business.

What’s your favourite quote? Share your thoughts by your valuable comment.

Monday, March 1, 2010

Do You Use Reset.CSS?

Browser compatibility issues with how they render HTML differently is a common problem for web designers and developers. Reset.CSS, if you are not already using it, can save some time from the CSS editing process.
What is Reset.CSS?
Reset.CSS is simply a collection of CSS styles which removes and neutralizes the inconsistent default styling of HTML elements.
By using Reset.CSS, you simply clear the default values of web browsers and you wont need to alter these differences for every element again.
There are 2 popular Reset.CSS styles:
  • YUI Reset CSS
  • Eric meyer Reset CSS
First, the Yahoo version:

abbr,acronym
 border:0;
}
address,cite,code,dfn,em,strong,var {
 font-style:normal;
font-weight:normal;
}
blockquote {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
}
caption {
font-style:normal;
font-weight:normal;
 text-align:left;
}
fieldset
margin:0;
padding:0;
border:0;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
font-size:100%;
font-weight:normal;
}
img {
 border:0;
}
ol,ul {
margin:0;
padding:0;
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
td {
margin:0;
padding:0;
}
th {
margin:0;
padding:0;
font-style:normal;
font-weight:normal;
 text-align:left;
}
q:before,q:after {
content:'';
}
div,dl,dt,dd,li,pre,form,p
margin:0;
padding:0;
}
/*
 * THESE ARE ONLY DEFINED IN YAHOO VERSION
 */
input,textarea
margin:0;
padding:0
}



Now, Eric's version:

abbr, acronym {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
address,cite,code,dfn,em,strong,var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
blockquote {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
quotes: "" "";
}
body {
 margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
line-height: 1;
color: black;
background: white;
}
caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
img {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
ol, ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
border-collapse: collapse;
border-spacing: 0;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
th {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
text-align: left;
font-weight: normal;
}
q:before, q:after {
content: "";
}
div,dl,dt,dd,li,pre,form, p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
/* THESE STYLE ONLY EXIST IN MEYER'S VERSION */
/* remember to define focus styles! */
:focus {
outline: 0;
}
blockquote:before, blockquote:after {
 content: "";
}
html, applet, object, span, iframe, a, big,
del, font, ins, kbd, s, samp, 
small, strike, sub, sup, tt,
label, legend, 
tbody, tfoot, thead, tr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
}
q {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
background-image: transparent;
quotes: "" "";
}

Every of us have different needs and approach. So i think every serious CSS coder should have CSS-reset system, written by himself. Hope this will help you guys who are new with css.