Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: January 2009

Saturday, January 24, 2009

Draggable ajax script

To make an element draggable, create a new instance of class Draggable. For additional built-in functionality, make a Sortable instead.

There is also a class named Draggables that exposes functions for observing drag actions.

Draggables become much more useful when you use them with droppables, which are the areas that you can drag draggables to.

Syntax


new Draggable('id_of_element', [options]);

Options

Option	Since	Description
handle	1.0	string or DOM reference, not set by default. Sets whether the element should only be draggable by an embedded handle. The value must be an element reference or element id.
handle	1.5.	string or DOM reference, not set by default. As above, except now the value may be a string referencing a CSS class value. The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.
revert	1.0	boolean, defaults to `false`. If set to `true`, the element returns to its original position when the drags ends.
revert	1.5	boolean or function reference, defaults to `false`. Revert can also be an arbitrary function reference, called when the drag ends. Specifying ‘failure’ will instruct the draggable not to revert if successfully dropped in a droppable.
snap	1.5	If set to false no snapping occurs. Otherwise takes one of the following forms – `Δi`: one delta value for both horizontal and vertical snap, `[Δx, Δy]`: delta values for horizontal and vertical snap, `function(x, y, draggable_object) { return [x, y]; }`: a function that receives the proposed new top left coordinate pair and returns the coordinate pair to actually be used.
zindex	1.5	integer value, defaults to 1000. The css `z-index` of the draggable item.
constraint	1.0	string, not set by default. If set to `'horizontal'` or `'vertical'` the drag will be constrained to take place only horizontally or vertically.
ghosting	??	boolean, defaults to `false`. Clones the element and drags the clone, leaving the original in place until the clone is dropped.
starteffect	??	Effect, defaults to Effect.Opacity. Defines the effect to use when the draggable starts being dragged.
reverteffect	??	Effect, default to Effect.Move. Defines the effect to use when the draggable reverts back to its starting position.
endeffect	??	Effect, defaults to Effect.Opacity. Defines the effect to use when the draggable stops being dragged.
scroll	??	string or DOM reference, not set by default. Specifies the element which will scroll when you get to the boundary. By default this is turned off.
scrollSensitivity	??	integer value, defaults to 20 pixels. Minimum distance from the element boundary to start scrolling.

Additionally, the options parameter accepts any of the following callback functions:

Callback	Description
onStart	Called when a drag is initiated.
onDrag	Called repeatedly a mouse moves, if mouse position changed from previous call.
change	Called just as onDrag (which is the preferred callback). Gets the Draggable instance as its parameter.
onEnd	Called when a drag is ended.

Except for the change callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.

Examples


// revert
new Draggable('product_1', { revert: true });

// constrain direction and give a handle
new Draggable('my_div', { constraint: 'horizontal', handle: 'handle' });

To disable draggables later on, store it in a variable like:


var mydrag = new Draggable('product_1', { revert: true });
// then destroy it when you don't need it anymore
mydrag.destroy();

This way, you can enable and disable dragging at will.

Source code of the demo

Demo 1 (default options)


<div id="drag_demo_1" style="width:100px; height:100px; background:#7baaed; border:1px solid #333;"></div>
<script type="text/javascript">
  new Draggable('drag_demo_1');
</script>

Demo 2 (with revert and snap set)


<div id="drag_demo_2" style="width:100px; height:100px; background:#fff85d; border:1px solid #333;"></div>
<script type="text/javascript">
  new Draggable('drag_demo_2', { revert: true, snap: [40, 40] });
</script>

Demo 3 (with scroll set)


<div id="drag_demo_3" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #333;"></div>
<script type="text/javascript">
  new Draggable('drag_demo_3', { scroll: window });
</script>

Labels: ajax

Friday, January 23, 2009

One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. The mobile home page of Digg, for example, contains only 10 simple headlines and links, a log-in link and a few very basic navigation options. When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible.

In an age of crowded pages, the simplicity of mobile websites can be refreshing. What’s important is there, and what is most likely excess gets cut out. The simple options that a user has can make a mobile website much more usable than it would be otherwise, as long as the options allow for actions the visitor wants to take.

2. White space

White space is an important part of any design, and it’s something that’s usually a challenge in Web design because there is a desire to get as much as possible in front of the visitor. White space becomes even more of a necessity in mobile design because the typical screen size is so much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

As you browse through the websites shown in the gallery further down in this article or in real-world scenarios on your own mobile device, you’ll find that many websites include ample white space, especially the ones that are helpful and easy to use.

3. Lack of images

As high-speed Internet connections have become more common in recent years, designers have been able to take more liberties with things like bandwidth-hogging video and images. The average visitor on a desktop or laptop wants to see a visually engaging website, and, as a result, images are heavily used. However, when it comes to mobile design, excessive use of images often does more harm than good.

There is a great variety of speeds of mobile Internet connections and of pricing plans for access. Visitors are more likely to be slowed down or concerned with use of their resources when they’re on a mobile. Additionally, the size of the screens can make many images difficult to see and content harder to read. For these reasons, it’s very common to see minimal use of images in mobile Web design.

As a growing number of mobile users move to smart phones with larger screens and better connection speeds, more opportunity exists to use images. However, because there is still a large percentage of users who are not using these devices, many mobile websites still avoid images when possible.

4. Sub-domains instead of .mobi or separate domains

When the .mobi top-level domain (TLD) first became available, a lot of buzz surrounded the news. While some websites use .mobi for mobile versions of their websites, it is currently more common to see companies use a sub-domain or a separate folder on their primary domain. There are multiple issues a company must consider when making this decision, but one of the major benefits of using a sub-domain is that it keeps everything on one domain, rather than spreading things out and potentially confusing visitors.

You’ll commonly see mobile versions of websites at such addresses as mobile.example.com, m.example.com, example.com/mobile, example.com/m and other ones along these lines. Some actual examples are m.twitter.com, mobile.washingtonpost.com and netflix.com/mobile/. Of course, there are exceptions to this trend, but as you look at the mobile versions of major websites, you will see more sub-domains than .mobi TLDs.

5. Prioritized content

