1stwebdesigner

Posted by | Posted on 17:49

1stwebdesigner


April Fools Day – Don’t Get Fooled!

Posted: 01 Apr 2010 10:59 AM PDT

Title-april-fools-dayApril, april! I tried to trick my colleague, then few of my friends and I understood I am too honest person to try to evil trick somebody! Only I tried on Twitter to tell everybody I will give up on this site and put it on sale on Flippa.com – it didn't work good as well! I guess even on April 1 I cannot trick you and give up! We will work even harder to bring quality – don't worry!

Okay, but this quick article will be about telling you what happened in design community, what tricks creative minds tried to do to fool us! Let's get started and share your links and tricks you've done today! It will be fun and watch out whole community is buzzing and fooling you!

Deviantart

Deviantart went crazy this day with "Twilight-ed" vampire jokes, Lady Gaga dominating in funny animated avatars. You shall not have your own avatar today, watch out – signatures will fool you today as well!

Just read those signature comments! My top ones, just something to get some smiles:

"I’m your biggest fan, I’ll follow you until you love me :drool:"

"Vampires don’t count as people. :tombstone:"

"I want your psycho :stab: , your vertical stick."

Deviantart-april-fools-day

A different kind of company name for Google – Topeka

Looks like Google has been given up to its current branding and will start with clean company name – Topeka! I am sure it will work better as current one! ;D

Googleblog-company-name-topeka-april-fools-day

Okay, I did some research and looks like all good stuff already has been found, but still I wanted to greet you here and get news on this blog as well!

But still shortly about other interesting jokes:

TEXTp saves YouTube bandwidth, money

Read about great Youtube idea, they will try to save bandwidth using Textp Matrix mode in their videos!

Youtube-bandwidth-saving-april-fools-day

Introducing wave notifications for Google Wave

We will also get new Google Wave feature – advanced notifications! :

iCade – iPad Arcade Cabinet

We have also new suggestion how to use iPad more effectively!

Icad-new-ipad-april-fools-day

Reddit Has Gone Crazy! Be admin today!

Yes, that's right, turn Admin feature on and manage Reddit site! You must be logged in to do it though!

Reddit-admin-feature

Also read their main page – not very fool proof right now!

Reddit--april-fools-day

Introducing Translate for Animals (beta)

New app designed in April Fools day!

Google-translate-april-fools-day

Watch this video to see new and great app in action!!:

Read more here:

Share your best jokes and sites you've found today!

20 Cutting Edge Ecommerce Stores for Inspiration

Posted: 01 Apr 2010 07:00 AM PDT

E-commerce stores are rarely a thing of beauty and for good reason: user experience is far more important than cutting edge design when it comes to these kinds of sites. Online stores must be functional, accessible and user-friendly for everyone that visits them, which counts out wacky, experimental designs and layouts.

This doesn’t mean that e-commerce sites have to be boring though far from it! The best ones marry simplicity with a certain level of invention and plenty of style. With so many sites following the same, boring e-commerce template we’ve all seen a thousand times before, making minor changes to your site can make a huge difference, helping you stand out from the competition.

Below, we take a close look at 20 of the most cutting edge e-commerce stores from around the world. Some of them belong to global brands with huge budgets and the latest technology at their fingertips. Others, however, belong to smaller companies who have had to think outside the box to achieve cutting edge design.

1. ASOS

Asos

ASOS (As Seen On Screen) is the UK’s largest online-only clothing store, receiving 5.2 million unique visitors each month. This monumental level of success would not have been possible without a superb e-commerce store. Users can easily choose from the 19,500 products on offer by checking boxes for colour, price range, brand, sleeve length, jeans fit, jacket style and much more. Each product can be zoomed in on and viewed in a catwalk video.

2. Inkd

Inkd

Inkd isn’t your ordinary online store. It sells logos and graphic design packages for business cards, brochures, letterheads, flyers and many other kinds of promotional material. Inkd is all about cutting edge, unique design, and its website is no different. Chunky tabs make navigation easy and each product comes with numerous, high-res product views.

3. Abercrombie & Fitch

