Archive for the ‘Web Design Trends for 2010’ Category

Top 10 Web Design Trends for 2010

Its always tough to predict the future, and that is all the more true when talking about the web.  The internet continues to evolve so fast and in so many directions,  due in large part to  the various social media tools, making the web accessible to  people who never dreamed being part of it.

Here is a list of design trends that I think will play a large role over the next year, well into 2010.

Typography
This trend started over the past year and will continue.  Designs will trend toward the use of typography an integral part of the overall work rather than a liability.  Web designers will start using larger, more exciting fonts in place of system text. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font.

Typography

Typography

Sketches, hand drawn style and illustrations

Sketches, hand drawn style and illustrations

Large Images/Photography

Large Images/Photography

Magazine Layout

Magazine Layout

Introduction Blocks

Introduction Blocks

Single Page Layouts

Single Page Layouts

Social Media Sites and Add-ins

Social Media Sites and Add-ins

White Space

White Space

Icons and Visuals

Icons and Visuals

Modal Boxes

Modal Boxes

Advertisements

Design Trends in 2010

As we are stepping in a new decade, I can foresee that web design in 2010 is going to be fun and filled with experimental works. With the new CSS3 and HTML5, designers and developers are trying to utilize the new features to create impressive designs. Sketchy and large background styles are fading out. Serif fonts and texturized background will be popular. Thanks to CSS3, we are going to see a lot of rounded corners, RGBA transparency, and drop shadows. With the rise of smart phones, mobile web design is going to pick up this year.

Serif Fonts

In the last decade, most web sites were designed in either Verdana or Arial (sans-serif fonts), but that is going to change in this new decade. Serif fonts will get more attention. Read this article to find out why: Next Serif Trend.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Big Headings

Big headings in header (as part of design interface) will gain more popularity in 2010.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Custom Font Embedding

As Typekit is expanding their font list and more free quality fonts are available (e.g.FontSquirrel, OpenType, and The League of MoveableType), I think more people will use custom font embedding in the coming year.

screen capture

screen capture

screen capture

screen capture

screen capture

Texturized Background

The big background trend is going to be gradually out-of-date and be replaced with subtle and texturized (particularly the light noise) background.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Minimalist & Grid

Minimalist and grid designs are not today’s new. They have been popular for the past couple years and I think it will continue to grow in 2010. Check out my previous post for more minimalist sites.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

CSS3 New Features

Although CSS3 is not fully supported by all browsers yet, but a lot of designers are experimenting with the new features such as: rounded corners, multi background images, multi-column, border images, and animation. The following sites show good implementation of CSS3’s new features with fallbacks. So, we will see more and more CSS experimental works.

CSS3 Animation

Neutron Creations’s blog uses webkit-transform to spin the circle graphics (view it with Mac Chrome or Safari). If your browser doesn’t support webkit-transform, it will just show the static circles.

screen capture

Rounded Borders and Box Shadows

Border-radius and box-shadow are the most commonly used CSS3 properties.

screen capture

screen capture

screen capture

screen capture

Text Shadow

A lot of designers are using text shadow to add more depth to text.

screen capture

screen capture

screen capture

screen capture

RGBA & Opacity

RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect.

screen capture

screen capture

screen capture

Mobile Design

Since the release of iPhonein 2007, everybody is talking about mobile design. Now with more smart phones that support full CSS and Javascript, mobile design is definitely going to be the future of web design. A lot of sites(ranging from design agencies to editorial sites to web apps) are offering a mobile version. Below are some great examples (screenshots are captured with iPhone).

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Source: http://www.webdesignerwall.com

Top 10 Web Design Trends for 2010

Typography

Typography

40 Fresh & Beautiful Examples of Websites With Large Backgrounds

1. The Pixel Blog

The Pixel Blog

2. Copimaj Interactive

Copimaj Interactive

3. Flourish Web Design

Flourish Web Design

4. Abduction Lamp

Abduction Lamp

5. Morphix Design Studio

Morphix Design Studio

6. Final Phase

Final Phase

7. Make Photoshop Faster

Make Photoshop Faster

8. WebSarga

Web Sarga

9. Suie Paparude

Suie Paparude

10. Duirwaigh Studios

Duirwaigh Studios

