Trends – 2014http://www.awwwards.com/top-10-web-design-topics-of-2014.html

1. TipografiaIl tipo di carattere utilizzato all’interno di un contento web ne determina in primo luogo la leggibilità e di conseguenza la rilevanza dei contenuti nel loro insieme.

In base a come viene visualizzato il testo, è possibile trasmettere l’umore, le emozioni, la credibilità e la creatività dei contenuti.

Di seguito 4 articoli sull’importanza dei font:

1. Kissmetrics

2. Sitepoint

3. WDL

4. Webydo

2. Minimalism/Flat DesignIl design minimalistico e flat enfatizza la tipografia e si sviluppa a pieno con il RWD.

Si è quindi passati ormai in pieno dallo Scheomorfismo al design falt. Le curce, le ombre ed il realismo in generale hanno ceduto il posto a linee e forme bidimensional.

Sotto alcuni articoli:

• UXMag

• SitePoint

• TheNextWeb

3. Responsive DesignIl benefit più grande di creare un RWD è che non c’è più bisogno di creare più versioni dello stesso sito e in alcuni casi non c’è bisogno di creare un app nativa.

• Teamtreehouse

• Huffingtonpost

• filamentgroup

4. Browser compatibilityRight behind responsiveness is browser compatibility. These topics are so closely related, they’re often spoken of in the same breath. Probably because part of being responsive, is making sure your designs display across not only devices, but also across different technologies, which of course includes different browsers.

Everyone is concerned about being able to have their designs appear for even the most ancient of browsers, because many older users never update their browsers. Luckily, the number of IE7 users is dwindling away to nothing, and some of the newer IE browsers are actually bordering on decent.

Even so, it won’t do to ignore the outliers, so testing your websites browser compatibility is still a hot topic in the world of web design.

• Shallcreative

• Wsol

• mashable

5. Parallax ScrollingAh Parallax scrolling, my old friend. This topic has seen plenty of mileage this year. This interesting design technique and prevalent web trend saw a massive resurgence in 2011, and has since enjoyed regular rotation in a number of authoritative web design circles. Even three years later it’s still a hot topic of discussion.

Much of this discussion revolves around what it adds to a website, whether or not it’s a superfluous addition, or an interesting and engaging animated effect which adds depth and intrigue to your website. I fall into the latter camp, because I’m easily distracted by anything even slightly out of the ordinary. And quite frankly, I’m just a big fan of pretty things.

Parallax scrolling is undoubtedly a visually attractive element on any web page, but like most guilty pleasures it must be enjoyed in moderation. The differing speeds of on page elements in the foreground and background combine to give the impression of movement, but too much movement makes for an uncomfortably bumpy ride. See what the authorities on the subject have to say:

• UXMagazine

• Creativebloq

• Moz

• Webydo

6. Infinite ScrollingBetween Infinity and Parallax, scrolling has had some loftily titled preambles lately. Infinite scrolling (and its relationship with SEO) have been another common issue of interest for designers in 2014. Part of this could be due to the ongoing ambiguity between infinite and parallax scrolling sites. They’re not one in the same, but they often come up concurrently because they’re frequently combined in different web designs, and maybe also because they share the same last name.

Either way, infinite scrolling is another thing entirely. Its name implicates an ever increasing page length due to a continuously updated content feed that loads up every time a visitor reaches the bottom of a web page. For an example of what this looks like, venture no farther than your Twitter or Facebook feeds.

See what all the hubub’s about in the following articles:

Sitepoint

Designmodo

Youthedesigner

7. CSS AnimationsThis is a topic that’s discussed a plenty, and still not getting as much attention as I think it should. CSS animations are one of the most interesting, innovative, and enthralling web design techniques to really gain steam in recent years. Though the CSS animations have been around since the 90s, widespread support for them is only now becoming a reality.

The animations being implemented today are one more example of how much mobile UIs are effecting the web at large. I say this because transitions between pages on sites are becoming more and more android/iOS-like. It’s a trend I hope to see continue. As I said before, I’m a sucker for anything that prettifies my browsing.