Abercrombie & Fitch

Founded in 1892, Abercrombie & Fitch is a clothing brand with a serious pedigree and patrons including John F Kennedy, Katharine Hepburn and John Steinbeck. Its e-commerce store stays true to its classy roots, with a dark colour scheme and large, high res images of its products which can be viewed at the touch of a button. The store is super-fast and loads very quickly.

4. Apple

Apple

Apple is at the forefront of cutting edge design in everything it does, including its e-commerce store. Finding exactly what you’re looking for is really easy with the most popular products laid out in front of you against a brilliant white background. Click on a product you’re interested in and you’re presented with detailed specifications organised in a really user-friendly way. The purchasing experience is almost as pleasurable as visiting a real Apple Store.

5. Sony

Sony

Sony occupies the other end of the spectrum to Apple, with a site themed around the colour black. The three-dimensional tabs at the bottom of the page move when hovered over, revealing all kinds of electrical goodies. The site even looks great when it’s loading, thanks to a line of vibrantly coloured dots.

6. House Industries

House Industries

House Industries offers a vast range of fonts to buy in its ecommerce store, but users can find the perfect ones for them easily, thanks to Style, Collection and Name categories. As you might expect, font design throughout the site is second-to-none. Viewing fonts is a pleasure and you can even see them in use.

7. Free People

Free People

Clothing shop, Free People, combines large, dreamy images on its homepage with videos that load instantly. Flick through their catalogues online before choosing your items and refine your search by price, colour and size. You can even change the way that pages display by clicking on buttons at the top and access a mobile version of the site through your phone.

8. Uniqlo

Uniqlo

Japanese casual clothing giant, Uniqlo, has gone all-out with its ecommerce store, offering users a classic Product Search capability alongside a cutting edge Styling Search function. Use the Styling Search to flick through looks from different collections, modelled by various gorgeous hipster-types. Rest your mouse on an image to be presented with thumbnails and links to the products on show.

9. LaLicious

LaLicious

At first glance, LaLicious looks like nothing more than a standard online store, but it features many subtle touches which elevate it way above other bog-standard sites. Product views are exquisitely done. Click on the delicious-sounding Sugar Souffle Scrubs, for example, and you’ll see a range of pots containing substances of different scents. Hover over each one and the pot flips on its side, revealing the colour and texture of its contents.

10. ShoeGuru

Shoe Guru

ShoeGuru has one of the best minimalist e-commerce stores around. Its homepage is terrific. It features a large, high-res image of a shoe – nothing more, nothing less. This image soon gives way to photos of different people, each representing a different type of shoe- high top, athletic, casual etc. The store itself is simple, but fun to use with an easily accessible sizing chart.

11. Size?

Size?

Size? is another super-cool footwear store, specialising in rare and unusual colorways of famous sneaker brands. There’s a lot going on its homepage, with enough interesting information to keep any sneaker-head occupied. The store itself is minimal and functional. Users can search for shoes in a variety of ways, including by the colour of highlighting and details.

12. Naked and Angry

Naked and Angry

Naked and Angry’s ecommerce store couldn’t be simpler. The front page features clear images of each of its 27 products, split into obvious sections, for users to peruse. Other companies could learn a lot from this minimal design. Too much information can detract from the products on offer and confuse visitors.

13. Archiduchesse

Archiduchesse

In theory, a shop selling nothing more than socks should be really boring, but French company, Archiduchesse, has managed to be stylish and attractive with its ecommerce store. The different socks on offer are arranged in order of colour, creating a palette, moving from bright pinks at the top, down to dark-reds and maroons at the bottom. This site really is a thing of beauty, but something most companies could achieve.

14. Brio

Brio

Like most Swedish companies, BRIO knows a thing or two when it comes to really classy product and graphic design. Like its toys, BRIO’s site is classic, minimal and well made. Products in the store itself are clearly pictured and really well described. A pop-up window shows various views of each item.

15. Incase

Incase

