Showing posts with label Web Design. Show all posts
Showing posts with label Web Design. Show all posts

Basic Color Theory for Designers

On Sunday, March 13, 2011 8 comments

The first box of crayons you ever got probably had the basic eight: black, white, red, yellow, blue, purple, brown and orange. And at that time, this was all you needed every shade in the world fit into one of these categories. And then you discovered pink and you had to get the new box with sixteen colors. Your palette expanded. Gray, peach, silver before long, you asked for the big one. The mother of all crayons. The 64 count set with the sharpener on the box. Surely now you had them all; every color was in your grasp. 

Color is an important form of nonverbal communication. From the clothes we wear to the food we eat, color influences our choices. Our perception of the world is affected by color. Likewise, the way the world perceives us is also affected by color. In fact, color, many times, is the most significant feature of an item. Designers, therefore, cannot afford to treat color lightly. 

When mixing and matching, it helps to know a little color theory. Back to kindergarten and that box of eight crayons. One exercise you likely completed was a color wheel. The wheel is made by placing the three primary colors (red, yellow, and blue, if you are working with ink) equidistant from each other on a circle. By blending the primaries you get the secondary colors: red and yellow produce orange; yellow and blue produce green; blue and red produce purple. Further blends of adjacent colors produce tertiary colors, and so on.
You don't need a Ph.D. in color theory to know that relationships exist between adjacent, complementary, clashing colors. Our perception of color is affected by the surrounding colors as well as the proximity of other colors, and the amount of light. Furthermore, certain colors and combinations evoke emotional responses, which, depending on your background, you probably already intuitively know. 

It is the designer's business to create a visual experience which is pleasing to the eye. The elements of visual harmony are simple to explain, yet much more difficult to practice. Harmony engages the viewer and creates an inner sense of order, a balance. Combinations fail to harmonize if they are so bland as to bore the viewer. At the other extreme, chaotic, overdone combinations will be rejected as something which the mind cannot organize or understand. Simply put, the designer must strive to achieve the balance between under-stimulation and over-stimulation. This is harmony, a dynamic equilibrium. 

Adjacent or analogous colors are those next to each other on the color wheel. These are harmonizing hues, since they each contain of a little of each other in themselves. They work well together, although they can appear washed out if they are too close to each other on the wheel. Adding black or white to one or both colors (creating tints or shades) can create higher contrast, solving this problem. 

Complementary colors are separated by one color on a twelve part color wheel. While this combination of colors creates higher contrast, it also causes undesirable visual vibrations which puts physical strain on the eyes. This effect can be alleviated if complementary colors are separated on the page by at least one other color. 

Direct opposites on the color wheel are called contrasting colors. (Sometimes direct opposites are also called complements.) When used carefully in designs, these combinations have high contrast and visibility along with a sense of harmony. 

In choosing color combinations, designers often look to nature as a reference. This exercise delivers interesting and unusual combinations that can evoke similar responses to the actual experiences. While all colors have dual symbolism and have both positive and negative associations which change over time, their meaning in nature is constant and universal. Blue, as it is related to the sky on a clear day, will always create calm. Green, as the color of plants, will always bring new life to mind. Yellow is associated with the radiant brilliance of the sun, and so on. Designers are smart to take advantage of a color's association with nature.
In addition to these basic formulas, designers must be aware of associations to colors due to cultural references, gender, age, and class differences. It is important to understand how the color has been used in a political and historical context as well as how it has been used in past and current trends. Religious and mythical implications can also effect the use of a color. Even linguistic usage (i.e. phrases like 'in the red, and moody blues') will affect how people view a color.

Sample Design Sites that Use Color Effectively:
Webmaster Templates - http://www.webmaster-templates.net
Logo Search - http://www.logo-search.com

Avoid These Common Web Mistakes

On Saturday, November 20, 2010 0 comments

Webmasters need to avoid making these common web design mistakes. Website visitors who have a pleasant experience on a website are more likely to trust the website, and as such they are more likely to purchase products from that website. Use the following guide to avoid some of the more common web design mistakes... 

1. Legibility
Use standard web fonts and normal font sizes. The font color should be dark enough that the reader does not need to strain to read the text, and not so large that it screams at the reader. Bold text should only be used for emphasis and headings.