11. BlackMoon Design

BlackMoon Design

12. Sepitra

Sepitra

13. Le Blog de Gruny

Le Blog de Gruny

14. Piipe

Piipe

15. Mozi Design Studio

Mozi Design Studio

16. Electric Current

Electric Current

17. Lora Bay Golf

Lora Bay Golf

18. Life Style Sports

LifeStyle Sports

19. ligne triez

ligne triez

20. Oliver Kavanagh

Oliver Kavanagh

21. World of Merix Studio

Merix Studio

22. Le Web Defi

le-web-defi

23. How host

How host

24. Productive Dreams

Productive Dreams

25. Gary Birnie

Gary Birnie

26. Glocal Ventures

Glocal Ventures

27. GDR UK

GDR UK

28. Absolute Bica

Absolute Bica

29. Le Nordik

Le Nordik

30. Leaf Tea Shop & Bar

Leaf Tea Shop

31. Paul Smith

Paul Smith

32. EwingCole

EwingCole

33. Dolphins Communication Design

Dolphins Design

34. Danny Diablo

Danny Diablo

35. Inner Metro Green

Inner Metro Green

36. Matt Salik

Matt Salik

37. Revyer

Revyer

38. Yodaa

Yodaa

39. Dripping in Sunshine

Dripping in Sunshine

40. Big Break ‘09

Big Break '09

A Look into Color Theory in Web Design

Unarguably one of the most important aspects of any design is its colors. Designers create the style of a site, as well as the movement it makes, the emotion it creates, and its purpose based largely upon the color choices they make. Colors are powerful tools and an important thing all designers should understand when creating websites.

A Look into Color Theory in Web Design

Color Terminologies

Many of you may have learned some color basics in school, but let’s quickly review some terminology in order to get a better grasp on colors and how to use them.

Color Wheel Main Groups

Color Wheel Main Groups

Colors are traditionally shown in a color wheel, and from this wheel, we can separate colors into three main groups: primarysecondary and tertiary.

The three primary colors are red, blue and yellow. These colors are the base colors that make up all the other colors on the color wheel.

Mix the primary colors together, and you get the secondary colors. These are orange, green and purple.

Tertiary colors are comprised of the middle colors like yellow-green and blue-green. They are created by mixing a primary color and a secondary color.

Relationships of Colors

There are plenty of terms to describe colors, which will be helpful to know later on when we discuss colors and their emotional meanings.

Complimentary colors are colors that compliment each other well and are located opposite of each other on the color wheel. These are colors like blue and orange, purple and yellow, and red and green.

Analogous colors are those located right next to each other on the color wheel, so they usually match fairly well but provide little contrast when used together.

Color Groups Based on Emotions

There are color groups that are associated with emotions: warmcool and neutral.

Warm colors evoke warmth like red, yellow and orange.

Cool colors make people think of cool and chilly colors like blue, green and purple.

Neutral colors, as the term suggests, don’t create much of an emotion. Colors like grey and brown are neutral colors.

The knowledge of all these terms can be used to a designer’s advantage to help create meaning and suggest certain emotions in a web design without words.

Types of Color in Design

Types of Color in Design

There are two different color systems and both are used depending on what you’re designing for.

RGB is short for Red Green Blue, which are the three primary colors of the system and is produced with light. RGB is used on televisions, computer monitors, and any kind of screen.

CMYK, which is short for Cyan Magenta Yellow and Key (Black) is created by pigments and is used in print.

Designs on the web should be created using the RGB system.

Making Wise Color Choices to Convey a Meaning

Making Wise Color Choices to Convey a Meaning

Color theory is the practice of using the meaning behind colors to bring about a sensory experience. This practice can be applied to web design with some knowledge and thought.

People will often disagree about what certain colors mean and what colors designers should use to implore a certain emotion. However, what can’t be argued is that consumers do have emotional responses to colors.

When choosing colors for your designs, be deliberate; don’t use colors without purpose. Instead, use colors that are appropriate for your target audience, the message that the client wants you to convey, and the overall feeling you want the user to experience on your site.

Warm colors will bring about sunny emotions and are wisely used on sites that want to call to mind a feeling of happiness and joy. As a case in point, yellow became a popular color in web design in 2009 when the global economy wasn’t doing very well and companies wanted their customers to feel sunny and comfortable on their site.

