The document discusses the top web design trends of 2014, including typography, minimal/flat design, responsive design, browser compatibility, parallax scrolling, infinite scrolling, CSS animations, ambient video backgrounds, the role of content, SEO challenges, SVG images/icons, lazy-loading animations, mega-navigation menus, expanding search bars, featured detail lists, mobile-first design, quick user registration, and CSS3 animated keyframes. It also briefly mentions Google's Material Design framework. The trends are accompanied by links to relevant articles on each topic.

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

2. 1. Tipografia
Il 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

3. 2. Minimalism/Flat
Design
Il 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

4. 3. Responsive Design
Il 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

5. 4. Browser
compatibility
Right 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

6. 5. Parallax Scrolling
Ah 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

7. 6. Infinite Scrolling
Between 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

8. 7. CSS Animations
This 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

9. 8. Ambient Video
Backgrounds
Here’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

10. 9. The (Attempted?)
Usurpation of
Content’s Throne
This 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

11. 10. SEO isn’t getting
any easier
So 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

12. 11. SVG Images &
Icons
Vector-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.

13. 12. Lazy-Loading
Animations
When 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.

14. 13. Mega-Navigation
Menus
All 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.

15. 14. Expanding Search
Bars
Looking 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.

16. 15. Featured Detail
Lists
Recently 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.

17. 16. Mobile-First
Design
A 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.

18. 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

19. 18. CSS3 Animated
Keyframes
Since 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.

20. Google Material
Design
Goolge 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

21. 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

22. 50 esempi di Responsive Design
• http://www.awwwards.com/50-examples-of-responsive-web-
design.html

23. TRENDS – i 10 trends del 2013
• www.awwwards.com/10-web-design-trends-for-2013.html

24. Frameworks – i 22 migliori Responsive CSS
• http://www.awwwards.com/what-are-frameworks-22-best-
responsive-css-frameworks-for-web-design.html

25. Inforgraphics – le 44 più importanti
• http://www.awwwards.com/44-useful-infographics-for-web-
designers.html