Photoshop Tutorial: Let's Design a Awesome Login Page

Today in this tutorial you'll learn how to design a awesome login page by using Photoshop. After completing this tutorial you can use this login page in your project as well. Either you are a beginner or a intermediate level photoshop user this tutorial will guide you step by step process that how to use photoshop tools better to create nice looking login page.

I am sharing a full PSD and JPEG file of login page which is free to use and for your reference:

Download PSD File | Download JPEG File

Ok let's start now. Following is the preview of final login page that we are going to design:



Step 1

Open Photoshop and create a new page size 1024x768 pixels by pressing Ctrl+N or go to File and press new.



Step 2

Now select a Rectangular Marquee tool (Shortcut key is M) to create a new layer size 1024x45 pixels by pressing Ctrl+Shift+N, name it header bar. With selected Marquee selection press Alt+Backspace to fill a color, I am using this color code #0d141c.



You can place your logo over here like left side or right side.

Step 3

Now select a Rectangular Marquee tool (Shortcut key is M) to create a new layer size 1024x723 pixels by pressing Ctrl+Shift+N, name it whatever you like. With selected Marquee selection press Alt+Backspace to fill a color, I am using this color code #263137.



Step 4

In this step we will decorate the new layer that we have created in step 3 by using some pattern and lighting effects. To give a similar pattern effect like I have used here you need to create a new pattern for that. So create a new page size 50x50 pixels by pressing Ctrl+N with transparent background.



Now select Custom Shape tool and choose shape which I have chosen and create it by dragging a tool. After creating custom shape go to Edit and select Define Pattern and click ok.



Step 5

Now go to your main page (Login page) and select body layer, Now go to Layer > Layer Style > Blending Options and configure following blending effects and click ok:



Step 6

In this step give we will give lighting effect to the same layer select Filter > Render > Lighting Effects. and configure following settings:





Adjust position of lighting circle in middle of the layer by dragging it with the center dot or point and click ok.

Step 7

In this step we'll create a login box. Now you need to create a new rounded corner shape layer (size 404x233 pixels) by selecting Custom Shape tool and setting Redius by 10px. Before creating rounded shape set your Foreground color to White.



Now go to Layer > Layer Style > Blending Options and configure following blending effects and click ok:



Use this color code #c1cdd5 for outer glow effect.

Step 8

Now add a Sign In, User Name and Password by selecting some good fonts. I have used Trebuchet MS and Times New Roman fonts over here. Now create a text box for User Name, Password and Submit. For this we need to create one text box, will make a copy of the same to use for Password for instance.

Create a new layer size 374x31 pixels by pressing Ctrl+Shift+N and press Alt+Backspace to fill a color on that. Always Keep in mind that Alt+Backspace fill color which is your Foreground color and Ctrl+Backspace fills Background color.

After filling color now go to Layer > Layer Style > Blending Options and configure following blending effets and click ok:





Now press Ctrl+J to make a copy of the same layer. After creating both text boxes adjust positioning of the same by selecting Move Tool (Short key is V).

Step 9

In this we will create submit button. Now create a new layer size 84x27 pixels by pressing Ctrl+Shift+N and press Alt+Backspace to fill a color on that. To give similar effect to the button select text box layer Right Click (of Mouse) on it and select Copy Layer Style, select button layer again and Right Click on it and select Paste Layer Style. Now you'll get similar effect like we have on text boxes. See images below:





Now write a text on it by selecting a Horizontal Type Tool or pressing T. Use Times New Roman font with Italic style and 18px size with Black Color.

For footer design I refer you my PSD file please download from above link. Footer design is very simple, I have used two white horizontal and 5 pairs of vertical dotted lines. I suggest you see my PSD file carefully you'll understand easily.

If you find any difficulty during the tutorial please leave a comment or DM at Twitter, @mytutorialfeed.

12 Excellent Thumb Image Styles for Web Designers

In this post I would like to share some ready to use modern thumb image styles that you always looking for. These images created in Photoshop by me and free to use for all my readers. I am here sharing a downloadable psd file to help you. Web Designers who use Photoshop can easily use this file according to their needs.

