Post on 04-Jun-2018
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
1/116Awwwards.comWeb Design Trends 2013 1
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
2/116Awwwards.comWeb Design Trends 2013
ACKNOWLEDGMENTS: Our gra-titude for the generosity of all theparticipants who have collaboratedin this project by giving their valua-ble opinions: Dan Mall, Karen Mc-Grane, Jenn Lukas, Mike Kus, NickPettit, Dave Rupert, Veerle Peters,Denise Jacobs, Simon Foster, BruceLawson, 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
TRENDSProject
2
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
3/116Awwwards.comWeb Design Trends 2013
Index/Index 3Preface 4Interviews 7Aarron Walter 48
Ben Cline 45
Brad Frost 68B-Reel 89
Bruce Lawson 36
Dan Mall 8
Dave Rupert 23
Davin Wilfrid 102
Denise Jacobs 29
Epic Agency 81
F-i London 92
Hello Monday 95
Hinderling Volkart 72
Ian Hickson 64
Jeffrey Zeldman 75
Jenn Lukas 14
Karen McGrane 11
Legwork Agency 57
Luciano Foglia 42
Mike Kus 16
Nick Pettit 19
Oliver Reichenstein 53
Rachel Andrew 78
Simon Foster 32
Trent Walton 51
Ultranoir 60
Unit9 86
Veerle Peters 26Conclusions 105Data 113
3
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
4/116
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
5/116Awwwards.comWeb Design Trends 2013
W hy TrendsThe Awwwards community are afaithful audience, always interestedin learning and dedicating theirtime to acquiring the necessarytechnical knowledge to apply intheir daily work. With the nobleaim of being a useful tool for our
community, at the end of 2012 wedecided to gather the opinionsof renowned experts on how theweb industry will evolve in thecomplex times we live in , in thistower of Babel of technologies anddevices thats rushing towards us.
Of course, nobody can know forsure what might happen in thecoming months and years. In fact,
many of the interviewees werehesitant to give an opinion ontrends. Curiously, in the end somevery similar ideas emerged to make
up, more than a prediction, a Ten
Commandments of needs basedrmly on their own experiences as
users.
Trends is not only a prediction for2013. It reects a natural interest inhow all aspects of web design willevolve over the next few years. Wedont actually know whether we willneed to make a similar publication
in 2014; things in this industrychange quickly, so its possiblethat in less than 12 months manyof these trends and technologieswhich now seem to be blossomingwill have disappeared completely.
How is the documentstructured?The idea was to all the participantsmore or less the same questionsto get a kind of data map whichwould help us visualize the futureof the web. To this end, we hadthe invaluable help of 28 renownedexperts in different areas of theindustry. They are the ones whohave given this project its shape.
Trends is not only a pre-diction for 2013. It reectsa natural interest in how allaspects of web design willevolve over the next fewyears.
The idea was to all the
participants more or lessthe same questions to get akind of data map.
5
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
6/116Awwwards.comWeb Design Trends 2013
The end motivation?Honestly... youll 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.
6
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
7/116Awwwards.comWeb Design Trends 2013
Chapter. 2
7
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
8/116Awwwards.comWeb Design Trends 2013
Dan MallDesign Director at Superfriendly Co.
Well see people morebroadly understandingmobile devices.
Dan Mall is an award-winning designerfrom Philadelphia. Founder and Design
Director at SuperFriendly, co-founder of
Typedia and swfIR, and singer/ keyboard
player for contemporary Christian band
Four24. Dan writes about design and
other issues on Twitter and his website.
8
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
9/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
Ive never been good at predictions,but I think (hope)? well see peoplemore broadly understandingmobile devicescomputers wecan hold in our hands as opposedto having to sit at a desk to useas
the web, not just an on-the-go,abridged version of the web.
What animation techniques andeffects applied to navigation anduser interaction will we see? Willwe nally move beyond Parallaxscroll?
Gosh, I hope so. Ive seen veryfew sites that use parallax as aconceptual construct as opposedto a technological gimmick.As touch-enabled devices are
becoming more ubiquitous, I think
well see a lot of experimentation
around touch interactions. Heresone of my recent favorites by Rally
Interactive co-founder Ben Cline.
What do you think well see in la- yout and UI design in 2013?Simplicity, app-inspired design,responsive, single page websites,alternative navigation patterns?
Theres an interesting battlecurrently being fought betweenphotorealistic graphics and ataesthetics, led by Apple andMicrosofts Windows 8. I think wellsee a lot more push and pull withthese styles over the next year.
Touch and gestures, media que-ries, responsive, retina display,webfonts, realtime web... Howdo you think these techniquesand technologies will evolve andwhat will be next?
Its interesting to see design andtechnology simultaneously getting
As touch-enabled de-
vices are becoming moreubiquitous, I think wellsee a lot of experimenta-tion around touch interac-tions.
9
http://dribbble.com/shots/755139-Desktop-Tablet-Carousel-Slideshow/attachments/738048/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
10/116Awwwards.comWeb Design Trends 2013
bigger and smaller. On one endof the spectrum, we nd browsers
evolving more rapidly than ever,with designers and developerspushing technologies like WebGL,hardware acceleration, and 3D inthe browser without having to relyon plugins. On the other end, wesee mobile access necessitatingsimpler, faster sites and heralding
the need for optimizing. Im curiousto see how each evolves.
When looking for potential em-ployees or collaborators whatcatches your eye?
Great design taste in a portfolio
usually gets my attention, but what
keeps it is hunger and passion forthe work. I also try to look for someform of richness; I like seeing smallmoments where its obvious thathe/she pored over the details.
What technologies are your team
training in now? Which discipli-
nes will you be focusing on in thecoming months and years?
Everything! Were certainlydoing the web work we love somuch, HTML/CSS/JS,mobile-rstresponsive design, WordPress,ExpressionEngine/otherCMSsbut are also venturing a bit intoObjective-C and OpenFrameworksas we do more native mobile work.
Were even creating some physicalinstallations that connect digitaland analog. More on that soon!
Great design taste in aportfolio usually gets myattention, but what keepsit is hunger and passion forthe work.
10
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
11/116Awwwards.comWeb Design Trends 2013
Karen McGraneContent, User Experience Strategist
Mobile is not the Lite version. I think this willbe year of the mobilewebsite, no more desk-top redirects.
Karen McGrane is a content strategistand user experience designer with
15 years of experience making big,
complicated websites. Currently she is
Managing Partner of Bond Art + Science.
Image by Alison Grippo
11
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
12/116
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
13/116Awwwards.comWeb Design Trends 2013
the needs of the people who willmaintain the site.
What do you think well see pre-dominate in layout and UI designin 2013?
I expect to see growing recognitionfrom the design community thatthe content cant be somebody
elses problem. Designers havea huge stake in knowing what
the content will be. What thatmeans is that designers shouldbe asking about how the contentwill be structured. What are allthe chunks, and how big are they?Instead of treating the contentlike an afterthought, or somethingwholly separate from the rest of the
experience, designers will makesure its the centerpiece.
In technological and social ter-ms, how do you think the webwill evolve in the next few years?
The proliferation of platforms
isnt going to stop. Were going to
see increasing numbers of wildlydivergent platforms, some of which
weve been talking about for years.Interactive television. In-kitchendevices. In-car audio interfaces.
Someday soon, speech-basedinterfaces will get good enoughremember all the years whentouchscreens sucked? Once
touchscreens reached thepoint where they just worked, itlaunched an entire new wave ofinnovations in hardware, software,and interaction models. Speechisnt there yet, but it will be.
This means that we have to stop
building containers and thencreating content to t. Our contentis going to nd its way to placeswe never even dreamed, and wedont have the time, resources,or budget to create new contentfor every platform. Instead, allof us need to work together
designers, developers, and contentstrategiststo create the rightcontent, structured for reuse, andthen design around it.
Designers have a hugestake in knowing what thecontent will be.
13
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
14/116Awwwards.comWeb Design Trends 2013
Jenn LukasInteractive Development Director at Happy Cog
This year I hope to seecontent still at the fore-front.
Jenn pursued a Multimedia & WebDesign degree. She has worked on
numerous projects for top-tier clients
and was named one of Mashables 15
Developer/ Hacker Women to Follow
on Twitter, and you can nd her on
Twitter posting development and cat-
related news.
14
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
15/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
I just LOVE CSS Transitions,especially when applied to hovers.Adding the right amount of fadeor movement to a link, really addsa helpful amount of interaction
while keeping things classy and
not 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 the
browser.
What do you think well see in la- yout and UI design in 2013?
Weve seen a lot of single columndesigns and single page websitesthis year, allowing a content-rst
approach. These patterns provided
an ease into responsive design andless pages to load/clicks to make.
This year I hope to see contentstill at the forefront, but pushinginto more complicated designsand layouts. Flexbox (CSS FlexibleBox Layout Module) is sure tohelp in aiding interesting layoutson desktop and mobile that arentdictated by source order.
Filters cut down on imagesprites and image produc-tion and let you adjust yourimages right in the brow-ser.
15
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
16/116Awwwards.comWeb Design Trends 2013
Mike KusGraphic, Web Designer & Illustrator
I think will see a sim-plier web emerging.More space, less clutterand decoration.
Mike Kus is a UK based Graphic/ WebDesigner and illustrator, considered one
of the best on todays scene. Hes co-
founder of WorkFu and creator of a few
amazing online and print experiences.
16
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
17/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
From a visual standpoint I thinkwell see (are already seeing) asimplication of Graphic & UI designon both the web and mobile. Wellsee less decoration, simple, boldand clear layouts and UI design. I
think well see less Apple inuencedskeuomorphic design, also.
What technologies are you tra-ining in now? Which disciplineswill you be focusing on in the co-ming months and years?
In the coming months I want tofurther explore the concept of
how to best express a brand orpersonality through web designand how this can be maintainedfrom the desktop experiencethrough to a mobile experience.
What should the new designprinciples be in a future where
web and mobile design must be
focused on user experience andcontent?
I dont think its a new thing tosuggest that user experienceand content are a central focuswhen designing for the web andmobile. Its always been that wayas far as Im concerned. Ill justcarry on applying the same design
principles Ive always used, whichare pretty simple: Make sure thecontent is easily digestible using a
simple clear layout, the text is easyto read, and the site or app is easyto navigate and understand. Applythese to all devices.
What animation techniques andeffects applied to navigation anduser interaction will we see? Will
we nally move beyond Parallaxscroll?
Scrolling triggered animationsseem to be hot right now but Imreally not sure what will come next.
Simplication of Graphic& UI and mobile design onboth the web and mobile.Less is More.
Make sure the contentis easily digestible using asimple clear layout.
17
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
18/116
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
19/116Awwwards.comWeb Design Trends 2013
Nick PettitTeaching Team Leader at Treehouse
I think SVGs willbecome more populardue to the increasing po-pularity of displays withhigh pixel densities.
Nick Pettit is the Teaching Team Leaderat Treehouse , an educational video
tutorial service that teaches web design,
web development, and iOS. Nick has a
background in ne art and a passion for
technology.
19
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
20/116
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
21/116Awwwards.comWeb Design Trends 2013
What technologies are you tra-ining in now? Which disciplines
will you be focusing on in the co-ming months and years?
Im personally focused onresearching how vectors impactdesign and UX decision making.While vector graphics do havea few drawbacks, they have a
tremendous number of advantagesthat allow for interfaces that are notpractical with raster images alone.
What should a newbie web deve-loper concentrate on learning?
A new web developer should learn
to love learning. The best webdevelopers are very exible andadaptable to change. They dont
spend all of their time focusingon just one language, and instead,experiment with all the possibilities.
What will the trends be in webprogramming? Which langua-
ges or frameworks will gain moreconverts in the near future?
I dont see any ground breakingchanges in languages orframeworks in 2013, although thatdoesnt mean there wont be any.Rather, I think the focus will be on
the toolchain that front-end andback-end developers use to createweb apps. The barrier to entry fornew designers and developers is alittle bit high, but projects and toolslike HTML5 Boilerplate, Bootstrap,Github, Ruby on Rails, Heroku, andcountless others have continuously
systematized the process. I think thispositive momentum will continue,because it allows developers tofocus more on their ideas, ratherthan the implementation.
The best web developersare very exible and adap-table to change. They dont
spend all of their time fo-cusing on just one langua-ge.
I think the focus will beon the toolchain that front-end and back-end deve-lopers use to create webapps.
21
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
22/116Awwwards.comWeb Design Trends 2013
How do you think these techni-ques and technologies will evol-ve and what will be next?
Technologically, I think SVGs willbecome more popular due to the
increasing popularity of displayswith high pixel densities. Beyondthat, it seems like the ght for webstandards is nally in a much betterplace than it was in previous years,and the ongoing renementsto the tools that are available to
developers are a welcome additionto the equation. Furthermore,companies and individuals care
more about design than everbefore. Big inuencers like Appleand Microsoft have shaken up thelong-standing desktop metaphorwith iOS and Windows 8, and theworld didnt come crashing downaround them as one might expect.I think this gives smaller product
companies the comfort they need
to freely experiment with bold newinterface ideas.
The current state of developmentand design is pretty incredible, andwhile it will continue to improve,
theres never been a better time tobuild web applications. Now is thetime to execute.
The ght for web standards is nally in a much better
place than it was in previous years,
Furthermore, companies
and individuals care moreabout design than ever be-fore.
22
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
23/116Awwwards.comWeb Design Trends 2013
Dave RupertLead Developer at Paravel Inc.
I think the future ofweb and mobile design isthat there is no distinc-tion between the two.
Dave Rupert is the lead developer forParavel and host of the ATX Web Show,
a podcast about the local web design
and development scene in Austin, Texas.
23
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
24/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
For me, I think the future of weband mobile design is that there isno distinction between the two.Smartphones are becoming the
default computer for most of theworlds youth, a company in India
just announced a $20 tablet, andcollege classrooms are glowingwith high-end laptops. Mobile rstresponsive web design is probablythe trend to stick with in the near
future.
What technologies are you tra-ining in now? Which disciplineswill you be focusing on in the co-ming months and years?
Im focusing a lot more on JavaScript
and Web Accessibility in the short
term. My knowledge of those twothings is decent but could always
be better and more informed. Overthe next few months Ill probably just continue poking holes in whatI think I know so I can get better atmy weaknesses.
What should a newbie web deve-loper concentrate on learning?
Theres a saying we have onShopTalk (a podcast I co-hostwith Chris Coyier): JUST BUILDWEBSITES! The technologies thatyou need to be learning will quicklypresent themselves in challengesyou meet when you pick up a side
project, start a job, etc. Beyondthat, gaining more mastery onthe three main building blocksof our industry - HTML, CSS, andJavaScript - couldnt hurt.
What will the trends be in webprogramming? Which langua-
ges or frameworks will gain moreconverts in the near future?
I believe automation and bettertooling is the next wave (ifnot already a current wave) inweb development. This coverseverything from pimping your text
editor to improving the building
The future of web and
mobile design is that thereis no distinction betweenthe two. Mobile rst res-ponsive web design is pro-bably the trend to stick within the near future.
24
http://shoptalkshow.com/http://shoptalkshow.com/8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
25/116Awwwards.comWeb Design Trends 2013
and compiling of our HTML/CSS/JavaScript. Linters, pre-processors,
builders, and package managerswill play a major role in everydayweb development. There maybe a big technical hurdle there
to get everyone on board, butthats a great opportunity to fordevelopers to make GUIs in orderto increase adoption among less
command-line-savvy developersand designers.
Touch and gestures, media que-ries, responsive, retina display,webfonts, realtime web... Howdo you think these techniquesand technologies will evolve and
what will be next?
Touch and gestures will be hugely
important. Apples biggest selling
products are all touch-based.
Microsofts Windows 8 is a touch-based interface. Chris Coyier
recently tweeted that he saw hismom try to tap her TV. Touch-enabled devices are now the defaultstack, so its important that ourdesigns have this in mind. I dontthink were far off from where ourwebsites will be expected to havemore advanced gesture-based
interactions.
Linters, pre-processors,builders, and package ma-nagers will play a major rolein everyday web develop-ment.
Touch and gestures willbe hugely important.
25
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
26/116Awwwards.comWeb Design Trends 2013
Veerle PetersGraphic, Web Designer Lead at Fab
Its important to designfrom the content pointinstead on screen reso-lutions.
Veerle Pieters is a graphic/ web designerbased in Deinze, Belgium. She runs her
own design studio, Duoh!, together
with Geert Leyseele. Veerle has been
blogging since 2003 and is considered
number 39 on the list of NxEs Fifty
Most Inuential Female Bloggers.
26
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
27/116Awwwards.comWeb Design Trends 2013
In technological and social ter-ms, how do you think the webwill evolve in the next few years?
Hard to say, as Im not visionaryso I can only do some guesswork.Technologically, it will be movingmore and more towards mobile,so that aspect will become even
more important than it now alreadyis. I see shopping as one aspect ofthat, and I think we will eventuallymove towards 50% being doneon phones or tablets. Of course,this will not work for every shop,but shops like fab.com will get
to that point quicker than others.Socially, I have no idea if Twitter orFacebook will still be relevant in 5years. It all depends of what thosecompanies do with their product. Ifthey alienate their customers, anda new kid on the block prots fromthat, it wouldnt be the rst time.
What should the new designprinciples be in a future where
web and mobile design must befocused on user experience andcontent?
Im hardly an expert, but I thinkthere is no golden rule that appliesto all. Every project is different sothats why it is so hard to create
the ultimate process/ tool thateveryone likes to use and that
works perfectly for every project.Im not sure if such a thing iseven possible. Its a collection ofbest practices and tools basedon personal preference that wehave at our disposal today. With
the complexity of all the devicesout there, I think its important todesign from the content pointinstead of focusing on all the screenresolutions out there. Thats what Ithink would qualify as a new newdesign principle.
Technologically, it willbe moving more and moretowards mobile, so thataspect will become evenmore important than it nowalready is.
I think its important todesign from the contentpoint instead of focussingon all the screen resolu-
tions out there.
27
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
28/116Awwwards.comWeb Design Trends 2013
Can you pinpoint any visualtrends or design elements that
might emerge in 2013, as Letter-press, pictograms, vintage style,lettering, oversizing elements,Overprinted effects, swiss designetc. have done?
Trends are something I dont followor have any interest in. I just do
what is right for the project thatIm doing at that time. If it involvessomething that many believe isover-used, so be it, as long as I feelit has a purpose there. I never lookat any website galleries becausethey usually have a reverse effecton me, and they block my creativity
from the overload I receive. Thatswhy I created my own inspirationstream that has nothing to do withweb design at all. I try to see myinspiration in things that have noconnection to what Im designing.For me personally, that works ne,but other may feel differently.
What techniques are you trainingin now? Which disciplines will
you be focusing on in the comingmonths and years?
Im learning about all the informationon responsive web design, retinaresolutions etc. Not an easy task,
as we are still very much in theexperimental phase, so nobody
knows yet what the best practicesof tomorrow will be. Could be Imwasting my time on something thatwont be around anymore in twomonths. Thats what makes it sointeresting, things pop-up quicklybut disappear as fast too. Nobody
knows what will be *the* way in2015, for example. We all have tolearn as we go.
Could be Im wasting mytime on something thatisnt around anymore intwo months. Things pop-up quickly but disappear asfast too.
28
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
29/116Awwwards.comWeb Design Trends 2013
Denise JacobsWeb Design Consultant and Creativity Evangelist
Storytelling and visualsimplicity in web andmobile design.
Denise R. Jacobs is an Author, Speaker,Web Design Consultant, and Creativity
Evangelist. Based in Miami, Florida, she
is the author of The CSS Detective
Guide and co-authored InterAct with
Web Standards: A Holistic Approach to
Web Design and the newly-released
Smashing Book #3 and #3 1/3.
29
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
30/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
I hope there will continue to be anincrease in both storytelling in weband mobile design as well as visual
simplicity. People are really startingto see the power of storytelling inreaching audiences and in creatingproducts that resonate with people.
What technologies are you tra-ining in now? Which disciplineswill you be focusing on in the co-ming months and years?
Im moving away from trainingin specic technologies and aminstead focused on developing
strategies for how to thinkbetter under pressure, increasethe creativity, innovation andproductivity of individuals andteams, and produce and executemore great ideas in less time.
What will the trends be in web
programming? Which langua-
ges or frameworks will gain moreconverts in the near future?
It seems like there will be acontinued increase in methods tomanage front-end developmentbetter like the scalable andmodular CSS architectures, andalso CSS preprocessing languageslike LESS, SASS, and COMPASS.
I also anticipate more people
challenging well-established front-end development solutions anddevising new ones, especially asthe CSS3 specication gets moresolidied.
Touch and gestures, media que-ries, responsive, retina display,
webfonts, realtime web... Howdo you think these techniquesand technologies will evolve andwhat will be next?
All of these technologies arepushing innovation and fresh-thinking forward, which I love to
see. While I dont know how they
People are starting to seethe power of storytelling inweb and mobile in reachingaudiences. It seems like there will bea continued increase in me-
thods to manage front-enddevelopment.
30
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
31/116Awwwards.comWeb Design Trends 2013
continue to evolve, I do know thatthe next several months will be
ripe for some fantastic new waysto approach designing with all ofthe aforementioned combined.
What do you think well 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 2000s) to
more simple and stark interfaces.Much like the well-knownAntoine de Saint-Exupery quotePerfection is achieved, not when
there 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 superuous. Also, I
do anticipate more merging of the
website and the app interfaces,where they both are simplied to
the point where there will be littleor no difference between the two.
I am looking forward to
more designers who alsoknow code who understandwhat is truly necessary.
31
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
32/116Awwwards.comWeb Design Trends 2013
Simon FosterWeb Designer
The thing to focus onis not How a websitesdesign/layout/UI is exe-cuted but Why.
Simon Foster is a tiny one-man webdesign studio in London, England. He
specialises in responsive front-end
design, HTML/ CSS and web typography.
Simon tries to make the websites he
designs and builds as simple and intuitive
to use as possible whilst still having a
unique aesthetic appeal.
32
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
33/116Awwwards.comWeb Design Trends 2013
W hat tendencies do you seecoming in the near futurein web and mobile design?
I think that there a still a surprisinglylarge amount of web designersthat dont take mobile devices intoproper consideration. I still see sitesthat are beautiful on a desktop orlaptop but really difficult to use on
my phone or tablet. That cant goon forever so I think well see a lotof designers getting on board withresponsive/adaptive design or justsimplifying the way they designand build sites so even if they arent
responsive they are easier to useon smaller devices. Less gimmicks,less tricks, less dependency on
javascript for a site to work.
What technologies are you tra-ining in now? Which disciplineswill you be focusing on in the co-ming months and years?
Well even though I do write codeas well as design Ive only really
up until now gone as far as plain
old HTML & CSS as Ill never bea programmer as it isnt in my
blood, but Ive recently started tolearn how to use github and Ill bemaking a concerted effort to getto grips with SASS soon as theyre
not really as scary as they seem atrst. On the other hand Im alwaysconscious of not getting toobogged down in focusing on thehow For me the why in design
will always be more important.Any type of code, technology orframework is only ever a means toan end, you can be the best Rubyon Compass Jekyll, Git via Haml,Frank Sinatra singing Mongo DBJerry programmer in the world, butif you havent thought about WHY
youre making this website it wontmean anything.
What should the new designprinciples be in a future whereweb and mobile design must befocused on user experience andcontent?
Less gimmicks, less tric-
ks, less dependency on ja-vascript for a site to work.
If you havent thoughtabout WHY youre makingthis website it wont meananything.
33
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
34/116Awwwards.comWeb Design Trends 2013
I think I can see things going back tobasics a bit. I love the phrase Keep
it simple stupid (even though it isa little over used). Just let users dowhat they came on your site to do
quickly and without fuss so theycan get on with doing other thingsthat are more interesting. I alwayskeep it in mind that no matter how
beautiful I make a website theaverage user only really wants tospend about 10 seconds on it, solet them do that, cut the crap.
What animation techniques andeffects applied to navigation anduser interaction will we see? Will
we nally move beyond Parallaxscroll?
Personally I hope we dont see any,Im not a big fan of things movingall over the screen, just feels like agimmick too often for me. Whenash websites died one of the
things that I was pleased about
was that we could get away fromover-bloated sites that needed to
load before you could use themand had loads of unnecessarytransitions and animations, buttheyre making a comeback with
html5 and canvas/webgl etc.Of course Im not saying NEVERuse an animation in a website,when done with subtlety and inthe right context they can be great,
but more often than not I nd themannoying, but that might just be mytaste, others will probably disagree,which is a good thing.
What do you think well see in la- yout and UI design in 2013?Simplicity, app-inspired design,
responsive, single page websites,alternative navigation patterns...?
I think this comes back to whyand how again. The thing to focuson is not how a websites design/layout/UI is executed but why. Aslong as the way youve chosen to
build and design your site works
I always keep it in mindthat no matter how beau-tiful I make a website theaverage user only reallywants to spend about 10seconds on it.
Im not a big fan of thingsmoving all over the screen, just feels like a gimmick toooften for me..
34
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
35/116Awwwards.comWeb Design Trends 2013
for that particular project thengreat. Whether its single-page,
responsive, light, dark, covered ingradients or really minimal doesntreally matter as long as it works forthat particular clients site. Trends or
movements in web design are notsomething that I think a designershould really be trying emulate
or 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, doesnt meanthats right for what youre workingon. Do your own thing, ignore
trends, start your own trends if youfeel like it and above all think aboutwhat the end user needs from whatyoure creating.
I think this comes backto WHY and HOW again.The thing to focus on is not
How a websites design/layout/UI is executed butWhy.
35
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
36/116Awwwards.comWeb Design Trends 2013
Bruce LawsonEvangelist of Open web standards
I think simplicitys thepoint. Mobile stuff needsto be simple, but so doeseverything else.
Opera evangelist, co-author ofIntroducing HTML5 and web standards
lovegod. Guinness-drinking, kickboxing
poetry freak. Man with MS.
36
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
37/116Awwwards.comWeb Design Trends 2013
Do you think the kind of sim-plicity we see in apps is goingto be a big thing in design moregenerally?
Yes. I think simplicitys the point. Ioften say to people about mobile,the usability gurus always point to
mobile as being different becausepeople are time-constrainedand task-focused, and therefore
you should only give them theinformation they need to full thetask. Thats true, but its also trueof everybody all the time. If I go toa train website, I dont really wantto see a picture of Richard Bransonsmiling at me, I dont want to readthe Chief Execs ambitions and life
history. All I want to know is whattime my train is and how muchit is. And I think, yes, mobile stuffneeds to be simple, but so doeseverything else. People have beenused to making desktop sites thatare full of shite just because theyvegot space for it, and they need to
stop.
Do you think web-standards ba-sed Apps will end up putting an
end to native Apps?
I doubt standards-based Appswill completely kill native Apps. Ithink native Apps are temporarilyvery important because theweb-standards stuff hasnt yet gotthe capability of the native stuff,
but the gaps closing.
What trends do you see comingin the near future in web design?
Access to devices capabilities. So,three years ago, if you wantedto access GPS geographical
information on your phone, youhad to have a native app becauseyou couldnt do that on the web,and now every browser on everydevice is doing that. And thenthe ability to upload photographs
directly from the web, which wecan do now. Theres somethingcalled getUserMedia, a spec Ivery much like, and that allows awebsite (with your permission) to
access the videocamera, it might
I think simplicitys the
point. Mobile stuff needsto be simple, but so doeseverything else.
Access to devices capa-
bilities, GPS, microphone,camera, etc...
37
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
38/116Awwwards.comWeb Design Trends 2013
be a webcam or the front-facingcamera on your phone, and then
it can access the video streamand lm you and the Javascripton the website accesses thevideo feed in real time and canidentify where your face is anddo facial recognition, and whenit determines where your mouthis itll draw a Super Mario Brothers
moustache where your mouth is.And this, of course is the zenithof tech. But what this is really foris in-browser video conferencing,so the website can access yourmicrophone and your camera andthen connect it up to someoneelses website where they can hear
your voice. Youve effectively gotvideo conferencing with no third-party app.
I cant promise anything for Opera,and I certainly cant promise
anything for anyone else, but I
imagine in the next 12 months thatllbe available in the newest browsers
on devices that have that capability,yeah. Thats all part of web RTC[Real Time Communication] at themoment.
You did a talk on whats next inResponsive web design, where
you mentioned web on TV. Is that
whats next?
The TV manfacturers really wantweb on TV to work. I think at themoment the killer app hasnt been
invented. Nobodys yet come upwith the killer product. TVs greatfor some things and its rubbish
for other things. Nobody is goingto want to put all their socialnetworking stuff up on the tellywhen your grandma and yourkids are in the same room. Theresthings you dont want in a familyspace. Youre unlikely to want totype an e-mail on the TV because
your hunting and pecking with
The TV manfacturers rea-lly want web on TV to work.I think at the moment thekiller app hasnt been in-vented. I imagine in the next 12months thatll be available
in the newest browsers on
devices that have that ca-pability, thats all part ofweb RTC [Real Time Com-munication].
38
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
39/116Awwwards.comWeb Design Trends 2013
the remote for the letters and itsrubbish. But then TVs great for
shared viewing, so I could imaginethat a killer TV app would let youlook at your Flickr pictures as aslideshow, so instead of the familygathered round a laptop, the family
can be gathered round a big screen
and its more sociable. I think thatas yet, the technology is there, butwe havent yet worked out how touse it best.
Nobody wants to write a Worddocument on their television,because a) its rubbish as an
experience because you havent gota keyboard, and b) TVs leisure, andwriting a Word documents work. Iwork from home so I make sure Ionly work in my office and the onlything I do in my office is work, soIve got differentiation. I think thatsincreasingly the case, people want
to have that separation, otherwise
you just work all the time.
Have you read anything recentlythats particularly made an im-pact?
Yes, I read the W3C Pointer Events Specication , which Microsoftwrote, which is making writingwebsites that work with a pen or
touch or a mouse much moresane and easy and I think its goodwork by the mighty Microsoftstandardising stuff.
What kind of technologies are you looking at learning? Any newstuff you want to get into?
Im not a very good Javascripter,so Im looking to improve that andIm ultimately interested in justimproving my general scriptingability, so Ive got a book on Pythonto read on the train. With a degreein English Lit and drama, Im not a
natural computer person and Ima bit slower than someone whosdone a degree in computer science,but Im interested in learning thatkind of stuff yeah.
TVs great for sharedviewing, so I could imaginethat a killer TV app wouldlet you look at your Flickrpictures as a slideshow, soinstead of the family gathe-red round a laptop.
39
http://www.w3.org/Submission/pointer-events/http://www.w3.org/Submission/pointer-events/http://www.w3.org/Submission/pointer-events/http://www.w3.org/Submission/pointer-events/8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
40/116Awwwards.comWeb Design Trends 2013
For someone whos starting out,what would you tell them to learn
rst?
Well if they want to learn web stuff,to learn HTML5 and CSS and thento learn Javascript. But anyone whotells them to just learn Javascriptbecause HTML and CSS are easy,not to listen to them because itseasy to be rubbish at them and its
hard to be good at them, to writegood, structured code. The bestway is view source. Find goodwebsites that people recommend,and hit view source, then muckabout with it.
You mentioned India and Chi-
na. How do you think those fast-growing economies might affectthe web and mobile industries inthe future?
They will affect it in ways I cantguess at, but the effects theyll havewill be profound. China, particularly.
Somebody told me that statistically,
most politicians in the Westare politics and philosophy and
economics graduates, and mostpoliticians in China are engineers,and theres a huge focus and a hugerespect for engineering out there.You see some phenomenal codeand dedication to making greatstuff coming out of China, and alsoIndia. Places like Bangalore, theres
incredible coding in India.
Were seeing an extraordinary risein consumption of the web in thoseplaces. Not so much producingwebsites, although Chinese socialmedia has just been creditedthis week with persuading their
government to close down someof the forced labour camps, sowere seeing technology enablingpeople to have a voice and a say,which warms the cockles of myheart.
Im going to tell a story this
afternoon about a website called
But anyone who tellsthem to just learn Javas-cript because HTML andCSS are easy, not to listento them.
Were seeing an extraor-dinary rise in consumptionof the web in those places.Not so much producingwebsites, although Chinese
social media.
40
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
41/116Awwwards.comWeb Design Trends 2013
Igniter. It was set up by three Jewishguys in New York and its a social
network, a dating agency, for nice,Jewish kids in New York who forcultural reasons didnt want to goout on dates one-to-one. So theywould organise shared trips tothe theatre or picnics, so groupswould go out and if people hit itoff they could subsequently begin
dating, but it was culturally a lot lessintimidating. It didnt take off, theyspent lots of money advertising it
but they only got 50,000 users.And then they noticed they weregetting loads of hits from Indiaand Pakistan and places like that,where theres not a great Jewish
community but that model ofshared dating works very well withextended Hindu and Muslim andSikh families. They realised thatthey were getting more signupsa week from India than they hadin their rst year in the US, so they
just relocated it. Those three guys
who had never been out of North
America all relocated to Bombayand they re-branded as Indias
premier dating agency and theyregoing great guns there, and thatsthe beauty of the World Wide Web.Thats what you lose if you onlythink about your own local area.You might think your business isonly focused on your local area butif you deliberately restrict it youll
never know whether you have amore global business potential.
Thats the beauty of theWorld Wide Web. Thatswhat you lose if you onlythink about your own localarea.
41
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
42/116Awwwards.comWeb Design Trends 2013
Luciano FogliaMultidisciplinary Visual Artist
I think will see a sim-plier web emerging.More space, less clutterand decoration.
Luciano Foglia is a multidisciplinaryvisual artist based in Berlin and London.
He has been working in interactive
design, art and music since 2001. His
personal time is spent exploring new
ways of expression in music, design and
art. He works commercially as a Senior
Interactive Designer and Art Director.
42
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
43/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design? This is a transition moment in theweb design industry. I can seemany interesting possible trendscoming up. Change is alwaysgood, and its great to see howmany designers and artists are
taking on these challenges toexperiment with new technologiesand improve the users experienceon all platforms. So going back tothe question, I see lots of simpleand beautiful interactive designconcepts coming in the future.
Expect a focus on typography andgetting the best out of HD displays. What technologies are your teamtraining in now? Which discipli-nes will you be focusing on in thecoming months and years?
Im a visual artist and I work as an
Art Director and Senior InteractiveDesigner, so I dont only look for
means of expression on the web(even if this one is my main channel).Im also interesting in other elds. Imostly use web technologies formy personal projects because oftheir accessibility. What Im trainingin now is WebGL as a platform toreceive external stimulus as midi
signals, sound and moving images.I think its a great technology and
still pretty fresh. I believe it couldbecome an amazing platform forthe web, but still like many othersneeds a high level of understandingof code. We have seen veryinteresting projects done with thistechnology, but not as many Iwould like to see. Or maybe not in
the way I would like to see them.Im blown away every time I see itspotential. It could become a verypowerful tool for visual artists toexpress ideas through the web. Ibelieve the key is to think outside thebox so that we dont limit ourselves
just to what the technology was
made for.
I see lots of simple andbeautiful interactive designconcepts coming in thefuture. Expect a focus ontypography and getting thebest out of HD displays.
WebGL could become avery powerful tool for vi-sual artists to express ideasthrough the web.
43
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
44/116Awwwards.comWeb Design Trends 2013
In standards-based web design,what animation techniques and
effects applied to navigation anduser interaction will we see? Willwe nally move beyond Parallaxscroll? As we overcome some performancelimitations we will see more richexperiences to come. For sure the
emphasis is on graphic design witha sense of depth at the moment.Because of this, the scroll gainedimportance like never before, notonly to browse the content but alsoto interact with it. I would like tosee how we creatively take betteradvantage of it in integration with
3D techniques. Moving beyond
Parallax scroll is a matter of time. Itwill happen as soon as users startto adopt new ways of navigatingthe content. Every step towardsproviding a more interactive andimmersive experience on the webis a new learning process for theusers.
In technological and social ter-ms, how do you think the web
will evolve in the next few years? I think we will see a lot moreapplications in integration withother services, taking the webbeyond the browser. This makes lifea lot easier for users and improves
productivity. In social terms the
internet is playing a very interestingrole, not only on a daily basis butalso for long-term social changepurposes. What we saw in Egyptin 2011 was a clear example ofhow social media can accelerate arevolution, and we are also seeingit in other parts of the world. The
internet belongs to the people andit can represent unrepresented andmarginalised sectors of society andprovide them with a platform to beheard.
I would like to see howwe creatively take betteradvantage of it in integra-tion with 3D techniques.
I think we will see a lotmore applications in inte-gration with other services,taking the web beyond thebrowser.
44
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
45/116Awwwards.comWeb Design Trends 2013
Ben ClineInteractive Designer at Rally Interactive
Most innovation withinteraction will be throu-gh Web GL and nativeapps.
Co-founder and creative director atRally Interactive. Ben is passionate
about interactive design, experiences
and strategy.
45
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
46/116Awwwards.comWeb Design Trends 2013
W hat technologies are yourteam training in now?Which disciplines will you be fo-cusing on in the coming monthsand years?
Rally Interactive is focused oncreating engaging and intuitiveinterfaces. The technology behindthem doesnt matter. For example,
last year we launched an iOS appfor National Geographic - NationalParks by National Geographic.
What many people dont realize iswhile it was only our 2nd encounterdesigning and developing on theiOS platform, it was actually the1st app weve ever built natively inObjective-C. The rst iOS app wemade, Canyon Country National
Parks, was actually built using anon-native iOS framework calledCorona. When it comes to ourwork, we embrace any technologyor platform.
What animation techniques andeffects applied to navigation and
user interaction will we see? Will
we nally move beyond Parallaxscroll?
The Parallax effect wont die anytime soon. It has been aroundfor as long as I can remember (inthe early days of Flash and for along time in lm). When it comesto touch screens, Ive started tosee Parallax animation become
popular as well as gesture basedinterfaces. I think gesture based
apps will continue to grow as usersbecome more savvy with exploringhidden UIs. However, many of ushere at Rally believe Web GL hasa promising future when it comesto web design. It will take yearsbut eventually HTML will begin
to fade as the platform of choicefor websites because it was nevermeant to serve up rich media orinteractive experiences in the rstplace. Most hardcore programmerswill probably agree that HTML andCSS mark-up languages are nolonger ideal to build on.
When it comes to our work, we embrace anytechnology or platform.
Many of us here at Rallybelieve Web GL has a pro-mising future when it co-mes to web design.
46
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
47/116Awwwards.comWeb Design Trends 2013
What do you think well see in la- yout and UI design in 2013?
I think 2013 will be a year of limbowhen it comes to [responsive]websites. They will continue to bewildly popular but will lack when itcomes to innovation and creativity.Most of this wont be the faultof creatives or Agencies, rather
website timelines and budgets willbe stuck in the pre - fragmenteddevice era. Most timelines will be
eaten up testing and optimizingrather than pushing innovation and
creativity. That being said, the nativeapp world is wide open. Gestureand invisible UIs will become morepopular and more intriguing whileWeb GL will [hopefully] start to besupported on mobile browsers,further pushing browser basedlayout possibilities.
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?
Most innovation with interactionwill be through Web GL and nativeapps. Unfortunately, the responsive
era of websites will temporarily stiesome creativity on the web until all
browsers consistently support thenewest technologies. If companieswant to push the boundaries of
creativity in responsive design, theywill have to commit more time andbudget.
I think 2013 will be a yearof limbo when it comes to[responsive] websites. They
will continue to be wildlypopular but will lack whenit comes to innovation andcreativity.
Most innovation with in-teraction will be throughWeb GL and native apps.Unfortunately, the respon-
sive era of websites willtemporarily stie somecreativity.
47
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
48/116Awwwards.comWeb Design Trends 2013
Aarron WalterAuthor of Designing for Emotion
Well begin to movetowards an era of atdesign that emphasizeslegibility and usability.
Aarron Walter has been buildingwebsites professionally since 1999, and
has taught interactive design courses
at colleges. He enjoys sharing his ideas
about education, ndability, and design
at conferences and organizations
around the globe.
48
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
49/116Awwwards.comWeb Design Trends 2013
In technological and social ter-ms, how do you think the webwill evolve in the next few years?
Were heading towards a Web ofloosely connected services. Insteadof building a web app that needsto do twenty things for customers,were starting to focus just on
core workows and rely on APIs,integrations, and hopefully web intents in the near future. We stitchtogether our favorite services usingIf This Then That , we pass photoediting tasks over to Aviary , we letDropbox hold our stuff then grab
it from desktop, web, and mobileapps. An ecosystem of connectedservices makes building apps easier,and reduces the burden of contentinput on the shoulders of users asthey can reuse proles and contenttheyve created elsewhere.
What trends do you see coming
in the near future in web and mo-bile design? What do you think
well see in layout and UI designin 2013?
In the short term future I see a trendtowards an aesthetic that reects an honesty of our materials .The heavy use of lighting effectsin interactive design will fade, and
designers will move towards at,simple designs that no longer tryto emulate the physical world.
Well stop shoe-horning interactiondesign into illustrated physicalobjects like books, radios, and
calendars, and well begin to movetowards an era of at design thatemphasizes legibility and usability.
An ecosystem of connec-
ted services makes buildingapps easier, and reducesthe burden of content inputon the shoulders of users asthey can reuse proles andcontent.
The heavy use of lightingeffects in interactive designwill fade, and designers willmove towards at, sim-ple designs that no longertry to emulate the physicalworld.
49
http://en.wikipedia.org/wiki/Web_Intentshttp://en.wikipedia.org/wiki/Web_Intentshttp://ifttt.com/http://www.aviary.com/http://dropbox.com/http://bradfrostweb.com/blog/post/where-theres-muck-theres-brass-mark-boulton-at-smashing-conferencehttp://bradfrostweb.com/blog/post/where-theres-muck-theres-brass-mark-boulton-at-smashing-conferencehttp://layervault.tumblr.com/post/32267022219/flat-interface-designhttp://layervault.tumblr.com/post/32267022219/flat-interface-designhttp://bradfrostweb.com/blog/post/where-theres-muck-theres-brass-mark-boulton-at-smashing-conferencehttp://bradfrostweb.com/blog/post/where-theres-muck-theres-brass-mark-boulton-at-smashing-conferencehttp://dropbox.com/http://www.aviary.com/http://ifttt.com/http://en.wikipedia.org/wiki/Web_Intentshttp://en.wikipedia.org/wiki/Web_Intents8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
50/116Awwwards.comWeb Design Trends 2013
W hat technologies are youtraining in now? Which dis-ciplines will you be focusing onin the coming months and years?
Im not big on fetishizingtechnology. It empowers us tomake things, but what language, ortechniques power a site isnt whatmoves people. Theyre moved by
the experience we create for them.Ill be thinking about what makespeople tick in the years to comeso I can discover ways to createmore memorable experiences forpeople.
What should a web design new-
bie concentrate on learning?
Learn to prototype quickly. Learn touse things while you design them.Learn to not look to trends in your
medium for your inspiration, butinstead look at the history of othercrafts for insights. Learn to change,because in our industry and in life,the only thing that is unchanging is
change.
What should the new design
principles be in a future whereweb and mobile design must befocused on user experience andcontent?
I dont know that theyll be anydifferent than they ever have been,but I think well be more aware of
principles now that our favoritecomputers are in our pockets.The heuristics that have guidedsoftware design for years still applyto mobile design, but with limitedspace on mobile devices, wereforced to really consider the valueof all elements and options in a UI.
How do you think fast-growingeconomies like India or China aregoing to inuence the web andmobile industry?
I suspect India and China willprovide a lot more developers tothe web industry, which are greatlyneeded right now. Its really hardto hire skilled developers as theresheavy competition for them in theindustry.
In our industry and in life,
the only thing that is un-changing is change.
50
http://www.useit.com/papers/heuristic/heuristic_list.htmlhttp://www.useit.com/papers/heuristic/heuristic_list.html8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
51/116Awwwards.comWeb Design Trends 2013
Trent WaltonFounder & 1/3 of Paravel Inc.
At Paravel, were fo-cused on being as devi-ce-agnostic and reso-lution independent aspossible.
Trent Walton is founder and 1/3 ofParavel, a small web shop based out of
the Texas Hill Country, where the lake
levels are constant and the chicken
fried steaks are as big as your face. Dave
Rupert, Reagan Ray, and he have been
working together building for the web
since 2002.
51
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
52/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
Hopefully, as we progress wellstop thinking about the the webin separate buckets. Words liketablet and mobile mean less andless as the lines between them and
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 design
that 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
in the coming months and years?At Paravel, were focused on being
as device-agnostic and resolution
independent as possible. Werebuilding responsive sites exclusivelyand are using things like fonticons and SVG images wheneverpossible. There are a lot of UIpatterns that need to be rethoughtto work in a responsive or multi-
device environment, so that part ofthe work is particularly exciting tous.
The most exciting partof design is working to un-derstand all the devices outthere so that we can crea-te a single, sensible designthat travels across as many
of those devices as possi-ble.
Were building responsi-ve sites exclusively and areusing things like font iconsand SVG images wheneverpossible.
52
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
53/116Awwwards.comWeb Design Trends 2013
Oliver ReichensteinDesigner at iA Inc.
I expect the app worldand traditional Webdesign to get closer toge-ther in terms of functio-nality and aesthetics.
Oliver Reichenstein studied Philosophyin Basel and Paris. He worked as brand
consultant for Interbrand Zintzmeyer &
Lux for four years. In 2003, he moved
to Tokyo where he founded his design
agency, Information Architects (iA).
Today, iA has offices in Tokyo, Zurich
and Berlin.
53
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
54/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
You can already see it happening.Mashable of the The Next Web,polygon.com and Time.com beton clean, generous, responsivedesign with a lot of typographiccare. I bet that a lot of corporate
and news site are going to followthat trend. The challenge will be
to nd a good balance betweencleanness and density. With theadvent of responsive design thereis and entirely new set of screentypographical challenges waiting
for us. After Web 1.0 aka the ninetiesand Web 2.0 aka the 2000s, weare about to enter a third phasein Web Design. I expect the appworld and traditional Web designto get closer together in terms offunctionality and aesthetics. Withmobile platforms gaining more
and more market share, it might be
that within a foreseeable future, themain screen, Web designers will
think about is the mobile phone.
What should the new designprinciples be in a future whereweb and mobile design must befocused on user experience andcontent?
Simplicity. Scalability. Speed. Stopthinking in xed widths, platforms,browser versions, download speedstandards. Responsive design isnot just about responsive layoutgrids and clever ways of dealingwith big picture formats, it is alsoabout a new dimension of screen
typography.
Can you pinpoint any visualtrends or design elements thatmight emerge in 2013?
I try to avoid thinking in termsof surface aesthetics. Interfacedesign gets better the less you
think in terms of style. But from thetechnical conditions it seems clear
Clean, generous, res-ponsive design with a lot oftypographic care. I bet thata lot of corporate and newssite are going to follow thattrend.
There will be another ge-neration of furthered visualsimplicity in UID.
54
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
55/116Awwwards.comWeb Design Trends 2013
that also aesthetically, there will beanother generation of furthered
visual simplicity in UID. Microsoftwent in that direction and mightsomewhat turn away from it infurther iterations. I am prepared tosee the rst traces of Ive shapingthe surface of OSX and iOS, whichwill denitely result in a simpliedcleaner version of Apples surface
design aesthetic. Hopefully, Ive willnot just simplify the surface design,
but get to a simpler look and feelthrough a simpler interactiondesign. Since every trend comeswith a counter trend, we can alsobe prepared for more baroque orplayful elements trying to set a
counter point.
What technologies are your teamtraining in now? Which discipli-nes will you be focusing on in thecoming months and years?
We are exploring the new screen
typographic territory, we are
working on new interaction pattersfor writing and reading on the screen
and we are developing new frameworks to deal with the multitudesof screens and interaction patternsthat contemporary interactiondesigners need to deal with. Ourtools are less and less specicprograms or programminglanguages. We start with research,
wireframes and initial mockups, butwe soon move towards working inprototypes that slowly evolve intothe nal product.
In technological and social ter-ms, how do you think the webwill evolve in the next few years?
Just as with the new possibilities,Web technology, informationarchitecture, interaction design andscreen typography have becomeincreasingly interesting, they havebecome increasingly difficult. Wehave to prepare for an increasingly
challenging technical setup. Rightnow there is a clear trend towards
a Web that is mostly handled
through a small touch screen.
Every trend comes with acounter trend, we can alsobe prepared for more baro-que elements trying to seta counter point.
We have to prepare foran increasingly challengingtechnical setup
55
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
56/116Awwwards.comWeb Design Trends 2013
I would not be surprised if, forexample, we end up with a tiny
device with a form factor of wristwatch that has a exibility to uidlymorph into a bigger device. Thuswith a device that in itself hashighly variable different screensizes. We witnessed the end ofthe xed screen format,the end
of the pixel, and the end of designprinciples geared by the desire ofvisual control. In the mean time,the denition of these liquid designprinciples is far from clear. Thingsare going to stay exciting.
We witnessed the end ofthe xed screen format,theend of the pixel, and theend of design principlesgeared by the desire of vi-sual control.
56
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
57/116Awwwards.comWeb Design Trends 2013
Legwork AgencyBy Sean Klassen
Most innovation withinteraction will be throu-gh Web GL and nativeapps.
Legwork was born from theunderstanding that you can build a
sustainable studio on the principles of
creativity, innovation and a DIY ethic.
57
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
58/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
I think were going to start seeingmore exploration with 3d andimmersive video. A lot of Flash siteswere going down this direction5/6 years ago and then things wentback to much more basic layouts
after the iPhone came out. Thetechnology is beginning to catchup though.
As an agency, what kind of pro-les do you look for?
Good people are hard to nd and
in great demand right now. Wereactively looking for developers thathave great javascript skills and stillhave an eye for design (if yourethat person, get in touch!). Sincewe are a small shop, we need
people who are well versed in anumber of areas and arent afraidto jump around and try new things.
Things are constantly changing in
this industry, so the most importanttrait you can probably have is a
passion for learning new things.
What technologies are your teamtraining in now? Which discipli-nes will you be focusing on in thecoming months and years?
We want to keep pushing what you
can do with Javascript, CSS andHTML. Additionally, we build mostprojects in Ruby on Rails thesedays. Im curious about gettingmore into WebGL and other thingslike three.js to push the experienceenvelope further.
What animation techniques andeffects applied to navigation anduser interaction will we see? Willwe nally move beyond Parallaxscroll?
I pray we move beyond the parallaxscroll. Its probably the most
overused (in inappropriate ways)trend Ive seen in the last ten years.Theres a time and place for it, butIm so tired of seeing people doit just because they can. In mostcases the implementation andperformance is really bad too. Youcant forget that the way something
works and feels is just as critical to
Were actively looking for
developers that have great javascript skills and still havean eye for design.
58
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
59/116Awwwards.comWeb Design Trends 2013
the design as the visual aspect, ifnot more so.
Anyway, like I said above, I thinkwell start seeing more and more
with 3d. Hopefully people can keepit tasteful. Weve also been doing alot with png sequences to emulatethings you used to only be able todo with video, but with the addedbonus of transparency.
What do you think well see in la- yout and UI design in 2013?Simplicity, app-inspired design,responsive, single page websites,alternative navigation patterns...?
Single, long scrolling sites willstill be popular. Theyre great for
telling a singular story. Responsive
sites and mobile targeting will
become ever more important. Itsprobably not long until mobile is
the dominant form of browsing. Italso seems that people are getting
away from skeumorphic styles thathave dominated the last few yearsand instead opting for simpler,atter styles (think Windows 8,
Svpply, etc.)
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?
Yes, to a point. IE8 isnt goinganywhere in the near futurethough and its really just as bad atsupporting these new technologiesas 7. So, a lot will depend on theaudience you have to target.
Single, long scrolling siteswill still be popular. Theyregreat for telling a singularstory.
I think well start seeingmore and more with 3d.Hopefully people can keepit tasteful.
People are getting awayfrom skeumorphic stylesthat have dominated thelast few years and instead
opting for simpler, atterstyles.
59
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
60/116Awwwards.comWeb Design Trends 2013
UltranoirDigital Savoir-Faire, most awarded studio on Awwwards
You will have fast andeasy access to what youre looking for butwith creativity, style andeven emotion!
Ultranoir is a human-sized studio drivenby passion. Their byword is useful
design, since they believe that the role
of artwork is to serve the application,
its objectives and the end-user - not
the other way around. Ultranoir has
received numerous awards for its online
creations.
60
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
61/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
Im not really into trends but I knowwhat I would love to see in webdesign! More experiences, moreinteractivity, more creativity!During the last days of Flash,someone said the reason for its
ending was that designers wenttoo much into full experiencewebsites, forgetting efficiency andthe end-user... and that the future ofweb will be focused on utility now.Thats not totally wrong, I have toadmit, but I want utility / efficiencyAND creativity. This means that
you will have fast and easy accessto what youre looking for in anysupport but with creativity, styleand even emotion! Now I can
see HTML5 websites reaching the
quality, in terms of interactivity,of Flash websites. However, we
should not recreate what was donein Flash some years ago (we didthis at Ultranoir and I think its partof the process). Now, we have tocreate some new experiences withthe present and future technology(HTML5, CSS3, JS, WEBGL..) anddevices. This will be fully possible
when 80% of people use modernbrowsers. Thats not the case rightnow.
As an agency, what kind of pro-les do you look for?
We are always looking for talented
front-end developers with greatexperience in producing advancedHTML websites and also with astrong creative approach. Whatthe market is really missing is morepeople who mix technology andcreativity.
What technologies are your teamtraining in now? Which discipli-nes will you befocusing on in thecoming months and years?
We are always improving our skillsin the usual trio: HTML5, CSS3 andJavascript. We are very interested
by Adobes news CSS properties
We have to create somenew experiences with thepresent and future tech-nology HTML5, CSS3, JS,WEBGL and devices. Thiswill be fully possible when80% of people use modernbrowsers.
61
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
62/116Awwwards.comWeb Design Trends 2013
such as CSS Regions and Filters.We have to improve our skills on
Canvas, SVG, 3DOf course, Front-end will remain akey discipline on our HR strategybut well also focused our effort inUX and content. A better contentwithin a better experience shouldbe the perfect receipt.
What animation techniques andeffects applied to navigation anduser interaction willwe see? Willwe nally move beyond Parallaxscroll?
As I said before, companies likeAdobe are working on some great
tools to enhance userinteraction. In term of layout design,I think well see more and morewebsites inspired by print design.Its already the case. Personally,I study print design (magazine,posters) a lot and I hope web design
will reach this quality.About navigation and interaction,
we now have to manage various
devices with their own capabilities.On a laptop, you rollover, drag and
click and on a tablet you will slide,touch, turn... So we are trying tobring closer both experiences. Itsnot easy. I saw a great approach ona website done by Hello Monday.We are on the same thinking.I have no problem with Parallaxscroll if it serves the experience.
I think this system is perfect forstorytelling websites. You scrolldown like turning the page of abook. Theres still potential here.What I cant stand anymore aresome parallax websites using thiseffect just because they think itstrendy (its not anymore). Using an
effect for the effect is meaningless.But you never know. One day, aguy will come along with a newconcept and it will create a trend,as Ian Coyle did when he designedthe very rst parallax web site forNike, or When Gabo Mendozacreated the rst Flash website in
the old days.
What do you think well see in la- yout and UI design in 2013?
In 2013 I think well have moresimplicity and this is for tworeasons:
In term of layout design,I think well see more andmore websites inspired byprint design.
62
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
63/116Awwwards.comWeb Design Trends 2013
China for example, IE6 is strong.
-There are too many differencesin HTML rendering between all thebrowsers / OS / devices
Its a bit of a Babel tower now.That means that we spend a lotof time writing the same story in
many languages so everybody can
read 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 more
accessible from a web standardspoint of view?
Once 80% of Internet usersare speaking the same HTMLlanguage, well see an explosionof creativity. New tools will beavailable and web designers in the
starting blocks! But I think well have
to wait until 2014. That does notmean we wont see masterpieces
in 2013 as some clients ask forwebsites for modern browsersonly. Hopefully! I love to read formodern browsers only in a brief!
Its a bit of a Babel towernow. That means that wespend a lot of time writingthe same story in many lan-guages.
63
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
64/116Awwwards.comWeb Design Trends 2013
Ian HicksonHTML5 Specification Editor
Mobile is where Desk-top was a decade or twoago, in terms of innova-tion.
Ian Hickson is the author and maintainerof the Acid2 and Acid3 tests, and the Web
Applications 1.0/HTML 5 specication.
He is known as a proponent of web
standards, and has played a crucial role
in the development of specications
such as CSS. Hickson was a co-editor
of the CSS 2.1 specication.
64
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
65/116Awwwards.comWeb Design Trends 2013
W hat will the trends be inweb programming (front-and back-end)? Which langua-ges or frameworks will gain moreconverts in the near future?
Languages and frameworks popup, become fashionable, and die
out quicker than I can actuallykeep up. In practice what matters
is using frameworks that do whatyou need. Sometimes using theancient crufty languages is abetter idea than using the newhotness, because its more reliable.A lot of programmers these daysuse scripting languages andlanguages with automatic memory
management, weak typing, andso forth, because they let you getstuff off the ground quicker thananything else, but there is often acost, usually is in either performance(the system doing stuff tends tobe expensive in terms of CPUcycles and memory), maintenance
(strongly-typed, more structured
languages can have compilers thatcatch errors at compile time that
are ridiculously time-consumingto catch at runtime), or support(newer languages might notsurvive the next wave of new cooltech, leaving you with legacy codeon an unmaintained toolchain).Often these tradeoffs are the rightones to make -- these languages
really *do* let you get somethingoff the ground way faster, and thatmatters (after all, if you dont ship, itdoesnt matter what language youused). Its really something eachengineering team has to carefullyconsider.
What should a newbie web deve-loper concentrate on learning?
Depends what they want to do.There are far more technologiesavailable for developing Websolutions now than any one personcould possibly learn at this point,
so one has to gure out whatarea one wants to specialise in --user interface, graphics, back end,networking, storage, computation,etc -- and just work on that.
W3C, WHATWG, Mozilla, Adobe,Google...What have they got in
store for 2013?
Sometimes using the an-
cient crufty languagesis a better idea than usingthe new hotness, becauseits more reliable.
65
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
66/116Awwwards.comWeb Design Trends 2013
As far as WHATWG goes, wevebeen expanding to more than just
HTML, with new editors workingin the WHATWG mailing list ratherthan elsewhere. You can see whatwere working on here:http://www.whatwg.org/specs/
As far as HTML goes, the thing Imworking on right now is canvas on
workers, but you can see the list ofwhats next to be worked on here:http://www.whatwg.org/issues/
How do you think fast-growingeconomies like India or China aregoing to inuence the web andmobile industry?
When working on HTML I try to just look at the world as a singleecosystem, not on a per-countrybasis, so this isnt something I thinkmuch about. Having said that,there are already more peopleonline in Asia than Europe and
North America put together. Thereal dark horse is Africa.
Do you think standards-basedmobile apps will overtake nativeapps?
Im not sure I agree with the
premise of the question. The Web
has trillions of pages, after all.Having said that, native platforms
and the Web have very differentcharacteristics. The Web is by designradically vendor-neutral, and (to alesser extent in practice) device-neutral. This has huge benets:nobody can single-handedly killthe Web, for example. If you writea Web page or application today,
and then tomorrow your desktopoperating system vendor or yourmobile phone handset vendor goesbankrupt, you can just buy anotherdevice and your page still works. Ifyou target a proprietary platform --e.g. Amiga, OS/2 -- that then losesthe support of its vendor, the result
is that your application is no longerusable.
The cost of having a systemimmune to the whims of a singlevendor is that by and large,innovation doesnt happen in multi-vendor discussions. If you have a
proprietary platform, its easy to
Innovation doesnt ha-ppen in multi-vendor dis-cussions. If you have a pro-prietary platform, its easy
to add features to it.
66
http://www.whatwg.org/specs/http://www.whatwg.org/issues/http://www.whatwg.org/issues/http://www.whatwg.org/specs/8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
67/116Awwwards.comWeb Design Trends 2013
add features to it: you just do it. Noneed to argue with anyone. On the
Web, a feature can only be addedif every major implementor agreesits worth adding, and that usuallyonly happens once its been provenin a native platform.
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 brings
radical new features, and the Webwill always be behind on those. Sothe cutting edge is native.
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 that
its viable to create a desktop OS
that does nothing but bring up aWeb browser, in fact). Mobile is
where Desktop was a decade ortwo ago, in terms of innovation.
Mobile is where Desktopwas a decade or two ago, interms of innovation.
So native platforms havethe edge when things arerapidly innovating.
67
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
68/116Awwwards.comWeb Design Trends 2013
Brad FrostMobile Web Strategist and Frontend Designer at R/GA
2013 will be the Yearof Performance. Peopleare increasingly intole-rant with slowness in anyexperience.
Brad Frost is a mobile web strategist andfront-end designer at R/GA and is based
out of beautiful Pittsburgh, PA. He is the
creator of Mobile Web Best Practices, a
resource site aimed at helping people
create great mobile and responsive web
experiences.
68
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
69/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in the near future inweb and mobile design?
Im calling it right here right nowthat 2013 will be the Year ofPerformance. And if Im wrong inthat assertion, Ill slowly eat mywords with tears in my eyes thencrawl into a corner until 2014. Why
do I say performance will be abig trend? People are increasinglyintolerant with slowness in anyexperience (web or otherwise), sothe services that will rise to the topwill be the ones that are blazinglyfast. Ive been talking aboutperformance as design rather
than a handful of checkboxesdevelopers need to concernthemselves with. Performanceneeds to be everyones concernin order to create truly exceptionalmulti-device web experiences.
What should the new design
principles be in a future where
web and mobile design must befocused on user experience and
content?
I summed up what I feel is cruciallyimportant in my Principles ofAdaptive Design: ubiquity, exibility,performance, enhancement, anda general notion of being futurefriendly.
As creators for the Web, its ourresponsibility to embrace andpreserve the ubiquity of the web,which is easily its biggest assetand easily one of humankindsgreatest achievements. We needto continue to return the Web to itsintrinsically uid state. We need to
respect our users time and striveto give them a highly performant,snappy experience. We also needto take advantage of the plethoraof capabilities offered by devicesand browsers, but do so in a waythat preserves the other principlesof adaptive design. And lastly,
everything we do should be built
Performance needs to beeveryones concern in or-der to create truly excep-tional multi-device web ex-periences.
Principles of AdaptiveDesign: ubiquity, exibili-ty, performance, enhance-ment, and a general notionof being future friendly.
69
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
70/116Awwwards.comWeb Design Trends 2013
to stand the test of time and shouldbe considerate of tomorrows
landscape in addition to todays.
What technologies are you tra-ining in now? Which disciplineswill you be focusing on in the co-ming months and years?
Im still very much a front-end
designer, meaning that I preferto focus on the interface side ofweb design. I dont come from acomputer science background andId very much like to build up a solidcomputer science foundation. Ifeel its the only way to keep myselffrom feeling like Im shooting in the
dark every time I program.
My other big priority (dare I say newyears resolution) is to learn how tomanipulate data. I want to masterhow to pull in a data set fromsomewhere, possibly combine itwith another set of data, and dosomething with it. Right now I feel
I can clumsily fumble through that
process, but thats unacceptable.Data is going more places than
ever before, so having a solid graspon how to utilize and manipulate itwill prove to be an invaluable skill.
What animation techniques andeffects applied to navigation anduser interaction will we see? Willwe nally move beyond Parallax
scroll?
I hate parallax. There, I said it.The Nike Better World site wasamazing, but that doesnt mean
that everyone else should followthe leader. We have a whole slewof animation tools, gestures anddevice capabilities at our ngertips,
and well nd interactions andanimations that are conduciveto the environment. Instead ofmiming parallax all day, think abouthow gestures, subtle animationsand transitions can enhance (notdistract from) the user experience.
Data is going more placesthan ever before, so havinga solid grasp on how to uti-lize it will prove to be an in-valuable skill.
Think about how gestu-res, subtle animations andtransitions can enhance(not distract from) the userexperience.
70
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
71/116Awwwards.comWeb Design Trends 2013
What do you think well see in la- yout and UI design in 2013?
I think (and hope) well continueseeing interfaces move towardssimplicity and intuitiveness ratherthan bells and whistles. As morepeople accept multi-device webdesign as reality, well see manyresponsive patterns evolve and see
others fade away. Well continueto experiment and see what sticks.Theres never been a more excitingtime to be a web designer. Heresto 2013!
71
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
72/116Awwwards.comWeb Design Trends 2013
Hinderling VolkartBy Michael Hinderling, Severin Klaus & Michael Volkart
Clear and focused, re-duced design. Contentoriented!
Hinderling Volkart is one of the mostimportant digital agencies in Europe,
based in Zurich, Switzerland.
72
8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh
73/116Awwwards.comWeb Design Trends 2013
W hat trends do you see co-ming in