2. Graphics
Optimize website graphics so they are not slow to load. Avoid using animated graphics that will distract or annoy website visitors. Graphics should be clean and not pixelated. 

3. Links
Links should be easily distinguished from other text on the website. And all links should be tested to ensure they function properly. 

4. URLs
When selecting a domain name, choose carefully! A number of factors should be considered, not the least of which is how the domain will read. 

Examples:
www.expertsexchange.com could be a valid website for Experts Exchange, but the domain name itself could also be read as Expert Sex Change
www.penisland.com could be a valid website for Pen Island, but the domain name itself could also be read as Penis Land

5. Features
Benefits sell; Features do not. Drop any technical lingo, and simply tell users how they will benefit from using your product or service! I can not say it any more plain than that. You should use web copy that explains how your product or service helps, and in very simple terms. 

6. Copy
Do not over optimize web copy. Copy should be written for people and website visitors, and not for search engines. Keywords and keyword phrases should be used naturally in your web copy, and it goes without saying that the web copy should make sense. 

7. Novelty Items
Background graphics, and animations such as animated mailboxes with a red flag that pops up, are a thing of the past. Times have changed, and the Internet fads of the 1990s are no longer in. Just because you may like to reminisce about yesteryear does not mean that your website visitors will -- they're far more interested in the actual reason your site exists or the products it supports. 

8. Browser Compatibility
Test your website with all of the popular web browsers. Be sure that your website displays properly, regardless of which browser your visitor might be using. If not, you could be losing potential customers without even knowing it. 

9. Global
The Internet is global; do not minimize your audience by thinking locally. Use country and area codes on telephone number listings, provide currency indicators when listing pricing, and offer ecommerce options that appeal to a wider audience.

10. Retain Control
Never give up control over the content served on your websites. Lots of webmasters will simply link to images or content served from other websites, in an attempt to save on bandwidth and content development costs. But serving content from someone else's system gives them control over your website. This can be a big mistake! For example, what if you are pulling a graphic from another website, and they suddenly decide to change that image to something inappropriate? By serving the contents of others, you are relinquishing control over an important aspect of your business.
Keep in mind that style isn't everything. Do not sacrifice SEO for style, and do not sacrifice style for SEO. There is no reason they cannot coexist. A web designer not familiar with SEO should not be doing web design. Fancy graphics and SEO can live in harmony. Avoid the above mistakes and you will be well on your way to a professional successful online presence.

Building an Image with a Logo Logos

On Tuesday, November 2, 2010 1 comments

Website design can be elusive to even creative individuals. Sadly some webmasters do not realize their incompetence and they post websites that have grainy graphics and turgid colors. If you are one of these webmasters and have seen the error of your ways, consider this. Your website is a sales tool. A professional layout and design can significantly increase sales and conversion rates, gaining you customers. Businesses can greatly benefit from a professional and unforgettable logo that sets them apart from their competition. Logos are not just fancy graphics that adorn websites or letterhead, logos are a representation of a businesses' philosophy. Logos are a critical component of brand development.

Many webmasters do not realize that all images on the web are copy written and it is in many cases illegal to use an image that you find on the web without properly licensing it. Fortunately, for the graphically challenged websmasters there are a whole host of resources available to assist with web and graphic design. There are logo websites where you can purchase a single logo for a fixed fee, or subscription websites that allow you to purchase a subscription and download multiple logos. The logo is often the starting point for web design. Many webmasters use the companies logo to develop the website, the rest of the design evolves around the logo.

Custom logo design can cost from $ 100 to over $ 1000 depending on the logos complexity and the number of revisions required. As a result, buying a stock logo can offers substantial savings, for a small business starting out.

Fortunately for graphically challenged webmasters there are a number of websites through which webmasters can purchase a logo:

Logo Search
On Logo Search, website visitors can navigate through the logos using categories. The Logo Search website also has a search function allowing visitors to use keywords to locate specific color logos or logo styles. Visitors can purchase a single logo or they can purchase a subscription allowing them to download an unlimited number of logos for a specified length of time. Each download contains the image in a variety of format allowing webmasters flexibility. Webmasters can subscribe to an RSS feed so they are notified when new logos are posted and available for download.
http://www.logo-search.com
 
