Web Design & Development Trends You'll See in 2015

January 14, 2015
Design, Development, Front End

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?

Examples:

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.

Examples:

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.

Examples:

Card Design

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.

Examples:

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.

Examples:

CSS Pre-processing

Vendor Prefixes & Manual Compressing: Ain’t Nobody Got Time fo’ That

All right web developers, it’s 2015. There’s no more excuse to:

  1. Write out vendor prefixes by hand
  2. Repeat your CSS over and over
  3. 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.

Examples:

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.

Examples:

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.

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.

Examples:

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.

Examples:

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:

Comments

Feliz Journey's avatar
Feliz Journey
Bienvenido a la empresa de administración de destinos Feliz Journey,agencia de viajes en Tenerife,, ,agencia de viajes en Sevilla,,que ofrece servicios en la India y el subcontinente. agencia de viajes en madrid, Somos una empresa,agencia de viajes en cordoba, agencia de viajes en Delhi turística confiable e innovadora que agencia de viajes en malaga, prestan los servicios increíbles e impecables a los clientes. La empresa tiene la suerte agencia de viajes en valencia, de contar con los profesionales más talentosos y comprometidos de la industria hospitalidad.
bhavitra technologies's avatar
bhavitra technologies
great post
Eaktha's avatar
Eaktha
What a great article!. Your posts are really helpful for me.Thanks for your wonderful post. I am very happy to read your post.
Preston's avatar
Preston
Great read, Nathan!
Have you heard of UserTest.io or FullStory?
jhon's avatar
jhon
Very informative post. thanks
Sumi Das's avatar
Sumi Das
Excellent info you have there. Thanks for sharing .
Daniel Boterhoven's avatar
Daniel Boterhoven
Thanks for sharing great information.I really an inspiring!

Web Developer
Alex Taylor's avatar
Alex Taylor
Really 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 Hill's avatar
William Hill
great post, thanks for sharing!
William Hill's avatar
William Hill
Great post! Thank you for sharing. Please write about .net development too.
Sarah's avatar
Sarah
Thank 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.
penelope's avatar
penelope
great description with images of website design ..
Sujit Kumar's avatar
Sujit Kumar
Very 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.
Uberdigit's avatar
Uberdigit
Great 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 Parr's avatar
Anna Parr
Great post!
sonam's avatar
sonam
Very interesting trends and Awesome! content for this good looking article. Thanks! for sharing this ideas .............................
neha's avatar
neha
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. 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.
Esferasoft's avatar
Esferasoft
Great 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/
rishabh's avatar
rishabh
Really nice idea, I am just starting a new blog and this really helped, thanks

mobile apps development in india
Sugardesigngroup's avatar
Sugardesigngroup
Hey! Great Post on Web Design Development Trends. Thanks for sharing this!
Mariam's avatar
Mariam
Las chicas de peep espectáculo no son putas, pero tienen todas y
cada una la posibilidad de serlo.
John Abay's avatar
John Abay
All 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 India's avatar
Fusio India
You have written good post about web design trends. Please write more about web development.
Nummero's avatar
Nummero
Awesome content Nathan. Thanks for sharing such a excellent article. Its really helpful for us on upcoming days. Great work.
website design and development agency's avatar
website design and development agency
Very 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.
Matt's avatar
Matt
Its really wonderful post. I read it thoroughly and found it really helpful.
Matt's avatar
Matt
Its really really a great post. I enjoyed a lot reading it.
Nathan's avatar
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

@Mark Welcome!

@Jack Thanks for the kind words. Pretty soon "responsive web design" will be called just "web design".
Jack's avatar
Jack
@nathan,
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 Demyan's avatar
Mark J Demyan
Very 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 !

MJD
Mark J Demyan
Consultant
President
Audubon Society of Greater Cleveland
Cathy Mayhue's avatar
Cathy Mayhue
Very 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