Fresh and Creative Web Design Techniques

Space, peachy colors, big and real images and movement will top designer’s to-do lists this year.

Fresh and Creative Web Design Techniques

As a designer, this is one of the most exciting parts of a new year. Here we are, trying to figure out what’s going to be big for design trends in 2013. It absolutely makes sense. Web designers have to really be up on all the new trends to be relevant and abreast of what’s next after that trend.

It’s really what makes design fun. But too many experts have called for trends that aren’t even really trends or ones that don’t shock the world. Of course responsive design is going to be big this year — it was big last year! And of course we’re going to continue designing with grids. That’s basic design!

This time around, I wanted to look into some trends that seem to be growing. Ones that we’ve played around with, but now we’re going to really get into them this year. So, let’s jump right in.

More White/Negative Space

I think I might -

Shun Cutlery

Nate Hanson

We’re going super clean. We loved minimalism and the clean look last year. We used it with anything from our logos to our business cards and to our websites. This year I think we’re going to ramp it up a bit by calling for more white space.

Negative space is one of those artistic guidelines that pretty much says every inch of the canvas doesn’t have to be filled with stuff. This negative space in web design is excellent because we are transitioning to an era where we want and desire less fluff. Many times when we visit websites we know exactly what we want, or we want to be able to figure out exactly what’s in front of us without doing much searching.

Tip: Don’t think about how you can design to create space. Create as you normally would and see what you can remove to get the look you’re going for.

Peach and Salmon

Handcrafted websites, mobile apps and brands - Manos

Etch

salFHOKE

We go through a lot of popular colors in web design. One of the most popular is blue. From corporate to recreational sites, a shade of blue will probably get you a nice website. Even for a while (and maybe still), we loved dark themed websites. The point is, for many of the colors, you can reference a point in time.

The color for this year is this fleshy, pinky, salmony color. I’m calling it now. It’s a color that goes well with almost any other color and any other neutral. It’s calming without being too boring and predictable. It’s charming without being too bold and loud. This is a great color that I think many people will (and should) at least experiment with this year.

Tip: Looking for some hex color codes to start? Try #F97743 and #F38268.

Bigger is Better

- dmvA Architecten -

Allan Yu

bighttp---ryanmichaelkelly

Right now, we are designing not just with a computer monitor in mind, but with tablets and mobile phones in mind as well. Websites need to be visible in the palm of our hands. Many designers have met this task by upping the size of text and images in web design. But they haven’t been too ridiculous or gone overboard.

Now, is the time to go overboard. We’ve been designing as we normally would, but everything has been a couple of pixels taller and wider. As a matter of fact, we’ve taken many of our ideas from print and implemented them on screen. It’s time to maybe mix the two or get back to the web.

Going super big requires a lot of attention and is in the same vein as going super clean in 2013. If it takes up more space and draws my attention, I’m going to look there first. Perhaps this is another way to rid ourselves of the fluff that we endure daily.

Tip: We already have tried full-size images, so try huge fonts around size 64px and 72px. Use something like FitText so your fonts can scale down for different screen sizes.

Moving Images

movSocial-Design

movteehan

movpatrick

Advances in technology are making it easier and easier to add moving images and video to our web designs without taking a ton of space. Because of that, we can look forward to that becoming a stale in websites everywhere. Who doesn’t want to feel like they’re looking at websites from Hogwarts?

It adds a bit of fascination to your typical images or even your typical slider. Movement is eye-catching and now we don’t have to do that solely with static images. We’re able to use dynamic images and that busts the creative playing field wide open. This is one of the trends I’m looking forward to the most. Who’s going to use this the best?

Tip: Check out some tutorials and such that talk about HTML5 video to get started.

No more stock photography

stkItalio-Kitchen

stkNeuarmy

stkArtifact-Coffee

People don’t want the glamour shots any more. They want a more realistic view of what a product portrays or represents. It’s time out for the days of dry stock photos and product photos with bland white backgrounds. People want personality. People want the story.