LogoStick
Logo Stick is a web based tool that allows webmasters to use logo templates and design software, to create custom individualized logos. After the logo is completed it can be downloaded from the website. The online logo design software lets website visitors select from a variety of symbols, fonts and colors, so that webmasters can create a unique look. Unfortunately if your issue is a lack of creative talent, this solution may not be a good one.
http://www.logostick.com

LogoMaid
LogoMaid contains a selection of more than 3300 unique and non-unique logos. Logos are sold individually and vary in price from $ 25.00 for a non-unique logo to $ 200 for a unique logo. Subscriptions to the LogoMaid website are not available. http://www.logomaid.com/home.php 

Check the Rules!
If you purchase a logo be sure that you completely read the licensing agreement. Some agreements may restrict resale of the logo and you want to be aware of that if you are a webmaster reselling your services.
Image matters by using an eye catching logo you will retain your website visitor's interest and instill confidence that you are a professional organization.

15 Important Web Design Tips

On Wednesday, October 13, 2010 1 comments

15 Important Web Design Tips
Here are 15 important website design tips that you might not be aware of or have overlooked. Consider taking advantage of them if you haven't already done so. 

1. Custom 404 Pages
Create a custom 404 web page, so that any time your website visitor mistypes or misspells a URL on your site, they will still be provided with navigation options for your site (instead of getting nothing but a "Page Not Found" error message, which is neither friendly or helpful). 

