Feedback on Interface Design Version 04

Interface Design Version 04

Trying different colour schemes 

Chosen colour scheme

Instead of dimming the entire website; now dim only the product details column.

Feedback on Interface Design Version 03

• Colour

The overall design is not pretty enough perhaps because of the colours (green, yellow and gold colour are old fashioned, especially yellow). However, keep the photo-frame as it form a kind of identity to my website. The background could be of cool colour scheme such as blue while the elements needed to be highlight (call to action buttons) could be nice red colour (sharp and contrast) such as red champagne colour (elegant).

• Typography

The type hierarchy (text colour and contrast, size and visibility, placement or leading) can be improve. Most importantly, change the font of the logo because it is not appealing. Use stylish or more fashionable typefaces.

• Item sold column

This section is not exciting maybe because of the arrangement of the images. Probably placement of random sized images could enhance the dull and boring placement; look at more reference.

• Item on bid column

The red bidding element could be excluded as it doesn't match with the overall art style of the website. Find out a better way to present this column.

• Social network buttons

Are they necessary or are they something extra? If they are necessary, how to track the number? An extra page to keep the record? Moreover, the e-mail button is out indeed.

The changes made by Sweii (lecturer) to suggest a better look and feel of the website design.

Instead of dimming the entire website (which made the website looks unpleasant), Sweii suggests to dim only the product details column.

Interface Design Version 03

Home page (what non-user see on this website Home page)

Registration page (non-user is not allow to buy product from this website)

User log in page (user must log in to participate in the purchase process)

Watch-list page (user can navigate to the Propose price page or Bidding page from her Watch-list)

Propose price page (user can review the product, propose a price and ask seller questions)

Bidding page (user can bid for the product she likes)

Bidding page (when the auction is ending soon)

Bidding page (this message is showing to the highest bidder)

Bidding page (this message is showing to the bidder who lost)

About page (user can click on any of the bucket: About Us, How it Works, Curated Sellers, Upcycling, Little Rules and Curated NGO List. Each of the content will be shown inside the photo-frame) 

Design Meltdown: Study the Colour Usage

• Black

Black is such a strong color. Its weight is almost as powerful as the color red, but in a different way. It is a strong color without the attention grabbing aspects of red.

One really interesting thing about black is how it makes color pop. Photos really stand out on black, and anything with some color to it can really carry a lot of weight.

Adding color to a mostly black design creates a rich and tasty contrast. One of the most common features of these sites is how saturated the imagery is. When laying in images on top of black these rich colors typically look far better then washed out ones.

Connotations of black : Evil, self-confidence, power, strength, death, sophisticated, designer, formal, conservative, serious, mysterious, sexy, mourning, rebellion, elegant, night, illegal, wicked, intensity, mature, advanced, fashionable, stylish, chic, and trendy.

• Black and White

McNeil ponders a connection between the simple beauty of the color usage and the appeal of black and white photography. Something about simple b&w photos is so remarkably beautiful and the same seems to apply to some of the websites. 

The black and white combo is one with both classic appeal and modern pop. This color pallet can be made to have very traditional classy aesthetics, or it can easily be combined with sharp saturated colors for a look that is very hip and stylish. The combo is perfect for presenting content that really needs to stand out. By having such a neutral framework, the contents of such a design can be made to come forward in the design giving them the most visual dominance. Ultimately this combo is far more useful then one might expect. It is in no way out dated as its B&W film counterpart.

Nostalgic designs can take on many forms. Sometimes through classic typography. Sometimes through the visual language of an era like retro pop 1950's elements. In this case the color combo forces such an appeal onto the design. Combine this with other classic elements and one has a recipe for success.

• Blue

The color blue is perhaps one of the safest colors to use for a web site. It can apply to nearly any subject simply because blue is one of the most well liked colors. Blue is calming, safe, and feels very trustworthy; this is perfect for the web, where one never knows who to trust. Good old trusty blue. It is like the opposite of red in so many ways. It is diplomatic, passive, and far from confrontational. 

It comes as no real surprise that blue continues to be such a popular color. In fact, it would almost be surprising if it weren't. Its ability to apply to most any topic, combined with the mostly universal appeal of the color makes it about as fundamental as white or black.