Selling everything from iPhone covers to laptop sleeves and guitar cases, Incase are one of the most iconic luggage brands in the world. Besides great product shots, which show Incase’s goods in all their glory, the site features several expertly directed videos promoting and explaining the company and its most popular lines. This gives users a great feel of the brand and what it stands for.

16. Dripping in Fat

Dripping in Fat

The best thing about Dripping in Fat’s e-commerce store is its homepage. T-shirts on a line have been made to look at though they are literally melting away. Moving the mouse from side to side, users can pan through the company’s product offering, focusing in on anything they like just by clicking on the ‘+’ sign next to each item.

17. Organic Supermarket

Organic Supermarket

Organic Supermarket features a superb welcome video on its ecommerce site. It shows the inside of the shop and happy customers buying their groceries, giving visitors an insight into what the company’s all about. Browns and greens dominate the site’s colour scheme, matching the organic produce on sale and the shop is really easy to use.

18. RedVelvetart

Red Velvet Art

Ecommerce sites do not come any cuter than RedVelvetart. The handwritten fonts which can be found all over the site really are outstanding, as are the hand-drawn navigation buttons. In fact, the whole site screams individuality and fun. Products hovered over in the shop are surrounded by coloured stitching, a great way to engage users.

19. Toobydoo

Toobydoo

‘White space’ is one of the most important and commonly overlooked elements of web design. Without ‘white space’, layouts appear ugly and customers are quickly confused. Toobydoo has used ‘white space’, expertly in its ecommerce site- making images and blocks of text easy to read and every page quick to scan. Users can shop ‘By Look’, to see exactly what each item of clothing looks like on another child.

20. APC

APC

Masters of selvedge denim, APC, have managed to combine simplicity with style to create a site which looks great and highly original, but does not sacrifice user experience. Like Toobydoo, this straightforward site features ‘white space’‚ in all the right places. Products are displayed clearly and can be zoomed in on and moved around by left-clicking with the mouse.

Which one is your favorite? Don’t forget to share it with us.

Empathizing Color Psychology in Web Design

Posted: 31 Mar 2010 11:00 PM PDT

The way different colors influence our mood, state of soul and body is really exciting. Most of us do not realize how it works and only a few probably pay attention. Though the influence of the colors may be some what overestimated, we can obviously feel it in some situations (imagine yourself in a dark red room or in the room in the sky colors). Today we’ll be speaking about color perception and color psychology in website design, the way different brands use colors and what’s their message.

The colors are divided into two basic groups – colors in the red area of the color spectrum known as warm colors (red, orange and yellow) and colors in the blue area known as cool colors (blue, purple and green). The warm colors evoke emotions ranging from feelings of warmth, comfort and coziness (the fire burning in the rainy cold evening) to anger and aggression. Cool colors are as a rule described as calm and tranquil but can also be associated with sadness (being in blues) or indifference.

In the ancient times people believed that colors can cure from different diseases. This science was called chemotherapy, and some of the basics were as following:

  • Red increases blood circulation and thus stimulates the body and mind
  • Yellow stimulates the nerves and purifies the body
  • Orange increases your energy
  • Blue treats pain
  • Indigo alleviates skin problems

Though the majority of psychologists take color therapy sceptically big brands don’t seem to agree with that. They create huge marketing campaigns based on the way we perceive the colors and make people buy. Below is the table with the colors and emotions/feelings they are widely associated with. Let’s try to analyze the websites of some world-known companies and see how they implement color techniques.