Pixel77

WebHostingSecretsRevealed

AListApart

8. Ambient Video BackgroundsHere’s one for inflammatory purposes. Ambient video in the background of a website has become an increasingly popular design trend in 2014. It adds a lot of pizazz to a design, and can be implemented with relative ease. It’s also fairly polarizing.

According to a bit of research I performed on Quora.com recently, the majority of developers can’t stand video backgrounds. They asserted that it added nothing to content, slowed down load times, and distracted from a website’s primary goals.

Seeing how violently reactionary the topic made the developers made me giggle, especially since the majority of the press behind video backgrounds is so overwhelmingly positive.

Youthedesigner

Creativebloq

BlueSkySessions

Video Background Tutorial

9. The (Attempted?) Usurpation of Content’s ThroneThis one’s a heartbreaker for me, but apparently there’s a ton of folks claiming that content is…gasp…no longer “king.” As a constant creator and curator of high quality content, this naturally concerns the hell out of me.

There’s a veritable game of thrones going on in the vying for the title left vacant by content with major players like: distribution, marketing, packaging, and my personal favorite, anything useful. The basis of this argument is that content can’t accomplish anything without an audience, and that most of the good stuff gets lost in the shuffle.

How does this effect design? Well, if your designs aren’t emphasizing content at this point, you’re quite the rebel. Singling out the most important elements of a web page to users should be a high priority for any web designer worth their salt. If the most important element is no longer content, it’s in everybody’s best interest to find out what exactly is.

UXMagazine

SteamFeed

Problogger

10. SEO isn’t getting any easierSo here’s a newsflash: SEO is ruled by random Google pronouncements from on high, usually delivered nonchalantly by Matt Cutts in offhanded video blogs for the masses to devoutly devour. Here’s another tidbit of rueful familiarity: the rules change, a lot.

Hummingbirds, Penguins, and Pandas aren’t just adorable animals, they’re earthshaking algorithm changes. They effect everything from page structure to keyword optimization. The basic point being that in its ongoing effort to nullify blackhat SEO tactics, Google has completely revamped the science and art of SEO repeatedly throughout the years.

And it continues to do so. Just this year, we’ve seen guest bloggers get thrown under the bus, the abandonment of authorship markup, and secure searching has taken extremely valuable analytics data from our greedy grasps. The game keeps changing, and that means the players have to change with it. As such, it’s lead to plenty of discussion throughout the web design community.

Tuts+

Huffington Post

Crazyegg

11. SVG Images & IconsVector-based graphics aren’t built around pixels, but lines and coordinates. Individual shapes are organized by mathematical equations and this allows you to stretch vectors to any size. SVG images are like vectors in the sense they can be manipulated easily without much quality loss.

The biggest problem is support for these images within all web browsers. Many people are still using older versions of Internet Explorer and other legacy titles. It’s a huge trend that will be sweeping the Internet in years to come (if it hasn’t already).

Read Also: More On Scalable Vector Graphics

If you really want to get started might I recommend Codepen, an open community-driven IDE for developers to share their work online. You’d be surprised at the quality. Snap.svg is a JavaScript library devoted to support in multiple browsers with natural SVG images. This is a somewhat detailed topic but if you’re curious, it is worth delving into.

12. Lazy-Loading AnimationsWhen browsing ThemeForest one day I came across many WordPress themes which had transition effects applied onto elements, but they only animate when you scroll them into view. These elements behave similar to lazy-loading images except they’re already loaded in the page and hidden from sight.

Using JavaScript it’s easy to detect when the element(s) are in view, and then use CSS3 transitions or JavaScript to animate.

If you scroll down the page on Chart.js you will see blocks of content + images begin to slowly fade into view. This trend probably doesn’t save on bandwidth unless you purposefully wait to load the content. It’s more about page aesthetics and providing a sleek interface for your visitors.