Connotations: Patriotism, stability, power, trustworthiness, conservative, water, coolness, fun, cold, defeat, trouble, calm, strong, steadfast, light, friendly, confident, safe, corporate, intelligence, unity, sad, depression, old-fashioned, mourning, richness, superiority, truthful, loyal, faithful, noble, scholarly, unexpected, harmony, unity, clean, and technology.

• Blue and Green

The blue and green combo is one of those trusty old stand buys. A combo that always looks great and almost always comes across as conservative and safe. This is most certainly not to say that it isn't a great choice, or that it can't have an impact on its viewers. Perhaps that is just what is intended. These colors of nature connect with everything that is life giving. Green for plants and growth; blue for air.

Consider some alternatives like green and brown or blue and brown; other combos that allude to nature. These combinations have completely different connotations and certainly give an entirely different meaning to sites using them. It is amazing to see how much a difference color choice can make in how a site feels.

Perhaps this is why the combo is often seen in use on software related sites. Those sites want to draw on the friendly "natural" feel of the colors and convince potential clients that the application is not hard to use. Sure this is a subtle connection, but in design every element matters, and every element adds up to the cumulative effect of the design. Color is a critical choice. Choose wisely!

• Brown

The color brown can offer a variety of meanings to a design. One of the most obvious is the association to nature. Some sites have subject matter which makes this a logical choice, such as a park, or a wilderness lodge. But some layouts use this color for other reasons, such as Weightshift , who draws on its power to show dependability and honesty, two critical attributes for a designer. Brown certainly creates a warm and inviting atmosphere, as seen in all the samples below.

The color brown falls into one of the lesser used color categories, and yet it can yield some absolutely beautiful results. It can create tasty delicious visuals that pull users in. McNeil loves the natural down to earth feel they create. 

Many sites have pretty straight forward reasons for using the color. Take the Backpackers Bazaar for example. The site is all about activities that take place away from a computer in nature. Thoughts of getting in touch with nature are pretty obvious here. So using brown was a wise choice. It quickly sets a peaceful, nature oriented mood to the site. Connecting with the experience users desire is the key here. The site could have been all shiny and trendy, but what would that be saying? It would just be a random wrapper for the content.

Connotations of brown : Warmth, comfort, steady, conservative, earthy, natural, nature, down-to-earth, wholesomeness, simplicity, friendliness, dependability, health, honesty, old, and aged.

• Green

The color green primarily symbolizes nature and environment. Green is closely associated with money and the suggestion to "proceed", as suggested by traffic signals. The color can range from Irish, to financial, or even punk. The use of green also creates a soothing and safe feel, and many of the sites are very refreshing. A versatile color for sure. 

Green is one of those colors that somehow manages to offer a wide variety of usage and overall feel. By that I mean that it seems to be a really flexible color. You can get a lime green that really pops, a deep green like a cozy forest, or a grayish green that feels really subdued. It is a fresh and lively color and this perhaps accounts for the main reason it is used so widely. 

Green is one of the more versatile colors available to the web designer. McNeil would argue that blue is the most flexible, and green the second. This explains why the blue and green color combo is such a common choice. Green is simply a pleasant color. It isn't over bearing, instead it is calming, friendly, and connected with nature. These positive connotations make it a safe and effective color to use.

Connotations of green: Nature, environment, money, wealth, family, harmony, health, peace, posterity, soothing, relaxing, springtime, youth, humor, fun, happiness, life, growth, jealousy, envy, novice, restful, calming, balance, stability, summer, organic, recycled, plants, trees, fertility, fresh, good luck, and vigor.

• Grey

Grey is kind of an odd beast in terms of color since it is more about what it isn't instead of what it is. It isn't bold, powerful or intense, and it is more about the lack of color then having it. 

Grey is commonly associated with technology. There is a strong connection between stark neutral tones and modern design and technology. Perhaps this is a results of modernism's roots. Early modern design included lots of samples of neutral colors. This is probably where this association began and has persisted since.