Because of the simplicity of these pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. Of course, all websites should be user-focused, but because most websites are run commercially for business purposes, there are often elements that aren’t necessarily important to visitors, such as banner ads. While advertisements have largely become an accepted part of the Internet, most mobile websites are ad-free. The content available on a mobile website is typically of the highest priority to the average mobile visitor, not the company, although in the end the company benefits by having a more usable website.

You can see an example by looking at the mobile version of The Onion. Like most news websites, TheOnion.com does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.

Another example of prioritized content and simple options can be seen on Best Buy’s mobile website. The only options here are for a product search and store locator (a phone number is also listed to allow customers to place orders). The logic here is that visitors who are accessing the website on a mobile device are probably on the go and probably have something very specific in mind. Maybe they’re looking for a store close to their current location to buy a product. It’s less likely that a mobile visitor would be interested in simply browsing the website, so the most important options for this visitor are presented, with nothing else to get in the way.

Common Challenges in Designing for Mobiles

Of course, Web design for mobile devices brings its own unique set of challenges that designers must overcome to create a successful mobile website. If you’ve attempted to design for mobiles, these were probably some of your most significant challenges.

1. Variety of screen sizes

Although Web designers are used to dealing with varying screen sizes and the resulting issues, mobile design presents this challenge in a bit of a different way than dealing with different-sized desktop monitors. Most designers are comfortable with the challenges that arise from various screen resolutions on desktop monitors, but if you haven’t worked with mobile design before, it can be something yet more complicated that you need to overcome.

Because mobile technology is always changing, screen sizes are changing, too. Fortunately for designers, modern mobile devices typically have bigger screens and higher resolutions than those of a few years ago, but of course those older phones are still in use.

While we’re on the topic of mobile screen sizes, there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends and More on Mobile Screen Size Trends. The results of the study behind these articles show that 240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Many newer mobiles and smart phones have larger screens, but smaller ones are largely a thing of the past.

The graph below shows the findings of the report, which is close to a year old at this point. With the rise in popularity of the iPhone and its competitors, the most recent numbers most likely favor larger screens even more.

For more interesting details on the study and other helpful charts and graphs, please see both articles at Sender 11.

2. Lack of understanding

One of the biggest challenges that many designers face is just the intimidation of dealing with a new aspect of design. If you haven’t considered mobile browsers and visitors in your previous design work, it’s most likely not something you feel comfortable doing without some research. Because mobile browsers behave somewhat differently than desktop browsers and because the environment of its users is not the same, the designer needs to gain some understanding and familiarity. Through the information and resources presented in this article, you can easily get started with a general understanding of the mobile Web, if you don’t already have experience.

3. Rapid change

Like any other technology, rapid change is a constant. Of course, Web designers need to stay on top of the industry in general, and the mobile Web is no different. As technology and trends continue to change, the mobile Web will evolve accordingly. The challenge of change isn’t really anything new to designers; the mobile Web just presents another area in which designers need to stay up to date.

4. Testing challenges

One of the most significant challenges in designing for mobiles is the wide variety of phones in use. While designing for desktops brings its own testing challenges, with its various browsers and screen resolutions, there are more dependable ways of testing these items at the moment. On the mobile Web, however, many of your visitors will likely be accessing your website in an environment that you were not specifically able to test.

There are, of course, some things you can do so that a mobile website is tested as well as possible. To start with, the simplicity of mobile websites in a way makes the testing process easier because there is less that can go wrong. With a careful design and some well-planned testing, it’s possible to be fairly certain that a website will be displayed properly and, more importantly, usable on the vast majority of mobile devices.

At the end of this article, you’ll find links to a number of helpful resources for testing, but we’d like to point out a few here as well. First, the Web Developer Toolbar has some very useful features for testing a website for mobile users. Because CSS and images may not be enabled when a mobile visitor is on your website, you can use the toolbar to disable both and see how the website will appear. While this does not exactly replicate the experience of visiting the website in a mobile browser, it can help identify potential problems in the way content and navigation is displayed.

Another helpful testing resource is the Opera browser. In the Opera toolbar, go to “View” and select “Small Screen.” This will display the website in a very narrow window, similar to what would be used on a mobile device. Additionally, you can use the Opera WebDev Toolbar to view an unstyled page by clicking on “Display.” By viewing the page in the small screen with CSS turned off, you can get an idea of how mobile visitors may experience the website. The screenshot below shows the Smashing Magazine front page unstyled in the small window.

5. Deciding on what is essential

If websites are to contain only what is most essential, the website owner or designer will have to determine accurately what content is most important. This may seem pretty simple, but taking a website that’s loaded with content, images and maybe even video, and weeding it down to just the essentials can be quite a challenge. Another aspect to this issue that must be considered is the status of the average mobile visitor. What are they doing? Why are they accessing the website at that time? What are they likely and unlikely to have any interest in? Keep in mind that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Considerations for Mobile Design

Now that we’ve looked at some of the current trends and challenges in designing for mobiles, let’s examine some specific issues that should be considered by designers during the process.

1. Clean, semantic markup
The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.

2. Separation of content and presentation with CSS
Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.

3. Alt tags
Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields
Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.

5. Use of headings
With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.

6. Avoid floats if possible
Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.

7. Reduce margins and padding
Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation
Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast
Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.

Sitepoint’s Designing for the Mobile Web

In March of last year, Sitepoint published an article, Designing for the Mobile Web, by Brian Suda, that provides an excellent point of reference on the subject. In the article, Brian breaks down the process of designing for mobiles in seven understandable and digestible steps. The article is useful enough to restate the main points here.

1. Don’t Mix Up Your Markup

For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.

2. Know Your Phones

We must cater not only to different screen sizes and resolutions, but to different shapes. From short and long rectangles to tall and skinny ones to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!

3. Target the Right Customers

Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. They may be waiting in line, riding on the train or bus, running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.

4. Publish the Bare Minimum

While the concept of having only one website, and simply styling it differently depending on the medium the visitor is using, is popular with many standardistas, a separate mobile website is required to deliver an optimized experience for mobile users.

5. Choose a Great Domain Name