13. Mega-Navigation MenusAll kinds of new fancy navigations have been tested and adopted in recent years. The mobile responsive web is a big piece to this, along with the HTML5/CSS3 specifications. I have noticed a small yet growing trend of mega navigation menus which expand to hold large blocks of content and links.

These are most common on websites that publish lots of unique content in high volumes. Online magazines or web forums immediately come to mind. It does take up a bit of space on the page, but it also gives readers a broader choice to navigate your site.

I stumbled onto a related article on Smashing Magazine talking all about navigation menus for mega-sites. The concepts are similar and the examples provided may be a good starting point for anyone interested in this trend.

14. Expanding Search BarsLooking back I’m not completely sure when this concept picked up steam. But there is a growing popularity for building semi-hidden or expanding search bars into your layout. The user clicks a magnifying glass icon or clicks into the form itself, and then it expands wider to allow for more text input.

Codrops wrote an outstanding tutorial about this topic and it’s a great read for any developer. Primarily the hidden search field is used to save room on the page. You might even hide the form at the very top and toggle it up/down like a navigation menu. This technique is prominent with responsive layouts, but even larger & more completed designs are incorporating these adaptable search fields.

15. Featured Detail ListsRecently I put together a design showcase of featured detail lists to be found on website homepages. These are list-oriented details explaining information about a company or product. Oftentimes the details are coupled with some icons to help illustrate the points in a more concise manner.

I’ve noticed these detail lists have become a staple for many homepages. A collection of information about any product or service provides visitors a reason to stick around. It gives some insight towards what you provide to customers and how it all works. Icons are like the frosting to catch people’s attention when scrolling by quickly.

16. Mobile-First DesignA book called Mobile First by Luke Wroblewski gave me this idea some time ago. When browsing a website it’s not easily possible to differentiate how the design process worked out. But the idea is to first mock-up how your website should look as a responsive layout on mobile screens. Eliminate all the excess fluff and keep only the bare essentials.

From this standpoint it’s much easier to scale up your design to wider screens. Navigation menus become wider, content is lengthened along with a possible sidebar. Mobile-first design places a higher priority on the mobile experience which then becomes a baseline for the entire layout. I love the concept, and I hope designers will try implementing this to see how it can affect workflow and the final outcome.

17. Quick User Registration

There are an increasing number of brand new startups and web applications that allow for user registration. In fact, many services require you to signup before you can start using the website. Long detailed registration forms are tremendously off-putting in this fast-paced world.

Try to keep all registration forms quick and to the point. Many newer webapps include the signup form right on their homepage to capture as many visitors as possible. This happens when a new visitor is curious about your product, sees the form only has 2-4 fields and decides to go for it. You may be shocked at how well this strategy works for capturing new users.

Read Also: Boosting Your Site Traffic By Harnessing Your Subscriber’s List

18. CSS3 Animated KeyframesSince the early millenium JavaScript has been the primary choice for browser animation. Only recently has CSS3 become adopted into the mainstream where developers can build their own animation effects using @keyframe.

There is another way to animate using the transition property, although this only has one state for animation whereas keyframes behave much like Adobe Flash. You setup a frame percentage value from 0% – 100% and define properties which change over time. The latest CSS3 spec provides enough tools for you to animate elements in practically any style you like.

Google Material DesignGoolge challenge is to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

Google Material Design

References

• http://www.hongkiat.com/blog/web-design-trends-2014/• http://www.awwwards.com/top-10-web-design-topics-of-2014.html• https://www.google.com/design/spec/material-design/

introduction.html

50 esempi di Responsive Design

• http://www.awwwards.com/50-examples-of-responsive-web-design.html

TRENDS – i 10 trends del 2013

• www.awwwards.com/10-web-design-trends-for-2013.html

Frameworks – i 22 migliori Responsive CSS• http://www.awwwards.com/what-are-frameworks-22-best-

responsive-css-frameworks-for-web-design.html

Inforgraphics – le 44 più importanti

• http://www.awwwards.com/44-useful-infographics-for-web-designers.html