Quite commonly portfolio sites will make heavy use of a neutral layout. This really makes the samples stand out. This is one of the real strengths of grey, establishing hierarchy in a design. By having most of the layout in grey you reduce those elements importance in the overall design, allowing color elements to really pop. 

McNeil views grey as the workhorse of colors on the web as it finds its way into nearly every design in one way or another. It works well with any colors, it is subtle and doesn't draw attention, all this makes it great for reducing elements in the hierarchy of importance on a page. 

Connotations of grey : Stylish, chic, elegant, classy, fresh, innovative, modern, futuristic, technology, spacious, fashionable, soft, airy, high-tech, sleek, neutral, conservative, smart, designer, trendy, light, open, state-of-the-art, impartial, calm, comfortable, peaceful, and relaxed.

• Muted

The muted color pallet is essentially the polar opposite of the Ultra Pop pallet. Instead of working to make everything bold and in one's face, muted pallets work to be more restrained, and perhaps even sophisticated.

Don't confuse this with designing with gray, there is certainly a difference. Many of these muted designs, if not all of them, use gray. But, one can certainly create wonderful muted designs that don't purely rely on it.

One major bonus of working with such a pallet is that when one really need to make something stand out, one can do so very easily. All one has to do is put in a bit of full color and one can make an element leap out of the page. Certainly too much of this can destroy the atmosphere created by such a color scheme, but it is a real bonus of this style. Actually, this isn't just a bonus, but perhaps the real reason to use this design. It has the ability to let certain content leap out at user.

• Orange

The color orange is a very flexible color. In some ways it is closely associated with Halloween. Orange carries a lot of power, not quite as bold or harsh as red, yet not as light and soft as yellow. It somehow conveys the sense of a friendly and inviting environment while still maintaining a level of professionalism and seriousness. Orange also seems to be a very hip and youthful color.

Connotations of orange : Fall, Thanksgiving, Halloween, nature, earth, warmth, energy, flamboyant, energetic, sun, stimulating, health, sociable, friendly, citrus, balance, enthusiasm, vibrant, fertility, fire, luxury, heat, and activity.

• Pink

What's in a color? Everything. The color pink primarily symbolizes love and beauty. Pink tends to be calm and soothing. It can also can be very stylish and is currently a very trendy color.

It doesn't appear to be used primarily to convey the typical connotations of romance and a feminine quality. It seems to be hot right now for conveying a fun relaxed atmosphere, or for showing a creative side. It has a very stylish appeal when mixed with grays. The cool thing about this stylish combo is that it doesn't feel to serious, it retains a relaxed and approachable feel.

The color pink doesn't seem to be going away. Something about it is trendy, stylish and fun. 

So perhaps that is the lesson in pink. A color typically reserved for cute little girls. Combined with the right pallet pink can create a very professional, hip, and enticing design. 

Some colors appeal to certain demographics; some have universal appeal; some are trendy; others are boring; but pink is the one color that when used well just makes things work. Somehow this color can just ooze with style and elevate a site to an aesthetic other wise not possible. McNeil love how this presumably feminine color can cut across the sex barrier and appeal to men and women alike.

The color pink continues to be a popular color in web design, which is of course a bit surprising. This is certainly not the color one might expect to be so widely popular. Interestingly this color is found in many place one might not expect it. Its playful, happy, and hip connotations make it an attractive color to those looking to set a different type of expectations and mood on a site. 

Connotations of pink: Passion, romance, love, innocence, soothing, relaxing, fresh, sensuous, restful, tranquilizing, marriage, healthy, happy, sweet, nice, playful, good health, life, sexuality, purity, gratitude, appreciation, feminine, fun, free.

• Purple

Certainly the color is seldom used. McNeil believes the key is in that it is perceived as being too feminine. This certainly doesn't have to be the case of course. However, it seems it is a real challenge to turn purple into something stylish. 

And of course, one cannot escape the obvious religious connotations of this color. According to the Easter story in the Bible, one knows that purple robes were placed on Jesus prior to his crucifixion. They were of course mocking him because they had conquered this "king of the Jews." It seems this is the root of purple and Jesus connection. Strangely one seldom find purple used in a church related site. Seems an obvious connection to make, and yet few do. 