When deciding on a domain name for a mobile website, the colleagues and companies I’ve worked with have always used a sub-domain. Creating a sub-domain is the easiest of the options to set up (you already own the domain), it’s the cheapest option (there’s no need to register the .mobi), and it means you avoid having to spend hours tweaking the server (and potentially messing up normal traffic).

6. Validate Your Markup

Mobile browsers are much less forgiving than desktop browsers. A browser running on a mobile device generally doesn’t have the luxury of a 2 GHz processor and 100 MB of disk space. Therefore, you must check, validate and recheck your markup, time and time again.

7. Test, Test, TEST!

Testing your website with a Web browser on a desktop computer can get you only so far in terms of simulating the mobile experience. There are many elements of mobile device usage that can’t be replicated accurately in this way.

Brian’s article is an excellent starting point for those who are new to designing for mobile devices, and it’s also a great resource to have handy down the road when you want to check your work to make sure you’re doing things the right way.

Mobile Gallery

After all this talk of mobile websites, let’s take a look at some screenshots of examples. Many of these screenshots are from Mobile Awesomeness, a gallery of mobile websites. Those that are from Mobile Awesomeness are linked to the relevant pages there, many of which contain additional images.

Testing Tools for Mobile Web Design

As with any other type of Web design, testing is a big part of the process. However, testing websites for mobile devices brings additional challenges, and fortunately, there are some tools available that were created especially for these purposes.

W3C mobileOK Checker

Ready.mobi

Emulator

Openwave Phone Simulator

Opera Mini Simulator

iPhoney

Labels: mobile web design, Web Design

Saturday, January 10, 2009

11 Ways to Improve Landing Pages

You’re about to launch a big online marketing campaign complete with media buys, search engine placement, banner ads and blog buzz. You’ve tested your creative and your clickthrough rate is strong. You know once you go live, tons of targeted traffic will be hitting your site.

Even after a customer has decided to accept your offer, the conversion can be lost. Any flaw in site functionality and usability can cause you to lose the conversion, so ensure your privacy information is posted and there are no hiccups in form processing.

Time to sit back and relax, right? Not quite yet.

Conversion’s the Word

Upon arriving at your site, you want the visitor to do something (e.g., register for your newsletter or buy your product). Your site is not successful until that desired action is taken. When a visitor takes that desired action, you’ve had a conversion. If you have millions of visitors coming to your site daily and no one converts, not only do you have an unsuccessful marketing campaign, but also a big hosting bill.

Attracting traffic is easy. The tricky part is converting it. And that’s the purpose of your landing page.

What is a Landing Page?

A landing page is the page visitors arrive at after clicking on your promotional creative.

Your landing page has to convince the visitor to stay and (depending on your goal):

Fill out a form (but people hate filling out forms)
Provide personal details (but people hate getting spammed)
Buy something (but people hate being scammed)
Read a lot of information (but people really hate reading)

As you can see, there are some major obstacles to getting visitors to do what you want on your landing page. You have to convince people to do things they hate. This is why typical conversion rates are extremely low. Here are some rates from the Fireclick Index.

Conversion rates from Fireclick Index
Vertical	Conversion Rate (%)
Catalog	6.1
Specialty stores	3.9
Fashion/apparel	2.2
Travel	2.1
Home and furnishing	2.0
Sport/outdoors	1.4
Electronics	1.1
All verticals	2.3

We’re talking about a very low rate, from 1-6%.

Before we get into the details about landing page design, let’s think about the visitors.

Think About Your User

Most people don’t come to your landing page and look at every single design element. They come looking for clues to quickly answer their questions.

They want to know:

“Is this the right place?”
“Is this how I imagined it would be?”
“Should I click the back button?”
“Does this look trustworthy?”
“How much time is this going to take?”

Your landing page needs to address all these issues immediately. If your design elements are not focused enough and/or distract the visitor, expect high page abandonment.

Next, visitors think: “Should I accept this offer?”

This is where your marketing copy and pitch comes in. Visitors will scan your intro copy, media content, product information, testimonials, and design value and decide whether or not to convert.

Even after a customer has decided to accept your offer, the conversion can be lost. Any flaw in site functionality and usability can cause you to lose the conversion, so ensure your privacy information is posted and there are no hiccups in form processing.

11 Tips to Improve Your Landing Page

Define Your Conversion

Before you start to design your landing page, define that page’s conversion activity. For a newsletter landing page, the conversion activity is entering an email address into a form and clicking “Accept.”
Do a Little Research

A little demographic research goes a long way. Figure out what your visitor is looking for and what offers work. Build a profile of your ideal visitor. Keep this person in mind when creating your landing page. Do not construct the page for anyone else—generic and broad pages are proven to fail—and keep everything “on target.” Your ad campaign already funnels traffic to your landing page, so visitors are expecting a very targeted message. Tailor the pages to them.
Eliminate unneeded Elements

Distractions kill conversions. Strip any unneeded elements from the page. This is not your home page. Anyone who comes to your landing page has already been screened by your ad. They expect a very specific message.
Match the Creative

The landing page and creative should match. The easiest way to clue visitors in that they have arrived at the right place is to use the heading from your ad creative.
Remove Navigation

If you can, remove the navigation bar. Of course, don’t remove it if it is essential to the conversion process. Remember your message, and if a link has nothing to with it—chuck it!
Stay Focused

Avoid the urge to promote or link to other areas of your site. The point of the landing page is to prevent your visitor from wandering. You want them converting, not clicking around to other parts of your site and marveling at your Flash animations. Imagine if GAP encouraged shoppers entering their stores to leave and walk around the mall. Once they stop thinking about your offer, you’ve lost them.
Important Elements Above the “Fold”

Pay attention to the virtual fold (the bottom of the screen before scrolling). Place enough content above the fold to allow your visitor to make a decision about continuing on the site. If a visitor has to click or scroll to figure out what your site is about, the only thing they’ll click is the back button.
Provide Conversion Exits

Make it easy for your visitor to convert. Place conversion exits above the fold and at every scroll-and-a-half of screen space.
Lead the Eye

Use typography and color to your advantage. Lead the eye along the page towards the conversion exit. Thoughtful use of whitespace, large copy and graphics can make a long page seem much shorter than it really is. Be careful though—a great image will demand a lot of eye time and if misplaced can ruin the flow of your message.

