Multimedia Project Planning

Thursday 20 December 2012

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.

Tuesday 11 December 2012

All of the fonts are Open Source. I can even customize them for my own use, or collaborate with the original designer to improve them. And I can use them in every way I want, privately or commercially — in print, on my computer, or in my websites. In fact, I've found and downloaded 3 suitable fonts for logo and 3 for body text from Google Web Fonts.

Aguafina Script

Semi-formal and eye-catching elegance is the name of the game, says Aguafina Script.

Graceful, but not too casual. Knowledgeable and artistic, but not too imposing. The characters flow into each other, making a very saucy script with appetizing color. The narrow lowercase allows for efficient use of space, while the long ascenders and descenders help maintain the legibility.

A unique find among scripts, Aguafina is useful for product packaging, glossy magazine work, and book covers.

Cinzel Decorative

Cinzel is a typeface inspired in first century roman inscriptions, and based on classical proportions. However it’s not a simple revivalism, while it conveys all the ancient history of the latin alphabet it also merges a contemporary feel onto it.

Stalemate

Stalemate is a script of vintage origins but still modern flair. This script exudes confidence and carefree attitude and makes a bold statement in any design.

Bitter, designed by Sol Matas

" People read and interact with text on screens more and more each day. What happens on screen ends up being more important than what comes out of the printer. With the accelerating popularity of electronic books, type designers are working hard to seek out the ideal designs for reading on screen.

Motivated by my love for the pixel I designed Bitter. A "contemporary" slab serif typeface for text, it is specially designed for comfortably reading on any computer or device. The robust design started from the austerity of the pixel grid, based on rational rather than emotional principles. It combines the large x-heights and legibility of the humanistic tradition with subtle characteristics in the characters that inject a certain rhythm to flowing texts.

Bitter has little variation in stroke weight and the Regular is thicker than a normal ‘Regular’ style for print design. This generates an intense color in paragraphs, accentuated by the serifs that are as thick as strokes with square terminals.

Each glyph is carefully designed with an excellent curve quality added to the first stage of the design, that was entirely made in a pixel grid. The typeface is balanced and manually spaced to use very few kerning pairs, especially important for web font use since most browsers do not currently support this feature.

Early versions of the Italic and Bold styles were added in December 2011 and will be updated and complemented by a Bold Italic in early 2012. "

Rambla

Rambla is a humanist sans for medium-long texts. It’s slightly condensed, with a generous x-height and short ascenders and descenders. Its proportions are economical in both height and width. It’s elegant at large sizes and legible at the same time, with a lot of rhythm in small sizes.

Inika

Inspired by Easter Island and its Rapa Nui language and culture, this typeface captures the essence of an island located in Chile, South America, full of mystery, sacred places and stories of the past. “Inika” means “ink” in the Rapa Nui language, and it represents the tradition of the rongo-rongo writing, used by people on the island thousands of years ago. The tiki style was worked into the characters with a light touch while developing the upper and lowercase letters forms to evoke the spirit of the island. Inika is useful for both long text setting, document titles, and even large display sizes.

Sunday 9 December 2012

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)

Thursday 6 December 2012

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 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.