Friday 30 November 2012

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.

4 comments:

  1. Looking For Kinemaster Pro APK for free? yes, of course, this is the reason you are here. So guys welcome back to DivyaNet. Today I came back with Kinemaster Mod APK. If you are new here Let me tell you I am uploading Mod version of every popular application. if you want any other Hacked or Modded app you can it from here.

    ReplyDelete
  2. Kinemaster Pro MOD APK is a complete editing solution that has attracted users from all over the world to enter the field of fast editing. Editing fans who are always trying their best in the art of editing, this tool will give them the best opportunities to further improve their skills.

    ReplyDelete