Skip to Content

Worlds

11

Myrlit

Web Design & Development Second Life

Group-66-web_design_tips_editorial.jpg

This is a Group for Web Designers and Web Developers, who can share their work and technology with others. also can post a problem and get a solution from professionals.

New Blog posts

Illustration and Web site design

Post-173-sd-big

Use appropriate colors in your Web illustrations

If your illustration uses solid colors, stick to using only the standard 216 colors found in a typical Web palette. These are the colors that will show up the same on all types of computers and Web browsers. If you plan on using color gradients or blends, test how they will look first with your screen set to only 256 colors. Even though few people use 256-color screens, images with blended colors can show up looking very dithered, muddied, unattractive, undistinguishable. If your illustration looks bad at this low resolution, try a different color blend that is not as harsh. (For instance, if you have a gradient of red to blue, try a gradient of green to blue instead.)

Your illustrations should match the colors used in other graphics of your Web site layout: masthead, sidebar, buttons, icons, image maps, and so forth.


Keep your lines thick in your illustration

Small lines that show up on your printed image will show up more thinly or not at all on your computer screen. A monitor has a much lower resolution than ink to a printed page, and makes illustrations harder to view or read. Keep the lines in your illustrations thicker and your audience will be able to see the detail of your illustration more clearly.


Your illustration should download quickly

Speed is still more important than creativity. No matter how good your illustrations look, visitors will leave your site if they are too big in file size and take too long to download. A single illustration shouldn’t be any bigger than necessary. Test out your illustrations at a smaller file size, either by reducing the amount of colors or having them take up less space on your screen. Do they still look good? Then use the smaller version — your visitors will stay at your site longer because of it.


Your illustration should attract attention

Test your illustrations out with people not familiar with your Web site. Do they immediately catch their eye? Your illustrations should direct people to the content of your page, and make them read on and click on to further pages. A very good illustration can also add a whole new perspective to what you are saying with your words.


Your illustration should complement, not control

Your illustrations should look good enough to attract your visitors’ attention but not so much as to become a distraction from your site’s content. Allow for some breathing room (white space) to your images and between images. Don’t overpower your visitor with illustrations by putting too many on a single page.


Make your illustrations relevant to the Web page content

A pretty picture that does not match the content of the page is a worthless picture, taking up precious downloading time and leaving your visitors’ confused. Your illustrations need to compliment the message of your text. Your visitors should look at your illustration first and already be left with an impression of what they are about to read.


Save your illustrations in the proper file format

Illustrations with mostly solid colors and lines that need to look sharp should be saved as GIF files. Illustrations with gradients or blends, or that use smooth transitions should be saved as JPEG files. (The commonly used extension for saving these types of files are .gif and .jpg.)


Protect all of your illustrations

Online thievery is very common, so you should protect your illustrations from unauthorized use. Place a copyright symbol with your name or the name of your company/organization next to each of your illustrations. For added security, subscribe to a digital watermarking service like Digimarc, which can let visitors know that you are the author and copyright holder of the illustration, and also can trace the Web for whoever else is displaying your images. Another recommended protection service is Gamacles Software, which prevents visitors from copying or printing the images on your screen.

Posted by chetan 2 years ago in Illustration, Web Site Design, Tips, 0 comments.

The visual design of Web 2.0

Post-172-untitled-3-big

If you didn’t blink, you may have noticed that for a few days recently Wikipedia’s entry for Web 2.0 included a subsection describing the visual elements of Web 2.0. Gradients, colorful icons, reflections, dropshadows, and large text all got a mention.

A few days later the “visual elements” addition had been removed after a vote by wikipedians. The objection, I suppose, is that no set of visual criteria can accurately define something as being characteristic of Web 2.0 – if Web 2.0 can be understood as an approach to generating and distributing content, then it needn’t be tied to a particular visual style.

Nevertheless, it’s true that many Web 2.0 sites do share a distinctive aesthetic. Wikipedia’s editors may not think it’s a worthy part of the Web 2.0 discussion, but I say bring it on! Let’s take a look at the some of the communication issues facing a Web 2.0 site, and see how the “Web 2.0 look” can help to solve them.

Trust me, I’m Web 2.0 Integral to Web 2.0 is harnessing the input of website visitors. Users can generate content for a web service, promote it in a “viral” peer-to-peer fashion, and improve it’s data quality through their opinions and preferences.

But to convince a visitor to contribute their time – and data – to a web application, you need to get them to trust you first. Most Web 2.0 sites come across as friendly, approachable and small-scale, using subtle design decisions to gain our trust.

Green is the new grey Bright, cheerful colors dominate Web 2.0 sites. Green is the unofficial color of web 2.0, but saturated blues, oranges and pinks are also favorites. Bold primary colors suggest a playful, fun attitude and also help to draw attention to important page elements.

Rounded everything New CSS techniques for achieving rounded corners have helped make this style hot again. The friendliness of rounded corners is in keeping with the comfortable, informal tone of many web 2.0 sites.

Keep it simple stupid Most Web 2.0 applications add an additional technological or organizational layer to the user’s web experience. Be it managing links with del.icio.us, sharing photos with flickr, or organizing tasks with Backpack, we have to familiarize ourselves with a new technological process and devote time to managing our content. A good Web 2.0 app ought to be lightweight and easy for users to grasp, and clever visual design and copywriting can help remove barriers to entry.

Smart use of layout, color, type and copy can go a long way towards easing the pain.

Big is beautiful As far as Web 2.0 is concerned, bigger is definitely better. Bigger text, that is. Large text is easy on the eye, and coupled with snappy copywriting makes information easy to absorb. And now that accessibility is cool, it’s possible to be a hotshot web designer and use enormous type. Admittedly this craze for giant text strays too far into Jacob Nielsen territory for my taste – when a web page’s body text is set at larger than 13 point it looks like a “learning to read” book to me!

Breathing space The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order. Generous leading also makes text copy easier for the eye to follow. Some Web 2.0 layouts are so minimal that they verge on boring, but designed well, an uncluttered page can be incredibly tasteful.

Odds and ends There are a couple of visual tendencies amongst Web 2.0 sites that don’t seem to answer a particular design problem, but deserve a mention nonetheless. The ‘wet table’ look, ’starbursts’ (also known as ‘flashes’ or ‘violators’), and ‘glass’ buttons, provide a lot of Web 2.0’s eye candy. Apple’s marketing department sure has a lot to answer for.

Posted by chetan 2 years ago in Web 2.0, Website Design Tips, Web Design, 0 comments.

Great Tool for Color Selection

Post-171-untitled-2-big

Hi guys, Colors are very important for any kind of design, I found very Great tool from Adobe site regarding color selection for website or graphic design.

http://kuler.adobe.com/

Just check it you will find good color ideas.

thanks, chetan sachania (Web designer)

Posted by chetan 2 years ago in Color Selection Tool, Web Design Tool, Colors, 0 comments.

View more