Tuesday, August 5, 2008

CSS Design - Great Designer Tips

55 CSS Techniques You Can't Live Without - Smashing Magazine is a fantastic resource for web design tips and tricks, and they hit the nail on the head with some great CSS tips in this list. It's really amazing all of the things your site can display using these advanced techniques.

How to Make Sexy Buttons With CSS - Many people in the real world wouldn't consider anything on the web to be sexy per se, but then, what do they know? Make sure your website eschews sexiness with this sexy button tutorial by Oscar Alexander.

6 Keys to Understanding Modern CSS-Based Design - much like web design in general, CSS has expanded and evolved over the years, and many designers still need to catch up. Snook explores modern navigation and floating techniques to bring you up to speed.

CSS Slicing Guide - Many professional designers begin building their website layouts and themes in graphics programs first before actually creating the code. Sometimes, the process of transferring these ideas over to code can be daunting; use this CSS slicing guide to make such transitions smooth.

71 Free CSS Menus - If you're not using CSS to enhance your site's navigational menus, you either have really boring text navigation or are just living in the stone age. No worries, though, as you're sure to find at least 1 styled menu to use out of the 71 on this list.

Advanced CSS Menu - After digging through the list provided above, you might get bitten by the CSS-driven-menu bug, and might be looking to shovel deeper. Web Designer Wall has the tool you need to find what you're looking for.

15 CSS Properties You Probably Never Use (but perhaps should) - Leave it to Oatmeal to give us yet another great design tutorial! With so many CSS properties to utilize, it's easy to forget some that are mentioned on his list of what you SHOULD be using.

70 Expert Ideas For Better CSS Coding - As you further your CSS knowledge, you may find yourself lost in a sea of style code. Keep yourself organized and make life a little less hectic with these 70 ideas for better coding from the CSS experts at Smashing Magazine.

Blueprint CSS - If 70 ideas weren't enough for you (or too much to handle), then you might want to check out Blueprint CSS. It's a CSS framework for you to help jump start your style sheets using advanced CSS organization.

Designing on a Dime: 100 Freebie CSS Resources - One of the misconceptions of web design is that, in order to achieve a really good look, you got to have the financial resources (i.e. billable design hours) to churn out good design. This list of free resources proves otherwise.

Tuesday, July 15, 2008

Great New web Design Feature : MobileMe

Apple have recently announced a new suite of online applications called MobileMe. The aim of the development is to allow you to keep all your information in sync between several devices (e.g. your iPhone, Mac and Windows PC).

Email

Mobile Me Email



Design features which stand out include:

* The use of a lighter font to separate the subject and following message content
* Adding a new email indicator to the top toolbar, and the page title, to show your unread messages whilst using other applications.

Photos / Gallery

Mobile Me Photos



There are several design elements which are notably good:

* The permanent share-able URL in the top right makes showing others your photos
very simple
* The simple design of the album settings popup
* The ability to resize all photos at once (no mean feat to achieve whilst keeping
load times down)

Calendar

Mobile Me Calendar



Design features which stand out include:

* Transparency in event backgrounds allow you to still see time intervals
* Excellent use of subtle colours in the small calendar in the lower left to make
it immediately obvious what day it is, which day you’re looking at and where
the month begins and ends
* Slightly larger line spacing between events in the month view (making the
online calendar actually easier to read and scan than the desktop version)

iDisk

Mobile Me iDisk



* The contrast between the two colours clashes and could certainly have been designed better.
The use of JavaScript and AJAX provides, a practical interface for managing files and folders.
Flipping through directories is seamless, as is dragging and dropping files as the page does not need to be reloaded for changes to take place.

Monday, June 2, 2008

Web Design & website Development Laws

Brooks’ Law

Adding manpower to a late software project makes it even later.

Probably the law I quote the most. I can’t tell you how many times a client has asked, ” Can’t we just throw another guy at the problem?”

Parkinson’s Law

Work expands so as to fill the time available for its completion.

In other words, we’re talking about ‘scope creep’. Keep projects short and sweet—Otherwise, they tend to become unmanageable beasts.

Hoare’s Law of Large Programs

Inside every large problem is a small problem struggling to get out.

A perfect reminder that we often create larger problems from small ones. Always remember to focus on the goal or need. Everything else is secondary.

Lister’s Law

People under time pressure don’t think faster.

Tell this to any startup and they will probably show you to the door, but it’s very true. The only result you get from putting people under pressure is unnecessary stress. Take a deep breath and avoid letting your stress become someone else’s.

Pareto Principle

For many phenomena, 80% of consequences stem from 20% of the causes.

This is also known as the “80/20 Rule,” though most people seem to use it incorrectly. I don’t know if I fully believe in this principle. I think we often have a false perception that this is true, and therefore tend to focus on 20% of the problem. Or, in other words, the dreaded ‘edge case’.

The Peter Principle

In a hierarchy, every employee tends to rise to his level of incompetence.

This principle comes in to play when dealing with the opinions of overzealous stakeholders. It can be difficult as an employee to publicly admit that you know more about this web stuff than your boss, but it must be done.

Otherwise you run into…

Conway’s Law

Any piece of software reflects the organizational structure that produced it.

This law is absolutely true of websites as well. Organizations that have bad communication or poorly defined roles invariably have websites that take more time and cost way more then they should.

