Your SlideShare is downloading. ×
AWWWARDS' Web and-mobile-trends-2013
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

AWWWARDS' Web and-mobile-trends-2013


Published on

The Awwwards community are a …

The Awwwards community are a
faithful audience, always interested
in learning and dedicating their
time to acquiring the necessary
technical knowledge to apply in
their daily work. With the noble
aim of being a useful tool for our
community, at the end of 2012 we
decided to gather the opinions
of renowned experts on how the
web industry will evolve in the
complex times we live in, in this
tower of Babel of technologies and
devices that’s rushing towards us

1 Comment
  • I think this will open new scece for my thought for near future work.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web Design Trends 2013 1
  • 2. TRE NDS Project EDITOR IN CHIEF and ART DIREC- TION: Awwwards Team. 2013 Awwwards BlogWeb Design Trends 2013 2
  • 3. Index/ IndexIndex 3 Rachel Andrew 78Preface 4 Simon Foster 32Interviews 7 Trent Walton 51Aarron Walter 48 Ultranoir 60Ben Cline 45 Unit9 86Brad Frost 68 Veerle Peters 26B-Reel 89 Conclusions 105Bruce Lawson 36 Data 113Dan Mall 8 Acknowledgments 116Dave Rupert 23 Credits 118Davin Wilfrid 102Denise Jacobs 29Epic Agency 81F-i London 92Hello Monday 95Hinderling Volkart 72Ian Hickson 64Jeffrey Zeldman 75Jenn Lukas 14Karen McGrane 11Legwork 57Luciano Foglia 42Mike Kus 16Nick Pettit 19Oliver Reichenstein 53 Web Design Trends 2013 3
  • 4. Preface Chapter. 1Web Design Trends 2013 4
  • 5. Commandments of needs basedWhy Trends firmly on their own experiences as users.The Awwwards community are afaithful audience, always interested Trends is not only a prediction forin learning and dedicating their 2013. It reflects a natural interest intime to acquiring the necessary how all aspects of web design willtechnical knowledge to apply in evolve over the next few years. Wetheir daily work. With the noble don’t actually know whether we willaim of being a useful tool for our need to make a similar publicationcommunity, at the end of 2012 we in 2014; things in this industrydecided to gather the opinions change quickly, so it’s possibleof renowned experts on how the that in less than 12 months manyweb industry will evolve in the of these trends and technologiescomplex times we live in, in this which now seem to be blossomingtower of Babel of technologies and will have disappeared completely. “devices that’s rushing towards us. The idea was to ask all the participants more orOf course, nobody can know for less the same questions tosure what might happen in thecoming months and years. In fact, get a kind of data map. ”“ Trends is not only a pre-diction for 2013. It reflectsa natural interest in how all How is the structured? documentaspects of web design will The idea was to ask all theevolve over the next few participants more or less the same ” questions to get a kind of “datayears. map” which would help us visualize “the future of the web”. To thismany of the interviewees were end, we had the invaluable help ofhesitant to give an opinion on 28 renowned experts in differenttrends. Curiously, in the end some areas of the industry. They are thevery similar ideas emerged to make ones who have given this projectup, more than a prediction, a Ten its shape. Web Design Trends 2013 5
  • 6. The end motivation?Honestly... you’ll see why as youread the document, because thisis exactly what can be taken fromalmost all the contributions...building a more useful, accessibleand efficient web for the userwithout forgetting that design is apowerful tool that not everyone isable to use with skill and honesty. Web Design Trends 2013 6
  • 7. Interviews Chapter. 2 Web Design Trends 2013 7
  • 8. Dan MallDesign Director at Superfriendly Co. “We’ll see people moreDan Mall is an award-winning designerfrom Philadelphia. Founder and DesignDirector at SuperFriendly, co-founder of broadly understandingTypedia and swfIR, and singer/ keyboardplayer for contemporary Christian bandFour24. Dan writes about design and mobile devices. ”other issues on Twitter and his website. Web Design Trends 2013 8
  • 9. W hat trends do you see co- ming in the near future inweb and mobile design? around touch interactions. Here’s one of my recent favorites by Rally Interactive co-founder Ben Cline.I’ve never been good at predictions,but I think (hope)? we’ll see peoplemore broadly understandingmobile devices—computers wecan hold in our hands as opposedto having to sit at a desk to use—asthe web, not just an “on-the-go”,abridged version of the web. What do you think we’ll see in la- yout and UI design in 2013?What animation techniques and Simplicity, app-inspired design,effects applied to navigation and responsive, single page websites,user interaction will we see? Will alternative navigation patterns…?we finally move beyond Parallaxscroll? There’s an interesting battle currently being fought betweenGosh, I hope so. I’ve seen very photorealistic graphics and flatfew sites that use parallax as a aesthetics, led by Apple andconceptual construct as opposed Microsoft’s Windows 8. I think we’llto a technological gimmick. see a lot more push and pull withAs touch-enabled devices are these styles over the next year.“ As touch-enabled de-vices are becoming moreubiquitous, I think we’ll Touch and gestures, media que- ries, responsive, retina display, webfonts, realtime web... Howsee a lot of experimenta- do you think these techniquestion around touch interac- and technologies will evolve and ”tions. what will be next? It’s interesting to see design andbecoming more ubiquitous, I think technology simultaneously gettingwe’ll see a lot of experimentation Web Design Trends 2013 9
  • 10. bigger and smaller. On one end nes will you be focusing on in theof the spectrum, we find browsers coming months and years?evolving more rapidly than ever, Everything! We’re certainlywith designers and developers doing the web work we love sopushing technologies like WebGL, much, HTML/CSS/JS,mobile-firsthardware acceleration, and 3D in responsive design, WordPress,the browser without having to rely ExpressionEngine/otherCMS’s—on plugins. On the other end, we but are also venturing a bit intosee mobile access necessitating Objective-C and OpenFrameworkssimpler, faster sites and heralding as we do more native mobile work.the need for optimizing. I’m curious We’re even creating some physicalto see how each evolves. installations that connect digital and analog. More on that soon!When looking for potential em-ployees or collaborators whatcatches your eye?Great design taste in a portfoliousually gets my attention, but what“ Great design taste in aportfolio usually gets myattention, but what keepsit is hunger and passion forthe work. ”keeps it is hunger and passion forthe work. I also try to look for someform of richness; I like seeing smallmoments where it’s obvious thathe/she pored over the details.What technologies are your teamtraining in now? Which discipli- Web Design Trends 2013 10
  • 11. Karen McGraneContent, User Experience Strategist Image by Alison Grippo “ Mobile is not the LiteKaren McGrane is a content strategistand user experience designer with15 years of experience making big, version. I think this willcomplicated websites. Currently she is be year of the mobileManaging Partner of Bond Art + Science. website, no more desk- top redirects. ” Web Design Trends 2013 11
  • 12. W hat trends do you see co- ming in the near future inweb and mobile design? will want to do that on mobile,” you’re too late. People are already trying to do it. It’s our mission—and our responsibility—to deliver a greatMost major organizations are experience to them, on whateverstarting to see about 10% of the device or platform they choose totraffic to their website coming from devices—which means it’stime to move on putting a content 2. Content parity is the goal. Toostrategy for mobile in place. I think often, we fall into the trap ofthis will be the year of the mobile thinking mobile should be the “lite”website, no more desktop redirectsor bare-bones landing pages. It’stime to think of the mobile website “ We fall into the trap of thinking mobile should be ”as every bit as “real” as the desktopwebsite. the lite version.“ version, offering a subset of content You don’t get to decide and features. Or we just want it towhich device people use to be different for the sake of beingvisit your website. They do. different. For most organizations,” providing a consistent experience across the desktop web and mobile web should be the foundationalWhat should be the new design goal.principles for web and mobiledesign? 3. It’s not a strategy if you can’t maintain it. Lots of great ideas flopI have three big principles that in the execution, because no oneinform my approach to content took into consideration what wouldstrategy for web and mobile. be required from the internal web, production, or editorial teams. With1. You don’t get to decide which digital teams now juggling lots ofdevice people use to visit your different platforms, it’s even morewebsite. They do. If you’re sitting important to focus onaround debating whether “people Web Design Trends 2013 12
  • 13. the needs of the people who will see increasing numbers of wildlymaintain the site. divergent platforms, some of which we’ve been talking about for years.What do you think we’ll see pre- Interactive television. In-kitchendominate in layout and UI design devices. In-car audio 2013? Someday soon, speech-basedI expect to see growing recognition interfaces will get good enough—from the design community that remember all the years whenthe content can’t be “somebody touchscreens sucked? Onceelse’s problem.” Designers have touchscreens reached thea huge stake in knowing “what point where they just worked, it launched an entire new wave of“ innovations in hardware, software, Designers have a huge and interaction models. Speechstake in knowing what the isn’t there yet, but it will be.content will be. ”the content will be.” What that This means that we have to stop building containers and thenmeans is that designers should creating content to fit. Our contentbe asking about “how the content is going to find its way to placeswill be structured.” What are all we never even dreamed, and wethe chunks, and how big are they? don’t have the time, resources,Instead of treating the content or budget to create new contentlike an afterthought, or something for every platform. Instead, allwholly separate from the rest of the of us need to work together–experience, designers will make designers, developers, and contentsure it’s the centerpiece. strategists—to create the right content, structured for reuse, andIn technological and social ter- then design around, how do you think the webwill evolve in the next few years?The proliferation of platformsisn’t going to stop. We’re going to Web Design Trends 2013 13
  • 14. Jenn LukasInteractive Development Director at Happy Cog “ This year I hope to seeJenn pursued a Multimedia & WebDesign degree. She has worked onnumerous projects for top-tier clients content still at the fore-and was named one of Mashable’s 15Developer/ Hacker Women to Followon Twitter, and you can find her on front. ”Twitter posting development and cat-related news. Web Design Trends 2013 14
  • 15. W hat trends do you see co- ming in the near future inweb and mobile design? an ease into responsive design and less pages to load/clicks to make. This year I hope to see content still at the forefront, but pushingI just LOVE CSS Transitions, into more complicated designsespecially when applied to hovers. and layouts. Flexbox (CSS FlexibleAdding the right amount of fade Box Layout Module) is sure toor movement to a link, really adds help in aiding interesting layoutsa helpful amount of interaction on desktop and mobile that aren’t dictated by source order.“ Filters cut down on imagesprites and image produc-tion and let you adjust yourimages right in the brow-ser. ”while keeping things classy andnot going the way of Flash tweens.CSS Filters are super neat! With lotsof people pushing for designingin the browser, this is one morestep away from an image editor.Filters cut down on image spritesand image production and let youadjust your images right in thebrowser.What do you think we’ll see in la-yout and UI design in 2013?We’ve seen a lot of single columndesigns and single page websitesthis year, allowing a content-firstapproach. These patterns provided Web Design Trends 2013 15
  • 16. Mike KusGraphic, Web Designer & Illustrator “ I think we’ll see a sim-Mike Kus is a UK based Graphic/ WebDesigner and illustrator, considered oneof the best on today’s scene. He’s co- pler web emerging. Morefounder of WorkFu and creator of a few space, less clutter and decoration. ”amazing online and print experiences. Web Design Trends 2013 16
  • 17. W hat trends do you see co- ming in the near future inweb and mobile design? focused on user experience and content? I don’t think it’s a new thing toFrom a visual standpoint I think suggest that user experiencewe’ll see (are already seeing) a and content are a central focussimplification of Graphic & UI design when designing for the web andon both the web and mobile. We’ll mobile. It’s always been that waysee less decoration, simple, bold as far as I’m concerned. I’ll justand clear layouts and UI design. I carry on applying the same design“ Simplification of Graphic& UI and mobile design on “ Make sure the content is easily digestible using a ”both the web and mobile. simple clear layout.Less is More. ”think we’ll see less Apple influenced principles I’ve always used, which are pretty simple: Make sure theskeuomorphic design, also. content is easily digestible using a simple clear layout, the text is easyWhat technologies are you tra- to read, and the site or app is easyining in now? Which disciplines to navigate and understand. Applywill you be focusing on in the co- these to all devices.ming months and years? What animation techniques andIn the coming months I want to effects applied to navigation andfurther explore the concept of user interaction will we see? Willhow to best express a brand or we finally move beyond Parallaxpersonality through web design scroll?and how this can be maintainedfrom the desktop experience Scrolling triggered animationsthrough to a mobile experience. seem to be hot right now but I’m really not sure what will come next.What should the new designprinciples be in a future whereweb and mobile design must be Web Design Trends 2013 17
  • 18. What do you think we’ll see in la- graphics take the pain away whenyout and UI design in 2013? it comes to designing for differentSimplicity, app-inspired design, screen resolutions. Creatingresponsive, single page websites, multiple graphics for differentalternative navigation patterns...? screen types is a total pain in the ass.Again, I think we’ll see a simplificationof UI design. Less is more. In technological and social ter- ms, how do you think the webCan we predict an explosion of will evolve in the next few years?creativity in interaction and ani-mation now that the technology I think we’ll see the web furtheris available and becoming more integrated into our everyday lives.accessible from a web standards Only a few years ago ‘the web’point of view?I think as long as the browser “ We’ll see the web further integrated into our every- ”support is in place, yes, designers day lives.and programmers will be doing was surfing the web from your“ I don’t think human appe- desktop and email. Now the web is on your mobile, there’s an apptite for clever animated web for everything from taking andpages will ever die. ”some pretty crazy stuff. I don’tthink human appetite for clever sharing your photos to mapping your run to monitoring your car’s performance. This integration willanimated web pages will ever die. only become deeper.Clients love that stuff!What role do you think techno-logies like Canvas or ScalableVector Graphics (SVG) can play ingame and app development?Well, for one, scalable vector Web Design Trends 2013 18
  • 19. Nick PettitTeaching Team Leader at Treehouse “ I think SVGs willNick Pettit is the Teaching Team Leaderat Treehouse, an educational videotutorial service that teaches web design, become more popularweb development, and iOS. Nick has a due to the increasing po-background in fine art and a passion for pularity of displays with ”technology. high pixel densities. Web Design Trends 2013 19
  • 20. W hat trends do you see co- ming in the near future in backlash from the skeuomorphic or hyperrealistic sensibilities of Apple “web and mobile design/ develo- I think the recent bac-pment? klash from the skeuomor-Screens with high pixel densities phic or hyperrealistic sensi-like the new iPad and MacBook bilities of Apple are leadingPro will become more prevalent. towards an aesthetic thatResponsive Web Design solvespart of the puzzle and forces us to features more flat colors, which is the perfect use“ Design must become evenmore pixel agnostic. I thinkdesigners will start using an case for SVGs. ” are leading towards an aesthetic that features more flat colors,SVG-first approach. ”think in terms of proportions, but which is the perfect use case for SVGs. Internet Explorer has added support for SVGs in recent releases,now design must become even so this approach is now far moremore pixel agnostic. The best way do this currently is with vectorgraphics and I think designers will What technologies are you tra-start using an SVG-first approach ining in now? Which disciplineswhen creating graphics for their will you be focusing on in the co-web pages. Internally at Treehouse, ming months and years?we’ve taken a note from Responsivedesign and have dubbed this idea I’m personally focused on“Scalable Web Design.” Vectors are researching how vectors impactnot practical for more complex design and UX decision making.imagery, particularly photographs, While vector graphics do havebut they work well in many cases, a few drawbacks, they have aespecially when you go into the tremendous number of advantagesdesign phase knowing that this that allow for interfaces that are notwill be the driving technology. practical with raster images alone.Additionally, I think the recent Web Design Trends 2013 20
  • 21. What technologies are you tra- What will the trends be in webining in now? Which disciplines programming? Which langua-will you be focusing on in the co- ges or frameworks will gain moreming months and years? converts in the near future?I’m personally focused on I don’t see any ground breakingresearching how vectors impact changes in languages ordesign and UX decision making. frameworks in 2013, although thatWhile vector graphics do have doesn’t mean there won’t be any.a few drawbacks, they have a Rather, I think the focus will be ontremendous number of advantagesthat allow for interfaces that are notpractical with raster images alone. “ I think the focus will be on the toolchain that front- end and back-end deve-What should a newbie web deve-loper concentrate on learning? lopers use to create webA new web developer should learnto love learning. The best web apps. ” the toolchain that front-end anddevelopers are very flexible and back-end developers use to createadaptable to change. They don’t web apps. The barrier to entry for new designers and developers is a“ little bit high, but projects and tools The best web developers like HTML5 Boilerplate, Bootstrap,are very flexible and adap- Github, Ruby on Rails, Heroku, andtable to change. They don’t countless others have continuouslyspend all of their time fo- systematized the process. I think this positive momentum will continue,cusing on just one langua- ” because it allows developers toge. focus more on their ideas, ratherspend all of their time focusing than the implementation.on just one language, and instead,experiment with all the possibilities. Web Design Trends 2013 21
  • 22. “ The fight for web standards is finally in a much betterplace than it was in previous years, ”How do you think these techni- to freely experiment with bold newques and technologies will evol- interface and what will be next? The current state of developmentTechnologically, I think SVGs will and design is pretty incredible, andbecome more popular due to the while it will continue to improve,increasing popularity of displays there’s never been a better time towith high pixel densities. Beyond build web applications. Now is thethat, it seems like the fight for web time to execute.standards is finally in a much betterplace than it was in previous years,and the ongoing refinementsto the tools that are available to“ Furthermore, companiesand individuals care moreabout design than ever be-fore. ”developers are a welcome additionto the equation. Furthermore,companies and individuals caremore about design than everbefore. Big influencers like Appleand Microsoft have shaken up thelong-standing desktop metaphorwith iOS and Windows 8, and theworld didn’t come crashing downaround them as one might expect.I think this gives smaller productcompanies the comfort they need Web Design Trends 2013 22
  • 23. Dave RupertLead Developer at Paravel Inc. “ I think the future ofDave Rupert is the lead developer forParavel and host of “the ATX Web Show”,a podcast about the local web design web and mobile design isand development scene in Austin, Texas. that there is no distinc- tion between the two. ” Web Design Trends 2013 23
  • 24. W hat trends do you see co- ming in the near future inweb and mobile design? term. My knowledge of those two things is decent but could always be better and more informed. Over the next few months I’ll probablyFor me, I think the future of web just continue poking holes in whatand mobile design is that there is I think I know so I can get better atno distinction between the two. my weaknesses.Smartphones are becoming the What should a newbie web deve-“ The future of web and loper concentrate on learning?mobile design is that there There’s a saying we have onis no distinction between ShopTalk (a podcast I co-hostthe two. Mobile first res- with Chris Coyier): “JUST BUILDponsive web design is pro- WEBSITES!” The technologies thatbably the trend to stick with you need to be learning will quickly ” present themselves in challengesin the near future. you meet when you pick up a side project, start a job, etc. Beyonddefault computer for most of the that, gaining more mastery onworld’s youth, a company in India the three main building blocksjust announced a $20 tablet, and of our industry - HTML, CSS, andcollege classrooms are glowing JavaScript - couldn’t hurt.with high-end laptops. Mobile firstresponsive web design is probably What will the trends be in webthe trend to stick with in the near programming? Which langua-future. ges or frameworks will gain more converts in the near future?What technologies are you tra-ining in now? Which disciplines I believe automation and betterwill you be focusing on in the co- tooling is the next wave (ifming months and years? not already a current wave) in web development. This coversI’m focusing a lot more on JavaScript everything from pimping your textand Web Accessibility in the short editor to improving the building Web Design Trends 2013 24
  • 25. and compiling of our HTML/CSS/ Microsoft’s Windows 8 is a touch-JavaScript. Linters, pre-processors, based interface. Chris Coyierbuilders, and package managers recently tweeted that he saw hiswill play a major role in everyday mom try to tap her TV. Touch-web development. There may enabled devices are now the defaultbe a big technical hurdle there stack, so it’s important that our designs have this in mind. I don’t“ Linters, pre-processors,builders, and package ma-nagers will play a major role think we’re far off from where our websites will be expected to have more advanced gesture-based everyday web develop-ment. ”to get everyone on board, butthat’s a great opportunity to fordevelopers to make GUIs in orderto increase adoption among lesscommand-line-savvy developersand designers.Touch and gestures, media que-ries, responsive, retina display,webfonts, realtime web... Howdo you think these techniquesand technologies will evolve andwhat will be next?Touch and gestures will be hugely“ Touch and gestures willbe hugely important. ”important. Apple’s biggest sellingproducts are all touch-based. Web Design Trends 2013 25
  • 26. Veerle PetersGraphic, Web Designer Lead at Fab “ It’s important to designVeerle Pieters is a graphic/ web designerbased in Deinze, Belgium. She runs herown design studio, Duoh!, together from the content pointwith Geert Leyseele. Veerle has been instead of screen resolu- tions. ”blogging since 2003 and is considerednumber 39 on the list of “NxE’s FiftyMost Influential Female Bloggers“. Web Design Trends 2013 26
  • 27. In technological and social ter- ms, how do you think the webwill evolve in the next few years? What should the new design principles be in a future where web and mobile design must be focused on user experience andHard to say, as I’m not visionary content?so I can only do some guesswork.Technologically, it will be moving I’m hardly an expert, but I thinkmore and more towards mobile, there is no golden rule that appliesso that aspect will become even to all. Every project is different so that’s why it is so hard to create“ Technologically, it will the ultimate process/ tool that everyone likes to use and thatbe moving more and more “towards mobile, so that I think it’s important toaspect will become even design from the contentmore important than it now point instead of focussingalready is. ” on all the screen resolu-more important than it now alreadyis. I see shopping as one aspect of tions out there. ” works perfectly for every project.that, and I think we will eventually I’m not sure if such a thing ismove towards 50% being done even possible. It’s a collection ofon phones or tablets. Of course, best practices and tools basedthis will not work for every shop, on personal preference that webut shops like will get have at our disposal today. Withto that point quicker than others. the complexity of all the devicesSocially, I have no idea if Twitter or out there, I think it’s important toFacebook will still be relevant in 5 design from the content pointyears. It all depends of what those instead of focusing on all the screencompanies do with their product. If resolutions out there. That’s what Ithey alienate their customers, and think would qualify as a new newa new kid on the block profits from design principle.that, it wouldn’t be the first time. Web Design Trends 2013 27
  • 28. Can you pinpoint any visual as we are still very much in thetrends or design elements that experimental phase, so nobodymight emerge in 2013, as Letter-press, pictograms, vintage style,lettering, oversizing elements,Overprinted effects, swiss design “ Could be I’m wasting my time on something that isn’t around anymore inetc. have done? two months. Things pop-Trends are something I don’t follow up quickly but disappear asor have any interest in. I just dowhat is right for the project thatI’m doing at that time. If it involves fast too. ” knows yet what the best practicessomething that many believe is of tomorrow will be. Could be I’mover-used, so be it, as long as I feel wasting my time on something thatit has a purpose there. I never look won’t be around anymore in twoat any website galleries because months. That’s what makes it sothey usually have a reverse effect interesting, things pop-up quicklyon me, and they block my creativity but disappear as fast too. Nobodyfrom the overload I receive. That’s knows what will be *the* way inwhy I created my own inspiration 2015, for example. We all have tostream that has nothing to do with learn as we go.web design at all. I try to see myinspiration in things that have noconnection to what I’m designing.For me personally, that works fine,but other may feel differently.What techniques are you trainingin now? Which disciplines willyou be focusing on in the comingmonths and years?I’m learning about all the informationon responsive web design, retinaresolutions etc. Not an easy task, Web Design Trends 2013 28
  • 29. Denise JacobsWeb Design Consultant and Creativity Evangelist “ Storytelling and visualDenise R. Jacobs is an Author, Speaker,Web Design Consultant, and CreativityEvangelist. Based in Miami, Florida, she simplicity in web andis the author of “The CSS DetectiveGuide” and co-authored “InterAct withWeb Standards: A Holistic Approach to mobile design. ”Web Design” and the newly-releasedSmashing Book #3 and #3 1/3. Web Design Trends 2013 29
  • 30. W hat trends do you see co- ming in the near future inweb and mobile design? ges or frameworks will gain more converts in the near future? It seems like there will be aI hope there will continue to be an continued increase in methods toincrease in both storytelling in web manage front-end developmentand mobile design as well as visual better like the scalable and“ modular CSS architectures, and People are starting to see also CSS preprocessing languagesthe power of storytelling in like LESS, SASS, and COMPASS.web and mobile in reaching I also anticipate more peopleaudiences. ”simplicity. People are really starting “ It seems like there will be a continued increase in me-to see the power of storytelling in thods to manage front-endreaching audiences and in creatingproducts that resonate with people.What technologies are you tra- development. ” challenging well-established front-ining in now? Which disciplines end development solutions andwill you be focusing on in the co- devising new ones, especially asming months and years? the CSS3 specification gets more solidified.I’m moving away from trainingin specific technologies and am Touch and gestures, media que-instead focused on developing ries, responsive, retina display,strategies for how to think webfonts, realtime web... Howbetter under pressure, increase do you think these techniquesthe creativity, innovation and and technologies will evolve andproductivity of individuals and what will be next?teams, and produce and executemore great ideas in less time. All of these technologies are pushing innovation and fresh-What will the trends be in web thinking forward, which I love toprogramming? Which langua- see. While I don’t know how they Web Design Trends 2013 30
  • 31. continue to evolve, I do know that website and the app interfaces,the next several months will be where they both are simplified toripe for some fantastic new ways the point where there will be littleto approach designing with all of or no difference between the two.the aforementioned combined.What do you think we’ll see in la-yout and UI design in 2013? Sim-plicity, app-inspired design, res-ponsive, single page websites,alternative navigation patterns...?Over the years, we have seen ashift from ridiculously complexinterfaces (think the Flash-basedwebsites of the early 2000’s) to“ I am looking forward tomore designers who alsoknow code who understandwhat is truly necessary. ”more simple and stark interfaces.Much like the well-knownAntoine de Saint-Exupery quote“Perfection is achieved, not whenthere is nothing more to add, butwhen there is nothing left to takeaway”, I am looking forward tomore designers who also knowcode who understand what istruly necessary, and in striving forperfection, continue to take awaythat which is superfluous. Also, Ido anticipate more merging of the Web Design Trends 2013 31
  • 32. Simon FosterWeb Designer “ The thing to focus onSimon Foster is a tiny one-man webdesign studio in London, England. Hespecialises in responsive front-end is not How a website’sdesign, HTML/ CSS and web typography. design/layout/UI is exe- cuted but Why. ”Simon tries to make the websites hedesigns and builds as simple and intuitiveto use as possible whilst still having aunique aesthetic appeal. Web Design Trends 2013 32
  • 33. W hat tendencies do you see coming in the near futurein web and mobile design? old HTML & CSS as I’ll never be a programmer as it isn’t in my blood, but I’ve recently started to learn how to use github and I’ll beI think that there a still a surprisingly making a concerted effort to getlarge amount of web designers to grips with SASS soon as they’rethat don’t take mobile devices intoproper consideration. I still see sitesthat are beautiful on a desktop orlaptop but really difficult to use on “ If you haven’t thought about WHY you’re making this website it won’t meanmy phone or tablet. That can’t goon forever so I think we’ll see a lotof designers getting on board withresponsive/adaptive design or just anything. ” not really as scary as they seem atsimplifying the way they design first. On the other hand I’m alwaysand build sites so even if they aren’t conscious of not getting too bogged down in focusing on the“ “how” For me the “why” in design Less gimmicks, less tric- will always be more important.ks, less dependency on ja- Any type of code, technology orvascript for a site to work.responsive they are easier to use ” framework is only ever a means to an end, you can be the best Ruby on Compass Jekyll, Git via Haml,on smaller devices. Less gimmicks, Frank Sinatra singing Mongo DBless tricks, less dependency on Jerry programmer in the world, butjavascript for a site to work. if you haven’t thought about WHY you’re making this website it won’tWhat technologies are you tra- mean anything.ining in now? Which disciplineswill you be focusing on in the co- What should the new designming months and years? principles be in a future where web and mobile design must beWell even though I do write code focused on user experience andas well as design I’ve only really content?up until now gone as far as plain Web Design Trends 2013 33
  • 34. I think I can see things going back to was that we could get away frombasics a bit. I love the phrase “Keep over-bloated sites that needed toit simple stupid” (even though it is load before you could use thema little over used). Just let users do and had loads of unnecessarywhat they came on your site to do transitions and animations, but they’re making a comeback with“ I always keep it in mindthat no matter how beau-tiful I make a website the “ I’m not a big fan of things moving all over the screen,average user only really just feels like a gimmick toowants to spend about 10seconds on it. ” often for me.. ” html5 and canvas/webgl etc.quickly and without fuss so they Of course I’m not saying NEVERcan get on with doing other things use an animation in a website,that are more interesting. I always when done with subtlety and inkeep it in mind that no matter how the right context they can be great,beautiful I make a website the but more often than not I find themaverage user only really wants to annoying, but that might just be myspend about 10 seconds on it, so taste, others will probably disagree,let them do that, cut the crap. which is a good thing.What animation techniques and What do you think we’ll see in la-effects applied to navigation and yout and UI design in 2013?user interaction will we see? Will Simplicity, app-inspired design,we finally move beyond Parallax responsive, single page websites,scroll? alternative navigation patterns...?Personally I hope we don’t see any, I think this comes back to “why”I’m not a big fan of things moving and “how” again. The thing to focusall over the screen, just feels like a on is not how a website’s design/gimmick too often for me. When layout/UI is executed but why. Asflash websites died one of the long as the way you’ve chosen tothings that I was pleased about build and design your site works Web Design Trends 2013 34
  • 35. for that particular project thengreat. Whether it’s single-page,responsive, light, dark, covered ingradients or really minimal doesn’treally matter as long as it works forthat particular clients site. Trends or“ I think this comes backto WHY and HOW again.The thing to focus on is notHow a website’s design/layout/UI is executed butWhy. ”movements in web design are notsomething that I think a designershould really be trying emulateor follow when starting a newproject, just because everyoneelse is making minimal, responsiveone-page sites that look like appswith circles for navigation andFutura for body text, doesn’t meanthat’s right for what you’re workingon. Do your own thing, ignoretrends, start your own trends if youfeel like it and above all think aboutwhat the end user needs from whatyou’re creating. Web Design Trends 2013 35
  • 36. Bruce LawsonEvangelist of Open web standards “ I think simplicity’s theOpera evangelist, co-author of“Introducing HTML5” and web standardslovegod. Guinness-drinking, kickboxing point. Mobile stuff needspoetry freak. Man with MS. to be simple, but so does everything else. ” Web Design Trends 2013 36
  • 37. D o you think the kind of sim- plicity we see in apps is goingto be a big thing in design more Do you think web-standards ba- sed Apps will end up putting an end to native Apps?generally? I doubt standards-based AppsYes. I think simplicity’s the point. I will completely kill native Apps. Ioften say to people about mobile, think native Apps are temporarilythe usability gurus always point to very important because the web-standards stuff hasn’t yet got“ I think simplicity’s the the capability of the native stuff, but the gap’s closing.point. Mobile stuff needsto be simple, but so does What trends do you see comingeverything else. ”mobile as being different because in the near future in web design? Access to devices capabilities. So,people are time-constrained three years ago, if you wantedand task-focused, and therefore to access GPS geographicalyou should only give them the information on your phone, youinformation they need to fulfil the had to have a native app becausetask. That’s true, but it’s also true you couldn’t do that on the web,of everybody all the time. If I go to and now every browser on everya train website, I don’t really want device is doing that. And thento see a picture of Richard Branson the ability to upload photographssmiling at me, I don’t want to readthe Chief Exec’s ambitions and lifehistory. All I want to know is what “ Access to devices capa- bilities, GPS, microphone, ”time my train is and how much camera, is. And I think, yes, mobile stuffneeds to be simple, but so does directly from the web, which weeverything else. People have been can do now. There’s somethingused to making desktop sites that called getUserMedia, a spec Iare full of shite just because they’ve very much like, and that allows agot space for it, and they need to website (with your permission) tostop. access the videocamera, it might Web Design Trends 2013 37
  • 38. be a webcam or the front-facing imagine in the next 12 months that’llcamera on your phone, and then be available in the newest browsersit can access the video stream on devices that have that capability,and film you and the Javascript yeah. That’s all part of web RTCon the website accesses the [Real Time Communication] at thevideo feed in real time and can moment.identify where your face is anddo facial recognition, and when You did a talk on what’s next init determines where your mouth Responsive web design, whereis it’ll draw a Super Mario Brothers you mentioned web on TV. Is thatmoustache where your mouth is. what’s next?And this, of course is the zenithof tech. But what this is really for The TV manfacturers really wantis in-browser video conferencing, web on TV to work. I think at theso the website can access your moment the killer app hasn’t beenmicrophone and your camera and “then connect it up to someone The TV manfacturers rea-else’s website where they can hear lly want web on TV to work.your voice. You’ve effectively gotvideo conferencing with no third- I think at the moment theparty app. killer app hasn’t been in-“ I imagine in the next 12months that’ll be available vented. ” invented. Nobody’s yet come up with the killer product. TV’s greatin the newest browsers on for some things and it’s rubbishdevices that have that ca- for other things. Nobody is goingpability, that’s all part of to want to put all their socialweb RTC [Real Time Com- networking stuff up on the telly ” when your grandma and yourmunication]. kids are in the same room. There’s things you don’t want in a familyI can’t promise anything for Opera, space. You’re unlikely to want toand I certainly can’t promise type an e-mail on the TV becauseanything for anyone else, but I your hunting and pecking with Web Design Trends 2013 38
  • 39. the remote for the letters and it’s I’ve got differentiation. I think that’srubbish. But then TV’s great for increasingly the case, people wantshared viewing, so I could imagine to have that separation, otherwisethat a killer TV app would let you you just work all the time.look at your Flickr pictures as aslideshow, so instead of the family Have you read anything recentlygathered round a laptop, the family that’s particularly made an im- pact?“ TV’s great for sharedviewing, so I could imaginethat a killer TV app would Yes, I read the W3C Pointer Events Specification, which Microsoft wrote, which is making writinglet you look at your Flickr websites that work with a pen orpictures as a slideshow. ”can be gathered round a big screen touch or a mouse much more sane and easy and I think it’s good work by the mighty Microsoftand it’s more sociable. I think that standardising yet, the technology is there, butwe haven’t yet worked out how to What kind of technologies areuse it best. you looking at learning? Any new stuff you want to get into?“ Nobody wants to writea Word document on their I’m not a very good Javascripter, so I’m looking to improve that andtelevision. ”Nobody wants to write a Word I’m ultimately interested in just improving my general scripting ability, so I’ve got a book on Pythondocument on their television, to read on the train. With a degreebecause a) it’s rubbish as an in English Lit and drama, I’m not aexperience because you haven’t got natural computer person and I’ma keyboard, and b) TV’s leisure, and a bit slower than someone who’swriting a Word document’s work. I done a degree in computer science,work from home so I make sure I but I’m interested in learning thatonly work in my office and the only kind of stuff yeah.thing I do in my office is work, so Web Design Trends 2013 39
  • 40. For someone who’s starting out, most politicians in the Westwhat would you tell them to learn are politics and philosophy andfirst? economics graduates, and most politicians in China are engineers,“ But anyone who tells and there’s a huge focus and a huge respect for engineering out there.them to just learn Javas- You see some phenomenal codecript because HTML and and dedication to making greatCSS are easy, not to listen stuff coming out of China, and also ”to them. India. Places like Bangalore, there’s incredible coding in India.Well if they want to learn web stuff,to learn HTML5 and CSS and thento learn Javascript. But anyone whotells them to just learn Javascript “ We’re seeing an extraor- dinary rise in consumption of the web in those pla- ”because HTML and CSS are easy,not to listen to them because it’s ces.easy to be rubbish at them and it’shard to be good at them, to write We’re seeing an extraordinary risegood, structured code. The best in consumption of the web in thoseway is view source. Find good places. Not so much producingwebsites that people recommend, websites, although Chinese socialand hit view source, then muck media has just been creditedabout with it. this week with persuading their government to close down someYou mentioned India and Chi- of the forced labour camps, sona. How do you think those fast- we’re seeing technology enablinggrowing economies might affect people to have a voice and a say,the web and mobile industries in which warms the cockles of mythe future? heart.They will affect it in ways I can’t I’m going to tell a story this afternoonguess at, but the effects they’ll have about a website called Igniter. Itwill be profound. China, particularly. was set up by three Jewish guys inSomebody told me that statistically, New York and it’s a social network, Web Design Trends 2013 40
  • 41. a dating agency, for nice, Jewish and they’re going great guns there,kids in New York who for cultural and that’s the beauty of the Worldreasons didn’t want to go out on Wide Web. That’s what you losedates one-to-one. So they would if you only think about your ownorganise shared trips to the theatre local area. You might think youror picnics, so groups would go out business is only focused on yourand if people hit it off they could local area but if you deliberatelysubsequently begin dating, but it restrict it you’ll never know whetherwas culturally a lot less intimidating. you have a more global businessIt didn’t take off, they spent lots of advertising it but they onlygot 50,000 users. And then theynoticed they were getting loads of“ That’s the beauty of theWorld Wide Web. That’swhat you lose if you onlythink about your own localarea. ”hits from India and Pakistan andplaces like that, where there’s nota great Jewish community butthat model of shared dating worksvery well with extended Hindu andMuslim and Sikh families. Theyrealised that they were gettingmore signups a week from Indiathan they had in their first year in theUS, so they just relocated it. Thosethree guys who had never beenout of North America all relocatedto Bombay and they re-brandedas India’s premier dating agency Web Design Trends 2013 41
  • 42. Luciano FogliaMultidisciplinary Visual Artist “ I think we will see aLuciano Foglia is a multidisciplinaryvisual artist based in Berlin and London.He has been working in interactive lot more applications indesign, art and music since 2001. His integration with otherpersonal time is spent exploring new services, taking the web ”ways of expression in music, design and beyond the He works commercially as a SeniorInteractive Designer and Art Director. Web Design Trends 2013 42
  • 43. W hat trends do you see co- ming in the near future inweb and mobile design? Art Director and Senior Interactive Designer, so I don’t only look for means of expression on the web (even if this one is my main channel).This is a transition moment in the I’m also interesting in other fields. Iweb design industry. I can see mostly use web technologies formany interesting possible trends my personal projects because ofcoming up. Change is always their accessibility. What I’m traininggood, and it’s great to see how in now is WebGL as a platform tomany designers and artists are receive external stimulus as midi“ I see lots of simple andbeautiful interactive designconcepts coming in the “ WebGL could become a very powerful tool for vi- sual artists to express ideasfuture. Expect a focus ontypography and getting the through the web. ” signals, sound and moving out of HD displays.taking on these challenges to ” I think it’s a great technology and still pretty fresh. I believe it could become an amazing platform forexperiment with new technologies the web, but still like many othersand improve the user’s experience needs a high level of understandingon all platforms. So going back to of code. We have seen verythe question, I see lots of simple interesting projects done with thisand beautiful interactive design technology, but not as many Iconcepts coming in the future. would like to see. Or maybe not inExpect a focus on typography and the way I would like to see them.getting the best out of HD displays. I’m blown away every time I see it’s potential. It could become a veryWhat technologies are your team powerful tool for visual artists totraining in now? Which discipli- express ideas through the web. Ines will you be focusing on in the believe the key is to think outside thecoming months and years? box so that we don’t limit ourselves just to what the technology wasI’m a visual artist and I work as an made for. Web Design Trends 2013 43
  • 44. In standards-based web design, In technological and social ter-what animation techniques and ms, how do you think the webeffects applied to navigation and will evolve in the next few years?user interaction will we see? Willwe finally move beyond Parallax I think we will see a lot morescroll? applications in integration with other services, taking the webAs we overcome some performance beyond the browser. This makes lifelimitations we will see more rich a lot easier for users and improvesexperiences to come. For sure theemphasis is on “graphic design witha sense of depth” at the moment.Because of this, the scroll gained “ I think we will see a lot more applications in inte- gration with other services,importance like never before, notonly to browse the content but also taking the web beyond theto interact with it. I would like tosee how we creatively take betteradvantage of it in integration with browser. ” productivity. In social terms the internet is playing a very interesting“ I would like to see how role, not only on a daily basis but also for long-term social changewe creatively take better purposes. What we saw in Egyptadvantage of integration in 2011 was a clear example ofwith 3D techniques.3D techniques. Moving beyond ” how social media can accelerate a revolution, and we are also seeing it in other parts of the world. TheParallax scroll is a matter of time. It internet belongs to the people andwill happen as soon as users start it can represent unrepresented andto adopt new ways of navigating marginalised sectors of society andthe content. Every step towards provide them with a platform to beproviding a more interactive and heard.immersive experience on the webis a new learning process for theusers. Web Design Trends 2013 44
  • 45. Ben ClineInteractive Designer at Rally Interactive “ Most innovation withCo-founder and creative director atRally Interactive. Ben is passionateabout interactive design, experiences interaction will be throu-and strategy. gh Web GL and native apps. ” Web Design Trends 2013 45
  • 46. W hat technologies are your team training in now?Which disciplines will you be fo- we finally move beyond Parallax scroll?cusing on in the coming months The Parallax effect won’t die anyand years? time soon. It has been around for as long as I can remember (inRally Interactive is focused on the early days of Flash and for acreating engaging and intuitive long time in film). When it comesinterfaces. The technology behind to touch screens, I’ve started tothem doesn’t matter. For example, see Parallax animation becomelast year we launched an iOS app popular as well as gesture basedfor National Geographic - “National interfaces. I think gesture basedParks by National Geographic”.“ When it comes to ourwork, we embrace any te- “ Many of us here at Rally believe Web GL has a pro- mising future when it co-chnology or platform. ”What many people don’t realize is mes to web design. ” apps will continue to grow as userswhile it was only our 2nd encounter become more savvy with exploringdesigning and developing on the hidden UI’s. However, many of usiOS platform, it was actually the here at Rally believe Web GL has1st app we’ve ever built natively in a promising future when it comesObjective-C. The first iOS app we to web design. It will take yearsmade, “Canyon Country National but eventually HTML will beginParks”, was actually built using a to fade as the platform of choicenon-native iOS framework called for websites because it was neverCorona. When it comes to our meant to serve up rich media orwork, we embrace any technology interactive experiences in the firstor platform. place. Most hardcore programmers will probably agree that HTML andWhat animation techniques and CSS mark-up languages are noeffects applied to navigation and longer ideal to build on.user interaction will we see? Will Web Design Trends 2013 46
  • 47. What do you think we’ll see in la- Can we predict an explosion ofyout and UI design in 2013? creativity in interaction and ani- mation now that the technologyI think 2013 will be a year of limbo is available and becoming morewhen it comes to [responsive] accessible from a web standardswebsites. They will continue to be point of view?wildly popular but will lack when itcomes to innovation and creativity. Most innovation with interactionMost of this won’t be the fault will be through Web GL and nativeof creatives or Agencies, rather apps. Unfortunately, the responsivewebsite timelines and budgets will era of websites will temporarily stiflebe stuck in the pre - fragmented some creativity on the web until alldevice era. Most timelines will be“ I think 2013 will be a yearof limbo when it comes to “ Most innovation with in- teraction will be through Web GL and native apps.[responsive] websites. They Unfortunately, the respon-will continue to be wildly sive era of websites willpopular but will lack when temporarily stifle some ”it comes to innovation and creativity.creativity. ”eaten up testing and optimizing browsers consistently support the newest technologies. If companiesrather than pushing innovation and want to push the boundaries ofcreativity. That being said, the native creativity in responsive design, theyapp world is wide open. Gesture will have to commit more time andand invisible UI’s will become more budget.popular and more intriguing whileWeb GL will [hopefully] start to besupported on mobile browsers,further pushing browser basedlayout possibilities. Web Design Trends 2013 47
  • 48. Aarron WalterAuthor of “Designing for Emotion” “ We’ll begin to moveAarron Walter has been buildingwebsites professionally since 1999, andhas taught interactive design courses towards an era of flatat colleges. He enjoys sharing his ideas design that emphasizes ” legibility and usability.about education, findability, and designat conferences and organizationsaround the globe. Web Design Trends 2013 48
  • 49. In technological and social ter- ms, how do you think the webwill evolve in the next few years? in the near future in web and mo- bile design? What do you think we’ll see in layout and UI design in 2013?We’re heading towards a Web ofloosely connected services. Instead In the short term future I see a trendof building a web app that needs towards an aesthetic that reflectsto do twenty things for customers, an honesty of our materials.we’re starting to focus just on The heavy use of lighting effects in interactive design will fade, and“ An ecosystem of connec-ted services makes buildingapps easier, and reduces designers will move towards flat, simple designs that no longer try to emulate the physical world. “the burden of content input The heavy use of lightingon the shoulders of users as effects in interactive designthey can reuse profiles and will fade, and designers willcontent. ”core workflows and rely on APIs, move towards flat, sim- ple designs that no longerintegrations, and hopefully web try to emulate the physical ”intents in the near future. We stitch world.together our favorite services usingIf This Then That, we pass photo We’ll stop shoe-horning interactionediting tasks over to Aviary, we let design into illustrated physicalDropbox hold our stuff then grab objects like books, radios, andit from desktop, web, and mobile calendars, and we’ll begin to moveapps. An ecosystem of connected towards an era of flat design thatservices makes building apps easier, emphasizes legibility and usability.and reduces the burden of contentinput on the shoulders of users asthey can reuse profiles and contentthey’ve created elsewhere.What trends do you see coming Web Design Trends 2013 49
  • 50. What technologies are you tra-ining in now? Which disciplines What should the new designwill you be focusing on in the co- principles be in a future whereming months and years? web and mobile design must be focused on user experience andI’m not big on fetishizing content?technology. It empowers us tomake things, but what language, or I don’t know that they’ll be anytechniques power a site isn’t what different than they ever have been,moves people. They’re moved by but I think we’ll be more aware ofthe experience we create for them. principles now that our favoriteI’ll be thinking about what makes computers are in our pockets.people tick in the years to come The heuristics that have guidedso I can discover ways to create software design for years still applymore memorable experiences for to mobile design, but with limitedpeople. space on mobile devices, we’re forced to really consider the valueWhat should a web design new- of all elements and options in a UI.bie concentrate on learning? How do you think fast-growingLearn to prototype quickly. Learn to economies like India or China areuse things while you design them. going to influence the web andLearn to not look to trends in your mobile industry?“ In our industry and in life, I suspect India and China will provide a lot more developers tothe only thing that is un- the web industry, which are greatlychanging is change. ”medium for your inspiration, but needed right now. It’s really hard to hire skilled developers as there’s heavy competition for them in theinstead look at the history of other industry.crafts for insights. Learn to change,because in our industry and in life,the only thing that is unchanging ischange. Web Design Trends 2013 50
  • 51. Trent WaltonFounder & 1/3 of Paravel Inc. “ At Paravel, we’re fo-Trent Walton is founder and 1/3 ofParavel, a small web shop based out ofthe Texas Hill Country, where the lake cused on being as devi-levels are constant and the chicken ce-agnostic and reso-fried steaks are as big as your face. Dave lution independent as ”Rupert, Reagan Ray, and he have been possible.working together building for the websince 2002. Web Design Trends 2013 51
  • 52. W hat trends do you see co- ming in the near future inweb and mobile design? in the coming months and years? At Paravel, we’re focused on being as device-agnostic and resolutionHopefully, as we progress we’llstop thinking about the the webin separate buckets. Words like “ We’re building responsi- ve sites exclusively and are using things like font iconstablet and mobile mean less andless as the lines between them and and SVG images whenever possible. ”“ The most exciting partof design is working to un-derstand all the devices out independent as possible. We’re building responsive sites exclusively and are using things like font icons and SVG images wheneverthere so that we can crea- possible. There are a lot of UIte a single, sensible design patterns that need to be rethoughtthat travels across as many to work in a responsive or multi-of those devices as possi- device environment, so that part of ” the work is particularly exciting toble. us.desktop browsing environmentsblur. For me, the most exciting partof design is working to understandall the devices out there so that wecan create a single, sensible designthat travels across as many of thosedevices as possible. That includesthings like maintaining hierarchyas well as optimizing for a range ofconnection speeds.What technologies are you/ yourteam training in now? Which dis-ciplines will you be focusing on Web Design Trends 2013 52
  • 53. Oliver ReichensteinDesigner at iA Inc. “ I expect the app worldOliver Reichenstein studied Philosophyin Basel and Paris. He worked as brandconsultant for Interbrand Zintzmeyer & and traditional WebLux for four years. In 2003, he moved design to get closer toge-to Tokyo where he founded his design ther in terms of functio- ”agency, Information Architects (iA). nality and aesthetics.Today, iA has offices in Tokyo, Zurichand Berlin. Web Design Trends 2013 53
  • 54. W hat trends do you see co- ming in the near future inweb and mobile design? that within a foreseeable future, the main screen, Web designers will think about is the mobile phone.You can already see it happening. What should the new designMashable of the The Next Web, principles be in a future and bet web and mobile design must beon clean, generous, responsive focused on user experience anddesign with a lot of typographic content?care. I bet that a lot of corporateand news site are going to follow Simplicity. Scalability. Speed. Stopthat trend. The challenge will be thinking in fixed widths, platforms,“ browser versions, download speed Clean, generous, res- standards. Responsive design isponsive design with a lot of not just about responsive layouttypographic care. I bet that grids and clever ways of dealinga lot of corporate and news with big picture formats, it is also about a new dimension of screensites are going to follow typography.that trend. ”to find a good balance between Can you pinpoint any visual trends or design elements thatcleanness and density. With the might emerge in 2013?advent of responsive design thereis and entirely new set of screen I try to avoid thinking in termstypographical challenges waiting of surface aesthetics. Interfacefor us. After Web 1.0 aka the nineties design gets better the less youand Web 2.0 aka the 2000s, weare about to enter a third phasein Web Design. I expect the appworld and traditional Web design “ There will be another ge- neration of further visual ”to get closer together in terms of simplicity in UID.functionality and aesthetics. Withmobile platforms gaining more think in terms of style. But from theand more market share, it might be technical conditions it seems clear Web Design Trends 2013 54
  • 55. that also aesthetically, there will be working on new interaction pattersanother generation of furthered for writing and reading on the screenvisual simplicity in UID. Microsoft and we are developing new framewent in that direction and might works to deal with the multitudessomewhat turn away from it in of screens and interaction patternsfurther iterations. I am prepared to that contemporary interactionsee the first traces of Ive shaping designers need to deal with. Ourthe surface of OSX and iOS, which tools are less and less specificwill definitely result in a simplified programs or programmingcleaner version of Apples surface languages. We start with research,design aesthetic. Hopefully, Ive will wireframes and initial mockups, butnot just simplify the surface design, we soon move towards working in prototypes that slowly evolve into“ Every trend comes with acounter trend, we can alsobe prepared for more baro- the final product. In technological and social ter- ms, how do you think the webque elements trying to set will evolve in the next few years?a counter point. ”but get to a simpler look and feel Just as with the new possibilities, Web technology, informationthrough a simpler interaction architecture, interaction design anddesign. Since every trend comes screen typography have becomewith a counter trend, we can also increasingly interesting, they havebe prepared for more baroque or become increasingly difficult. Weplayful elements trying to set a have to prepare for an increasinglycounter point. challenging technical setup. Right now there is a clear trend towardsWhat technologies are your teamtraining in now? Which discipli-nes will you be focusing on in the “ We have to prepare for an increasingly challengingcoming months and years?We are exploring the new screen technical setup ” a Web that is mostly handledtypographic territory, we are through a small touch screen. Web Design Trends 2013 55
  • 56. I would not be surprised if, forexample, we end up with a tinydevice with a form factor of wristwatch that has a flexibility to fluidlymorph into a bigger device. Thuswith a device that in itself hashighly variable different screensizes. We witnessed the end ofthe fixed screen format,the end“ We witnessed the end ofthe fixed screen format,theend of the pixel, and theend of design principlesgeared by the desire of vi-sual control. ”of the pixel, and the end of designprinciples geared by the desire ofvisual control. In the mean time,the definition of these liquid designprinciples is far from clear. Thingsare going to stay exciting. Web Design Trends 2013 56
  • 57. LegworkBy Sean Klassen “ Most innovation withLegwork was born from theunderstanding that you can build asustainable studio on the principles of interaction will be throu-creativity, innovation and a DIY ethic. gh Web GL and native apps. ” Web Design Trends 2013 57
  • 58. W hat trends do you see co- ming in the near future inweb and mobile design? this industry, so the most important trait you can probably have is a passion for learning new things.I think we’re going to start seeing What technologies are your teammore exploration with 3d and training in now? Which discipli-immersive video. A lot of Flash sites nes will you be focusing on in thewe’re going down this direction coming months and years?5/6 years ago and then things wentback to much more basic layouts We want to keep pushing what youafter the iPhone came out. The can do with Javascript, CSS andtechnology is beginning to catch HTML. Additionally, we build mostup though. projects in Ruby on Rails these days. I’m curious about gettingAs an agency, what kind of profi- more into WebGL and other thingsles do you look for? like three.js to push the experience envelope further.Good people are hard to find andin great demand right now. We’re What animation techniques andactively looking for developers that effects applied to navigation andhave great javascript skills and still user interaction will we see? Willhave an eye for design (if you’re we finally move beyond Parallaxthat person, get in touch!). Since scroll?we are a small shop, we need I pray we move beyond the parallax“ We’re actively looking fordevelopers that have greatjavascript skills and still have scroll. It’s probably the most overused (in inappropriate ways) trend I’ve seen in the last ten years. ” There’s a time and place for it, butan eye for design. I’m so tired of seeing people do it just because they can. In mostpeople who are well versed in a cases the implementation andnumber of areas and aren’t afraid performance is really bad too. Youto jump around and try new things. can’t forget that the way somethingThings are constantly changing in works and feels is just as critical to Web Design Trends 2013 58
  • 59. the design as the visual aspect, if become ever more important. It’snot more so. probably not long until mobile isAnyway, like I said above, I think the dominant form of browsing. Itwe’ll start seeing more and more also seems that people are getting“ I think we’ll start seeingmore and more with 3D.Hopefully people can keep “ People are getting away from skeumorphic styles that have dominated theit tasteful. ”with 3d. Hopefully people can keep last few years and are ins- tead opting for simpler, fla-it tasteful. We’ve also been doing alot with png sequences to emulatethings you used to only be able to tter styles. ” away from skeumorphic styles thatdo with video, but with the added have dominated the last few yearsbonus of transparency. and instead opting for simpler, flatter styles (think Windows 8,What do you think we’ll see in la- Svpply, etc.)yout and UI design in 2013?Simplicity, app-inspired design, Can we predict an explosion ofresponsive, single page websites, creativity in interaction and ani-alternative navigation patterns...? mation now that the technology is available and becoming moreSingle, long scrolling sites will accessible from a web standardsstill be popular. They’re great for point of view?“ Single, long scrolling sites Yes, to a point. IE8 isn’t going anywhere in the near futurewill still be popular. They’re though and it’s really just as bad atgreat for telling a singular supporting these new technologiesstory. ”telling a singular story. Responsive as 7. So, a lot will depend on the audience you have to target.sites and mobile targeting will Web Design Trends 2013 59
  • 60. UltranoirDigital Savoir-Faire, most awarded studio on Awwwards “You will have fast andUltranoir is a human-sized studio drivenby passion. Their byword is ‘usefuldesign’, since they believe that the role easy access to whatof artwork is to serve the application, you’re looking for butits objectives and the end-user - not with creativity, style and ”the other way around. Ultranoir has even emotion!received numerous awards for its onlinecreations. Web Design Trends 2013 60
  • 61. W hat trends do you see co- ming in the near future inweb and mobile design? quality, in terms of interactivity, of Flash websites. However, we should not recreate what was done in Flash some years ago (we didI’m not really into trends but I know this at Ultranoir and I think it’s partwhat I would love to see in web of the process). Now, we have todesign! More experiences, more create some new experiences withinteractivity, more creativity! the present and future technologyDuring the last days of Flash, (HTML5, CSS3, JS, WEBGL..) andsomeone said the reason for its devices. This will be fully possibleending was that designers went when 80% of people use moderntoo much into full experience browsers. That’s not the case rightwebsites, forgetting efficiency and now.the end-user... and that the future ofweb will be focused on utility now. As an agency, what kind of profi-That’s not totally wrong, I have to les do you look for?admit, but I want utility / efficiencyAND creativity. This means that We are always looking for talented front-end developers with great“ We have to create somenew experiences with thepresent and future tech- experience in producing advanced HTML websites and also with a strong creative approach. What the market is really missing is morenology HTML5, CSS3, JS, people who mix technology andWEBGL and devices. This creativity.will be fully possible when What technologies are your team80% of people use modern training in now? Which discipli-browsers. ”you will have fast and easy access nes will you befocusing on in the coming months and years?to what you’re looking for in any We are always improving our skillssupport but with creativity, style in the usual trio: HTML5, CSS3 andand even emotion! Now I can Javascript. We are very interestedsee HTML5 websites reaching the by Adobe’s news CSS properties Web Design Trends 2013 61
  • 62. such as CSS Regions and Filters. devices with their own capabilities.We have to improve our skills on On a laptop, you rollover, drag andCanvas, SVG, 3D… click and on a tablet you will slide,Of course, Front-end will remain a touch, turn... So we are trying tokey discipline on our HR strategy bring closer both experiences. It’sbut we’ll also focused our effort in not easy. I saw a great approach onUX and content. A better content a website done by Hello Monday.within a better experience should We are on the same the perfect receipt. I have no problem with Parallax scroll if it serves the experience.What animation techniques and I think this system is perfect foreffects applied to navigation and storytelling websites. You scrolluser interaction willwe see? Will down like turning the page of awe finally move beyond Parallax book. There’s still potential here.scroll? What I can’t stand anymore are some parallax websites using thisAs I said before, companies like effect just because they think it’sAdobe are working on some great trendy (it’s not anymore). Using antools to enhance user effect for the effect is meaningless.interaction. In term of layout design, But you never know. One day, aI think we’ll see more and more guy will come along with a newwebsites inspired by print design. concept and it will create a trend,It’s already the case. Personally, as Ian Coyle did when he designedI study print design (magazine, the very first parallax web site forposters) a lot and I hope web design Nike, or When Gabo Mendoza created the first Flash website in“ In terms of layout design, the old days.I think we’ll see more and What do you think we’ll see in la-more websites inspired by yout and UI design in 2013?print design. ”will reach this quality. In 2013 I think we’ll have more simplicity and this is for twoAbout navigation and interaction, reasons:we now have to manage various Web Design Trends 2013 62
  • 63. China for example, IE6 is strong. to wait until 2014. That does not mean we won’t see masterpieces-There are too many differences in 2013 as some clients ask forin HTML rendering between all the websites for modern browsersbrowsers / OS / devices only. Hopefully! I love to read “for modern browsers only” in a brief!It’s a bit of a Babel tower now.That means that we spend a lotof time writing the same story in“ It’s a bit of a Babel towernow. That means that wespend a lot of time writingthe same story in many lan-guages. ”many languages so everybody canread it. The impact is that we haveto simplify the experience to limittime spent on HTML integration.Can we predict an explosion ofcreativity in interaction and ani-mation now that the technologyis available and becoming moreaccessible from a web standardspoint of view?Once 80% of Internet usersare speaking the same “HTMLlanguage”, we’ll see an explosionof creativity. New tools will beavailable and web designers in thestarting blocks! But I think we’ll have Web Design Trends 2013 63
  • 64. Ian HicksonHTML5 Specification Editor “ Mobile is where Desk-Ian Hickson is the author and maintainerof the Acid2 and Acid3 tests, and the WebApplications 1.0/HTML 5 specification. top was a decade or twoHe is known as a proponent of web ago, in terms of innova-standards, and has played a crucial rolein the development of specificationssuch as CSS. Hickson was a co-editor tion. ”of the CSS 2.1 specification. Web Design Trends 2013 64
  • 65. W hat will the trends be in web programming (front-and back-end)? Which langua- languages can have compilers that catch errors at compile time that are ridiculously time-consumingges or frameworks will gain more to catch at runtime), or supportconverts in the near future? (newer languages might not survive the next wave of new coolLanguages and frameworks pop tech, leaving you with legacy codeup, become fashionable, and die on an unmaintained toolchain). Often these tradeoffs are the right“ “ ” Sometimes using the an- ones to make -- these languages really *do* let you get somethingcient crufty languages off the ground way faster, and thatis a better idea than using matters (after all, if you don’t ship, itthe new hotness, because doesn’t matter what language you ”it’s more reliable. used). It’s really something each engineering team has to carefullyout quicker than I can actually consider.keep up. In practice what mattersis using frameworks that do what What should a newbie web deve-you need. Sometimes using the loper concentrate on learning?ancient “crufty” languages is abetter idea than using the new Depends what they want to do.hotness, because it’s more reliable. There are far more technologiesA lot of programmers these days available for developing Webuse scripting languages and solutions now than any one personlanguages with automatic memory could possibly learn at this point,management, weak typing, and so one has to figure out whatso forth, because they let you get area one wants to specialise in --stuff off the ground quicker than user interface, graphics, back end,anything else, but there is often a networking, storage, computation,cost, usually is in either performance etc -- and just work on that.(the system doing stuff tends tobe expensive in terms of CPU W3C, WHATWG, Mozilla, Adobe,cycles and memory), maintenance Google...What have they got in(strongly-typed, more structured store for 2013? Web Design Trends 2013 65
  • 66. As far as WHATWG goes, we’ve has trillions of pages, after all.been expanding to more than just Having said that, native platformsHTML, with new editors working and the Web have very differentin the WHATWG mailing list rather characteristics. The Web is by designthan elsewhere. You can see what radically vendor-neutral, and (to awe’re working on here: lesser extent in practice) device- neutral. This has huge benefits: nobody can single-handedly killAs far as HTML goes, the thing I’m the Web, for example. If you writeworking on right now is canvas on a Web page or application today,workers, but you can see the list of and then tomorrow your desktopwhat’s next to be worked on here: operating system vendor or your mobile phone handset vendor goes bankrupt, you can just buy anotherHow do you think fast-growing device and your page still works. Ifeconomies like India or China are you target a proprietary platform --going to influence the web and e.g. Amiga, OS/2 -- that then losesmobile industry? the support of its vendor, the result is that your application is no longerWhen working on HTML I try to usable.just look at the world as a single “ Innovation doesn’t ha-ecosystem, not on a per-countrybasis, so this isn’t something I think ppen in multi-vendor dis-much about. Having said that,there are already more people cussions. If you have a pro-online in Asia than Europe and prietary platform, it’s easy to add features to it. ”North America put together. Thereal dark horse is Africa.Do you think standards-based The cost of having a systemmobile apps will overtake native immune to the whims of a singleapps? vendor is that by and large, innovation doesn’t happen in multi-I’m not sure I agree with the vendor discussions. If you have apremise of the question. The Web proprietary platform, it’s easy to Web Design Trends 2013 66
  • 67. add features to it: you just do it. No that does nothing but bring up aneed to argue with anyone. On the Web browser, in fact). Mobile isWeb, a feature can only be added where Desktop was a decade orif every major implementor agrees two ago, in terms of’s worth adding, and that usuallyonly happens once it’s been provenin a native platform.“ So native platforms havethe edge when things arerapidly innovating. ”So native platforms have the edgewhen things are rapidly innovating.This is why the mobile world todayhas so much focus on nativeapps. Every new generation bringsradical new features, and the Webwill always be behind on those. Sothe cutting edge is native.“ Mobile is where Desktopwas a decade or two ago, interms of innovation. ”You can see this on desktop:innovation on desktop operatingsystems has slowed downdramatically, and as a result theWeb has been able to mature here.The result is that on desktop, Webapps are doing great (so great thatit’s viable to create a desktop OS Web Design Trends 2013 67
  • 68. Brad FrostMobile Web Strategist and Frontend Designer at R/GA “2013 will be the YearBrad Frost is a mobile web strategist andfront-end designer at R/GA and is basedout of beautiful Pittsburgh, PA. He is the of Performance. Peoplecreator of Mobile Web Best Practices, a are increasingly intole-resource site aimed at helping people rant with slowness in any ”create great mobile and responsive web experience.experiences. Web Design Trends 2013 68
  • 69. W hat trends do you see co- ming in the near future inweb and mobile design? web and mobile design must be focused on user experience and content?I’m calling it right here right now I summed up what I feel is cruciallythat 2013 will be the Year of important in my Principles ofPerformance. And if I’m wrong in Adaptive Design: ubiquity, flexibility,that assertion, I’ll slowly eat my performance, enhancement, andwords with tears in my eyes then a general notion of being futurecrawl into a corner until 2014. Why I say performance will be abig trend? People are increasinglyintolerant with slowness in anyexperience (web or otherwise), so “ Principles of Adaptive Design: ubiquity, flexibili- ty, performance, enhance-the services that will rise to the top ment, and a general notion ”will be the ones that are blazingly of being future I’ve been talking about‘performance as design’ rather As creators for the Web, it’s our“ Performance needs to beeveryone’s concern in or-der to create truly excep- responsibility to embrace and preserve the ubiquity of the web, which is easily its biggest asset and easily one of humankind’stional multi-device web ex- greatest achievements. We needperiences. ”than a handful of checkboxes to continue to return the Web to its intrinsically fluid state. We need to respect our users’ time and strivedevelopers need to concern to give them a highly performant,themselves with. Performance snappy experience. We also needneeds to be everyone’s concern to take advantage of the plethorain order to create truly exceptional of capabilities offered by devicesmulti-device web experiences. and browsers, but do so in a way that preserves the other principlesWhat should the new design of adaptive design. And lastly,principles be in a future where everything we do should be built Web Design Trends 2013 69
  • 70. to stand the test of time and should process, but that’s considerate of tomorrow’s Data is going more places thanlandscape in addition to today’s. ever before, so having a solid grasp on how to utilize and manipulate itWhat technologies are you tra- will prove to be an invaluable skill.ining in now? Which disciplineswill you be focusing on in the co- What animation techniques andming months and years? effects applied to navigation and user interaction will we see? WillI’m still very much a front-end we finally move beyond Parallaxdesigner, meaning that I prefer scroll?to focus on the interface side ofweb design. I don’t come from a I hate parallax. There, I said science background and The Nike Better World site wasI’d very much like to build up a solid amazing, but that doesn’t meancomputer science foundation. Ifeel it’s the only way to keep myselffrom feeling like I’m shooting in thedark every time I program. “ Think about how gestu- res, subtle animations and transitions can enhance (not distract from) the user“ Data is going more placesthan ever before, so havinga solid grasp on how to uti- experience. ” that everyone else should follow the leader. We have a whole slewlize it will prove to be an in- of animation tools, gestures and ”valuable skill. device capabilities at our fingertips, and we’ll find interactions andMy other big priority (dare I say new animations that are conduciveyear’s resolution) is to learn how to to the environment. Instead ofmanipulate data. I want to master miming parallax all day, think abouthow to pull in a data set from how gestures, subtle animationssomewhere, possibly combine it and transitions can enhance (notwith another set of data, and do distract from) the user experience.something with it. Right now I feelI can clumsily fumble through that Web Design Trends 2013 70
  • 71. What do you think we’ll see in la-yout and UI design in 2013?I think (and hope) we’ll continueseeing interfaces move towardssimplicity and intuitiveness ratherthan bells and whistles. As morepeople accept multi-device webdesign as reality, we’ll see manyresponsive patterns evolve and seeothers fade away. We’ll continueto experiment and see what sticks.There’s never been a more excitingtime to be a web designer. Here’sto 2013! Web Design Trends 2013 71
  • 72. Hinderling VolkartBy Michael Hinderling, Severin Klaus & Michael Volkart “ Clear and focused, re-Hinderling Volkart is one of the mostimportant digital agencies in Europe,based in Zurich, Switzerland. duced design. Content oriented! ” Web Design Trends 2013 72
  • 73. W hat trends do you see co- ming in the near future inweb and mobile design? front-end technologies: more and more logic, interaction and visual effects are handled dynamically on the client side. Browsers andClear and focused, reduced design. devices are becoming fasterContent oriented! and more powerful, opening new opportunities for innovativeAs an agency, what kind of profi- interaction design and UXles do you look for? implementations. As soon as WebGL arrives on mobile devicesWe are looking for people crossingthe borders between traditionaldisciplines. For example: gooddesigners with a sense for web “ We are still extremely ex- cited about the much more intuitive interaction touch ”programming or information devices can provide.architecture, or interactiondevelopers with a sense for we’ll see a lot more going on there.animations and interactions. We also expect to see a boost in already available ‘native’ stuff like“ We are looking for peo-ple crossing the bordersbetween traditional disci- video (camera), audio (mic) and CSS effects, with old browsers finally losing their right to exist. We are still extremely excited about theplines. ”Also project managers with agood feeling for design and much more intuitive interaction touch devices can provide.communications, which is very What technologies will be usedrare here in Switzerland. for mobile app development?What technologies are your team The best experience is still achievedtraining in now? Which discipli- with native implementations.nes will you be focusing on in the If the divergence of mobilecoming months and years? operating systems continues, we expect a growth in cross-deviceWe see an ongoing shift towards technologies- that technology Web Design Trends 2013 73
  • 74. should be the browser. This we finally move beyond Parallaxrequires a certain common scroll?alignment in features, performanceand rendering across all browser There’s an ongoing trend withengines. Chrome must become Parallax scrolling websites, andstandard on Android, Safari must it’s been taken beyond reasonkeep up and allow more fun, and if on many occasions. We still likeWindows Phone 8 succeeds we’ll the scroll interaction per se: it’sneed IE10+ not to fall back into intuitive, understandable andold behaviour. But who knows, all allows responsiveness. But we don’tof a sudden we might see Flash “enhance and become important We expect to see inno-for certain App developments. vation with touch and the exploitation of device sen- ”Can you pinpoint any visual sors.trends or design elements thatmight emerge in 2013? like those heavy one pagers that seek effects only, compromisingThere are various trends. In our performance and usability.opinion it’s important not just tofollow trends, but think about which We expect to see innovation with multi-touch and the exploitation of“ It’s important not justto follow trends, but thinkabout which design langua- device sensors. And we expect to see this slowly arriving on (mobile) desktop computers. But hey, there’s still a way to is appropriate for a spe-cific content or message. ”design language is appropriate for What do you think we’ll see in la- yout and UI design in 2013?a specific content or message. More app-like websites. Fully responsive. Touch-optimizedWhat animation techniques and interfaces and even touch-effects applied to navigation and optimized websites.user interaction will we see? Will Web Design Trends 2013 74
  • 75. Jeffrey ZeldmanFounder, Happy Cog. Publisher, A List Apart. “ We have to keep on-Jeffrey Zeldman is one of the world’smost renowned personalities in Web.Guru of Web standards Zeldman is thinking about mobi-also Founder, Happy Cog™ studios.Author, Designing With Web Standards.Publisher, A List Apart, A Book Apart. ” le-first & content-first.Co-founder, An Event Apart. Host, BigWeb Show. Web Design Trends 2013 75
  • 76. W hat trends do you see co- ming in web design? What do you send me? And how do you know if I’m on 3G? 50% of the time people are using their mobileI think people are getting our in their home or office, wherecontent in different ways, they’re they have fast bandwidth. I don’tfinding it in different ways and know, I have no way of knowingthey’re using different devices and, what your bandwidth is so whatfor good or evil, web-capable TVs do I send you? Whatever I sendare the next thing. So I think we you I’m going to make somebodyhave to keep on thinking about unhappy. Is there some other waymobile-first and content-first, I to go about it? Can we just carefullythink we have to keep on figuring choose our images, like, “I’m going“ I think we have to keepon figuring out what to dowith tiny devices that have “ Can we blur the back- ground so that there’s less bandwidth even if it’s hi- ”high-res screens and may gh-def?.have fast bandwidth butmay have slow bandwid- to use watercolors where even if ”th. it’s medium resolution, it still looks cool”. Can we blur the backgroundout what to do with tiny devices so that there’s less bandwidth eventhat have high-res screens and may if it’s high-def? There’s lots of stuffhave fast bandwidth but may have to think about, there’s lots of newslow bandwidth. I think there’s a challenges. I think responding to alllot of stuff to figure out. How do those new challenges now, whenwe keep using standards? How do we’re moving kind of faster thanwe develop new standards? I think reason, that’s a big challenge now.given the wide range of devicesand use-cases, one of my favorite And then taking better advantage ofimponderable questions is “I have mobile. Taking better advantage ofa screen that wants high-res Retina geo-location and built-in camerasimages, but I’m on 3G”. and all that stuff, whether native or Web App. Taking better Web Design Trends 2013 76
  • 77. advantage of those things. We’re studying the problem of Retina images and what to doI think HTML5 is key, because it’s about that. We’re looking into andso semantic and has new content working in native. But mainly we’resemantics like “article” and “section”. using good, structural HTML5.I think it’s made for the waywe’re publishing now and I thinkwe’re going to see big changesin how CMSs are designed toaccommodate mobile and orbitalcontent and I think we’re goingto see an end of pages, in a way.“ I think we’re going to seean end of pages, in a way.We’re going to stop focu-sing so much on pages andstart focusing on contentchunks. ”We’re going to stop focusing somuch on pages and start focusingon content chunks, and how westructure them and how we designthem for different use-cases,different devices.Which technologies are you fo-cusing on right now?Our front-end developers are usingLess and Sass now, not just CSS. Lessand Sass are CSS preprocessorsthat can speed up development. Web Design Trends 2013 77
  • 78. Rachel AndrewWeb Developer and Director of Edge of my Seat “ We’re going to haveRachel Andrew is a web developer,speaker and writer, Managing Director better ways to deliverat and one of thedevelopers of the really little content content to different de-management system, Perch. vices and different band- widths. ” Web Design Trends 2013 78
  • 79. W hat do you think are the key trends that will be co-ming in the near future? or a retina image, or a giant image for a posh display? Because it’s not just on screen size, it’s alsoI think it’s very interesting that a fewyears ago we were all expecting thateveryone was going to be on huge “ You can’t just make as- sumptions based on screen size, you need to be thin-screens with high bandwidth, andthat’s what we were all predicting. king, Where is this person and what connection are“ A few years ago we wereall expecting huge screenswith high bandwidth and they on? ” on bandwidth. If I’m on my iPad at home, on my Wi-Fi, I want theWhat’s happened is we’ve nice images so I can see them on the retina display. If I’m on the trainall ended up on tiny little somewhere and I’m going to usescreens with crappy band- 3G, I’d like to have the optimizedwidth. ”We were all saying “in a few year’s image. So it’s not just screen sizes, it’s to do with where you are and that, I think, is the biggest issuetime we’re going to have massive with doing responsive design atscreens and all this space and the moment. You can’t just makepeople are going to have really fast assumptions based on screen size,connections” and what’s happened you need to be thinking, “Where isis we’ve all ended up on tiny little this person and what connectionscreens with crappy bandwidth. I are they on?”think it’s in that area. What I hopeis that we’re going to have better The only client work we did thisways to deliver content to different year was this festival website and adevices and different bandwidths. lot of the traffic while the festival’sBecause at the moment, you know, on is obviously mobile traffic. Butthere’s the responsive images an awful lot of it is also people onproblem. How do I know whether laptops, so normal screens but onI should be serving a small image, mobile broadband, either Web Design Trends 2013 79
  • 80. tethered to their phone of withWi-Fi or whatever. Now, you can’tdetect those people easily. So it’show do we deal with that issue?There are a lot of people thinkingabout the responsive images issueand I think this is part of that. Howdo we deliver appropriate content,particularly when it comes toimages and video as well? Andhow do we let people make thechoice? Because sometimes you“ What kind of interfacesallow people to say - Giveme the best you’ve got, notthe low quality -? ”might be on a crappy connectionbut you actually do want to get thebig image for some reason. Whatkind of interfaces allow people tosay “Give me the best you’ve got,not the low quality”. That, to me,is an interesting area. It involvesworking right through frombrowser manufacturers and devicemanufacturers. It’s not an easything to solve, but I hope that’ssomething that will be solved. Thatwould really give us the ability todo truly responsive stuff. Web Design Trends 2013 80
  • 81. Epic AgencyBy Karim Maaloul “ People are looking forEpic is born from the passion and spiritof five specialists. They know how tostand out from the crowd and how to less content, more focu-find the perfect creative solution for sed on a particular sub-projects. Epic is a unique blend of mixed ject, easier to read andexperiences but they are all driven by easier to diffuse. It’s timethe very same passion, the constanturge for quality and creativity. to make the web easy. ” Web Design Trends 2013 81
  • 82. W hat trends do you see co- ming in the near future inweb and mobile design? We like it when the animation is used to make the best use of space and not only as an added effect to any static element.We are living a strangemoment today. We just buriedskeuomorphism to adopt a style “ Screens today are ei- ther very big or very small and we need to consider all“ We just buried skeuo- these sizes when designingmorphism to adopt a styleimpregnated with minima- a website. ” Screens today are either very big orlism and striking colors.impregnated with minimalism ” very small and we need to consider all these sizes when designing a website.and striking colors. Not exactly anevolution, but rather a rejection ofanything that might be identified asa sham. We are having an overdose “ Animating the elements that make up the website is sometimes the only way toof fake objects. Today it seems solid make it usable on a smar- ”blocks of color are all it takes to tphone.create UI elements. For how long?This large discrepancy is likely to Animating the elements that makereduce in the coming months. Not up the website is sometimes theeverything can be colored squares, only way to make it usable onand we will probably see designs a smartphone. Like making themixing textures and lights with content slide to display a navigationsolid colors. We just hope that the panel behind. Or making UImixture will not be too unpleasant. elements appear and disappear in a more intuitive way, dependingWhat animation techniques and on the behaviour of the user.effects applied to navigation and Also, these sliding effects thatuser interaction will we see? Will come from mobile devices, appliedwe finally move beyond Parallax to the desktop, help to establish ascroll? hierarchy between the elements Web Design Trends 2013 82
  • 83. and different content. It will totally change the way that people express themselves,“ allowing people who don’t want to For us, animation should run a blog because they think theyjust make things easier to don’t have enough to say to createunderstand and to use. ”For us, animation should just make content on the web anyway. That means we should learn a new way to organize the information “things easier to understand and touse. Unfortunately, today too many People are looking fordesigners are just trying to create less content, more focusedthe same effects we already saw in on a particular subject, ea-Flash some years ago, with the side sier to read and easier to di-effect that the only recognition ffuse. It’s time to make thethey get comes from the technicalperformance achieved and not theease of use that these animations web easy. ” from this behavior. People areshould provide to the user. looking for less content, more focused on a particular subject,What do you think we’ll see in la- easier to read and easier to diffuse.yout and UI design in 2013? An example of that is the classic html text editor that we can find onWe think we will have an explosion any CMS, so difficult to use for theof micro blogging pages like average person. It’s time to make the web easy.“ We think we will have anexplosion of micro blog-ging pages like checkthis. It Touch and gestures, media que- ries, responsive, retina display,will totally change the way webfonts, realtime web... Howthat people express them- do you think these techniques ” and technologies will evolve andselves. what will be next?checkthis. It’s probably the mostinteresting revolution we have We think we’ll see more and moreseen on the internet for a while. “mobile-first” websites that will Web Design Trends 2013 83
  • 84. make touch, responsive etc. a must is gaining a lot of followers thesefor new developments, bringing days and will continue in the nextthose techniques on the desktop few months. The web is a crowdedeven further. Then, place/device- space for back- and front-endshifting will probably boom in the framework, it’s hard to tell whichnext few years, not just for video ones will grow and which ones will lose but it’s great actually. We“ You’ll start a game or taskon your desktop, continueon a tablet and finish it on get to discover new tools daily and it’s evolving faster than ever making web development both a ”your phone. challenge and a joy.but for every content/app available. Can we expect an explosion ofYou’ll start a game or task on your creativity in interaction and ani-desktop, continue on a tablet and mation now that the technologyfinish it on your phone all totally is available and becoming moreseamlessly. We’re starting to see accessible from a web standardssome well-executed examples point of view?already today. We are more likely to see oneWhat will the trends be in web more year of look-at-my-flash-like-programming (front- and back- website-made-with-html-5 :)end)? Which languages or fra-meworks will gain more convertsin the near future? “ The web will be more fo- cused on the content and the way we show it to theRails is here to stay (obviously)and node.js will still gain followers(although we are still less convinced world. ” To be more optimistic, we haveabout it even if there are successful seen this end of the year twoexamples out there). On the front- or three websites that will reallyend, most serious projects will change the way we think about,go for either Sass or Less as the design, and animate a website incomplexity of the UI becomes more 2013. We think the web will beand more important. Backbone more focused on the content and Web Design Trends 2013 84
  • 85. the way we show it to the world. digital interfaces. We think it’s theCreativity is more a matter of telling next big thing in our business.a story to an audience than adding On a more technical level, oura 3D CSS effect to a block. That development team is focused onbeing said, it’s nice that today we Ruby on rails, Rubymotion, Mongocan finally add a 3D effect to an DB, but it’s not restrictive. We try toHTML element :) use whatever can serve our cause.As an agency, what kind of profi-les do you look for?We need people who are able toidentify with our clients. Extremelycreative designers are reallyappreciated, but one conditionis their ability to imagine how thedesign is perceived by peoplewho do not have their culture orgraphics references. A designermust create a bridge between hisown world and his target.“ We are really excited bythe integration of physicalobjects with digital interfa-ces. ”What technologies are your teamtraining in now? Which discipli-nes will you be focusing on in thecoming months and years?We are really excited by theintegration of physical objects with Web Design Trends 2013 85
  • 86. Unit9By Yates Buckley, Maciej Zasada, Gilles Boisselet “ Digital communicationUnit9 is a multidisciplinary productioncompany. Directors, writers andtechnologists, working collaboratively is trying to pay atten-to create content, advertising, utility and tion to usability, clarity,gaming. Outstanding digital experiences simplicity.. back to fun-across mobile, physical installations and damental design princi-the web. ples. ” Web Design Trends 2013 86
  • 87. W hat trends do they see co- ming in the near future in We mainly seem strong consolidation around html5 and “regard to visual design and UX Two areas to watch are:and interaction design? Whatabout content strategy? video based projects wi- thout Flash and AndroidThe buzz-word responsive design emerging as a dominant ”is just the beginning of a process platform.involving a more abstract designprocess for applications that span gaming for advertising. Apps are stillmultiple platforms. Rather than neglected by brands as this marketthinking about a specific layout, is different, more comparableand target device we will more and to the software market. In appsmore have to devise design systems you need to provide more than a brochure or an experience to meet“ The buzz-word responsi- an audience. Two areas to watch are: videove design is just the begin- based projects without Flash andning of a process involving Android emerging as a dominanta more abstract design pro- platform.cess for applications thatspan multiple platforms. ” “that allow the development teams The most important trend that is emerging is the at- tention to simplicity in in-to build for many different devices.Oddly one important player in thisarea, I think, will be 3D interfacedesign because it lends itself to teraction. ” What do you think has been thebeing easier to inform an interface most important trend in web de-across different devices and use sign in 2012?cases of the same device. The most important trend thatAnd in regard to technological is emerging is the attention totrends related to web develop- simplicity in interaction, which isment, video games, apps? partly seen in scrollable website Web Design Trends 2013 87
  • 88. but also in the particular interaction a broad audience reach and isdevices that afford to swipe, touch catching up to support a lot ofinteractions. This means that what we can do on the desktopgenerally, digital communication browser. We are also focused onis trying to pay attention to technologies that give you a feelingusability, clarity, simplicity.. back to of immersion - just like beingfundamental design principles. there. For example we’re looking forward to release of hardware likeWhat technologies are your team the Oculus Rift and in preparationtraining in now? What kind of of this refining a pipeline for 3Dprofiles do you look for? content creation whether delivered to browser or on other platforms.We are mainly working to takeour Javascript development to An integrated experience acrossthe next level. We don’t have any platforms is essential if we want user engagement. So another“ We are mainly working totake our Javascript develo- important space is the one created by combined technologies such as ” mobile enhanced live installations.pment to the next level. We see these as something morespecific specialist technology we than the parts that compose themare looking to bring in also because and a key connection from thewe have already dedicated teams collective to the personal.that cover many areas: nativeiOS, Android, Unity3d, Python, But beyond all the technologicalCloud Computing, Webgl, Three. developments the fundamentalsjs. However we also never stop are as relevant as ever: we needlooking for talent in these areas. good (interactive!) stories, good UX design and interface design.Which disciplines will you be fo- The most important work iscusing on in the coming months paradoxically still something weand years? do with pen and paper.One area we are working with ismobile web because it promises Web Design Trends 2013 88
  • 89. B-ReelBy Roger Pala, Creative Technologist and B-Reel Team “ We’ll see digital expe-B-Reel is a hybrid production companymaking digital, commercials, content,products and feature films. riences merging with physical objects, the combination of different platforms to enrich one single experience. ” Web Design Trends 2013 89
  • 90. W hat trends do you see co- ming in the near future inweb and mobile design? we’ll be in the full grip of it until I spot some ‘Raygun-esque’ work out there.It’s already here and nothing I think we’ll also see morefuturistic, but I think nowadays de-constructed online designedresponsive design is getting more spaces appearing, as a reactionand more relevant. It’s important to the pre-defined, customisable,that we think about design in a standardised web pages we seemdifferent way than we did before. to be creating en-masse right now.For the kind of experiences thatwe do, it’s usually not as simple What technologies are your teamas using some CSS media queries. training in now? Which discipli-Art Directors and Designers need nes will you be focusing on in theto fully understand the technical coming months and years?possibilities and restrictions ofeach platform in order to get the At the moment at B-Reel Londonbest out of each environment. we are lucky enough to have a very rich and varied set of technical skills.Can you pinpoint any visual Most importantly, we have peopletrends or design elements that talented enough to jump frommight emerge in 2013? project to project and adapt to theWe’re going to see more 90sinspired graphics and what’s been “ At the moment, we are doing lots of HTML5, Ja- vascript, WebGL, Digital“ We’re going to see more90s inspired graphics andwhat’s been called the ‘cult and Physical connections with Arduino and Open- frameworks, Processing,of ugly’. ”called the ‘cult of ugly’, it’s been etc. ” specific technical requirements ofaround for a while but it’s really that project. At the moment, westarting to take hold, I don’t think are doing lots of Web Design Trends 2013 90
  • 91. HTML5, Javascript, WebGL, Digital will evolve in the next few years?and Physical connections withArduino and Openframeworks, It’s always difficult to foresee what’sProcessing, etc. We are not focused next and sometimes may seem tooon any specific technology orprogramming platform, we ratheruse the best one for each specificexperience, not being intimidated “ Digital experiences mer- ging with physical objects, the combination of diffe-but excited by any new emergingtechnologies. rent platforms to enrichIn standards-based web design,what animation techniques and one single experience. ” pretentious to think that we can.effects applied to navigation and However, If we have to imagineuser interaction will we see? something, it’s probably some kind of evolution of what we are seeingWe think something we might see nowadays: digital experiencespretty soon is the use of CSS filters merging with physical objects, the combination of different platforms“ to enrich one single experience We think something we and making the interactions moremight see pretty soon is the and more natural and seamless.use of CSS filters and espe-cially custom filters. ”and especially custom filters. Withcustom filters you can basicallyuse your own shaders, so it’s likehaving custom CSS 3D Transforms.It’s going to be interesting to seehow people start to use them andthe pros and cons compared toWebGL.In technological and social ter-ms, how do you think the web Web Design Trends 2013 91
  • 92. F-i LondonBy Erik Jonsson, Art Director. “ We can’t really designFantasy Interactive (F-i) is one of theworld’s most famous full service digitalagencies. Founded in 1999, it’s a favorite for a specific platformof leading brands from Google and anymore, everything hasPorsche to USA Today. F-i has offices in to work across platfor- ”London, New York, San Francisco and ms.Stockholm. Erik Jonsson is Art Directorin London. Web Design Trends 2013 92
  • 93. W hat trends do you see co- ming in the near future indesign? I like that because it goes back to where advertising was 30 years ago, when they’d hire a specific illustrator to set a style for things.I think the biggest one, which has That’s always been the case, butbeen going on for the past year it hasn’t been as important for theand was cultivated by Dribbble, past 20 years when things wentis Americana, hand-crafted “typography where you basically So I think customizationcustomize everything. That was in design. Not the interface,a trend that spilled over into the interface is going to beeverything, so everything is bespoke standardized, platforms arenow.   For a while we’ve been going to be standardized,making bespoke design. I think but the way we deal withthat has to do with all the heritage branding and the way it’sbrands that came online, so the customized is probably thepeople who made jeans for 120years but then their family suddenlybecame famous when they werebought by a bigger company, and thing to focus on. ” into a more abstract, Photoshopthey need to keep the heritage feel style. So illustrators are becomingso a lot of the things we do for increasingly important for us againthem have to be custom. So I think when we need to set a specificcustomized designs for everything custom style for a client, a veryhave been really important, and bespoke thing, and I like that. So Ithat’s definitely going to continue. think customization in design. Not the interface, the interface is going to be standardized, platforms are“ So illustrators are beco-ming increasingly impor-tant for us again when we going to be standardized, but the way we deal with branding and the way it’s customized is probably the thing to focus on. The problemneed to set a specific cus- is just, you never know. So manytom style for a client. ” people have been trying to predict trends. Whatever we do now is Web Design Trends 2013 93
  • 94. going to be so lame in 6 monthsanyway, so we’re just trying to keepup!What about in terms of techno-logies? What do you think we’regoing to see emerge there?I think the fact that so manyplatforms have come out, and somany tablets - Microsoft is bringingout the fourth addition to thetablet scene - it’s just underlining“ We can’t really design fora specific platform anymo-re. We can’t make an app foronly the iPhone, everythinghas to work across platfor-ms. ”the fact that we can’t really designfor a specific platform anymore.We can’t make an app for only theiPhone, everything has to workacross platforms, which makes thecore concept of the idea so muchmore important because it has toshine through. It’s really hard toanswer that question. Web Design Trends 2013 94
  • 95. Hello MondayVisual Creative Design Studio “ 2013 will be the year ofIn 2006, two graphic designers anda web developer gave birth to HelloMonday in a 350 year-old townhouse mobile – once again. Orin Aarhus, Denmark. Today they have at least, mobile will con-expanded to additional offices in New tinue to grow in ”York and Copenhagen. Hello Monday importance.create trend-setting digital experiences,visual identities and graphic design. Web Design Trends 2013 95
  • 96. W hat trends do you see co- ming in the near future indesign? likely a transitional phase. Add to the above the fact that recently, more and more smart/Recently, a lot of focus has been connected devices have reachedon responsive design, and this the market and have becometendency is bound to continue, accessible to consumers, both inbut perhaps in a way that is more terms of price and ease of use.holistically founded. So, responsive These devices connect to themight not only be in terms of design internet via phones and/or desktops or on their own. This calls for a“ Responsive might not onlybe in terms of design and te-chnology, but also in terms complete rethink of the concept of interfacing with the web. Examples include a variety of personal tracking devices (Fitbit,of content and concept. ”and technology, but also in terms Jawbone UP, Nike+ Fuelband), sensors (Twine, Arduino powered sensors and others) and appliancesof content and concept. We may (home appliances, lightbulbs etc.)see content become increasingly “device specific, or maybe thecontext in which it is presented will Mobile will continue to growbecome in importance, and with OSsso. Either way, content is key. implementing mobile like in- terfaces, users will adapt to aWe may very well see an increasein solutions that combine mobile more mobile friendly internetand desktop devices in a way thatbrings users a third experiencealtogether. a 2 + 2 = 5 type of easily. ” 2013 will be year of mobile – oncescenario, if you will. again. Or at least, mobile will continue to grow in importance,Short term, though, the tendency and with OSs implementing mobilewill probably be a tablet/mobile like interfaces, users will adapt to afirst approach, but this is most more mobile friendly internet easily Web Design Trends 2013 96
  • 97. - even when mobile first strategies a true desire to do digital, and anaffect desktop versions of sites. innovative take on it, combined with a real sense of craftsmanship.Internet of things. Designers will We more or less built our businessvery quickly need to adapt to the on these factors, so they are key when we recruit.“ Internet of things. Desig-ners will very quickly need toadapt to the fact that digital “ We continuously work and train in pushing the limitsinterfaces shift, not only from of Javascript, HTML, CSS,desktop to mobile. ”fact that digital interfaces shift, not Canvas and WebGL. ” What technologies are your teamonly from desktop to mobile, but training in now?also from browsers and apps toentire ecosystems across different We continuously work and traindigital and social channels online in pushing the limits of Javascript,to an array of displays on actual HTML, CSS, Canvas and WebGL.products. Providing a consistentexperience spanning from retina- Also, combining web technologiesready sites to tiny LED displays on with anything that isn’t the web -physical products will become an or at least the web as we know it -everyday task. is a priority, and this spills over into working with e.g. Arduino (or similarAs an agency, what kind of pro- microcontroller) developmentfiles do you look for when sear- Mobile and tablet explorations -ching for new talent? it’s still brand new - and there are an abundance of things that areWe always look for nice people. yet to be done with this media,Nice is often underrated, but it technology-wise and immensely important. Nicewithout skills clearly doesn’t cut it, What technologies will be usedso we obviously look for talent. But for mobile app development?we also look for people that have Web Design Trends 2013 97
  • 98. Of course, native development will life cycle of said content. Relevantstill be the main language used for questions in this connection maymany apps. But, that being said, well be: Is this image or video goingwe believe that HTML/Javascript to be shared on other channels thansolutions (as either web-apps or our own? If so, how will it appearnative HTML/ Javascript apps when shared? Can we ensure that(packaged with Phonegap or the the brand identity carries through?like) have huge potential - since How can we entice users to shareyou can create once and deploy content?everywhere - and this use will rise “dramatically as people figure out We also see traditionalhow effectively HTML/Javascript,when used right, can perform on services transforming into amobile devices. more visual and image dri-Flash also has some of the samebenefits as the above - but we are ven direction. ” We also see traditional servicesexcited to see if this will survive the transforming into a more visualnext few years or not. and image driven direction, the new eBay and the new MySpaceCan you pinpoint any visual are great examples of how reallytrends or design elements that complex websites are transformingmight emerge in 2013? into a more straightforward and visual approach. This visualVisual will be the trend of 2013. tendency is rapidly evolving, andPeople are creating and sharing we will definitely see more websitesimages like crazy on services with larger amount of images andlike Instagram and Pinterest, and illustrations.visually-driven services play anincreasingly important role. With OpenType features becoming available in newer browsersThis calls for attention to detail in through CSS3, typefaces are finallycontent creation, both in terms of looking as beautiful on web as theyproducing high quality content, but do on printed media. We no longeralso in thinking through the entire have to limit ourselves to Web Design Trends 2013 98
  • 99. the sparse selection of web-safe spreads the best ideas from digitaltypefaces, we can almost pick design into print and even productwhatever typeface we want. This design. After all, with productswill lead to greater and more becoming more and more digital,advanced typography in digital and more and more companiessolutions in the future. becoming de facto software companies, the term ‘interface’Hopefully, with fewer and fewer may finally be recognised as nottechnical limitations on creating just what meets the user on thedigital solutions, the field in which screen of their laptop, tablet ortrends and tendencies develop mobile, but may refer to thewill naturally widen, and we will entirety of the interaction with aexperience a more multifaceted given product and its surroundinglandscape of trends. We are no ecosystem - digital or not.longer at the point where everybody “does rounded corners (or parallax More contrast in visual de-scroll sites) because they can, butpeople can bring all sorts of things sign, minimalistic design withto the table. lots of white space.“ Digital is drawing inspira- More geometric and sophis-tion from print and vice-ver- ticated design, like art deco ”sa. inspired visuals, with geo- metric typography and large ”We see more of the classic virtues of color surfaces.graphic design being adapted andused in creating digital solutions.Digital is drawing inspiration from These are all somewhat high levelprint and vice-versa. tendencies, but probably also the most interesting ones. If we are toAlso, we suspect that an increasing look at concrete tendencies thatnumber of digital agencies will we feel will be prevalent in 2013,assume the role of lead agencies for we are most likely looking at factorsclients, creating a ripple effect that like: Web Design Trends 2013 99
  • 100. - More contrast in visual design. On used to just add a bit of functionalityone side of the scale, we will see to an experience, but to create thesuper simple minimalistic design experience as a whole. More andwith lots of white space, while onthe other side we will see arbitrarycolor combinations, colors thatrange between real and unreal. Like “ More and more sites are being developed as Javas- cript-based web applications. ”90s bright colors in combinationwith a dusty 30s color palette.- More geometric and sophisticated more sites are being developed asdesign, like art deco inspired visuals, Javascript-based web applications.with geometric typography and Since the decline of Flash in thelarge color surfaces. browser, Javascript has been gaining momentum to pick upWhat animation techniques and where Flash left off. We’re finallyeffects applied to navigation and reaching a point where Javascriptuser interaction will we see? Will can fully take over this market andwe finally move beyond Parallax create a fully immersive experiencescroll? across platforms. So much more is possible now, we’re just barelyParallax scroll has become scratching the surface.mainstream, but don’t think wehave seen the last of it. What do you think we’ll see in la-It is one of a whole host of tools yout and UI design in 2013?that can be applied to increase theexperience, and it will most likely As the amount of touch devicescontinue to be so. However, the keeps growing, the necessity ofdays are long gone when it was things like larger buttons and touchenough to impress users in and interface-inspired navigation isof itself. As is the case with most more present. While skeuomorphictools, by the way. design may have been key in assisting users in transitioning toAnimation-wise, we’re starting to digital media (if I am used to asee that javascript is no longer being Web Design Trends 2013 100
  • 101. paper of security that my first still needs to look like a button, sodigital calendar actually looks and to speak.feels like a paper calendar), thisneed is less present today. So wehave seen a movement away fromthe heavily skeuomorphic schoolparticularly represented by Apple,“ We have seen a move-ment away from the heavilyskeuomorphic school parti-cularly represented by Apple,and on to a very different andmuch more flat and grid-ba-sed style as represented byMicrosoft’s Metro interface,for example. ”and on to a very different and muchmore “flat” and grid-based style asrepresented by Microsoft’s Metrointerface, for example. That mayhave taken things too far in theother direction, and it looks as ifthe lasting tendency is to be foundsomewhere in between the two.Google’s take on designinginterfaces could be an exampleof this. An inherently digital style,but with clear - though subtle- indications of, for example,navigational elements. A button Web Design Trends 2013 101
  • 102. Davin WilfridContent Delivery Man at Future Insights “ When the web is inDavin Wilfrid is Future Insights’ ProductDirector, responsible for content and“digital caretaking”, yet still finds time to your car and on your eye-make ukeleles on the side. glasses, we’re no longer talking about resizing windows for iPhone or Android devices. ” Web Design Trends 2013 102
  • 103. W hat are your predictions for 2013 and the coming yearsin web design and mobile and confront their own onerous web sites and focus more on UX.web development? Everyone now knows the famous article by Ethan Marcotte thatConvergence. Bill Buxton of started the Responsive move-Microsoft Research gave an ment. Are there any other instan-amazing talk at Future of Web ces like this that you think couldDesign London this spring about start a trend?the “social network of things,”in which the web is a pervasive I’m sure there are, but if I could identify them now I’d start my“ When the web is in yourcar and on your eyeglasses,we’re no longer talking about own firm :) The critical thing about responsive web design is that it’s not just nifty design tricks -- it’s necessarily the way of the future ifresizing windows for iPhone we don’t want to have to developor Android devices -- we’re separate versions of everything fortalking about the need for every device. I think Ethan (among others) has done an amazing jobtrue flexibility and responsi- of elucidating that point.veness. ”connection beyond computers Let’s talk about companies like Apple, Adobe, Mozilla or organi-and smartphones. When the zations like W3C. Who stands outweb is in your car and on your as heading in the right directioneyeglasses, we’re no longer talking for the future of the web? Whatabout resizing windows for iPhone involvement do you have withor Android devices -- we’re talking them?about the need for true flexibilityand responsiveness. But that’s I’m reminded of Tim Berners-Lee’smany years away. I think the next famous tweet from the Olympicsfew years, we’ll see a far more opening ceremony: “This is forusable web as companies like everyone.” It’s going to take all ofSimple push larger competitors to these organizations (and more) Web Design Trends 2013 103
  • 104. to keep the web strong, open, topic. Sometimes they sponsor anand safe. And it’s up to the design event or a party at the event. I’vecommunity to live up to that been astounded at the goodwill I’vepromise by creating sites that seen from just about every speaker or sponsor at our events. In a very“ This is for everyone. It’sgoing to take all of these or-ganizations (and more) to real way, it’s clear that people who care passionately about the web only want what’s best for it.keep the web strong, open,and safe. ”meet standards for accessibilityand open access. Of course, that’seasier said than done and we’renow saddled with vendor prefixesin our CSS and lots of tug and pullabout what to do with responsiveimages. But I’m optimistic that theweb is strong enough to survivethese things.“ And it’s up to the designcommunity to live up to thatpromise by creating sites thatmeet standards for accessi-bility and open access. ”We work with all of thoseorganizations and more (Google,Twitter, Facebook, Microsoft) in onecapacity or another. Sometimesthey suggest a speaker for a certain Web Design Trends 2013 104
  • 105. Conclusions Chapter. 3 Web Design Trends 2013 105
  • 106. ConclusionsAlthough we’re a pretty self-ab- “ The use of materials is always in accordance with the economic and technicalsorbed group with our headsburied in our work, the user’s pointof view and their experience of requirements. ” design movements with fabulous theoretical functions around theusing the site and its content is execution of an efficient designwhat is ultimately important that serves the product. G. Dorfles described a functional constructionWhat we’ve put together in these system as one in which “The use ofconclusions is a return to common materials is always in accordancesense, surely determined by the with the economic and technicalsocio-economic context we’re requirements, achieving a unionliving in. You have to get to your of usefulness and beauty andtarget user, wherever they live, not just looking for beauty whilewhatever device or browser they forgetting about usefulness oruse. Though this is what web vice versa”.standards evangelists have beenshouting from the rooftops for There are many, many excerptsyears, it has now become much that could define this publication,more generally accepted. but one of the most notably realistic is this from Bruce Lawson:“ Design should serve afunction, especially whenwe’re talking about the most “If I go to a train website, I don’t really want to see a picture of Richard Branson smiling at me, I don’t want to read the Chiefpowerful marketing tool in ” Exec’s ambitions and life history.existence, the web. All I want to know is what time my train is and how much it is.”Design should serve a function, It seems so obvious, but manyespecially when we’re talking about designers have been forgettingthe most powerful marketing tool about the user’s needs for existence, the web. Throughouthistory, we’ve seen excellent Web Design Trends 2013 106
  • 107. A more or less realistic little The Agnosticsstory. It seems clear that the future will alsoStarting out from this “Data map” be “Agnostic”, or at least we shouldtaken from the interviews, we’ll tell all “pray” (paradoxically) that it willa short, more or less fantastic story be. Concepts like pixel-agnostic,of what the near future would be if technology-agnostic, device-our “particular visionaries” were on agnostic and resolution-agnostictarget with their predictions. crop up literally in a significant proportion of the interviews, while“ Content-first would be The in nearly all of them it’s something that emanates from the need tocenter of the galaxy Content create a single cross-platformis the most talked-about term version adapted to all devices.among our contributors, thesecond being Simplicity.Content-first Era. ” The Multiplatform Abyss and the heaven of Cross- Platform solutions.Content-first would be the centerof the galaxy. “Content” is the How to Integrate apps andmost talked-about term among experiences through multipleour contributors, the second devices?being “Simplicity”. Content, UX, Another standout trend accordingusability, accessibility and visual to our experts will be the unificationdesign must be guided by this of desktop and mobile into a singlenew paradigm of simplicity. version. To walk this tortuous andThis process of simplification will much-desired path, we’ll have to “be the only tool we have to make How to Integrate apps andcontent accessible and legible experiences through multi- ”for the greatest possible numberof devices, with the best user ple devices?experience. find solutions to issues like those raised by Karen McGrane and Jeffrey Zeldman Web Design Trends 2013 107
  • 108. about retina images, optimizing for something similar to web intents,connection speed, performance interconnecting APIs intuitively.and accessibility or how to displaythe content to the user. Who knows, maybe in the near future it will be users who requestDuring the process we’ll find content from our systems insteadstopgap solutions where another of receiving the content weparadigm like mobile-first will help “suppose” they need. It’s possibleus in the process of simplification. we’ll never again design a web like the one we knew, that interfacesThe question is, will this be may be completely standardizedpossible? Surely not, especially or designed for each device, andif we take into account the next these devices connect to ourstep... servers to request extraordinarily compartmentalized data.“The Internet of Things” Maybe one day, a user from aWhere we’ll be able to communi- place as remote and mysteriouscate not only with our fridges and as this will receive coordinatestelevisions, but even with devices on his fishing rod to catch awith tiny LED screens. How will we swordfish while contemplating thebe able to evolve towards a rational horizon from behind a grapheneunification of all this, or at least screen that shows him how totowards a peaceful co-existence? prepare a delicious recipe from the“ unfortunate animal. Maybe in the near futu-re it will be users who re- Well, I think this is going tooquest content from our sys- far in time, and in our recentlytems instead of receiving launched careers as clairvoyants.the content we suppose they At the moment, we’ll have to apply ” the only tool we have available,need. “simplify to democratize access to content”.Maybe Aarron Walter has given us aclue in his vision of the “Ecosystemof connected services” through Web Design Trends 2013 108
  • 109. It’s time to emerge from this a visual and interaction level.improvised fable and continuetalking about the standout themes. The discovery of new interaction patterns brought by mobile appsOur experts foresee an evolution have shown their efficiency andin responsive. The trend until now quick response to users’ needs.has been to adapt the content They are patterns for desktopbut their are already many voices interfaces to imitate. Graduallyspeaking out for unification to avoid we’ll see the unification of desktop“deciding for the user at the time and mobile in one single design.of serving data” (Karen McGrane).We’ll also have to devise newresponsive interaction patterns, “ Gradually we’ll see the unification of desktop and mobile in one single design.make the most of device sensors, All this will reinforce the idealexperiment widely with touch-enabled interfaces and work on of a unique multiplatformintegration of services and users.About visual design and product. ” All this will reinforce the ideal of adesign that is not-so-visual. unique multiplatform product.In this area, the dominant terms Nick Pettit talks brilliantly aboutare Simplicity, Minimalism, Clear Scalable web design and the needLayouts, App-style Interfaces, to be pixel-agnostic and resolutionSimplification of UI, Focusing on independent. Exactly this trendtypography, Less decoration, Less towards simplification in designskeuomorphic interfaces, Flat style, and apparently aesthetic questions,Flat colors... such as flat colors, respond to the“ need to serve images and scalable They all agree on simpli- elements to retina displays, butfication on a visual and inte- also to mobiles with very inferiorraction level. ”They all agree on simplification on provisions from the non-western market and to devices such as digital readers. Web Design Trends 2013 109
  • 110. The idea is to serve a single vector etc... Preprocessors, HTML5,graphic that works well in all WebGL and SVGs also stand out.environments and has excellentperformance on 3G connections. In server-side languages, theThis group also includes icon fonts majority of interviewees do notand the growing interest in design have backgrounds in back-endwith scalable typographies which development, but among thehas given us opentype. Evidently, agencies the use of Ruby andwe won’t be able to substitute all Python and experimentation withgraphics for SVGs or webfonts, but entelechies such as Node.js arewe can for a large part of them. becoming more widespread. The multiplicity of frameworks, buildersAll these visual trends seem very and preprocessors will be anotherlogical, with no superfluities and constant.respond to a need. Nothing new or surprising. We“ Technology agnostic, of should just highlight the growing interest in WebGL and SVG andcourse, is the main idea. the fact that, curiously, nobodyHTML/ CSS/ Javascript trio mentioned jQuery, perhapsis the primordial soup.What technologies? ” because it’s taken as read or because they have high expectations from CSS3.Technology agnostic, of course, is On the other hand we have thethe main idea. In this respect, front- development of native apps for iOSend and back-end developers must and Android, where there’s nothingbe as responsive and adaptive as new either, just the intense andtheir projects. continual increase in demand and the desire to have more suitableLooking at the data graphic we can cross-platform technologies, basedsee that the HTML/ CSS/ Javascript on web standard technologies ortrio is the “primordial soup”. Then not.we have lots of CSS in its variousforms, custom filters, CSS Effects,3d Transforms, Adobe Regions, Web Design Trends 2013 110
  • 111. Another dimension history In recent years these digital agencies have urgently neededAnother peculiar situation arises to find a reliable substitute foramong the digital agencies who Flash. The final solution, givenwork on important projects. the performance and productionsThey’re the survivors of a past costs of CSS3, HTML5 andromanticism. Their requirements Javascript, is going to be WebGL,are in the area of promotional but we’ll have to wait til this orproductions designed for television any other technology with similarmore than the web. performance and accelerated“ graphics becomes accessible for Now the big accounts the majority of devices.knock on their doors usingterms like responsive, acce- The path of these big superproduc-sibility, performance, but wi- tions will diverge from the way ofthout wanting to renounce web standards based applications and its final destination, its naturalclassic immersive Flash ex- ” environment will surely be webperiences. TV.Now the big accounts knock In the coming months and yearson their doors using terms like we’ll see lots of experiments, as“responsive”, “accesibility”, “perfor- is becoming typical, but it won’tmance”, but without wanting to be the dominant trend. As Benrenounce classic immersive Flash Cline told us, “Unfortunately, theexperiences or accept that they’re responsive era of websites willcompletely different and highly temporarily stifle some creativityincompatible products. It’s unrea- on the web until all browserslistic to expect to make a website consistently support the newestto reinforce a brand image that is technologies. If companiesresponsive with retina images and want to push the boundaries ofHD videos, and at the same time creativity in responsive design,has high dissemination among a they will have to commit morewide target audience in China or time and budget. ”Bangladesh. Web Design Trends 2013 111
  • 112. Fortunately, these big agencies andprofessionals will continue to pushthe limits of creativity, exploringnew means of interaction, becauseas Ian Hickson says, in spite ofeverything, innovation alwayscomes from native. “The cuttingedge is native”.“ Innovation always comesfrom native. The cutting edgeis native. ”But of course, these are the chosenones of the gods. Those with morehuman abilities will be able to jointhe two worlds with fewer obstaclesbut with some generous doses ofingenuity, availing themselves ofthe laws of simplicity of form andfunction. Maybe we have to gothrough this trance to learn to bebetter designers. Web Design Trends 2013 112
  • 113. Data Chapter. 4Web Design Trends 2013 113
  • 114. Web Design Trends 2013 114
  • 115. Web Design Trends 2013 115
  • 116. Acknowledg- ments Thanks! Web Design Trends 2013 116
  • 117. TRE NDS Project ACKNOWLEDGMENTS: Our gra- titude for the generosity of all the participants who have collaborated in this project by giving their valua- ble opinions: Dan Mall, Karen Mc- Grane, Jenn Lukas, Mike Kus, Nick Pettit, Dave Rupert, Veerle Peters, Denise Jacobs, Simon Foster, Bruce Lawson, Luciano Foglia, Ben Cline, Aarron Walter, Trent Walton, Oli- ver Reichenstein, Legwork Agency, Ultranoir, Ian Hickson, Brad Frost, Hinderling Volkart, Jeffrey Zeldman, Rachel Andrew, Epic Agency, Unit9, B-Reel, Fantasy-Interactive Lon- don,Hello Monday and Davin Wil- frid. EDITOR IN CHIEF and ART DIREC- TION: Awwwards Team. 2013 Awwwards BlogWeb Design Trends 2013 117
  • 118. CreditsTweet your opinionWeb Design Trends 2013 118
  • 119. THE END See you soon! WEB DESIGN AWARDS CHIEF EDITOR & ART DIRECTION: Awwwards Team. 2013 And what do you think about the fu- ture of web design? Tweet your opi- nion!Web Design Trends 2013 119