Place the important stuff (whether it’s your copy or your image) close to the middle, and never distract your user from that focal point. Avoid putting interesting material in sidebars. This pulls the eye away from the main body. If it’s interesting and valuable, keep it close to the center and use it to direct the eye.
Fix Forms

Optimize your forms. Make the input cursor hop to the next field after a user finishes the current field. Allow the user to tab around fields. Auto-populate any fields you can.

Remove all unneeded fields. Don't ask for city/state/province if you ask for a Zip or postal code. Focus on the essentials.

If you’re asking users to register for a newsletter, ask for only an email address. You don’t need their name now. Get rid of the reset button. It’s dangerous for both the user and you.
Test, Test, Test

After you have finished the design of your landing page, test it with a small user group. Go over a checklist with your design team:
- Is the whole page focused?
- Does the message match the advertisement?
- Have you reduced all distractions?
- Is critical information above the fold?
- Are there enough conversion exits?
- Does the page enhance your brand?

Labels: Design, Design inspirations, Tutorial, Web Design

10 Reasons Clients Don't Care About Accessibility

Working as an accessibility consultant in an IT company is a very frustrating job right now. Highly publicized lawsuits and deep-rooted accessibility myths leave us with a lot to explain when the final product does not really help visitors. Our clients simply don’t care about accessibility as much as we’d like them to, and there are several reasons for that.

Reason 1: It’s the Law But There’s None to Follow

Clients want to hear success stories from market leaders before they spend money. Unfortunately, pointing out that Amazon.com does not have a 450KB rotating logo splash page will not convince inexperienced clients that it’s a bad idea.

Since February 2002, it has been a legal requirement for organizations to make reasonable adjustments to ensure their sites are accessible. The Disability Rights Commission of Great Britain (DRC) issued a revised code of practice for Part 3 of the Disability Discrimination Act (DDA) of 1995, which covers goods, facilities and services. The code of practice explicitly included Web sites under Part 3 of the DDA and includes both those that provide services and goods for free and for payment.

Our clients heard that and wondered how to make “reasonable adjustments.” They turned to us for guidance, asking about standards and certifications.

But it’s hard to find standards for accessibility. Guidelines are easy to come by, but they’re outdated, not always logical or practical and are written for a world in which user agents (such as browsers) behave perfectly.

They are also a lot more demanding than they look, and encompass a whole methodology including testing with disabled users—something that is conveniently forgotten by a lot of agencies promising “100% accessible, verified Web sites.”

When we do follow the guidelines, we still don’t get a certification. A “WAI-AAA” button on our page carries the same legal punch as “Bill’s world of wicked Web sites gives your Web site five beer cans.”

Accessibility is about communication and compromise. Nobody expects you to cater for every disabled group because you simply cannot predict all scenarios. You need to go as far as you can but keep an open ear for concerns that are raised before legal action is taken.

Our rap now is “Yes, you can be sued for being inaccessible, but we cannot offer you a protection against that as there are no standards to follow.” Tough to put a price on that one.

Reason 2: There Is No Immediate Benefit

There is no immediate, measurable benefit from making a Web site accessible. Web accessibility enthusiasts might point out that that is not true as accessible Web sites are automatically more usable, and search engines can index them a lot easier. That is true but the benefits of that do not show up immediately—if ever. A fancy microsite or a video ad for a product, however, can trigger an immediate, measurable response in the form of traffic or revenue.

Good usability is a very important element in customer satisfaction, but you will rarely find it on the agenda of a project in the scoping phase (unless of course the project is usability consulting).

The argument that search engines are “blind billionaires”—that they “see” the Web like a blind visitor—is also a weak one. Search engine optimization (SEO) is a vast field and a lot of competitors fight dirty (e.g., link farms, bridge pages). Large corporations would rather plan for sponsored links and cross marketing than concern themselves with markup techniques to boost their search engine rankings.

Reason 3: Accessibility Is Sold As a Technical Problem

A lot of tutorials and introductory accessibility articles are written by Web developers for Web developers. They explain all the ins and outs of the HTML/CSS/scripting we have to worry about, and claim that it is not hard to do. It is true that when it comes to HTML, 90% of the accessibility changes happen “under the hood” and are not that hard to implement. This is also the biggest problem. It’s hard to explain to non-technical client why you have two development hours on your plan that didn’t result in any visible change.

Accessibility is perceived and sold as a technical issue, and there is little documentation out there for project managers on how to plan and budget an accessible Web site. They think it can be done later or that the developers will automatically take care of it.

If we want to develop a usable, accessible Web site, the development phase is far too late to think about accessibility. Designing for accessibility means ensuring that:

Text is easy to understand
All image material and colors are unambiguous to various groups of visually impaired users
There are meaningful text alternatives for all content images and multimedia
There is a glossary explaining all acronyms and abbreviations
The navigation and the flow of the site is logical and easy to follow
The maintenance staff of the product knows about these issues or gets trained accordingly

Reason 4: Disability Is Not Something Clients Want to Think About

A big problem with accessibility is that we just don’t want to think about why it is needed. For a visual person there is nothing scarier than the loss of sight. To address accessibility, the client and the designer has to think about what that experience would be like. The Web is still perceived as a medium for the able, the young and the wealthy. If your client sells games online and says its customers are in their twenties and have fast computers with broadband connections, it might be a tough sell to ditch the plan to build 150 links in a four-level drop-down navigation. Some clients can’t imagine that anyone in their audience would need to use the tab key to move through menus.

In Greek drama, the choir acted as the perfect audience, asking questions and commenting on the happenings. A lot of clients have something like that in their head when they talk about their users. The target audience is not necessarily the real audience, though. Grandmothers might be buying games online for their grandkids’ birthdays.

Reason 5: We’re Past Inventing, We’re Maintaining

As Joe Clark pointed out in his excellent book Building Accessible Web sites, it is a lot harder to retrofit an existing Web site than to start from scratch.

The Web is no longer new. Many companies spent a lot of money on their site, and it’s not always an option to start from scratch. Building an accessible blog or a 10-page brochure site is a lot easier than cleaning out a 200,000-page monster maintained in an eight-year-old content management system.