If you have any query please leave a comment. I'll try my best to help you. Enjoy!!!

Download thumb_view_style.psd

1. Wide Border Image Style

This image style is very common now a days. You might have noticed this style in different web sites. Creating clean border style is very easy. Take any image of any size you want to use. Make a new layer (proportionately big from existing image) just below the existing layer and fill with white color. Now use a Stroke option by using Blending option to give border. You'll get final result like me.

2. Sleek Border Image Style

This is also a very famous style I always use during designing. All you need to create effect like this just reduce proportionate size of stroked layer and rest steps are same as above. This style is very common in ----- galleries.

3. Sleek Border with Drop Shadow

Just give a drop shadow effect to your sleek border layer created in "Sleek Border Image Style" above. To give drop shadow effect you'll have to use blending option.

4. Behind Drop Shadow

This is very modern style for thumb view image and of course my favorite too. If you are a Photoshop user then download psd file from above link and learn how to create style like this.

5. Flip Shadow Style

A very unique and clean style used for horizontal thumb view in ----- galleries. Download psd file from above to learn the process for creating this style. You will notice that all steps are same like above (In Wide Border Image Style), Just added flip drop shadow style to create it.

6. Bottom Corner Cut

Bottom Corner Cut style is very unique style for ----- galleries. Follow a Style like above in "Sleek Border Image Style" and cut a bottom corner of image by using marquee tool.

7. Wide Rounded Border

A very simple and sober border style. To give a style like this click on blending option and choose stroke outside with 3 or 4 size. Download psd file from above to quick reference.

8. Top Flip Shadow

Another style by using drop shadow effect. You can apply this style on top left or top right side of the image. It gives natural gallery image look. Very trendy style now a days.

9. Classic Rounded Corner Style

Classic Rounded Corner Style is very common now a days and very easy to create. A time saving style for your ----- gallery images. There's number of image styles but this style is still famous among design community.

10. Dotted Border Style

Dotted Border Style gives different look from solid border image style. Some contest design sites started to use this style. You can say that this is new Web 2.0 style.

11. Classic Drop Shadow

A very old classic drop shadow style used by designers in early 90's, but still famous among designers. You can use this with stroke or without stroke images. Even some designers use this with default value of drop shadow.

12. Transparent Shadow Style

A famous Web 2.0 style among design community. You can create this style by using blending option. Follow psd link above to learn it. Every 6 sites out of 10 are using this style.

Do you have any suggestions? Leave your comment.

Six Common Mistakes DotNet Guys Always Does

I have been working with DotNet team from last 2 years. I am responsible for all UI (User Interface) related problems. I have been noticed that my team mates always stuck on the same kind of issues while handling UI. These are very common HTML, CSS and Browser related issues of everyday exercise.

I feel that DotNet guys don't give such importance to UI part as they give to their controls and functions part. They always keep UI part bottom in their priority list. At last when application going to launch they stuck in UI related issues. Now the solution is just review following mistakes at initial stage:

1. HTML Tags

One and only most common mistake is HTML Tags. I agree that application code is very lengthy but forget to closing (</tag>) a tag is big mistake. So keep close HTML Tag at the end of your code. If you have used so many tables in a page then try to handle all tables through CSS.

2. Table vs Div

Now the second most common issue is Tables and Divs. Make sure what to use either Table or Div. It always create big problem at time of browser compatibility. So, don't mix-up Table code with Div.

Example:

<table>
<tr>
<td><div></div></td>
<td></td>
</tr>
</table>


Using a tabular data in a table is correct but using a non-tabular data in table is semantically wrong.

3. Understand CSS units of measurement

I have been noticed some times while fixing UI related issues that DotNet guys never care about units of measurements. Some times they use px (pixel), % (percentage), em, and pt altogether which is not correct. My advice is to review CSS properly before start.

Read more about CSS units of measurement

4. Non-Standard GUI Controls

Basic GUI widgets like command links and buttons, radio buttons and check-boxes, scrollbars, close boxes, and so on — are the lexical units that form dialog designs vocabulary. Changing the appearance or behavior of these units will confuse readers.

