29 Comments

Summary:

We talked with tech designers to find out what’s hot in web design these days. From parallax scrolling to bolder colors, here are five things to watch.

Getty Images
photo: Getty Images

Design can make or break web and mobile startups these days. But the problem is: It’s not always clear how to improve the design of web sites, mobile apps and connected devices. Is it just about making them cleaner, more streamlined, and less cluttered?

We talked with some of our favorite tech designers and came up with a list of five key trends. Yes, all of them could fall under the broad heading of “simplicity,” but making a site less busy does, after all, help highlight what’s important.

Clean icons

art museum

I’m purposely not calling these flat. As designer Henri Liriani explains on Medium, the term “flat” suggests that they are somehow simple or easy. But as any of us who has had to cut down our precious prose knows, restraint is hard and elegance doesn’t come easy. Whether designers like it or not, iOS7’s design will force them to also create cleaner icons, lest their skeumorphic creations look like tacky dinosaurs in Apple’s clean interface. Expect more minimalist icons that are easily recognizable across platforms and across the color wheel.

Bold colors

sb10065721aa-001

Speaking of the color wheel, unless you want your app to be invisible, it must be rendered in color. If you’re like many people, your app dock these days is probably a sea of blue. Apple’s new design is a boon for color theoristsIt flouts conformity by dramatically increasing the range of acceptable hues, including some at-first jarring pastels. While traditional app colors like blue suggest reliability, they also infer the status quo. Using bright colors can provide a visual indication that something new is in the works. I’m not advocating Yahoo purple—but at least it had people talking. Fuchsia, anyone?

Data integration

D3.js JavaScript library allows designers to integrate data right into the page.

More and more, designers will use toolkits like D3.js (see pictured above for some of the options it offers) to bring data directly into their web design. Instead of creating data visualizations in other software and uploading them onto a website, data-driven elements are part of the web page from the start. The result: interactive data visualizations that are also crawlable, meaning they can be found through a search engine. Tools like this continue the trend of making data part of the design process, not an afterthought.

Web typography

edge_webfonts_selection adobe

Web fonts used to mean a handful of glorified print fonts that were simply digitized for the screen. That meant many of the design elements that made text beautiful in print failed to shine in pixels. Now, font foundries like Hoefler & Frere-Jones and Adobe (sample above) are creating in-browser web fonts that are built for any and all screens. The proliferation of web-safe fonts presents all kinds of new possibilities for making fonts look as attractive as the content it’s expressing. Keep an eye out for more expressive fonts and larger font sizes.

Parallax scrolling

Snowfall cover image

Parallax scrolling—a trick used in animation when background images move more slowly than the foreground text—is tricky. If it’s not done right, your website becomes dizzying—no better than a PowerPoint with racecar sounds for transitions. But done well — like in the New York Times’  “Snowfall” or The Verge’s arcade piece—it creates an immersive experience, and punctuates a story with necessary breaks, transitions and visual cues. As with everything tech, less is more. So while parallax scrolling is helpful and in vogue, don’t go nuts with it.

We’re holding our annual RoadMap conference in November in San Francisco, which will focus on experience design for the tech industry (tickets will go on sale shortly).

  1. The NY Times link points to The Verge

    Share
  2. Fixed. Thanks!

    Share
  3. I appreciate the information that you have shared about Web Design.

    Share
  4. John Gurnick Friday, July 26, 2013

    a very useful list – seeing more & more data integration done well too. Thanks for sharing the D3.js toolkit too!

    Share
    1. So excited to start using D3.js

      Share
  5. Hello Rani Molla,
    Its awesome stuff, In the fast changing world, web entrepreneurs are expecting more from the designing community in terms of creativity, I also suggest one more article for reader of this post. read this also http://ablysoft.weebly.com/1/post/2013/07/5-hot-website-design-trends-2013-and-beyond.html

    Share
  6. Question: are these embelishments expensive?

    Share
    1. For the most part, no, especially if you’re incorporating these design ideas from the start. Bold colors are free, as is using the DSJ3 library. Also, tons of free fonts come out each week (although they often aren’t as robust as paid ones). The cost of flat icons and parallax scrolling really depend on your designers.

      Share
  7. Interesting read! I actually blogged about the ephmerality of a lots of trends and Gangnam Design here: http://bit.ly/14wMQsH. Let me know what you think!

    Share
  8. Harshal Jadhav Tuesday, July 30, 2013

    Great Knowledge thanks for sharing

    Share
  9. Supriya Gupta Wednesday, July 31, 2013

    Parallax scrolling does seem to be a trend that has come up and is being adopted by a lot of web designers. The only issue with it is that it is not SEO friendly. Most of the content is restricted to a single page which does not give much to the Google spiders to scan. If you are going for a Parallax design, try to adopt something like what Spotify.com is doing. Their home page links to many inner pages. These are some things that your design company should guide you about.

    Share
  10. I appreciate the information that you have shared about Web Design….. web design is more effective when government CMS is used….

    Share

Comments have been disabled for this post