Trends – 2014
http://www.awwwards.com/top-10-web-design-topics-of-2014.html
1. Tipografia
Il tipo di carattere utilizzato all’interno di un
contento web ne determina in primo luogo la
leggibilità e ...
2. Minimalism/Flat
Design
Il design minimalistico e flat enfatizza la
tipografia e si sviluppa a pieno con il RWD.
Si è qu...
3. Responsive Design
Il benefit più grande di creare un RWD è che
non c’è più bisogno di creare più versioni
dello stesso ...
4. Browser
compatibility
Right behind responsiveness is browser
compatibility. These topics are so closely related,
they’r...
5. Parallax Scrolling
Ah Parallax scrolling, my old friend. This topic has seen
plenty of mileage this year. This interest...
6. Infinite Scrolling
Between Infinity and Parallax, scrolling has had some loftily
titled preambles lately. Infinite scro...
7. CSS Animations
This is a topic that’s discussed a plenty, and still
not getting as much attention as I think it
should....
8. Ambient Video
Backgrounds
Here’s one for inflammatory purposes. Ambient video in the
background of a website has become...
9. The (Attempted?)
Usurpation of
Content’s Throne
This one’s a heartbreaker for me, but apparently there’s a
ton of folks...
10. SEO isn’t getting
any easier
So here’s a newsflash: SEO is ruled by random Google
pronouncements from on high, usually...
11. SVG Images &
Icons
Vector-based graphics aren’t built around pixels,
but lines and coordinates. Individual shapes are
...
12. Lazy-Loading
Animations
When browsing ThemeForest one day I came
across many WordPress themes which had
transition eff...
13. Mega-Navigation
Menus
All kinds of new fancy navigations have been
tested and adopted in recent years. The mobile
resp...
14. Expanding Search
Bars
Looking back I’m not completely sure when
this concept picked up steam. But there is a
growing p...
15. Featured Detail
Lists
Recently I put together a design showcase
of featured detail lists to be found on website
homepa...
16. Mobile-First
Design
A book called Mobile First by Luke
Wroblewski gave me this idea some time ago.
When browsing a web...
17. Quick User
Registration
There are an increasing number of brand new
startups and web applications that allow for
user ...
18. CSS3 Animated
Keyframes
Since the early millenium JavaScript has been
the primary choice for browser animation.
Only r...
Google Material
Design
Goolge challenge is to create a visual
language for our users that synthesizes the
classic principl...
References
• http://www.hongkiat.com/blog/web-design-trends-2014/
• http://www.awwwards.com/top-10-web-design-topics-of-20...
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...
Inforgraphics – le 44 più importanti
• http://www.awwwards.com/44-useful-infographics-for-web-
designers.html
of 25

Presentazione web design

Published on: Mar 4, 2016
Source: www.slideshare.net


Transcripts - Presentazione web design

  • 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

Related Documents