5. Nested Tables

Nested tables always cause a problem when you are using a so many tables in page. It is very difficult for a UI design to fix nested tables at time of browser compatibility. Use CSS for good HTML.

6. Violating Design Conventions

One thing should keep in mind that don't lose consistency because consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience.

Do you have any suggestions? Leave your comment.

Understanding Search Application - Page Types and Design Elements

A search application allows users to search for information contained in the site or in a database that is connected to the site. Users search by entering some information and the system retrieves search results or a record on file. A search application must clearly convey to users what information to enter in order to get the results or record they are looking for.

Page types and design elements

When building a search application, include the following page types and design elements:

• Search pages
• Results pages
• Design elements for both page types

Search page

A search page has some unique design elements:

• Entry field(s)
• Submit button

Entry field(s)

The search page needs at least one entry field. The entry field asks users to enter information. Entry fields need to clearly communicate to users what type of information to enter and how to format the information. Include the following:

• An instructional header that clearly explains what users should enter into the field.
• Format the entry field with a gray outline so the text box stands out from the surrounding page.
• Label the entry field ‘Not case sensitive’ (and make sure to accept entries in upper, lower or mixed case).



Submit button

Include a submit button. Follow these guidelines when displaying buttons:

• To ensure a button appears clickable to users, the mouse should change from a pointer to a hand when users hover over a button.
• Make the primary action clear to the user by making it a button.
• Use a drop shadow to outline the button so it looks clickable.
• Once users click the button, disable it while it is processing. Disabling the button signals to users to wait for the computer to process the action.


Results page

A results page has some unique design elements:

• Results
• Print functionality

Results

Ensure that the search provides users with accurate, precise results. Format the results so that users can understand them and quickly find what they need. For example, if there is a lot of data, you may need to use a table to format the results.

Organize search results according to the information users are seeking. For example, if users are looking at records for expired medicines, then order them by expiration date.

Make the results page an appropriate length for users. Generally, if there are 25 records or less, eliminate paging. If there are more than 25 records, display multiple pages and provide a paging mechanism so users can navigate the pages quickly, allowing users to go out of sequence (jump from page 1 to page 5 for example).

Print functionality

Users often want to print results for their records. Offer users a way to print, such as providing a ‘Print these results’ button and format the page so that it’s printer-friendly.

Do you have any suggestions? Add your Ideas.

9 Golden Rules of Visual Design

A consistency in Visual Design signals to users that they are in the right place and that they are moving in the right direction. Visually consistent displays are easier for users to learn, result in fewer user errors, and increase user satisfaction. When you are building new web applications, ensure that your visual design is consistent with following visual aspects:

1. Text

Use the standard readable fonts like Verdana, Arial, Helvetica or Sans-Serif for body text. The size of the standard body text should be legible and easy for users to read in usability testing. The color of the body text should design to contrast with the background and aid readability.

Example CSS for body text:

body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; color: #666; color: #333; text-align:center; background-color: #fff;}

2. Line Length

Choose appropriate line lengths. Users tend to prefer shorter line lengths on web sites to facilitate searching and scanning content. As a general rule, make the length of a line of text no more than about 3½ alphabets or about 75 characters. In CSS, specify a maximum of 35ems. Sample of text 35ems wide:

Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide.

However, if reading speed is most important and you are trying to encourage users to read a large amount of text, use a slightly longer line length (80-100 characters per line) to facilitate faster reading.

When displaying continuous text in columns, display ~50 characters per line. Do not use very short lines of 20 characters or less because this hinders readability.

3. Headings

Use headings to give users clear entry points to information, signal changes in topic, and to indicate how information is structured—to show the hierarchy of the information.

Three levels of heading styles are provided (h1, h2 and h3).
• Do not use more than three levels of headings in a web application.
• Use first level headings (h1) for main topics, use second level headings (h2) for secondary topics, and so on (h3).

Make the phrasing of headings parallel. This means, when users read a list of headings, the phrases are worded similarly. Widely varying the wording can be distracting to users. For example, let’s say there were headings
• Pricing
• What items are in stock
• To place orders