2. Redirect Non-www. To www.
Website visitors will often leave out the "www." portion when they type a URL or link to your website. Set the website up so that it automatically redirects any non-www version of your domain urls (http://domain.com) to the www version (http://www.domain.com) of your website. 

3. Properly Sized Graphics
Size and define all graphics and images on your web pages properly and correctly. Web pages will load quicker if the graphics contained on each page are properly defined so they don't require the web browser to re-size them. Properly sized and defined images can reduce the web browser workload and speed up the page loading time. 

4. Favicon
Add a Favicon (favorite icon) to your website, so that your company or product logo appears in the URL box. This icon will also show up in a bookmark list, and gives the web site an added level of professionalism.
5. Include RSS Auto-Discovery

If you offer an RSS feed for any content on your website, be sure to include auto-discovery code in the header of your website. This will allow many browsers and RSS readers to automatically detect the presence of an RSS feed and alert the visitor that it is available. 

6. Alternate Domains
Domain names are relatively inexpensive, so you should register multiple domain versions and extensions in order to protect your brand. The varied domains can be parked on the main website, simply to prevent others from obtaining them. Registering alternate domain versions will help protect your brand. 

7. Consistent Navigation
Navigation should remain consistent on a website. As a website visitor moves through the website, the navigation bar should remain in the same place on each page. This will make it easier for visitors to navigate your website, and become more comfortable as they move through your site. 

8. Home Goes Home
The main graphic, company logo, or "header" at the top of the site should be included on every page in the site, and should always return the visitor to the home page of the website. This has become a web standard, and most visitors now expect to return to the main page of the site simply by clicking on the main top graphic from any page within the site. 

9. Copyright Notice
Include a copyright notice on the bottom of each page contained on the website, and keep it current! It may seem trivial, but an out-of-date copyright notice can send a message to your visitors that the website and its content may be out-of-date as well. 

10. Meaningful File Names
Use meaningful file names for any files, graphics, or web pages. Many search engines look at file names as part of their search algorithm, and using keywords in file names may help to improve search engine rankings.
11. Hyphens vs Underscores
When naming files and webpages, use hyphens (i.e. web-page.html) rather than underscores (i.e. web_page.html) for the file names. It is much easier for search engines to separate and index the keywords when hyphens are used. 

12. Alt Tags
Use ALT tags to describe what images represent on web pages. ALT tags not only assist visually-impaired visitors in knowing what the images are, but they also help with search engine ranking. 

13. Spell Check
Use a spell-check feature on the text of all web pages in a website. A website that contains mistyped or misspelled words just shouts "unprofessional". Take the extra few minutes necessary to check the spelling of text on each page of your website.
 

14. Test
After making changes to a website, test it! Many times, a webmaster will upload changes, confident in their abilities, only to later discover that in their attempt to fix one thing, they have "broken" something somewhere else. Make testing a habit after making even the most minor changes! 

15. Keep It Simple
Simple is good. Remove unnecessary clutter and distractions from a website and navigation menu.

Web Design Q & A

On Thursday, September 30, 2010 1 comments

How much do you know about web design? Take this web design quiz to find out how much you know about web design. 

What Is A Web Template?
A website template is a ready-made HTML layout for webmasters. Typically, webmasters need to only edit the text and links in the HTML page, and they can then have a website up and running in a very short amount of time. Web templates make the creation of a website easier and faster. Web templates are easy to edit and customize using an HTML editor.

Examples of a web templates can be found at Webmaster Templates - http://www.webmaster-templates.net 

What Is A CSS File?
CSS stands for "Cascading Style Sheets", and are used to control and manage font styles, font sizes, and web site color combinations that are used in a web page. In order to retain continuity of "look and feel" throughout a website, all pages within a website will often refer to a single CSS file. The CSS file is typically contained in a separate file from the website, and the various web pages retrieve the CSS file each time a web page is displayed. CSS files make global appearance changes easy -- a single change in a CSS file will mean that any pages using that CSS file will automatically display the changes. 

What Is A Dreamweaver Template?
Dreamweaver Templates allow webmasters to define "editable" and "non-editable" regions of a webpage. The "non-editable" regions can only be edited in the Dreamweaver Template. Any changes made to the Dreamweaver Template update any HTML pages that use the template. 

What Is More Important -- Web Design Or SEO?
Web Design and SEO (Search Engine Optimization) are not mutually exclusive. The best webmasters are familiar with Search Engine Optimization techniques, as well as Website and Graphical Design. It is difficult to have a successful website if you neglect either SEO or Design. The two are intricately woven, and really must coexist to achieve website success. 

How Much Does A Website Cost?
It depends on many variables. Custom website design can range from $500-$2000 for a single web template. The price varies, depending on the complexity of the design. Webmasters can also use a stock web template, which can cost as little as $10.00, or as much as several hundreds of dollars. Some stock templates are available for exclusive use, and exclusive designs tend to be more expensive. Website content development and Search Engine Optimization can be even more expensive, and are ongoing expenses. 

If A Website Is Designed In Dreamweaver, Can I Edit It With Another HTML Editor?
Yes, most websites and designs can be edited in any HTML editor. 

What Is A WYSIWYG Editor?
WYSIWYG stands for "What You See Is What You Get", so if you are using a WYSIWYG editor to design and create your web page, you have a pretty good idea of how the page will look in a web browser. Think of Microsoft Word -- when you change a font, you see the font change immediately in the MS Word document. The same is true in a WYSIWYG Editor, in that you see changes immediately within the editor itself, as opposed to having to save the page and then separately load and view it in a web browser. 

Do You Have To Know HTML To Design A Website?
Knowing HTML is certainly helpful in website design, especially when very minor tweaks and adjustments are necessary, but it is not absolutely required for website design. There are a number of WYSIWYG editors and web templates available, which can assist new webmasters with the design process. Using a web template and a WYSIWYG editor, new webmasters are able to create a web page by simply cutting and pasting content into a web template. 

What Does HTML Stand For?
HTML stands for "HyperText Markup Language". HTML is the markup language that typically resides behind the web page. Information related to the website design is indicated by "tags". HTML is what is considered a simple markup language. 

What Is The Difference Between Dynamic And Static Web Pages?
A "Dynamic" web page is one that is automatically created "on the fly" as it is presented, while a "Static" web page is pre-configured and not interactive. Dynamic web pages will often pull information from somewhere else before displaying the page, so the page content is ever-changing. The information on a Dynamic webpage often results from a database query, such as "search" results. Another kind of Dynamic page simply pulls information from another source, such as a web page that displays an RSS feed -- it's "Dynamic" because the page content changes each time the RSS feed is updated. The information contained in a Static page is considered "flat", and never changes until the webmaster re-codes it.

Powered by Blogger