Connotations of purple: Royalty, prosperity, wealth, Easter, Jesus, spirituality, wisdom, healing, nobility, romantic, delicate, cheerful, feminine, justice, mystery, mourning, death, humility, and purity.

• Red

Red is an emotionally charged color. The emotional connotations of red are all about the extremes. From courage and love to danger and hell. Red is known to be a powerful color, some even think red is so tied to victory that simply wearing it can aid in one's success. In a more serious business web site red is bold and powerful , compared to the traditional corporate blue which is conservative and safe. On the opposite end of the spectrum Bad Design Kills uses red to grab attention and issue a warning, a very appropriate usage of the color.

Connotations of red: Patriotism, conservatism, Christmas, stability, power, trustworthy, warmth, fire, fun, blood, success, sacred, hearth, emotion, courage, love, good fortune, heat, hot, evil, hell, anger, stop, respect, vitality, strength, aggression, intense, high energy, danger, communism, passion, and of course Valentines Day.

• Ultra Pop

McNeil thinks the idea of using these ultra saturated colors embodies what the new internet is all about. They are fresh and fun colors, that evoke friendliness and ease of use. So many new little apps are coming out and many of them are treated with this fresh color style. The web is moving away from things that look like programmers built them and more towards mainstream easy to use well designed applications. The psychology of the colors used couldn't play into this more.

This isn't for everyone and it won't work in all situations, but there are strong connotations and power in the colors one chooses. Choose them wisely.

This pattern of using super saturated colors seems to be here to stay. McNeil particularly loves how it escapes the limits of print and uses colors that would be next to impossible to print making the web a unique medium.

A few connotations of ultra pop : Fun, fresh, new, young, hip, easy, simple, exciting, happy, and cheerful.

• White

White is such an underrated color. McNeil feels compelled to point out that white does not equal boring.

More often then not the usage of white results from a need for a clean and simple design. These designs often contain quality content that doesn't necessarily need a flashy wrapper. Or, the owners of the site are not as interested in grabbing as much attention as possible with the design, and prefer to rely on quality goods to attract interest.

Connotations of white : Cleanliness, purity, life, stability, trustworthy, peace, happiness, cold, marriage, goodness.

• Yellow

Yellow is somewhat of a less popular color. It doesn't show up very much in web design, at least not in very prominent ways. 

The no-spec.com is the first to stand out. They clearly use yellow to reinforce the purpose of the site, to warn people about the down side to accepting spec work. The entire site is a great big caution sign, it is only appropriate that they use the color yellow. Caution is one of the most common connotations of the color yellow.

Yellow is not nearly as powerful as red, but at the same time it carries some impact. Perhaps it is the less used nature of the color, or just that it is a bold one.

Connotations of yellow: Nature, earthy, warmth, fun, sun, summer, illumination, inspiration, energy, hazard, warning, emergency, sunshine, happiness, joy, cowardice, deceit, cheerful, excitement, healthy, hope, support, laid back, spring, and relaxed.

• ProgressForge discussed about How Color Affects Purchases using infographic

• Randy Krum made a infographic about The Most Powerful Color On The Web
  

Design Melt Down: Study the Design Elements

• Badges

Badges are so web 2.0. One simply can't be a modern site without a badge! These Badges are intended to be attention grabbers. It can certainly draw the eye if one has something new or exceedingly important to highlight.

Some sites put them to marvelous use and emphasis the most important elements. From the “Buy now!” to the “hire me” or the “Love design”. These badges serve a purpose and take a prominent place in the page. Remember there is a hierarchy to a page, and designer must work the scale of importance, to emphasize everything is to emphasize nothing.

This element carries so much more power and potential than some designers realize, a badge can easily be the first element to be noticed on the page. Putting something meaningless in it seems like a really bad idea. Many of the samples contain calls to action, a brilliant way to use the element to draw users to the action one want them to take. 

McNeil knows if he had a product to sell he would either make it a "Buy Now" badge, or he would put the most compelling reason to buy his product in the badge. Reduce the sites purpose to the single most important point, do you want to be hired? Do you want to sell a product? Do users need to know the site is pure spam? These little badges not only look nice, but they serve a role and can be a powerful design tool.

