Web and Mobile TRENDS 2013 85699DFx78tgh

8/13/2019 Web and Mobile TRENDS 2013 85699DFx78tgh

1/116Awwwards.comWeb Design Trends 2013 1


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



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


4/116



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



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



Chapter. 2

7



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



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 layout 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/73804



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



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


12/116



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



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




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 layout 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



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




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


18/116



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


20/116



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



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



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




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.


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.


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-


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/



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



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




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



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



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




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.


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-


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



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 layout 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



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



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.


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



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


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 layout 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



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



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



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



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



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/



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



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



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



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



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



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



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


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




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



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




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_Intents



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



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




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



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




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



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.


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



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



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




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



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 layout 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



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




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



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.


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



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



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



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.


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



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/



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



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




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



to stand the test of time and shouldbe considerate of tomorrows

landscape in addition to todays.


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




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



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



W hat trends do you see co-ming in

Documents

Web and Mobile TRENDS 2013 85699DFx78tgh