It’s even harder if you built the client’s site in the first place.

For years, badly planned and executed Web sites were sold at high prices. Now we have to tell businesses they’ve been had. Nobody likes to hear that they need to replace an expensive, functional product with a new one.

Reason 6: It Is Not Part of the Testing Methodology

The way we test Web sites is still rooted in the days of the browser wars. The important questions are:

Does the page work on browsers X, Y and Z on operating system 1 and 2?
Does it work on monitors with 800 by 600 resolution and is everything important visible without scrolling?
Are all images loading and positioned correctly?

We also need a methodology and test plan to address non-visual accessibility issues:

Does the alternative text make sense?
Is the language easy to understand?
Do links on the page make sense outside their context?
Does the page have a logical header order?
Does the page make sense without the style sheet?

Accessibility issues that require human verification are harder to quantify. Some automated verification tools flag these issues as “user checks” rather than “possible fatal errors that need user testing.” To clients, a bug that can’t be seen is not worth extra money spent on intensive testing.

Reason 7: Accessibility Seems Like a Party Pooper

Although the Web has been around for quite a while now, technology is still being toyed with. You don’t see newspapers printing at a 45-degree angle or TV news anchors talking “street,” but on the Web, anything goes.

Clients want their Web sites to be interactive—often, this means an interaction-required navigation that creates hardship for some disabled users. Unfortunately, it’s a lot easier to get a budget approved for a project with lots of flashy visuals than for a plan scoping out a very usable and accessible Web site. After all, the latter requires more client interaction and—gasp—maintenance.

Reason 8: Nobody Complains

It is hard for a client to see accessibility as a need when nobody complains. Many elderly and disabled people don’t claim their government benefits, so it’s safe to say that thwarted Web site users don’t necessarily complain. “No feedback is good feedback” seems to be the credo for a lot of site owners unaware of how badly their site is performing.

Reason 9: It Requires Involvement

One reason our clients don’t care about accessibility is that it means that they will have to deal with their Web site. In the low-budget market, clients think that you pay a Web designer to do your Web site and that’s that. A company brochure is not enough to base a fully accessible Web site on, and “build it and they will come” does not hold true anymore.

Aside from competitive pricing and a superior product or service, the only way to have success with your Web site is to give visitors what they want, regardless of their ability and technical environment. Many clients don’t want to be so involved. They can simply give their ideas to the print shop for their brochure, so why should they have to help a designer create and maintain a Web site?

Reason 10: There Is No Leader to Follow

The saddest reason for client indifference toward accessibility is that there is no leader to follow. Except in the case of Maguire vs. Sydney Organising Committee for the Olympic Games (SOCOG), no one has successfully sued a company for discrimination because of an inaccessible Web site. This makes it hard to spark a feeling of urgency in our clients.

Clients want to hear success stories from market leaders before they spend money. Unfortunately, pointing out that Amazon.com does not have a 450KB rotating logo splash page will not convince inexperienced clients that it’s a bad idea.

Few big corporations follow Web standards, mostly because of legacy systems and methodologies lingering from the days of browser wars.

As the DRC pointed out in its April 2004 report The Web - Access and Inclusion for Disabled People 81% of 1,000 Web sites failed to achieve a minimum level of compliance.

Another problem is the products that drive the Web. There are few content management systems that enforce accessibility testing in their workflow or create proper markup.

The same applies to frameworks like Microsoft’s .NET. Most “accessibility enhancements” mean graceful degradation for browsers like Netscape Communicator or “adding an alt attribute.” WYSIWYG editing is a very big selling point for a content management system, but it will inevitably result in malformed markup and bad document structure. Clients don’t care—all they want to do is easily maintain copy.

So what can we do?

Gently prod clients in the right direction. Here are some ideas:

Stop selling accessibility as a technical issue. Address it in the scoping and design phase rather than at delivery
Make sure you’ve got your facts straight before releasing another “accessibility” article or blog entry (rounded corners in CSS do not increase accessibility, really, they don’t!)
Make product presentations and assessments more fun by taking away the client’s mouse and changing monitor settings
If you want to support disabled users, don’t stop at one group. “Skip links” helps blind users and keyboard/switch access users alike, don’t hide them!
Send emails to companies every time it is hard for you to use their site. Point out that you will buy the product on their competitor’s site and why.
Step away from the visuals. Embrace Web design as a mixture of good content, proper structure and nice visuals. Start developing sites in the text editor, not in Illustrator.

Labels: Accessibility

What Exactly Is jQuery?

According to jQuery.com, jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

In simpler terms, jQuery allows you to turn ten lines of traditional Javascript code into two! Combine an enormous range of features with cross-platform compatibility and you have one robust framework. Before you know it, you'll be creating everything from rich forms to Flash-like menus. Don't worry if the task of learning yet another new framework seems daunting.

Labels: jQuery

Friday, January 9, 2009

Color Theory in Graphic Design & Web Design - How to Combine Colors & Choose Color Schemes

A GUIDE TO TOP COLOR COMBINATIONS IN WEB DESIGN Examples of Color Schemes and Color Combinations Within Designs

55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers

Are you having problems thinking of new color combinations? Do you wish that you could have a reference file for evaluating new color combinations for your website? There area many helpful tools and websites out there that list good combination colors but wouldn't you prefer to look at designs implementing these colors? I would. I have created about 45 different simple designs implementing workable color combinations, and I will add to this list at regular intervals. So bookmark this page, and come back when you are in the process of designing a website. Designers may send to me hex numbers and I will create thumbnails ( like the ones below) from these color combinations and add these to our list. An added benefit, Everone who adds a good color combination to this list will have there website listed (only if you want to). If you would prefer to send to us your own thumnail or a link to a website, you can do this instead.

On the next page, you will find the designs created with workable color combinations. Each picture includes hex numbers so that you can try them in your designs. Below these color combinations you will find a guide to choosing beautiful color schemes for your website designs. Enjoy and feel free to comment on these designs color combinations.