Examples:

• Decorative Animation

Decorative Animation is animation in an interface that is pretty much there for decoration. McNeil finds the use of decorative animation to be quiet inspiring. It is fascinating to see how a little (or a lot) of animation can really breath some life into a design. 

Example:

http://www.lab25.com/ - this website has interesting decorative animation for its buttons and logo.

• Icons

Icons are such incredible little visual devices. Their sole purpose is to communicate lots of information in the simplest possible way. Their usage on the web is of course no surprise. The web is an environment filled with impatience, wandering eyes, and easy distractions; a place in dire need of quick visual indicators. Icon can serve as great helpers showing users where to go for what they need. Instead of scanning text user can scan images, and often they will tell user what he or she needs. This is no different then street signs, where recognizable forms communicate quicker than text.

The key to successful usage of icons in a web design is integration. Not only should the style of the icons fit the site, but the color pallet as well. This seems obvious, but at the same time it can be so easy to not do this. The icons should really work to reinforce the design of the site and in many ways become the focus. 

The use of icons in design is not likely to ever end. The practice of summing up lots of information in a little package will never go away. It all boils down to the most rapid form of communication possible. Design is in fact all about communication. 

Examples:

http://www.cropix.ru/ - this website has amazing icons designs.

http://www.icozon.com/ - has many icons for its webpages.

• Mascots

If there is one thing missing for the typical web site it is personality. Personality is hard to get across with out putting some "live" element into a design. Mascots are just such a tool. They imbue the design with a character which inevitable has some sort of personality. The amazing thing is that these characters need not be animated in any way to effectively fill this roll.

Not every site needs a mascot, but it can most certainly be a powerful tool to help set the mood designer wants his or her site to have.

Examples:

• Ornate Elements

Ornaments have been around for ages and have long been used by typesetters and blacksmiths. They have decorated everything from park benches to wedding invitations, and now of course, web sites.

Ornaments are beautiful and can really enhance the feel of site. In others it is more subtle and it is simply used as decorative element adding an extra bit of flair to a page.

Ornate elements are one of those things that may gain more trendy status from time to time, but on the whole will never go away or be out of style. Ornament has always been really beautiful and will always have a place. What McNeil finds truly wonderful is when people use it in ways that feel fresh, new, and just look beautiful. Not just beautiful in a Victorian old school sort of way, but when the element is morphed into an uber-modern and stylish element.

Example:

• Rounded Corners

The rounded corner. A mainstay in web design since the beginning of the Internet. Typically, rounded corners work well on sites that communicate technological design , but now, rounded corners can be used to communicate a variety of themes.

Rounded corners serve a secondary purpose as well. They break up the box-like nature of web design. With rounded corners. 

Rounded corners should server as a communicative device first, and a decorative device second. Consider The Church at Bethany site. The rounded corners here serve a dual purpose, initially breaking up the box-like layout, but more importantly, giving the church an appeal to an audience accustomed to the rounded look, thereby inviting them in.  

Example:

Scottsaw.com's use of rounded corners initially appears to be an arbitrary decision. Look closer at the art. It's full of organic shapes, would another framing device have been more appropriate? Doubtful.

• Web Typography

Typography can be a beautiful thing, and sometimes it can be the most elegant part of a design. The sites featured below followed this model and choose to use the type as the primary focus. This reduces the need to rely on strong photography or illustration and forced them to resort to basic elements such as hierarchy, balance, and composition. The end results are elegant and very readable.

Useful links:

- Elements of Typographic Style Applied to the Web
- Five simple steps to better typography 
- Text sizing (tons of screenshots showing variations by browser and platform)
- Type Tester (great tool for deciding on typefaces)
- sIFR
- The Elements of Typographic Style Applied to the Web 
- CSS Based Image Replacement (Replace text with an image of text)

http://subversive.dk/?p=a53 - this website shows some typography guideline.

http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography - this website which did the same.