Fitts’ Law

The time taken to acquire a target is a function of the distance to and the size of the target.

This one seems to be a favorite with speakers at web conferences, and is a handy reminder of the principals behind information and visual design.

Tesler’s Law of Conservation as Complexity

You cannot reduce the complexity of a given task beyond a certain point. Once you’ve reached that point, you can only shift the burden around.

A good principle of information architecture. Complex tasks tend to be broken up and can often become more confusing in the process. Identify the hard stuff early on and treat it differently than everything else.

Occam’s Razor

The explanation requiring the fewest assumptions is most likely to be correct.

This principle is helpful when you are trying to understand human behavior. Sometimes things just work. You may not think this is right, and you may not understand why, but when something works you should just go with it.

Hofstadter’s Law

A task always takes longer than you expect, even when you take into account Hofstadter’s Law.

Isn’t that the truth. The best trick here is to record your time, so you always have a record to refer to. This gives you a good starting point for estimating how long the next task will take.

Ninety-ninety Law

The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

The law is absolutely true. Once the end is in sight, the finish line tends to drift into the distance. Keeping development milestones short and sweet tends to help. It allows developers to feel like they’ve accomplished something, so they’re not wallowing in a pit of despair.

Hartree’s Law

Whatever the state of a project, the time a project-leader will estimate for completion is constant.

This law always reminds me of the movie Money Pit. Whenever the contractors were asked when the job would be done they’d say, “oh… in about two weeks,” but in reality the project took a year. Trying to set the right completion expectation is always hard. I find just being totally honest with the client goes a long way toward not setting false hopes.

Jakob’s Law of the Internet User Experience

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Coined by Jakob Nielsen, the King of Sameness. While this statement may read like BS, there is some truth it. People adapt to what they know, and they have certain assumptions about the way things work that cannot be ignored.

Which could also be said this way…

Fisher’s Fundamental Theorem

The more highly adapted an organism becomes, the less adaptable it is to any new change.

But…

Clarke’s Second Law

The only way of discovering the limits of the possible is to venture a little way past them into the impossible.




Source : The Immutable Laws of Web Design and Development

Monday, March 17, 2008

10 Tips for Designing an Ecommerce Web Site

Want to sell your goods directly from your site? Here are 10 tips:

10. Design for your target market. Find out who your potential customers are and why they come to your site (i.e. where they are on the consumption cycle.)

9. Identify your objectives for the site and introduce content accordingly. One Internet marketer tells the story of erroneously marketing an automotive book as an aid to car repair then discovered that the real market for his publication was buyers of new cars.

8. Be cautious about using offline marketing material on the Web. Print material often does not lend itself to Web content and usually needs to be modified.

7. Engage the viewer with dynamic environments. Allow the customer to experience the site - not just view it. Chat features, forums, solicited feedback, and database delivery of custom content go a long way.

6. Provide good navigational structure, including search capabilities for larger sites. Viewers enter your site at various webpages - they should be able to navigate easily no matter where the place of entry. Your sales area should be free of links to other Internet sites. Why encourage customers to leave when you've worked so hard to attract them?

5. Test the interface. A Website interface should enhance the user's goals, not distract from them. Strive to meld site components (i.e. graphics, text, sound, etc.) to create a unique atmosphere and identity.

4. Design with usability in mind and abide by basic design principles. Utilize white space (less is more), fonts that are easily read, pleasing color schemes, universally understood symbols, and backgrounds that don't distract from the message.

3. Write for the Web. Write in the second person. (i.e. You will appreciate our new product because ...). Keep sentences short and no more than 3-4 sentences per paragraph. Make use of hyperlinks and interactivity unless doing so would take visitors away from your sales area.

Remember also that your visitors will be situated in other parts of the world, and they may not understand jargon or North American slang.

Lastly, research shows that Web surfers detest the use of marketing hype. Subtlety counts.

2. Give something away and reward visitors from coming to your site. Offer free information, articles, contests, industry news or personalized services.

1. And most importantly, always answer the question, "What's In It For Me." In other words, talk "Benefits" not "Features." Sound familiar ?

Source : http://www.webpronews.com/topnews/2003/07/18/tips-for-designing-an-ecommerce-web-site

Friday, February 22, 2008

War of design versus functionality

Design

Design is responsible for keeping the viewer's attention. Studies show that a web page has just 3 seconds to make an impression before the user viewer decides to stay or leave, and a page has only 12 seconds to meet the viewer's needs before they find someone else to help them. The design is what catches the viewer's eye and keeps them interested. A good design also sends a message to the viewer regarding the company's personality, quality, and the way they do business.


Functionality


Functionality, on the other hand, is responsible for keeping the viewer. If a website is easy to navigate and the viewer can find the information they are looking for easily, the viewer is likely visit the site often and experience all that the website has to offer. Functionality is a great gauge at seeing how effective the company is at communicating their ideas to their clients or customers in face-to-face situations.

Source :

Tuesday, January 15, 2008

Create Web 2.0 visual effects in Photoshop

One of the things that can make a good Web 2.0-style design really stand out is the use of juicy icons and bold, isolated graphics that really pop off the page.

Once you have an icon or object on your page, you can easily apply fun effects to the icon to help make it stand out.

Read more at Creating Web 2.0 Effects With Photoshop