Color Emotions
Black Symbol of menace or evil, popular as an indicator of power. Associated with death and mourning, unhappiness, sexuality, formality, and sophistication.
White Purity or innocence. Cold, bland, and sterile.
Red Evokes strong emotions, associated with love, warmth, and comfort. Still considered an intense and angry color that creates feelings of excitement, intensity, sexuality.
Blue A favorite color for many people and the color most preferred by men. Gives the feelings of calmness or serenity. Described as peaceful, tranquil, secure, and orderly.
Green Symbolizes nature and the natural world. Represents tranquility, good luck, health, and jealousy. Symbol of fertility, has a calming effect and relieves stress.
Yellow Cheery and warm, but can also create feelings of frustration and anger. Most fatiguing to the eye (that’s why you’ll rarely see a bright yellow website or a room painted with yellow with the exception of playrooms for kids) yet most attention-getting color (so great color for important details or calls to action- remember the yellow stop/caution color).
Purple Royalty and wealth, wisdom and spirituality, sex and relationships, exotic and special.
Brown (all of us love wooden backgrounds). Natural color that evokes a sense of strength and reliability, warmth, comfort, and security.
Orange (banner color of the counter-culture). Blatant and vulgar color, makes you feel excitement, enthusiasm, and warmth. As a combination of red and yellow it’s often used to draw attention.
Pink Associated with love, romance, youth, freshness and may have a calming effect. Pink effect depends on the type of pink (strong, light, deep etc).

Now when we know what colors mean and what feelings they evoke, let’s try to make a simple analysis of the color schemes used by 20 world-known brands on their corporate websites. That’s really exciting and you start taking things differently.

1. Coca-Cola


Primary color is red on a white and light gray background for better visibility and contrast. The red is supposed to create the feeling of excitement and energy. “Open happiness” text in the main menu corresponds to the color perception.

Though the white is probably used to make an accent on red, as a cold color it’s supposed to give the feeling of coolness “For refreshing ideas” as they say in the moto. An excellent job!

2. McDonalds


Though the McDonalds restaurant colors we are used to are yellow and red (to cause children excitement, a bit of irritation and craziness), the website looks pretty formal in black and white. And no wonder, being visited by parents who would like to know what their kids eat and how fat is that, black and white is the perfect solution to make the website look strict, formal, informative, clean and somewhat sterile.

Now imagine it would be mainly in yellow and red (causing excitement and the most fatiguing to the eye)- that would make parents mad. Frustrated parents = Less money

3. M&M’s


The M&M’s colors that we usually see in the TV/bigboard ads are yellow and red (double excitement). The website itself is a mix of all possible colors, from light blue on the background to dark-blue, purple, green, yellow, orange, red in the banners and header area. The M&M’s guys are extremely smart, everyone can choose a candy to his liking :) There’s one problem though- the website looks very clumsy and kinda created from pieces that do not match.

4. Colgate


Red, white and blue- the colors of world-famous 3-colored toothpaste and the only colors used on the website (even mother and kid on the photo in the header area are dressed in red and white on the blue sky background!). Red for energy and happiness, white for shine and sterility, blue for cold freshness of stream water and confidence. Though I like the toothpaste, the website color scheme is not pleasant to my eyes. The abundance of bright red makes me feel uncomfortable and makes it almost not possible for me to focus on the texts and information.

5. Nestle


Nestle slogan says “Good Food, Good Life” and the white-gray-blue color-scheme makes you feel calm, secure and in some way sure that’s everything is gonna be okay. You will remember this feeling subliminally and buying something produced by Nestle next time you’ll be thinking “somehow I know this is a reliable company producing good products, I might have read this somewhere”. Another great example how marketing is closely connected with the color perception.

6. Nescafe


A product of Nestle company, Nescafe website is however designed in deep plum colors- a mix of red associated with the cozy warmth, energy and power and purple- making you feel so special, exclusive and unique. I love this color scheme, it’s not so annoying as red and not so exquisite as purple, it makes you feel special yet very comfy.

7. Cadbury


A website made of all shades of purple. I guess it is supposed to say that Cadbury products are very special, but it makes me feel playful for some reason. That’s an interesting approach, while the chocolate is usually associated with energy (like Snikers) or sex (dark black chocolate) the playful approach definitely makes the brand stand out from the crowd. Or am I the only one taking it like this?

8. Nokia


Blue, green, gray, white and a little bit of pink. Blue for serenity, green for tranquility and nature, gray to nicely mix blue and green, white for clarity, pink is probably to attract girls :) The website is designed in the colors to make you feel sure of the quality, yet they stay away from the standard blue-gray-white color scheme.

Green is knows to relieve stress and will have a calming effect on somewhat frustrated with daily heap of things to do business people who have come to check for the updates.