http://www.ill-studio.com/works/art-direction/103-gq-magazine.htm - this website showcases some appealing typefaces and arrangements.

Design Melt Down: Study the Site Structures

• 3 Little Buckets

It seems there is an endless supply of things that come in threes. The number holds some magic that just plain works. On the web designers often find manifestations of threes on home pages. Three steps to do something, three key selling points, three main products, three main options. Users love threes. McNeil believe it is because it is an easy to consume amount of information. Three options isn't so bad. Put 10 options on the page (of equal weight) and users become lost. 

Many of them are action items, and quiet frequently they contain a button to inspire the user to do something. Consider the fact that these sets of buckets present themselves as a single visual entity. The user then scans through it. The point is that it is a massive visual draw and is the perfect spot to put a call to action. What does the designer wants his or her users to do? Sign up for an eval? Request more information? Register with the site? What ever it is this is a perfect spot to encourage it.

Why it is so appealing. For one it creates a perfect balance. One item split in the middle and one on each side. Four is balanced as well, but not quiet as perfectly. The other big plus is that three items is not too much to consume. One can easily scan it, four is a stretch and any more becomes cumbersome. Three is indeed the magical number. One other nice feature is that they act as a single unit and carry a lot of visual weight; through in some design elements that reinforce this and designer has the perfect spot to put calls to action. 

Examples:

http://business-paper.dk/ - this website design has clearly demonstrated the '3 little buckets' concept.

http://www.attitudedesign.co.uk/ - this website is another good example that demonstrated the '3 little buckets' concept.

• One Page Sites

The one page web site is in someway's the epitome of efficient communications. It lumps all of the content in one nice list. This clearly will not work for everyone, but for many situations it is a great idea. Portfolio sites are a perfect example of this. 

On a portfolio site the real goal is to grab the attention of someone who is potentially going to be paying the designer to do work. It seems there are two key elements to make this happen:

One, present the portfolio in the nicest way possible. This is especially important for those in the business of making things that look good. Designer clearly has to do his or her best to make it stand out visually while showing his or her work in the best possible light. 

Secondly, enable viewer to see the work as easily as possible. McNeil thinks the one page portfolio does this in the best way possible. A nice long flow of the stuff designer has done. It isn't as easy to overlook any of the great pieces since viewer doesn't have to visit 20 pages to really see everything. Not to mention the fact that a large page of stuff looks impressive.

In non portfolio situations the single page site can still make sense. Depending on the needs it is just a matter of not over complicating things that don't need to be. 

It is so fun to see what designers have done with a single page. There is no need for hundreds of complex pages to manage. A single page will do. In fact, ease of use is by far the best aspect of this style of site. 

Example:

http://www.cubancouncil.com/fieldguides - this is a good example of a 'one page website'.

• Tabs

Tabs are fundamental to web design, and most large sites incorporate them. Even if they don't look exactly like tabs, they have the same function. The pattern of making them looks like tabs obviously stems from the idea of a file cabinet organized by folders. Considering this it is obvious to see why many designers have chosen to use tabs in their design. It simply helps users understand that they are getting into an area of data, not necessarily a specific page yet, but a pool of data they want to be in. 

a) Traditional Tabs

Generally as McNeil explained, traditional tabs means tabs with the typical rounded top corners which also in some ways feel like a more literal or physical tab.

http://www.kits4rbaby.com.br/ - this website has a 'traditional tab' at the top left of the page.

b) Stylized Tabs

These tabs are extremely gorgeous and help create a polished look, this attention to detail has really pushed these sites.

Sarajoypond.com is a terrific example. The tabs maintain the concept of major navigational sections, and carry the visual weight needed to establish a primary navigation element. This combined with some elegant stylization unifies the design of the site.

Design Melt Down - Design Styles and Themes

• Sketchy

Anyone who has been through art school, drawing classes in particular, can appreciate the sketchy type elements included in the samples below.

Patrick McNeil supposes the way this stuff is done is relatively obvious. The elements are drawn by hand and brought into the computer via a scanner. Then combined with more typical computer generated design elements. It is also quite common to add in elements with a bit of grit and texture to them. Stained and torn paper, scanned tape, scratchy textures, anything to further relate the design to tangible hand made elements.

