Web Design & Development Trends in 2015
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:
- 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.
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:
- 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. Our guess for 2015 is that the momentum carries even further in the new year.
What's next in 2016?
So here's what we're tipping to be the major trends in web design for 2016. Do you agree? Have we missed any upcoming fashions or technologies? Let us know what you think in the comments below!
01. CSS3 will finally impact layouts
Browser support for CSS3 has been growing over the past couple of years, and we're finally reaching a stage where some of the fancy new CSS3 layout modules can be safely used in the wild. Of course there's still a place for polyfills and fallbacks, but the likes of CSS3 Flexbox (Flexible Box Layout) can be handled by the latest releases of all the popular browsers.
It is safe to say that the likes of Flexbox wont be revolutionising the aesthetics of layout in any dramatic sense – Flexbox offers an easier solution to a layout paradigm that's been in use on the web for a long time now – but it will make for faster-rendering pages that are easier to maintain, and a lot fewer hacks, so it is quite possible that we'll see more creativity in layout as a result.
On Trend: Layouts may not substantially alter (although see trend 05!) but the code underpinning them will become simpler and more reliable
02. Material Design will dominate
There has been a bit of a revolution over the past twelve months in the form of the adoption of Google's Material design as a basis for UI presentation and development. This trend reflects the move toward smartphones as the principle and first device used to access the web, over and above the desktop or laptop computer. While it's no longer "new", Material Design is coming of age with wide-spread adoption and a raft of extensions and kits cropping up.
On Trend: Expect to see the tell-tale signs of Material appearing in user interface design across the web, much as happened with Bootstrap in the past.
03. Cinemagraphs will come of age
Cinemagraphs are nothing new; they've been around for several years in their current form, but there have been a couple events during 2015 that has brought them to the forefront of designers' minds, and the consumer's appetite. The main thing that has happened is the arrival of "live photos" on Apple's latest iPhone models. These Harry-Potter-esque images capture a little movement in a photo, so that when viewed the static photo appears to come to life. Cinemagraphs offer a similar visual effect, so as social media starts to flood with home-made live photos, so advertisers and content producers have started to recognise the arresting power such images can have.
The second change that has facilitated a renewed interest is that the technology underpinning the effect has improved. With HTML5 Canvas now being useable in the wild, effects can be rendered in real time without the huge overhead or colour limitations of loading a traditional animated GIF. Indeed, there are now a range of commercial tools available for exactly the sole purpose of producing cinemagraphs, such as the handyflixel.com.
On Trend: Expect to see a lot of photos that have movement while continuing to offer the benefits of a static image.
04. Fewer photos, more illustration
We're coming to the end of a period where a good proportion of websites feature a photo header that stretches across the viewport. This might seem to be in direct contrast to our predicted trend #3, but the two things are actually reflecting the same progression from a shiny, polished but unapproachable utopia, toward imagery that engages the user in a more personal, connected way.
We're expecting this to be in the form of illustration over photography, because with illustration it's often easier to place yourself in a scene than it might be when a photo features horribly well-dressed, perfectly manicured models. I can hear you protesting that that's exactly what your life is like, but for the majority of people it's a falsehood that doesn't align with their own experiences, and they're wise to the differences!
On Trend: Photos will be replaced with more relatable illustrations that connect to the viewer in a more personal manner. Website designs may revert to a fixed-width layout at the same time.
05. Colour and typography will get bolder
Use of colour as a branding device is an important marketing tool, as is the effective use of typography to reinforce values and convey important messages. Every designer knows this, but choices have often been constrained by what's technically possible (in the case of fonts and typographical layout), and by what's corporately "safe". We expect this to change!
The past couple of years has seen a total transformation in the typographical landscape online as web fonts have become accessible to all, and as a result we've already seen a dramatic shift in the way type is rendered online. Colours have remained muted on the whole, and a combination of designers and brands becoming bolder, alongside refinements to fonts and a resurgence in appreciation of good typography leads us to conclude that 2016 will be marked by a lot of colour, and a whole lot of type!
On Trend: Look out for creative typographical treatments appearing throughout the web, not just in occasional headlines, and big, bold and brash colour!
Source: http://blog.beautheme.com/web-design-development-trends-youll-see-in-2015-what-next-in-2016/
Không có nhận xét nào:
Đăng nhận xét