This should be revised to make the phrases parallel to increase comprehension:
• Prices
• Inventory
• Orders

After labeling the page with a title, consider whether or not you need any more headings. If the page title encompasses the content and no further clarifications or markers are needed, then you do not have to use more headings.

Heading Styles:

h1 {font-size: 120%; padding: 0; margin: 0; background-repeat: no-repeat;}
h2 {font-size: 100%; padding: 0; margin: 0.5em 0 0 0;}
h3 {font-size: 90%; font-weight: bolder; padding: 0; margin: 0;}

4. Colors

The web site associates each of the main topics with a color (red, green, blue respectively). Use the site color scheme to reinforce the difference between the divisions. Reinforcing the color scheme aids users in selecting the correct web application when there are similar-sounding applications in different parts of the web site.

Use color to connect related information. For example, the contact information page uses a red title to remind users they are looking at company's contact information.

5. Title Graphics

Remember following things while creating a graphics:

• The larger word is always lower case with initial cap.
• The smaller word is always all caps.
• The large word or emphasis word doesn’t have to be first or on the top.
• Use 2 points of space between lines. The lines should appear close, but not touch.
• The relative relationship between font sizes should be 2:1 for two liner graphics.
• The smaller word always aligns to the right of the larger word. The goal is to create a tight heading that isn’t too wide, is easy to read and is visually pleasing.

6. Images, Photos & Graphics

Ensure that any Images, Photos or Graphics used add value to users and increase the clarity of the information on the site or in the web application.

Use following guidelines:

• Except for maps and icons, all images on the website must be color photographs. Do not use clip art, animated art, line drawings, or black-and-white photos.
• Photos must be professional and must appear clear and crisp when posted on the site. You should have several options for acquiring high-quality photographs.
• Photos must match the overall look and feel of the website; only photos with a similar size, shape, and style should be used.
• Photos should include people whenever possible to make the site more welcoming to users. Images of people should be positive and upbeat, and should be chosen with diversity in mind.
• Make sure clickable images, such as maps and icons, appear clickable. Have the mouse cursor change from a pointer to a hand when users hover over an image.

7. Icons

Use symbols and icons consistently throughout the web application. Using consistent icons across web applications reduces a users’ learning curve when they try a new application.

Use symbols that users recognize. Before creating a new icon, reuse existing icons that have been used in the same context, and for the same user task. Also, consider carefully the cultural meanings of some symbols. Ensure the icon you design is cross-cultural and not too ulturally-specific.

8. Alternative Stripe Rows and Columns

The alternative stripe is a visual aid that alternates background colors so that every other row is light and dark. It is used mainly on the rows of tables and in search results lists. If users need to read data in rows, a alternative stripe aids them in spotting where each row starts.

Use only a gray and white alternative stripe for the web applications. Be careful not to overuse the alternative stripe in following situation:

• A small data set
• Less than 4 or 5 lines
• Less than 2 or 3 columns

Use alternative strip option when you want users to focus users’ attention on each row one by one.

9. White space

Provide plenty of white space so the page looks clean and organized. Use white space to make sure users can easily identify logically-related information.

Minimize the amount of white space when users need to search or compare information.

Follow these specific guidelines to make white space consistent:

• Use 25 pixels of space between unrelated items or fields – for example, between address fields and credit card fields, between the bottom of a table and navigation links.
• Use 10 pixels of space between two tables.
• Use 5 pixels of space between related fields – for example, between address fields such as address, city, state and zip code.

Do you have any suggestions? Add your comment.

7 Inspiring Website Designing Ideas

Designing a Website with a strong conceptual design and paying close attention to some basic rules about visual design, interface, usability, navigation and style will have a better foundation to build on. The following design ideas can help you create a compelling Website that grows gracefully:

1. Simple, Easy and Clean

Creating a simple and easy navigational system is one of the most important elements to creating a Website. The only frustrating thing for your visitors/users is, not being able to find what they're looking for. Make navigation easy and simple so the the visitors can easily navigate in all sections your website and make sure he/she can navigate from every page. Providing a site map of your website at the bottom of every page (in a footer) would be good practice.