Cool colors are best used on professional and clean-cut sites to achieve a cool corporate look. Cool colors stir up emotions of authority, establishment, and trust. For example, cool shades of blue are used in many banking sites, such as Chase. It wouldn’t be wise to use cool colors on a site about an upbeat topic because users will get the wrong impression.

Making Wise Color Choices to Convey a Meaning

What Colors Mean to Users

Most colors can be taken in a positive or negative manner, depending on how it’s used, the other colors surrounding it, and the connotation of the site itself.

Here are some general meanings of popular colors.

Red

What Colors Mean to Users

Red symbolizes fire and power and is associated with passion and importance. It also helps to stimulate energy and excitement.

The negative connotations of red are rage, emergency, and anger, which stem from the passionate and aggressive qualities of red.

Orange

Orange

Orange is a combination of its two neighbors on the color wheel, red and yellow. Orange symbolizes happiness, joy and sunshine. It is a cheerful color, evoking childlike exuberance.

Orange is not as aggressive as red but takes on some of the same qualities, stimulating mental activity. It also symbolizes ignorance and deceit.

Yellow

Yellow

Bright yellow is a happy color representing the positive yellow qualities: joy, intelligence, brightness, energy, optimism, and happiness.

A dingy yellow brings about negative feelings: caution, criticism, laziness, and jealousy.

Green

Green

Green symbolizes nature and has a healing quality. It can be used to symbolize growth and harmony. People feel safe with green. Hospitals often use the color of green.

On the other hand, green is symbolic of money, showing greed or jealousy. It can also be used to symbolize a lack of experience or a beginner in need of growth (“green behind the ears”).

Blue

Blue

Blue is a peaceful and calming color exuding stability and expertise. It is a common color used in corporate sites because of this. Blue can also symbolize trust and dependability.

A cool shade can bring about the negative side of blue, symbolizing depression, coldness, and passiveness.

Purple

Purple

Purple is the color of royalty and sophistication showing wealth and luxury. It also gives a sense of spirituality and encourages creativity.

Brighter purples can exude a magical feeling. It’s also great for promoting creativity and feminine qualities.

Darker purples can conjure gloominess and sadness.

Black

Black

Although black is not a part of the color wheel, it can still be used to suggest feeling and meaning. It is often correlated with power, elegance, sophistication, and depth. It is said that wearing black on a job interview can show that the interviewee is a powerful individual, and the same goes with websites.

Black can also be seen negatively because the color is associated with death, mystery and the unknown. It is the color of grief, mourning, and sorrow so it must be used wisely.

White

White

White—also not a part of the color wheel—symbolizes purity and innocence. It also shows cleanliness and safety.

Conversely, white can be seen as cold and distant, symbolizing winter’s harsh and bitter qualities.

Examples of Colors in Big Companies Sites

We’ll look at some large company sites to get an idea of how they use color and what that color means to their users.

Nike

Nike

Nike changes their site often, but it is usually dark with mostly black and grey hues. The black shows the power in their product, giving the impression that they sell quality products to sporty people.

White House

White House

The White House website is mostly white and light grey with some blue and red accents. The white symbolizes hope and freedom, showing a value for safety and purity. The red and blue are of course the other USA colors, but the blue shows stability and peace, while the red shows passion and energy.

Amazon

Amazon

Amazon’s site is mostly white, which is the best color to use for contrast and readability. It also shows cleanliness and helps users navigate the site freely. There are orange and blue accents to help people feel at ease when on the site, as well as excited and hopeful to find their perfect purchase.

Verizon

Verizon

Verizon’s main corporate branding color is red, which is used throughout the site. This helps stimulate the excitement of users, showing a company that sells an exciting and fast-paced product. The white background is used similarly to Amazon, helping users navigate the site by displaying a clean and orderly site.

Best Buy

Best Buy

Best Buy’s site showcases dark blue hues, showing their stability and power in the electronic market. Buyers are making large purchases from Best Buy and need to feel secure and peaceful on their site. The yellow emits happiness and helps people feel excited and joyful while making their purchases.

Charles Schwab

Charles Schwab