This technique really can produce fantastic results. The connotations are clear and it works tremendously well to communicate creativity and an artistic touch. McNeil actually think this is a really smart direction for artist, especially ones new to the web. It enables them to use a skill they are really good at in a medium they are still learning. Clearly many of the samples are very advanced and far beyond beginner. But McNeil love how someone new to the web can create a powerful design that draws on their existing strengths to create an interesting and unique design.

The sketchy style is one of the most personal design styles available to a designer. The style inevitably reveals some of the artist character by literally producing some of the sketchy ideas stored up in that persons brain. It is this personal nature that perhaps makes it so appealing to visitors. It just feels like the artist is somehow being bit more honest. As though they are saying "this is what I am, take it or leave it." And as a visitor it goes unsaid, but we get that. 

Examples:

http://www.admediastudio.com/ - interesting navigation bar and rollover effects besides its unique art style.

http://www.fudgefactorycomics.com/ - random yet cute sketchy elements will appear and move across the screen each time the user clicks on a different page on this website. These motion graphic (lighter file size) makes user willing to stay on the website while waiting for its content (heavy file size) to load.

http://www.carlkrull.dk/ - unique and straightforward homepage design. User knows who the artist is and what he does without having to click on any button or read a chuck of words.

• Retro Style

Revised versions of past styles is a common and very popular technique. It is found in advertising, cd design, fashion, and of course, website design. It is done for a variety of reasons, sometimes driven by the content of the site and at other times by the desire to associate the site with some element of the past.

After looking at these retro styled websites for some time McNeil settled on three main elements that establish the retro feel: the color palette, old photographs, and period appropriate typefaces. Consider how all these elements work together to make a complete theme.

The Color Palette

An appropriate color palette is fundamental to establishing the feel of a specific time period. The period you are shooting for will ultimately determine the set of colors you choose to work with. Earth tones seem to be the one constant among these sites. Perhaps it is not necessarily because those earthy colors are associated with a specific time period, but rather because they evoke age, and aging the site is exactly what designers need.

Old Photography or Illustration

The age old saying that a picture is worth a thousand words couldn't be more true. In nearly all the sample sites photography or illustration is perhaps the primary element that sets the feel for the site. Without the imagery, most of the sites would be very weak in terms of pulling you into a different era.

For example, the Target Scope web site has an illustration of a pin up model. This is easily understood as a reference to the 1940s. That combined with the military theme clearly plants us in the midst of World War II. Imagine the layout with out the model and one will quickly see how important it really is. The other primary image is the background. This paper texture does wonders to age the site and really helps complete the whole package.

Retro Typefaces

This seems to be an obvious element, but the use of appropriate typefaces can either complete or destroy a design. One of the best sources of retro fonts is Font Diner . They even have a few free ones available. If one is unsure of which typeface is appropriate, this article on the history of type might help one to determine which ones to use. This timeline of type classification is another excellent tool for picking type families.

Regardless of how one incorporates this design element always keep in mind how it works in conjunction with his/her brand. Even if the site is personal it has a brand, and if one has any interest in running a successful site one will view it as a business no matter what the purpose.

This is a bit of a tangent, but using a theme on a site where it doesn't fit is a kin to looking like a serial killer and applying for a job at a day care center. There is no reason in the world one should mix one's signals, especially not in a medium where one can so easily be ignored. So consider the site's purpose, message, and core reason for existence, does the retro style reinforce that, or distract from it. If one is not sure, then perhaps this isn't the element to use.

Examples:

http://www.1trickpony.com/ - very interesting design as an e-commerce website.

http://www.detektiv-nali.de/ - strongly establish the feel of a specific time period.

http://hotelsavoytimisoara.ro/ - launch a new window and displaying an old clock with black background introduces a new and excited experience. Perhaps this can be the opening of my bidding feature.

After the product image is shown, the old clock will be placed at the bottom corner of the page counting down the time left for bidding seems to be a good idea.

• Distressed Design