Example: Home > Section > Sub Section > Final Destination

You can best do this by creating a set of links to each of the main sections and placing it at the top (under header) or side of every page. Using a graphic icons can make your navigation more attractive. Your goal is to make sure that viewers don't have to use the Back button in their browsers to move around your site.


2. Design - Audience First

It doesn't matter how technically interactive a Web site is or how great the usability, user interact with the design first. Make sure that design for your Web site should be user friendly. The right design is one that best suits your audience — that may or may not mean lots of fancy graphics and animations.

3. White Space Consistentancy

One of the best design features you can add to a page is white space. White space gives the eye a rest, something readers/users need even more often when they're staring at a computer screen. White space can be use to separate one type of information from another and to focus the viewer's attention where you want it most. Some of the most beautiful and compelling designs on the Web use only a few well-thought-out elements against lots of white space.

4. Back-up Your Website

Always keep in mind that you have a system in place to back up your Web site. Make sure you have a copy of all the files that are on your server in a separate location and update it regularly to make sure you have the latest version of your site backed up at all times. Even the best Internet Service Providers sometimes have technical problems, so you should keep a backup of your site where you have easy access to it and can get it back online quickly if something ever does happen to delete any or all the files you have on the server.

5. Small & Fast

Making sure that your pages download quickly makes your viewers more likely to keep clicking. If your page designs take a long time to download, here are a few tips to make them load faster:


First, If you have a large Flash introduction at your home page try to reduce the size or have a option in the page for the users to skip large multimedia files. You especially don't want to make users wait too long for the first page of your site. If you noticed that static images are the problem, consider compression methods and use a program such as Photoshop, Fireworks or ImageReady that are designed for optimizing images for the Web. Finally, use Dreamweaver's code cleanup feature to get rid of extra tags that can contribute to a heavier page.

6. Follow the 3 Clicks Rule

This rule define that no important piece of information should ever be more than three clicks away from anywhere else on your Website. The most important information should be even closer at hand. Some information, such as contact information, should never be more than one click away. Make it easy for viewers to find information by creating a site map and a navigation bar — a set of links to all the main sections on your site.

7. Provide A Site Map

As your site grows, It is tought to provide easy access to all the information on your Website. One of the better solution is to provide a site map, which is a page that includes links to almost every other page in the site. This page should be fully functional — it doesn't matter if it looks pretty or not. Don't put lots of graphics on this page; it should load quickly and provide easy access to anything that your visitors need.

10 Most common questions always asked in an interview

I have worked with almost 7 oragnisations during my career and there's lots of questions asked in interview related to the CSS & HTML. I'm going to share some most common questions that always asked in an interview:

Qestion 1 - How many types of CSS we use?

Answer: There are three types of CSS we generally use - External CSS, Embedded CSS and Inline CSS.

Examples:

External CSS
<link href="/css/test.ccs" rel="stylesheet" type="text/css" />