Charles Schwab is an investment company, and in an unstable market, they need to make consumers feel peaceful on their site. They use soft and dark blue tones to achieve this, creating a calming and peaceful atmosphere on their site. The neutral brown is another corporate color and helps neutralize intrepid users’ feelings. The orange accents are used to generate excitement in buying stocks and help bring a happier feel to the site.

Dodge

Dodge

Dodge’s site is mostly black which allows their images to pop. They use a bright red for accents. The black gives a powerful quality to the site, showing their products off in a sophisticated and masculine light. Black is a great color to use to make products look expensive and worthy of value. The red shows passion and excitement, as well as the hope to drive consumers to purchase the vehicles from a company that values commitment and quality.

Whole Foods

Whole Foods

The main color used in Whole Foods corporate branding, as well as their website, is green. Whole Foods sells healthy and organic food for a premium price. The green in their site design does well to show their healthful and pure values as well as their nature-loving products. They also use some pale yellow accents that are very complimentary to the green, and it gives a joyful value to the site.

How You Can Use Colors in Websites

How You Can Use Colors in Websites

Colors give sites meaning without having to use descriptive words. They create a lot of impact, whether you intend for them to or not. They can help move a user’s eye through your site, creating movement and motion that directs users around a page. As seen in many of the corporate sites, they create emotions and values that help show users what the company is about and what kind of products they are selling.

Use colors to your advantage by carefully selecting complimentary colors and ones that showcase the values you’re trying to sell.

Pairing colors can help change the meaning of a site altogether. Pair a soft blue site that creates calming qualities with a bright orange, and you could change your site to be more exciting and joyful.

Maybe your client thinks the site you’ve designed is too harsh with lots of dark grey hues. Add soft blue colors and your site design could have a more calming and peaceful tone.

Resources for Having Fun with Colors

Resources for Having Fun with Colors

Many sites out there discuss color theory and the usage of color in design. Use these helpful resources below to find color matches and infuse more meaning into your site designs.

COLOURlovers

Find complimentary color matches and color palettes with this web-based tool.

Design Meltdown

This site categorizes sites based on different genres, including many color categories.

Find the Perfect Colors for Your Website – Vandelay Design Blog

Lots of color resources and tools are listed on this great post.

JavaScript Color Picker

This fun JavaScript tool can help you pick out the colors you want and help you see how they look together.

Web Design Trends for 2010

With a new year on the horizon, it’s time to pack away the old, worn web designs and prepare for the brave, new face of tomorrow. Although trends don’t start and stop on January 1st, there is a definite shift from what we craved at the beginning of the year to what we are seeking tutorials for at the end of the year. Most of the time, this shift is subtle. It’s a perfection or re-interpretation of a currently hot trend. Trends help us evolve as designers. As we master the skills of design aesthetic, we continue to push forward to what’s next or what needs to be fully discovered.

Make no mistake about it, you will recognize the ideas behind these trends. Although this list isn’t a drastic departure from what was popular in 2009, it marks different trends that will be expanded upon and made better as a result. As you think of how you will incorporate new trends into your designs, focus on the main idea of each trend. Be encouraged to dabble into these trends so that you become part of the movement.

1. Oversized Logos/ Headers

Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

Main Idea: Huge headers that make your visitors remember you.

2. Sketch/ Hand-drawn Design

Hand-drawn design is not exactly new on the horizon, but we all know that it is still on the fringes of web design. Many designers admire the style but are afraid to create their own sketches because of the “I can’t really draw” attitude. If you look at the most popular hand-drawn websites (and relative to other types of trends, there are only a few), you will notice that most of your fellow designers can’t draw. These designs are not exactly headed to an art museum, but they do convey a sense of whimsy, and blur the line between cold web and personal interaction– the ultimate goal of the internet. If you can doodle, you can sketch for web design.

Sketch in 2010 will become more elemental, and not as much the main focus of a web design. It will be used to personalize standard web copy in new and exciting ways.

Main Idea: Sketch becomes an elemental part of corporate design.

3. Slab Typefaces

Slab typefaces are relatively new, although they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of the old Wild West “Wanted” posters. Those bold letters are slab typefaces. Slab typeface is commonly all capital letters and are bold and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice.

Main Idea: Slab typefaces is used to bravely express who you are.