Everybody lives with colors all around them, and everyone views their surroundings in a different light, as well as in different colors. Both men and women coordinate their clothing together according to colors and patterns, although some people do it MUCH better than others. If you have never seen anyone coordinate their clothes badly, then you are probably the one who chooses bad color schemes for your outfits (sorry). If this is the case, either steer clear of design or use the color combinations used in the color combining list above. Even for those of us who do a great job at combining colors within our designs, we all have those days where our brains just aren't working right. When I am having one of those days, I usually go to CoolHomePages.com or other similar pages and find sites that implement great color schemes. However, for the purposes of this article, I decided to collect these color palettes into one list...as I did above. This might be helpful to you, but if it isn't, below this article you will find a long list of other resources for combining colors. Even if you are a great web designer, every designer should implement color scheming tools and inspiration files to help them on those 'nothing is going right' kind of days.

THE IMPORTANCE OF COLOR WITHIN YOUR WEBSITE'S DESIGN

Color is very important in web design, and can be used to add spice to your website, relay the mood of a page, as well as to emphasize sections of a site. If you think about it, as soon as you look at a website, you can normally guess within seconds what that site is all about. Just like we all are quick to judge other people by their appearance, and surroundings by the way they smell, look, and feel, we also judge a website by its color scheme and style of design. We can usually tell almost immediately, whether a website is corporate, personal, whether it is for kids, teens, or just for adults, etc. Most of this information is perceived solely by taking in color and design elements.

USE YOUR COLOR INTUITION TO CHOOSE APPROPRIATE COLORS FOR A WEBSITE'S TOPIC

We use color intuition every time we design. It is very intuitive to 'know' what colors are appropriate for a specific website topic. When you sit down to start designing, you probably take a look at the blank Photoshop screen and know by pure perception which colors are off limits to that specific design. For example, you wouldn't use blue, red, yellow, and green for use on a website design for an insurance company. However, this color scheme would work fabulously on a website for a preschool. On the other hand, You wouldn't use black, grey, and brown for use on a preschool's website, but this color scheme would work wonderfully on an insurance company's website. I didn't have to tell you this, with the use of your color intuition, you knew this without even being told.

USE COLOR TO EMPHASIZE IMPORTANT SECTIONS OF YOUR WEBSITE

As designers, it is our role to use color and other design elements to draw a visitor's eye to the most important part of the page. I started out my career as a fine artist, so I am going to put a different spin on your site's page elements. Fine artists make compositional choices in order to guide the viewer's eye to important components within their work. Web designers are artists too, and a good designer will see his page as a work of art. Try to imagine that your website is an art composition, in other words, that you will design your website's page elements in a fashion that presents a pleasing flow to the user's eyes. If it was not for search engines finding websites almost completely by text on the page, I would design my entire website completely within Photoshop as gifs, jpegs, and pngs. But since we are all forced to use tables, css, and text within our pages, sometimes web design isn't a simple task, and is much tougher than Print Design (although thank goodness we don't have to put up with print bureaus and prepress). We aren't going to discuss elements of composition today, but I will come back to it within a different blog entry. However, I will summarize a few things for you on page elements and how a web surfer will scan a website element by element.

WHAT ELEMENTS OF WEBSITE DESIGN WILL CATCH A SITE VISITOR'S EYES? WHAT PATHWAY WILL EYES NATURALLY FIXATE? WHAT DIRECTION WILL THEIR EYES FOLLOW?

(1) Eyes naturally being scanning left to right

(2) When viewing a website, a visitor's eyes most often fixate first on the upper left portion of the screen. Viewers often fixate on the point for a few seconds before moving their eyes to the right and then down the page.

(3)Dominant, noticeable headlines tend to draw the visitor's eyes first upon entering the website (especially when they are in the upper left, and most of the time when they are in the upper right.)

(4) I don't recommend this one because it is annoying ... If you want to force your visitors to read, then smaller type encourages a more focused reading / viewing behavior and larger type encourages a light scanning result.

(5) Website readers often read blurbs and headlines, however, they tend to only read the first one-third of the blurb. Unfortunately, you only have less than a second to grab the reader's attention on these headlines.

(6) Website visitors often will scan down to the bottom of the page to see if something catches their eyes.

(7) Website navigation works best on the top of the page...so try to use navigational features on the top of your page instead of on the side or on the bottom of the page.

(8) Images of beautiful, clean faces, causes the visitor's eyes to fixate on this image.

(9) If you display articles on your website, then try to use short paragraph structure. Web surfers prefer short paragraphs opposed to longer ones. And it is no surprise that we all tend to like one column formats opposed to a newspaper format of several columns.

(10) Details and Depth within elements of design are noticed before items lacking depth.

(11) The bigger a graphic or image, the longer the user will fixate on it.

(12) Eyes always lock on the most noticeable aspect of a website, for example color within a grey-toned website.

(13) Ads tend to do better on the top left portion of the site. This is no surprise considering that this is the first place people look when opening a webpage.

(14) Placing ads next to popular content increases an ad's success.

(15) Bigger banner ads did better than smaller, less noticeable ads.

(16) Text ads do better than banner ads because users tend to mistake the text ad for a link to content within your site.

IMPORTANT RULES FOR USING COLORS WITHIN YOUR WEBSITE'S DESIGN

One of the best aspects of the internet is the wide array of different pleasing designs that you are lucky enough to witness. However, for every beautiful site that you visit, there are at least a hundred more badly designed sites. Everyone has access to a beautiful web-safe color palette, however, it is amazing at how badly some people can implement these tools. The intention of this article is to make sure that we all use this color palette in the correct way so I can possibly get to old age with my vision still intact.

FOR THE LOVE OF G_D, PLEASE DON'T COMBINE THOSE COLORS TOGETHER

Have you ever gone to a webpage and almost puked?! Well, you aren't alone, I've been there, done that. We all have the same colors in our arsenal, however the way that some people combine them makes me want to start a new law forcing new designers to be issued color permits. I tease you, of course, however following some rules can help you sort out what combinations look good and what colors should never be combined. Yellow alone is such a beautiful color, and so is green purple, blue, and red. However, you put them all together on one site, and something might go wrong. What many novice designers don't realize is that more isn't always better. Color simplicity is very often overlooked as an important aspect of good web design. However, remember the last garishly bad website you witnessed and you will recall a probable overuse of colors. What some might think is 'hot', 'fancy', 'cool', is really just obnoxiously ugly.

HOW DO COLORS BEHAVE WHEN THEY GET TOGETHER

In fact, One thing about colors is that they are rarely seen alone. You need to visualize them in the context of being surrounded within the boundaries of other colors. When colors are along side other colors, the colors will all change appearance. It sounds crazy, but it is true. A light block of color near a dark area will appear lighter than it actually is, and the dark one will appear darker. It is important for web designers to consider the way that colors behave when around each other, so please keep this in mind so that you don't wreak havoc on your visitors' eyes.

Take a look at the same orange square and how it looks within the boundaries of other colors within the spectrum. Can you see how the orange square appears darker when surrounded by lighter colors? It should also appear that the orange box appears lighter when surrounded by darker colors. Try it with other colors.

COLORS USED WITHIN GRAPHICS, BACKGROUNDS, & PAGE ELEMENTS ARE MEANT TO ENHANCE THE LOOK OF THE PAGE, NOT TO TAKE OVER THE PAGE

There is nothing I hate more about bad website design than over usage of colors, graphics, and animations. You all know the type of website, but just in case you have been lucky enough to pass by websites such as this, here is an example of such a website - http://www.neiu.edu/~flanglab/. If you think that this website's design is amazing and you want to find out how you too can design this way, please immediately enroll yourself in a design course or find another career other than design. Of course I wouldn't say this if I wasn't 99.9999% sure that every single person who reads this article intuitively will know that this website's design was lousy. We all 'know' what a beautiful website looks like, it is just getting from a blank screen to a well designed website that is difficult. Just beware of over usage of graphics and images and you will be at least one step towards a well designed website. One of the problems of using too many graphics is that a high percentage of people will just leave your website before even reading the content. You want visitors to leave your website thinking about the great article they read or the wonderful products that you sell, rather than the user leaving irritated with the look of your site. Nobody wants to stay and linger on a site that is badly designed. Another reason to minimize the number or size of the graphics on your site is because the more images you add, the slower the loading time of your website will be . If your webpage doesn't load within a few seconds, you can say 'good-bye' to that visitor.

MAKE SURE THAT THE TEXT COLOR ON YOUR WEBSITE CONTRASTS ENOUGH WITH THE BACKGROUND COLOR

I hate when I have to squint to read text. I have bad eyes as it is, and trying to read yellow text on a purple background is like taking a hammer and slamming it over my head. Knowing how to pick contrasting background & text colors is essential in website design. Otherwise, your website visitors will exit your page without a proper visit. How rude. :-) Consider using black and white, or colors that are at the opposite ends of the color saturation pole. A white background with black text is considered the best possible format for website and printed copy. Maybe I'm getting old, but I am sure that we have all read an article online and landed up with a huge migraine headache because the yellow text on blue background was too much for our eyes to take. If you don't want to use black and white for text, then after laying out the page, ask yourself, "Does this text Contrast Well With the Background?!"� Use as much color as you want in the surrounding parts of the page, as long as it doesn't take away from the contrast of the text. This doesn't mean that you have to take up the entire page with these colors, you can instead use a table's background color as white (or other color) and leave the rest of the page the colors that you had intended.

