Another year in the books and the web industry marches ever forward: browsers become more sophisticated, new technologies emerge, and mobile devices become more and more common. 2014 saw many new trends start to emerge; not just obvious, visual web design trends for site visitors but production & workflow trends for web developers, as well. We predict many of them to become mainstream in 2015. Trends like:
Ambient Background Video
We’ve Got All This Footage, Why Not Use it?
Used to be that to play a video in a browser, you had to have a Flash plugin. With the rise of browsers that support both the HTML5 <video> tag and H.264 format, they’ll run on their own and can be manipulated like any other page element. What to do with this new-found ability? Why, auto-play video in the background! Who needs a big static hero image when you can have a big attention-grabbing one?
- Fleet Feet Sports
- Beyond the Beltway Insights
Online Style Guides
Not Just for PDFs that No One Looks at Any More
Professional companies take good care of their brand. They want any communication, be it email newsletter, business card, trade show booth, and of course website, to communicate with the same visual language. Since it’s a hassle to dig up the PDF that your designer sent you to know which color to use or which font goes for headlines or whether you can include the tagline with the logo or not, we’re seeing the rise of online style guides. They are easy to bookmark and accessible to an entire company. Since websites become more complex as time goes on, it makes more sense for the guide itself to demonstrate in place how web pages should look and behave.
- Lonely Planet
- Code for America
- Mail Chimp
Web Site as Apps
Design that Ditches the Traditional “Page” Metaphor
The shift toward responsive design has pushed the boundaries of what we mean by web 'pages.' When designing for a screen, fixed widths are arbitrary. As websites act more like web apps, integrating lots of technologies like 3rd party CRM software, marketing automation, email newsletters, donations, and e-commerce, the mental model of discrete, individual pages becomes less accurate. And so the way that designers think conceptually about what they make has to change. Brad Frost calls this "atomic design" since rather than designing page templates, we're designing systems of components.
The result: no need to treat web design as print design for a display. Why not push the boundaries of the viewport and use as much screen real estate as you have, the way a web app would? In 2015, we’re going to be seeing more and more websites go interactive and full-width, using AJAX to update individual content sections, and taking advantage of HTML5’s pushState to abandon the “page” metaphor and embrace websites as apps.
Pages Schmages, How About Cards?
When data and content are embedded and piped to and from many different sources, it helps to encapsulate the information in a small, self-contained unit. A lot of media sites have figured out that people respond and share easy to scan, “snackable” content. The visual metaphor of a card is a perfect choice for this approach and it’s gaining momentum. Twitter helped popularize it, in particular, since tweets containing links and photos are embedded all over the place. But they’re not alone in thinking it’s the future of the web.
Actual Usability Testing
Get Cheap & Fast Enough and Traction Will Follow
The cardinal rule of UX: “Know thy user and she is not you.” Traditionally, user testing has been an afterthought since it's usually tedious, expensive, and reserved only for complex sites with long timelines. But the insight you get from watching people use your website or app can be as dramatic and valuable as it is painful to watch, sitting helpless as they stumble over what you thought was obvious to anybody.
As the tools and services to perform user testing become easier to use and less expensive, web makers can avail themselves more often — in less time — and with better results. No need to round up your reluctant friends and colleagues! Now, you can pay peanuts to see perfect strangers tear your precious design apart. We predict user testing will go mainstream in 2015.
Vendor Prefixes & Manual Compressing: Ain’t Nobody Got Time fo’ That
All right web developers, it’s 2015. There’s no more excuse to:
- Write out vendor prefixes by hand
- Repeat your CSS over and over
- Manually concatenate and compress files for production
Maybe, just maybe, if Grunt and Gulp were the only tools for this, you’d get a pass: some folks are just allergic to the command line. But not only is it not really that tough to learn, there’s a plethora of GUI tools that will do it all for you. When you can stitch and compress your files for production automatically every time you save a change, you’ll never forget to do it in production! Still, there are plenty of folks who haven’t yet adopted this formally in their workflow. That’ll change in 2015.
Animation: Flash is Dead
This is the big one. The web is awash in animation tutorials and introductions about not only the craft of animation but technical walkthroughs. With Adobe’s Flash having gone the way of the dodo (good riddance, I say), one would think that interactive animation would take a backseat but the era of web animation is just getting started. If 2014 was the year web designers and developers started getting familiar with it, 2015 is the year they get really good at it. Few aspects of a design can have as big an impact on user delight as a really lovely animation.
The main challenge is mocking them up: a static PSD or Sketch design doesn’t do a great job showing what happens when a user clicks or scrolls. Naturally, software developers rose to the challenge, and in 2014 we saw a number of impressive interactive prototyping tools emerged which make it much easier to experiment and demonstrate. (Though if you’re low-fi like me, ￼you can even do it Keynote.) Want help implementing it? There are plenty of great CSS libraries that do the heavy lifting for you.
Parallax Scrolling: Somewhat Less Dead
Or, “The Reports of My Death Have Been Greatly Exaggerated”
Parallax scrolling — in which background elements move or scroll at different rate the way they do in nature, mimicking depth on screen — is the bane (or boon) of any web developer’s existence. Few web design topics inspire as much strong feelings. When you get a new toy, you just want to play with it all the time, even when you shouldn’t. Web observers have been calling it dead since at least 2013 yet it soldiers on, implacable and zombie-like. The overall NMC consensus is that, like any technique, it’s useful when implemented well and appropriately but runs the risk of sloppy over-use. Our guess: parallax is here to stay in 2015 and beyond. Below, some well-conceived and impressive examples.
Better Web Forms
They Don’t Have to Be Awful Even Though They Mostly Are
When it comes to actual interactivity on the web — that is, capturing and responding to user input — forms are essentially all there is. Sure, menus can fly out and buttons can glow, but that's mostly interactive icing on the cake of moving data around. So it's puzzling strange that most online web contact, login, and checkout web forms still look and behave like the '90s called and would like their tired cliché back. Animation especially turns dull data entry tasks into delightful experiences; expect to see lots more of the examples below in 2015.
- Text Input Effects
- Stripe Checkout
- Fleet Feet Search
- Minimal Form
Mobile-First & Responsive Design
Or, Why “Flat” Design Will Continue to be Popular
If we’re not already past the 50% mark of all website visitor traffic on a mobile device, we will be soon. Whether casual reading or actual online shopping, more and more people use tablets and smartphones to access the web — most notably in developing countries, where it’s the only means of doing so. Pretty soon there won’t be “mobile websites” or “desktop web design”; it will all just be “web design”.
The rise of mobile devices — and developers who are conscientious about targeting many different device sizes and viewports — is in large part responsible for the current trend of “flat” design. If you don’t know what size screen a visitor is using and the content has to flow and adapt, then it becomes more challenging to create graphic assets that are texture- and image-heavy. In addition, each image file that needs to be downloaded over mobile slows down already slow data connections, so any visual element that can be reproduced in code (like shadows, gradients, & rounded corners) speed up the experience. Of all the 2015 trends in web design, this will be the most signficant and obvious.
- Every New NMC Project
- Media Queri.es
- Literally Bazillions More
Bonus Trend: Sketch
It's no secret the NMC designers are big fans of the UI drawing software, Sketch, for all our design work. But we're not alone! All of a sudden, Sketch is everywhere and 2014 witnessed a huge surge in interest for the app. Both designers and developers started using it more and more to design efficiently and export assets quickly for the screen. Design firm UsTwo maintains the most comprehensive list of all the blog tutorials, video screencasts, free icon sets, and even paid courses that have sprung up in the last year (we even contributed by compiling a list of our favorite Sketch plugins). Our guess for 2015 is that the momentum carries even farther in the new year.
2014 Was a Busy Year
A busy and eventful year for web design and development in general and for NMC in particular. Any new approach or technology takes time for practitioners to adopt and master and this year it seemed like designers and developers really embraced it as part of their normal workflow, not just as something novel or extra. (We're proud that every NMC client project has been delivered fully responsive, at no extra cost, since 2011!)
More mobile devices mean using the web will look less and less like sitting still at a desk in front of a large screen and more and more like browsing headlines at the bus stop. But the potential of responsive design is just beginning to be unlocked so we're super excited to see what 2015 brings. After all, it's not until a technology becomes boring that it becomes interesting. What will you come up with?
Need Help with Any of These Trends?
NMC is for hire! If you're curious about doing things a little differently with your website and want to take it into 2015, NMC is happy to oblige. We know a thing or two about the trends mentioned above and would love to help your business or nonprofit succeed online. Get in touch and maybe your site will be featured on a "Best of 2015" list next January. Here are a few links to get you going:
- Need help getting started? We wrote a guide to help you write a great website RFP.
- Still not convinced? Check out the 10 best reasons to hire NMC for your next web project.
bhavitra technologiesgreat post
EakthaWhat a great article!. Your posts are really helpful for me.Thanks for your wonderful post. I am very happy to read your post.
PrestonGreat read, Nathan!
Have you heard of UserTest.io or FullStory?
jhonVery informative post. thanks
Sumi DasExcellent info you have there. Thanks for sharing .
Daniel BoterhovenThanks for sharing great information.I really an inspiring!
Alex TaylorReally informative one. In this year, it is ensure that a website should be responsive. You do not lose out any traffic for the business as you choose a responsive design while Create a Website .
William Hillgreat post, thanks for sharing!
William HillGreat post! Thank you for sharing. Please write about .net development too.
SarahThank you for the advice i am busy studying Web Design and am always looking for new ideas and trends your article was very informative thank you.
penelopegreat description with images of website design ..
Sujit KumarVery simple but very informative. Mobile-First & Responsive Design, This kind of website is really in demand and almost everyone is asking for a mobile responsive website with an increase in number of mobile users.
UberdigitGreat Post !! Thanks for sharing this informative blog ... Well, I read many of the blogs related to the web design, your blog is one of the informative among others. But your Blog is awesome! The Design and development of a website is one of the most important key success factors and it does not only affect the user experience, but also the SEO campaign. I just hope upcoming online animation tools are less complex, easier to learn and cheap also.
Anna ParrGreat post!
sonamVery interesting trends and Awesome! content for this good looking article. Thanks! for sharing this ideas .............................
nehaThe Design and development of a website is one of the most important key success factors and it does not only affect the user experience, but also the SEO campaign. The designing projects are helpful in the development of the website. Websites are used to submit the links on seo websites. With the launch of smart phones and mobile devices, most of the Internet browsing is done through these devices.
EsferasoftGreat Post !! Thanks for sharing this informative blog ... Well I read many of the blog related to the web design your blog is one of the informative among others. You can get some of the new tips form http://www.esferasoft.com/design/
rishabhReally nice idea, I am just starting a new blog and this really helped, thanks
mobile apps development in india
SugardesigngroupHey! Great Post on Web Design Development Trends. Thanks for sharing this!
MariamLas chicas de peep espectáculo no son putas, pero tienen todas y
cada una la posibilidad de serlo.
John AbayAll above information are very useful for me and i am professional PSD designer and provides web design service. If you want to make responsive design website than be in touch i am from Canada.
Fusio IndiaYou have written good post about web design trends. Please write more about web development.
NummeroAwesome content Nathan. Thanks for sharing such a excellent article. Its really helpful for us on upcoming days. Great work.
website design and development agencyVery interesting trends and informative also. I am particularly excited about the news on Flash, a tool I never liked. I just hope upcoming online animation tools are less complex, easier to learn and cheap also. Webforms are another part I liked, I would love to fiddle with the ones you mentioned. Rest are also looking good, would try them all and give my feedback here.
MattIts really wonderful post. I read it thoroughly and found it really helpful.
MattIts really really a great post. I enjoyed a lot reading it.
Nathan@Cathy The tools have come a long way -- definitely be sure to check them out. I've listed a few here, including web apps and native ones: http://www.newmediacampaigns.com/blog/examples-of-animation-in-web-design
@Jack Thanks for the kind words. Pretty soon "responsive web design" will be called just "web design".
You shared such a great post on responsive website designing trends that is most important for many online businesses to increase the visibility of businesses globally. Designing, developing and testing of responsive website is now easy in 2015 due to the latest technology and tools.
Mark J DemyanVery interesting... yet thought Provoking ....
Was checking out your Business... and just finished talking with Clay.
Look forward to getting to know your Business and what you have to Offer to ASGC ( Aud Soc GC )
Will review your Blog Post... again.. a Great Deal of INFO to think about and Possibly Develop !
Mark J Demyan
Audubon Society of Greater Cleveland
Cathy MayhueVery interesting trends and informative also. I am particularly excited about the news on Flash, a tool I never liked. I just hope upcoming online animation tools are less complex, easier to learn and cheap also. Webforms are another part I liked, I would love to fiddle with the ones you mentioned. Rest are also looking good, would try them all and give my feedback here.
Leave a comment