4. Typography

Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. The idea of mixing varying font sizes together is completely unthinkable. Fonts are meant to be explored, twisted, and molded to fit your purposes. With the correct placement, a website that utilizes Typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.

Main Idea: Typography is young, but will continue to be a part of web design.

5. One Page Layouts

One pay layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from the quirky navigation and become more minimal in its approach. Think of these websites as business cards. These websites will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts.

Main Idea: One page layouts will be more about personal profiles and less corporate.

6. Huge Images

A close relative to the oversized logo/ header, the huge image does much the same thing. It creates an visual impact that the visitor won’t soon forget. Unlike the oversized header from above, huge images are not part of the site’s branding. Instead, these images draw the visitor into your site, if not for their content then for their humongous size. In 2010, web designers will find themselves more comfortable using these big statements in their design to convey the site’s tone.

Main Idea: Huge images will be used to invite visitors in.

7. Change of Perspective

As we’ve discussed before, the desktop perspective has been done to death. 2010 will see a definite change in perspective to a more realistic view. There may also be a move toward side-shot aerial.

Main Idea: 2010 will play around with different perspectives.


8. Interactive/ Intuitive Design

Flash has seen better days. There was a time when you couldn’t visit a website without running into an annoying Flash interface. These days Flash is a lot more relaxed and much more professional. Although some designers prefer jQuery for forms and popups, Flash still has its place in design, especially when done subtly. Flash still has no equal to its interactivity. In 2010, web designers will move toward the more redeeming elements of Flash. Because the average visitor is more web savvy these days, designers will also create sites that are slightly more intuitive than in the past.

Main Idea: Interactive design will make a come-back.

9. Modal Boxes

Modal boxes are a trend that’s picking up steam and will be virtually everywhere in 2010. A modal box is like the popup’s more sophisticated older brother– it’s smooth, good looking and popular. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer concerned with usability.

Main Idea: Modal boxes will continue to pop up in 2010 designs.

10. Minimalism

Forget the old school minimal websites. Websites of 2010 will continue to feature lots of white space but with bold typology and surprising color schemes. Not all minimal websites will agree with the notion of black and white simplicity. Although minimalism is by nature muted, it will also showcase fresh colors. Minimalism isn’t cold, it’s warm and too the point.

Main Idea: Minimalism will venture into typology.

11. Oversized Footer

Oversized footers may be everywhere already, but 2010 will find them even more exaggerated. The footers of tomorrow will be less of an after-thought and more of an integral part of the design. Look for footers that feature contain random information, such as feed updates from various social media, daily polls, and Flickr feeds.

Main Idea: Oversized Footers will feature less important, but more personal information.


12. Retro

Retro designs are here to stay. Although a lot of the design community admires retro web design, it can be difficult to fully embrace this style without coming across “undone.” The key to retro designs is to be inspired by its tone and underlying playfulness. In 2010, retro design will be expanded as designers find new ways to honor vintage art.

Main Idea: Retro is new.

13. Intro Boxes

“Hi, my name is…” will find an even bigger stage in 2010 as designers recognize the beautiful simplicity of introducing yourself to your visitor. If you’re struggling with making a creative “About” page, the intro box will be your best bet. It forces you to condense who you are into a relatively small about of space. In 2010, intro boxes will push its own boundaries. Instead of the boring hello, designers will find new pick-up lines. And, instead of the left-flanked intro block, 2010 will see boxes in unusual placement, perhaps even in the middle of a page.

Main Idea: New ways to say “hello.”

14. Magazine Layouts

As more and more people migrate from the comforts of traditional press to online infotainment, designers are challenged to welcome them in with an easy transition. There is a move toward the magazine layout, where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to appeal to anyone who’s ever read a magazine or newspaper, but it will also be easier to use– no flipping pages! In 2010, magazine layout will become very huge for blogs in particular.

Main Idea: Magazine layouts will be used for infotainment sites.

About the Author

JacquelineJacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.

Related Posts

Here’s some other articles that you will definitely find useful.

50 Yellow Web Designs to Inspire You

30 Examples of Clean and Minimal Website Navigation

50 Inspiring Textured Web Designs

55 Colorful Web Designs to Inspire You

A Showcase of Workstations that’ll Make You Jealous

Source : http://webdesignledger.com