The usage of distressed elements in design is nothing new, and perhaps the golden age of textured web design has passed. All this really means is that the gratuitous and meaningless usage of texture on web sites is no longer accepted and that sites using it more deliberately will only do so more effectively.

Many sites use texture simply as a means to break up the computer generated feel of straight lines, solid colors, and perfect gradients. Urban International is a fine example of this. When the site needs a grass roots or urban feel, texture can certainly save the day. Most extreme sports related sites make fantastic use of this technique, as seen on the Dimension Boards site. The distressed, thrashed, and worn look give the rebellious anti-corporate connotation of the extreme sport lifestyle.

Perhaps one of the strongest usages of texture is in the effort to show expressiveness or creativity. Kutz Town , exp.typo , and fatoe.com all put it to use for this purpose.

screen shot of exp.typo website design

It certainly seems as though texture has been abused, but it is still a powerful and expressive tool. Just as with any other design element, step back and decide if it reinforces what one is trying to say. If the theme fits, then run with it, well done sites using this element can be quite gorgeous.

Connotations of texture: worn, used, free, expressive, physical, tangible, artistic, creative, raw, hip, aged, historic, rough, grass roots, urban, and rebellious.

The usage of the worn and battered style is certainly not the focus in the design world right now. This is not to say that it can't be a great solution. In fact it can be rather nice to use a design pattern that isn't the current trend, it really helps a site to stand alone instead of blend in. In the case of this style it has pretty clear connotations and can be used to reinforce a sites purpose. Most of these sites have chosen this style to connect with their topic. It creates the mood and atmosphere of the site and really serves a purpose.

• Illustrated

It is of course a more expensive and harder path to go down, but using illustrations in your web design is a recipe for uniqueness. How corny would the Intuitive Designs site be if they had used a stock photo of a chef! Instead, they have a wonderful illustration that fits the design and message of the site; and even better, the site stands out.The usage of illustration in web design creates difficulties that can be difficult to over come. First it costs money to generate one, then one has to effectively fit it into one's design, and finally the implementation of illustration heavy sites can often have various technical gotchas. In the end though, it is well worth it.

Obviously the actual illustrators (the artist that is) have the upper hand when it comes to using this style on their portfolio site. Not doing so would be almost silly, since the illustrations easily represent what the artist style is, and really effectively sell them. Take a look at the portfolio of Pedro Lamin for example. He has placed wonderful illustration on his home page. In fact it is huge and takes up the better part of the page. And why not, it instantly draws users in and hooks users on his style.

Examples:

http://www.illustanne.com/ - the white background makes each and every illustrated icon and image stands out and appeal to users.

http://www.carolrivello.com/ - the illustrated element blended very well with the background and navigation bar colour and also the flow of content.

http://www.ungatoys.com/#/#jobs - very attractive and eye-catching website design with bright colour scheme and interesting illustration. 

• Extreme Theme

At times design can be the most frustrating of endeavors. Finding that great design can be so hard. One thing McNeil has observed that always works is coming up with a theme. Perhaps this is obvious, but settling in on a theme as opposed to a design style can really get the ideas flowing. So instead of deciding to make a shiny or distressed site, consider themes that would work for the topic. Quiet often themes sound ridiculous, and they usually are, but after being implemented they are fun and really bring a site to life.

For example Indigo 6 turned their basic black site into a clever theme based one. Instead of a normal content driven site, the airline theme creates a pretty silly atmosphere. The cool thing is that user can't help but wonder what the site holds. The site becomes an experience. One can just imagine the design process for this site. Ideas like "lets make it nice and clean" might come up. But comments like that don't inspire. Then someone in a meeting said, "hey what if it was like your on a plane and there was a stewardess?" Surely someone scoffed at the idea, but someone else thought it sounded better then the otherwise void of ideas. Next thing they know everything about the entire airline industry is a source of inspiration.

And that is really the true power of a theme; to inspire. Any site can have a theme, it doesn't mean it has to be extreme. Extreme themes are good for showing the power of the tool. But even corporate customers have a story to tell. Even they need to communicate with and entice visitors.

Example:

http://webmark.shost.pl/?cat=32 - it has a similar theme to what i have in mind for my e-commerce website design.