Websites are made to create and maintain the relationships you have with your audience. The idea is to make things real for your group of consumers and that’s not always a bunch of flavorless photos and glamour shots.

While most web designers don’t have a ton of control over photography, it remains that it’s completely important that the personality of a brand is portrayed online. I’m looking forward to seeing more websites that aren’t afraid to be individualistic by using imagery that’s real to them and creates a story through composition.

Tip: You may invest in a camera or link up with a photographer to get the right imagery for the web design. It makes for quite an up-sale.

Conclusion

Web design is much like fashion design where what’s in one day could be totally played by the end of the week. The beauty is being apart of these trends and trying out new things to help inspire innovation for the future.

Tagged with:

Kendra Gaines

Kendra Gaines is a freelance graphic designer from Norfolk, VA. Visit her online at TheGainesCollective.com or follow her on Twitter @TheGainesColl.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 29

Comments are closed.
  1. Excellent article & collection, as always. You are one of my top sites for inspiration and learning. Thank you!

  2. Oh my! This article is absolutely awesome! Great and so creative ideas! Thanks for sharing all these web design techniques!

  3. great post. and i remember tutorial that “PEACH AND SALMON” header 2nd site style template. but now i can’t find it. who know?

  4. Hahaha “Peach and Salmons”, that right , i am even considering painting my room with those colors, Greens are gonna be great this year too :).

  5. awesome article.it’s a nice post fresh and creative web design techniques..Excellent article & collection, as always. You are one of my top sites for inspiration and learning. This article is absolutely awesome! Great and so creative ideas!
    Thanks for sharing all these web design techniques.
    i hope you another post share and help everybody.
    thanks……………….. Kendra

  6. Great predictions here, Kendra! I think you’re spot on with the “Go Big” trend. There’s a web marketing commentary at play with big photography and typography, suggestive of how we need to literally expand our efforts to huge, swelling capacity to stand out amongst the hoards of competition online.
    Thanks!
    Sarah Bauer
    Navigator Multimedia

  7. The clothing example in the moving images section was fantastic. I would love to see 360 moving views of clothes on a person before I purchase. This also kind of plays into the stock image. Show me what it looks like on a person not flat or artificially filled in on a white background.

    Kyzer Davis

  8. Nice article, Kendra. Thanks for these great examples. I find the “negative space” element to be the most difficult one to argue with a client. For some reason, most people (non-designers) are very uncomfortable with negative space. Even if they really like the look when the design is proposed or launched, it’s not long before they have something they want to add, and see plenty of room to add it. Before long, your beautifully designed negative space looks like an episode of “Hoarders.” So many people see space and think “I must put something there…it’s empty.” Aaaaaaugh!

  9. Awesome , you nailed it very well , i think this i the finest article i ever read in this niche .Very informative and creative too , Thanks for really great article.

  10. what ever new techniques … clients from hell need old 80’s design. I hate clients revision.

  11. Agree with you. Great post.

    But according to pantone.. the peachy, salmon color you mentioned was pantones color of the year for last year which they called tangerine tango.. the new color for 2013 is emerald.

  12. Excellent points made. But as jotish has said, the same peach and salmon/flesh color was used all over last year and according to me has become very monotonous. Emerald color offers the same neutral flavor and goes well with both dark as well as light themed designs.

  13. Thank you so much for great post.Responsive website design might turn out as a great way to progressively enhance even small budget projects for mobile devices.

  14. Great post, could you please suggest me a jquery library or tutorials on “moving images” because for great transitions I believe that html5 is not enough. Thanks!!!

  15. Not only informative, but alot of great inspiration here. I think minimalism is the new trend, but I wonder how long it will last, and will it just look super tacky once the trend changes?

  16. Minimalism is a great development and I don’t think that trend will really end because the whole point of it is to highlight the main important information (goal of effective marketing).