Embedded CSS
<style TYPE="text/css">
<!--
body {
background: black;
color: #80c0c0 }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
-->
</style>

Inline CSS
This can be use with <span> tag:
<span style="width:50%; height:40px; font:arial 12px"></span>

Qestion 2 - What is the difference between id and class?

Answer: IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed.

Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

Qestion 3 - What is the difference between gif and jpeg?

Answer: JPEG (Joint Photographic Experts Group) is a standardised image compression mechanism. JPEG is designed for compressing either full-colour (24 bit) or grey-scale digital images of "natural" (real-world) scenes.

GIF (Graphics Interchange Format) It is an 8 bit format which means the maximum number of colours supported by the format is 256.

Qestion 4 - What is the major difference between CSS2 and CSS3?

Answer: Click here

Qestion 5 - What is the major difference Web 2.0 and Web 3.0?

Answer: Click here

Qestion 6 - What is the difference between HTML and XHTML?

Answer: Click here

Qestion 7 - How to show two events on a single click by using Onclick event in HTML?

Answer: Click here

Question 8 - How we can define a new font in CSS?

Answer: .fontstyle{font-family:"courier new"}

Question 9 - What do you mean by clear:both in CSS?

Answer: Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.

Question 10 - Why we should use DIVs instead of tables?

Answer: It is semantically wrong to show non-tabular stuff in a table.

231 Important color codes that Web designers / developers must know

EEEEEE	DDDDDD	CCCCCC	BBBBBB	AAAAAA
999999	888888	777777	666666	555555
444444	333333	222222	111111	000000

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

10 Things that every web author must know

1. The Web is not WYSIWYG

It's frustrating but true. The Web is not What-You-See-Is-What-You-Get. Well, actually, that's not exactly true. What you see is what you get, ofcourse.

The problem arises when you mistakenly assume that what you see is what everyone else gets. The key thing to remember here is that there are millions of Websurfers out there who don't use your favorite browser, your ----- card, your screen settings, or even the same kind of computer as you.

2. HTML is a structural markup language, not a page-description language

When you write HTML, you are defining the structure of a document, not specifying its layout. Yes, HTML does include some basic formatting and alignment tags. But it's very easy to misunderstand and misuse these tags.

You heard right -- it's possible to misuse HTML tags. In HTML, there are actually rules for what tags are okay, and where they are okay. There are even tools available to check your pages to see if they follow these basic rules of HTML.

3. Web authoring is not word-processing

When you create a word-processing document, you can exercise precise typographical control over some or all of a printed page. Defining the structure of a Web page is a much less predictable process.

Get over the urge to control every little formatting feature of your Web pages. The surest way to create a Web page that looks good to all your readers is to trust that your readers' browser will render your page the best it can, if not exactly the way you'd like.

4. Not everyone browses graphically

Graphics are a great way to spice up a Web page. But there are at least a million people in the world who, whether of necessity or by choice, don't browse graphically. That's a lot of readers. Build pages that convey their message and navigate easily, even without graphics.

5. Most "cool tricks" aren't really all that cool

When you're new to the WWW, pages that automatically load other pages seem almost magical. But most of the cool stuff you're encountering for the first time has actually been around for quite a while. It's been done already. Truth be told, it's been done to death.

6. Gear-driven Web pages get very old, very fast

The Web is like a high-tech toy store. Everyday, someone comes up with some cool new toy that's the absolute latest in smell-o-matic-blur-o-vision technology. And like all good toys, these new techno-gadgets are undeniably fun to ---- with.

Here's the problem: twenty bazillion other people are also rushing to employ this latest breakthrough in trendy technology. And after you've seen 10,000 smell-o-matic-blur-o-vision pages, it's hard to get excited about seeing number 10,001.

7. Original content is the key to a good Web page

Presentation is an undeniably important element of good Web design. But more folks use the Web as information source than as an entertainment source.

By implication, there is simply no substitute for good content on a Website. Individuals and organizations alike can make a unique contribution to the World Wide Web. Simply share what you know and think about the things that interest you.

It doesn't really matter whether it's needlepoint, or motorcycle engines, or landscape architecture, or stupid Unix tricks. After all, you think it's interesting, so it's a good bet that there's other folks who think so, too. Building a good set of Web pages means putting some of yourself into your Webspace.

8. Don't use reports of your browser's popularity as an excuse for invalid, exclusionary, non-HTML markup tags

Statements like "97% of all people use Netscape or MSIE" are:
1. statistically suspect and verifiably untrue
2. irrelevant
There's actually a fairly complex set of statistical reasons why these reports are inherently suspect and statistically invalid. But you don't have to be a statistician to understand that if you build a page that only works in, say, MSIE, pretty soon, all the people who come to your Web page use MSIE! (Surprise!)

The reason it's irrelevant is that there are literally dozens of versions of these two programs floating around out there. Thus, the terms "Netscape" and "MSIE" actually refer to dozens of different feature sets, quirks, etc.

Web clients are unpredictable, idiosyncratic, and buggy. Structuring your pages to accommodate or exploit browser quirks is a fairly spectacular example of letting the tail wag the dog. (It's also a great way to build a very high-maintenance Website.)

9. Fast-loading pages make for happy Websurfers

Most folks' biggest beef about the Web is piggish, slow-loading pages. Fast-loading pages make for more (and happier!) visitors to your Website. The key to building fast-loading pages is simple:

Send less data.

There are two key elements to building fast-loading pages. One is to build relatively small pages, and then use hyperlinks to connect these smaller pages into a larger Website. The other key is to reduce the size of your graphics files; it's really fairly easy to do, and your visitors will love
you for it. Honest.

10. Watch your step

Web design is undeniably fun and exciting. As your Webspinning skills evolve, you'll probably find yourself interested in exploring new avenues for your technical and creative talents.

As you explore, it's important to bear in mind that "the Web" is actually dozens of different technologies under a single name. All of these technologies are still very young, and many are still fairly unstable. Some are even downright dangerous.

Proceed cautiously, and realize that a lot of uncertainty still exists about almost everything Web. In fact, about the only thing you can be sure of is: you'll never be bored.

source:pantos.org

Free vista style icons for web developers

Choco Sosial icons


Free Developers Icons




source:freeiconsdownload.com

10 Principles for User Interface Design

These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.

Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

source:designingwebinterfaces.com

Important things to know before go live

It is of the upmost importance that your website practices good web design techniques which will enable your website to get the maximum amount of traffic, therefore making the maximum amount of profit.

Standards


The most important thing to consider on the World Wide Web is that your website/blog reaches certain web standards. These are set out at www.w3.org. Your website may look good in commonly used browsers like Internet Explorer, Firfox and Safari, if layout desing breaks you WILL lose visitors. Around 45% of people worldwide use Internet Explorer, 35% Firefox and 20% other browsers so that’s 55 peoples out of every 100 that visit your site using a different browser so cross-browser support MUST be considered.

Navigation


Ensure your navigation should be easy as possible, make sure it is clear and concise and that at any point of a visitors browsing they know where they are and how to get back to where they came from. If a visitor experiences any confusion in any way they Will leave your website.

Content


Text paragraphs should always be kept at reasonable lengths. If a block of text appears to be too big it can deter some a lot of visitors from reading your content. If you have got a lot of content to go on a page you should always try and split them into small text blocks, this way visitors will be able to pick out what they need to know a lot easier and they will not feel as though they are reading an essay.

IMAGES
If you are using any images, make sure they are optimized to the smallest possible size and try and reduce the number per page. Images will slow the loading of a website down and the majority of the time they aren’t really necessary.

SCRIPTS
Stay away from using any sort of scripting languages throughout your website for visual images/effects. Scripting can slow down the loading time of a page on your website and even cause the browsers, in some cases, to crash. If you really have to use them, export the code to a different page and reference it when needed.

CSS
Lastly, make your pages with CSS, this reduces the amount of code on your web pages enabling them to load quicker and it also saves you a lot of time when re-styling or adjusting the web site in the future.

Photoshop Tutorial: How to create Shiny Starburst Effect

In this post you will learn how to create shiny starburst effect by using photoshop. Following the simple steps to create a shiny starburst effect:



Step 1

Open your canvas. Press D. (to set default foreground and background colors) Press Alt+Backspace to fill canvas with black color. Duplicate the layer ( right click on the current layer on the layer's panel and select 'duplicate layer '). Continue working on this new layer.

Step 2

Select the gradient tool from the tool bar, place the cursor at the bottom of the canvas, click and drag it to the top of the canvas. Now your canvas has a black and white gradient fill.

Step 3



Click on Filter>Distort>Wave the Wave window appears, give the settings as in the image on the right.

Step 4

Click on Filter>Distort>Polar Coordinates. The polar coordinates window opens up, give the settings as 100% and check the 'Rectangular to Polar' option.

Step 5

Click on Image>Adjustments>Hue/ Saturation and change the settings to : Hue - 200, Saturation - 25 and Lightness - 0. Check the Colorize option

Step 6

Next click on Filter>Render>Lighting Effects and set the Light type to Omni let the other settings be default.



Here's the shiny star!