9. Kodak


Though the Kodak products are usually associated with yellow (yeah, they catch the attention) the website is designed in the classic gray-white-blue color scheme, so pleasant to the eye and allowing to focus on texts and information. You feel that you will get all the info that you need in a clear way, yet you do not feel too formal, just professional approach to things.

10. Gillette


Blue is the color most preferred by men and guys at Gillette perfectly know this. “The Best a man can get”- the favorite men color and a bit of red and orange on promotions to catch attention. They know what you like guys and they know how to sell their products to you.

11. Marlboro


Red, black and gray- power, sophistication, sexuality and strong emotions- features of a “real” man. However if you visit philipmorrisusa you will notice that the company corporate website is designed in blue color scheme- peaceful, tranquil, secure. That’s an excellent example how the colors work, if you still don’t believe it, let’s move forward.

12. Ikea


The header of the website is designed in bright colors- yellow, yellowish-green and sky-buy – which makes your feel somewhat excited (and willing to buy something?). The photos used in flash animation are bright as well which makes you even more excited. The website body is pretty simple- black and blue text on a white background to give you full access to the information.

The special offers page has a huge red banner on top and you can’t keep your eyes from it! That same moment your brain keeps reading “special offers” over and over again … and Ikea has you.

13. Budweiser


Same as the Marlboro the Budweiser website main promotional page is designed in red and black colors, meaning “Hey Dude- drink Budweiser and you’ll be a “Man”. The inside pages all have different backgrounds- white, red, black, gray. I don’t think that there’s some separate marketing campaign behind this but rather a non-standard design approach (though most of the pages still remain in red).

14. L’oreal


Not much to say about L’oreal website- being designed in all possible shades of purple it makes you feel really special. With L’oreal products you’ll be sexy, stylish, sure of yourself, and really-really special.

15. Kellogg’s


Since 1906 people have known Kellogg as a company they can rely on for great-tasting, high-quality foods. All the website speaks of fun and excitement (lots of yellow and red) and the smiling families on the photos in the header area make you feel even happier. Yeah, your kids gonna love Kellogg’s they are so fun and cool! Even the text on the website speaks about it “We’re excited to offer fun promotions related to our products.” It’s fun, fun, fun!

16. Gucci


Natural light brown colors make you think of the Gucci products as very natural (and in some meaning they are since they are made from leather). Similar to L’oreal, the website is designed in a single color where different shades are used to make accents. Though I’m against killing animals for fur and leather, I like Gucci website, it’s so exquisite and natural.

17. Heinz


The website home page has a huge photo used as the background, and you can see the sky, the field and tasty tomatoes- simple yet effective. The background of the website inside pages changes from page to page: brown which resembles of land, blue which resembles the sky and the gray like the sky before the rain. Heinz guys are using colors very effectively, since the core of their product is what they grow (or buy from third party) they use all the natural colors and photos to show that the product is the essence of what beautiful nature gives us.

18. Converse


While the converse products are available in all possible colors, the website is designed in grunge style and colors resembling the pavement and old jeans. The accent here is made not on the colors but the audience which should be attracted by the according design style, hand-drawn elements and the seeming carelessness.

19. Kleenex


Kleenex is another great example of the website designed in the natural blue/green colorscheme (to make you feel confident the product is natural and reliable) with the orange elements to grab attention. It’s pretty interesting that I have never paid attention earlier how many of big corporate websites are using this same colorscheme and still don’t resemble each other. Probably that’s because we do perceive the colors in some other way than just knowing and recognizing what color is that, I think that we see it as an integral part of some system.

20. Duracell


Duracell website is designed in 3 main colors and their shades: black, orange and green. Black- to make more contrast for the orange and to add some formality and solidity. Orange- power, energy, joy. Green is natural and works great with the orange. “Smart power” as they say in the product, and the whole website makes you feel as if Duracell products are just what you need, the batteries are powerful and you can rely on them in any situation. BTW, I do buy Duracell :)

What colors do you use in website design? What are your favorite colors? Waiting on your comments guys!

Comments (0)

Post a Comment