Web 2.0?
The web is changing rapidly and there are new ways of getting your information out there every day. Social networking is becoming more and more important and is in a way shaping how people communicate. The term “Web 2.0″ is something that keeps coming up and a lot of people do not know exactly what this term means and what it applies to. Typically this term refers to the new ways of sharing information along with user interaction and influence on a website, but a lot of what can make up what “Web 2.0″ is really can be noted as some of the new visual design trends of displaying your information. In this post I will lay down some of the major Web 2.0 design trends that are shaping the way websites are now being designed and then I will touch ways that this can be applied to your ecommerce store.
High contrast or subtle color change with a splash of bright color
We are seeing more and more sites with a very dark color and a very light color coming together with one of them being the background of the website and the other making the main body of the website. Then a bright color is introduced as an accent color to add life to the site. This works very well since the background and body of the site are an extreme of a color, nearly white or nearly black, with the accent color being about a middle value of a color (a pure and bright form of this color, between white and black) so that it stands out decently on both the light and dark portions of the website.
Adding depth to your design with subtle color change in gradients can really bring a lot of visual appeal to your website. In the past, people would use gradients to the extreme with color being a very light shade then moving to a very dark shade of a color. This does add depth to your design but is not that natural looking. A more natural look is a subtle color change. A lot of the new design trends have a nice color with a very subtle highlight applied to it or shading around an edge or two. In the past people would just apply a standard gradient to their design which can give a very defined line to where the colors change from one to the other. Today, we are seeing colors changing in a more natural manner where a portion of the design is the highlight or shaded region with a less uniform transition to the other shade of the other color used in the design. This can be done in Adobe Photoshop by 1) duplicating your design element and coloring it either slightly lighter or darker 2) and then just using a feathered brush and your eraser tool to give a custom shape to your highlight or shading, 3) then playing with the transparency of the layer. This can add a new level of visual appeal to your design.
You may also want to check out Tracer Media.
Make Things BIG
Drifting more and more away from plain white backgrounds and adding more style and color to backgrounds, it is becoming more common to see sites displaying less text and images on each page but making everything a lot larger and stylized. Some of this is as a result to more and more people having faster internet connections and larger resolutions they are using to browse the web on their larger monitors.
Larger images can show more detail and grab someone’s attention. Sites are using large images these days to display something they do not want you to miss. Typically they have some sort of border around them or element to add some three-dimensionalism to them, such as a page corner coming up, shading, or a subtle highlight.
Big text is HUGE. What I mean is that we are seeing the use of larger text on the web. More and more sites these days are displaying their headlines much larger than in the past. Less is more and a lot of the time body copy is made slightly larger under the huge headline text, and then line spaced out a little more. Sometimes the logo or name of the website is just displayed in a stylized font and then thrown up large at the top of the website. “White space” is being stylized more with the use of these highlights and shades of color (as discussed above), and used as a background instead of a solid color or just white, so the larger text pops a whole lot more now and gets a stronger point across.
You may also want to check out Healogix
Icons
Icons and symbols are very much the rout that people are taking to direct you to a different portion of their website and/or visually symbolize a service they provide. Icons and symbols have been around forever and have been used on the web for a very long time, but today they are being used and displayed in new ways. Typically in the past, icons were more flat looking and did not have much depth to them. Today they are loaded with a lot more detail and appear to be popping off of the page with more of a 3D look to them and a shadow behind or under them as if they are floating. Icons are also a good way to say something with out words in a smaller space, which is typically found more in software and more used now on the web than ever. They are just inviting you to look at them and click on them.
You may also want to check out 37 signals.
Rounded Corners and Transparency
Instead of keeping everything straight and pointy, corners that are rounded are being used more and more. Along with the subtle color changes, these round corners can add a lot of depth to a design and allow the design to appear more 3D with highlights and shading applied.
Along with rounded corners, there is more use of transparency being used. With less restrictions of web browsers being able to display clean transparency using PNG technology, more and more designs are using a look of a semi-transparent body of the website floating over a background that is colored or textured in an interesting way. This can add a lot more depth and visual appeal to your design.
Page peel/ribbon thingie
Some people call it one thing and others call it another, but more and more today websites are using subtle additions of detail to their website where it appears that a corner is peeled upward or a block of color (or a ribbon, as I call it) is drifting off one side of the website and then folding backward, to go behind the body of the site.
This new trend is something that I have been seeing more and more of these days and it is just another touch of detail and depth that can really make your design pop and add emphasis to a specific element of your site design.
Another good example is Evernote.
Social Networking
Everyone knows about about Twitter, Facebook, Blogs, and other social networks these days. They have become a great way to promote your business and website, and stay in touch with your customers. Even my aunt who lives in the backwoods of Tennessee is on Twitter and writes about her chickens and other animals several times a day. Social networking has become a very important aspect of gaining exposure on the internet and connecting with new people and customers. More and more websites actively display sleek looking icons or illustrations symbolizing that they are actively on one, or several, of these social networking sites and that you can visit and follow them by clicking on their graphic element symbolizing that site. Many websites these days even have an area where they have a feed that displays their latest blog post, more recent Tweet, or other post on a social networking site they are active on.
Looking for even more inspiration? try checking out Nick Finck.
Basic and Easy Navigation
Instead of the typical tabs or long navigation bar typically with a gradient behind it, sites these days are being designed with a more simple, basic navigation. This can commonly be seen on a clean header as just nicely spaced text, making up the navigation fields, with little or nothing around or behind it to indicate that it is the navigation bar.
Along with a clean and sleek design, the text navigation elements stand strong enough alone to easily indicate that they are the main navigation elements of the website. Typically when you place your mouse over any of them, they will light up in a different color or have some sort of box appear behind them. Keeping it simple can allow for a dropdown menu to appear, as you place your mouse over a navigation element, to allow for a more expansive list of destinations you have on your website. They do not necessarily need to see every single type of page you have right away and categorizing things well can keep things looking clean and end up help them find what they need a lot easier. Too often the navigation is too overwhelming and cluttered.
You may also enjoy Etnies.
Layout broken into boxes and “pods”
Breaking things up into stylized boxes (or “pods” as I call them), can keep things organized and clean at the same time. This is a great way to drive the user to different things you want them to see on your website and give more emphasis to certain things. This is seen in a lot of blogs these days and many have designs that separate things in this manner.
Another way that sites have recently been seen doing this is by just using different bands of background color to split off sections of the website, in a similar way that boxing things off would.
Still with us? Even more inspiration at The Resumator.
Bringing a Web 2.0 look to your ecommerce site
It might seem hard to think of how to apply some of the most latest and popular Web 2.0 design trends to your online store, but it is a lot easier than you might think. The Miva Merchant shopping cart platform all together allows a lot of heavy customization and you can pretty much make your store look however you like, especially with the multitude of modules available. Below is a great example of a good ecommerce store that uses Miva Merchant and has applied the design trends I spoke about.
The DJ Shadow website has a very Web 2.0 design and has successfully incorporated it into their store section of the site. There is a lot of high contrast in some of the darker coloring with a splash of color which really stands out. There is a lot of big text and images that really stand out. We see some of those ribbons that look like they are going off of the page, especially noticeable in the top navigation bar.
He has easy to find feeds from his blog and Twitter account on the left side of the page with more social networking links across the bottom in icon format. Logos and products are used successfully as icons and stand out because of the high contrast with the background. Things appear to have transparency where he puts outline boxes around text that appear over images. The dark gray boxes that surround everything in the main body of the site also appear to be transparent against the black background. Navigation on this site is very simple and easy to use.
Simple categories branch out to other sections of the website. The layout on this site is broken down into boxes to keep things organized and to give different levels of emphasis to different things.
In closing…
These new popular design trends are not for every site and do not work as well everywhere. Picking and choosing what works best for your site is key instead of just using things just because you can. Always first think of what will make this site stand out and be more worth visiting than your competitor’s site. then choose what elements to use to achieve that. A lot of these things can add a lot of depth and visual appeal to your website if implemented properly.
Want more? Follow Chris Kirkman on Twitter.
If you enjoyed this post, please consider leaving a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
[...] down to every specific pixel, can add a lot to the appearance. You may have read my blog post on Web 2.0 clean web design where I touched on some major trends shaping how things are looking today. In this [...]
An interesting article but I wonder how much of this is the web moving foreward and how much is trendy?
Also, most web developers don’t understand how much dial-up only access is still out there. And these are the very people who shop the net most because they don’t live in large, populated areas. Design a web store that requires a lot of bandwidth and you alienate this entire population segment.
Thanks for the comment, Roy. A lot of these things are popular design trends and only some will stick. I have seen more and more of these trends to start to stick every day with a lot of new site re-designs of stores that use Miva Merchant. Some of them work well on an ecommerce store and some don’t.
I can see how a lot of people who shop online do not live in heavily populated areas and shop online out of convenience and not having to drive far to reach physical store locations (part of my extended family do this). More and more people each day, week, year are leaving their dial-up connection for a broadband connection but some people living in rural areas are limited to dial-up due to there not being a broadband provider in their low populated area.
It is still important to optimize your images and do what you can to cut back on the load time of your website, especially on an ecommerce store with pages of a lot of product images. Many of these trends can include using subtle 1 pixel wide gradient images that can be tiled and solid areas of color… all things that can give a great clean look to your site and still cut down on load time.
I agree that those who can are leaving their dial up connections en-mass. But for two who work in our office, dial up is the only choice and we are in the more populated part of our State. Get into the rural areas of Alabama, or any other state that still has rural areas and you’ll find dial-up is the norm once you get very far away from populated areas. All of these potential customers are being aliented.
One request I would have of Miva Merchant would be to be able to query users bandwidth and then to deliver a lower bandwidth version of the on-line store to these potential customers. But I know this is difficult because MM is not in control of the graphics we use & some users tend to plug thier pipeling with higher resolution than needed graphics.
[...] 2.0 trend is. Miva Merchant, a superb ecommerce package, wrote a great write-up on their take of what web 2.0 is and, in my opinion, they covered a lot of good aspects of web 2.0 design that are valuable to all [...]