STAY CONSISTENT IN YOUR COLOR SCHEME THROUGHOUT THE SITE

Use of colors within your website should stay consistent. Otherwise, if you use colors that are completely different on every page, how will your visitors know that they are still on your website? Also, if you ever want your visitors to recognize your website, having a consistent look and feel is important. Reinforcing brand recognition and earning familiarity amongst web surfers is a tough thing to do, so don't make it any tougher on yourself. A consistent and steady usage of colors will allow web surfers to feel more at ease and in control of their navigation. This color standardization will keep your users from feeling panicked with every click.

WEB-SAFE COLORS ARE DEAD MY FRIEND: WHY YOU SHOULD STOP WORRYING ABOUT BROWSER-SAFE COLORS

Web-safe colors are colors that will appear approximately the same on all platforms. However, before I go on, I would like to comment that I don't go out of my way to use web safe colors, mostly because 99% of the users who visit my websites visually see the same thing everyone else is seeing and without any problems. The web-safe color palette was created for computer systems that use a 256 color palettes (8-bit system). I can assure you that most computers haven't used this small of a palette for probably 10 years now. I would just assume that the web-safe color palette is 'dead' and that unless you are designing websites for a school that still uses 10 year old computer monitors, just use whatever colors that you want to use.

HOW DO YOU KNOW WHAT THE HEXADECIMAL EQUIVALENT IS OF A CMYK OR RGB COLOR?

When you're adding colors to your website with HTML or Dreamweaver, you will need to know the hexadecimal values (hex code) of each color. This Hex code is the way that your browser interprets which colors to use within your website. These are the codes that define colors on the web. In print you use Process and Spot colors (CMYK), Your Screen uses RGB, and your browser uses Hex Codes (also RGB). A bit of information that you will most likely not care about is that the Hex code is made of up of groups of 3 hexadecimal numbers. The first number is red, the second green, and the third group is blue. Each hexadecimal number is an RGB triplet. 00 is the lowest hue, and FF is the highest. There are thousands of color codes that you can create and if you are ever bored enough, I am sure that compiling these codes can pass the time quite well.

BASICS OF COLOR THEORY

Color theory is a set of principles used in order to create harmonious color combinations. With the use of color theory, you can combine colors together perfectly every time. Color representations can be visually represented by the color wheel, as seen below. If you follow the principles of the Color Theory, then the following colors are harmonious:

(1) 2 Colors Opposite of Each other on the Color Wheel are harmonious.

(2) Any 3 Colors Equally Spaced Around the Color Wheel Forming a Triangle are harmonious.

(3) Any 4 Colors Forming a Rectangle, Each Opposite of Each other on the Color Wheel are harmonious.

COLOR SCHEMES USING THE COLOR WHEEL THEORY

PRIMARY COLORS

Primary colors are red, blue, and yellow. These 3 pigments are colors that can not be mixed or created by any combinations of other colors. All other colors are derived from these 3 colors.

SECONDARY COLORS

Secondary colors are green, orange, and purple. These 3 pigments are created by combining the 3 primary colors together.

An example of secondary colors schemes in design example

TERTIARY COLOR SCHEME

The Tertiary colors are Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. Tertiary colors are colors that are created by mixing a unequal amounts of two primary color with a secondary color.literally third colour, colors that are created by mixing unequal amounts of two primary colours. An example of this would be to mix two parts of yellow and one part of blue together to form the tertiary color of yellowish green.

Tertiary Colors are next to eachother on the color wheel such as yellow orange red-orange red-purple blue-purple, blue-green and yellow-green

MONOCHROMATIC COLOR SCHEME

A monochromatic color scheme uses various darker shades, grayer tones, variations of lightness and saturation, as well as paler tints of a single color. In addition, the one color is often paired with white or another neutral. This color scheme is very elegant and has a very clean effect. A good example of Monochromatic color schemes are paint swatch cards. If you look at the color wheel below, you will see that the middle band is the natural hue and as you go out towards the edges, the bands get lighter (more tinted), and as you go towards the center of the cirle the bands get darker (more shaded).

an example of monochromatic colors scheme design

ANALOGOUS COLOR SCHEME

The analogous color scheme uses 3 colors which are side-by-side on the 12 part color wheel. The middle color is considered the ruling color. So for example, in a green, blue, purple color scheme, blue would be the ruling color. One color, the ruling color, is used as the dominant color while the other two colors are used to enrich the scheme. A few examples of analogous colors are:

-- green, yellow-green, and yellow

-- aqua, blue, and indigo

-- purple, violet, and red.

Analogous Color Schemes include 3 colors next to eachother on color wheel

An example of analogous colors schemes implemented in a design

COMPLEMENTARY COLOR SCHEME

Complementary colors are two colors that are opposite each other on the color wheel, such as purple-yellow and red-green. When you mix too complementary colors you produce a greyish color. If you put two complementary colors side-by-side, the complementary colors intensify each other. This scheme works best in situations where you need high-contrast compositions. You see complementary color schemes in nature all of the time, such as red flowers with green leaves, peppers, exotic fish, birds, snakes, and many more.

an example of hte use of complementary colors in a completed design

SPLIT COMPLEMENTARY COLOR SCHEME

The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.

an example of split complementary colors as used in a completed design

TRIADIC COLOR SCHEMES

A Triadic color scheme uses colors that are found by choosing three colors that are each separated by 120 degrees on the color wheel. The primary (red, blue, and yellow) and secondary (purple, orange, green) colors are examples of triadic colors.

Triadic Colors are colors that are separated by 3 colors on the color wheel so they are 120 degrees apart from eachother

An example of triadic colors schemes as used in a design element

COLOR TERMS THAT YOU NEED TO KNOW & UTILIZE

Every color available to us without any varition are called natural hues. Each of these natural hues can have a variation in tint, shade, or tone. The way that these variations come about are by combining natural hues with black, white, and all the grays in between. Even though many of you probably use the following terms on a regular basis, some of you might not know exactly what they mean or how they can help you in your website design.

HUE:

A hue is a pure color with no black or white added. A hue is the feature of a color that allows it to be identified as the color that it is, for example red, blue, yellow, green, purple, etc.

PURE HUE (NATURAL HUE):

A pure hue is the base color at its full intensity level, in other words, no shading, tinting, or tones have been added to the color yet.

SHADES:

Shades are the relative darkness of a color. You create a shade of a color by darkening the pure hue with black.

TINTS:

Tints are the relative lightness of a color. You create a tint of a color by lightening the pure hue with white.

INTENSITY (Also Known as SATURATION or CHROMATICITY)

Intensity describes the identifiable hue component of a color. A blue with RGB numbers Red - 0, Green - 255, and Blue - 0 (0,255,0) is considered 100% saturated and is intense, high in chromaticity, and completely saturated. A gray color has no hue and is considered achromatic with 0% saturation.

In the picture above, the colors are at 100% saturation
at the circle's edges and get less intense (saturated) as
the colors get closer to the center of the circle.

TONE:

A tone is a hue that has had grey added to it. A tone can also be a hue with a large percentage of its complementary color added.

VALUE / LUMINANCE:

Basically, value is a a measurement of how close to black or white a given color is. In other words, value is a measurement of how much light is being reflected from a hue. Those hues with a high content of white have a higher luminance or value. If you look at the color wheel below, you will see that this whell is full of different color values. The outer band is the natural hue meaning that it is the original color. The 2nd band is a tint of the original hue and has a higher content of white or luminance than the original hue. The inner bands are shaded versions of the natural hue and are closer to black than the original hue.

AN EXAMPLE OF OUR COLOR THEORY PUT INTO USE:

Now you might feel as if you have all of this newly learned color knowledge but nothing to do with it. Lets take a look at an example that you might find useful within your every day design projects. Look below at the corporate Samsung logo.

sony's corporate logo design

I am sure that you are all familiar with this corporate identity and that you all own something with this very logo on it. Now, lets pretend that Samsung hired you to design their website and that your first assignment is to come up with a usable color scheme. Lets use some of the color theory principles that we learned earlier in this article. Without looking at my example below, why don't you try coming up with a color scheme for the Sony corporate website in the following formats:

(1) Monochromatic Color Scheme

(2) Analogous Color Scheme

(3) Complementary Color Scheme

(4) Triadic Color Scheme for the Samsung Logo.

If you don't remember what all of those terms mean, look above at the definitions and the visual examples that I provided with each term. This should guide you in the right direction. Don't forget to use tints and shades as well.

Example Color Schemes for a Sample Samsung Web Design Project for their Corporate website in Monochromatic Color Schem, Analagous Color Combinations, Complementar, and Triadic Color Schemes

Now this process doesn't have to focus on the logo. You can instead focus on a photograph, graphic, or an important ad. Just remember your website's composition and to draw your visitor's eyes to the most important sections of the page. Take a look at this website. The first thing that pops up on the screen is that red and white logo on the grey background. It is very obvious in this example, but it looks really good. Then the backdrop comes up and your eye scans down to the motorcycle. Wow! I don't even like motorcycles, but I love this page.

Labels: Tutorial, Web Design

Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips