• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Everything Old is New Again: The State of Web Design
 

Everything Old is New Again: The State of Web Design

on

  • 667 views

Back to the Old School: Device-Independence with Responsive Design

Back to the Old School: Device-Independence with Responsive Design

Process: Art, Copy & Code: The New Creative Team

Embrace the Medium: Flat vs. Skeuomorphic Design

Statistics

Views

Total Views
667
Views on SlideShare
661
Embed Views
6

Actions

Likes
9
Downloads
0
Comments
0

1 Embed 6

http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Everything Old is New Again: The State of Web Design Everything Old is New Again: The State of Web Design Presentation Transcript

    • The State of Web DesignEverything Old Is New AgainApril 25th 2013Maria D’Amato & Joel Parr
    • Back to the Old SchoolDevice-Independence with Responsive DesignProcess: Art, Copy & CodeThe New Creative TeamEmbrace the MediumFlat vs. Skeuomorphic Design
    • Web FundamentalsWhat do we mean by “Old School”in terms of the web?• Constructed using the original building blocks ofthe World Wide Web: HTML for structure and CSSfor layout & styling• Web browsers: cross-platform by design• Embraced the limitations of the medium byresponding to different computers, screen sizesand browsers• Tabular, gridded and powered by the primarycontent, i.e. Typography• Sparing, careful use of adornment such asimages and animation. Little video or advertisingAmazon.com
    • Web FundamentalsWhat do we mean by “Old School”in terms of the web?• Constructed using the original building blocks ofthe World Wide Web: HTML for structure and CSSfor layout & styling• Web browsers: cross-platform by design• Embraced the limitations of the medium byresponding to different computers, screen sizesand browsers• Tabular, gridded and powered by the primarycontent, i.e. Typography• Sparing, careful use of adornment such asimages and animation. Little video or advertisingAmazon.comCNN.com
    • Web FundamentalsWhat do we mean by “Old School”in terms of the web?• Constructed using the original building blocks ofthe World Wide Web: HTML for structure and CSSfor layout & styling• Web browsers: cross-platform by design• Embraced the limitations of the medium byresponding to different computers, screen sizesand browsers• Tabular, gridded and powered by the primarycontent, i.e. Typography• Sparing, careful use of adornment such asimages and animation. Little video or advertisingAmazon.comCNN.comNY Times
    • Web FundamentalsWhat do we mean by “Old School”in terms of the web?• Constructed using the original building blocks ofthe World Wide Web: HTML for structure and CSSfor layout & styling• Web browsers: cross-platform by design• Embraced the limitations of the medium byresponding to different computers, screen sizesand browsers• Tabular, gridded and powered by the primarycontent, i.e. Typography• Sparing, careful use of adornment such asimages and animation. Little video or advertisingAmazon.comCNN.comNY TimesShell.com
    • What Happened Next?We got creative...
    • What Stands Out?• Very image heavy• Freeform in structure• Small, fixed width content area,centered in middle of screen• What little text there is, often laidout as an image• Why? Very few “websafe” fonts• Aesthetics over usability• But still cross platform and builtusing HTML and CSS
    • What Stands Out?• Very image heavy• Freeform in structure• Small, fixed width content area,centered in middle of screen• What little text there is, often laidout as an image• Why? Very few “websafe” fonts• Aesthetics over usability• But still cross platform and builtusing HTML and CSSLook familiar?
    • What Stands Out?• Very image heavy• Freeform in structure• Small, fixed width content area,centered in middle of screen• What little text there is, often laidout as an image• Why? Very few “websafe” fonts• Aesthetics over usability• But still cross platform and builtusing HTML and CSSLook familiar?Canon.com
    • What Stands Out?• Very image heavy• Freeform in structure• Small, fixed width content area,centered in middle of screen• What little text there is, often laidout as an image• Why? Very few “websafe” fonts• Aesthetics over usability• But still cross platform and builtusing HTML and CSSLook familiar?Canon.comStill online (!)
    • Web Usability: The Dark Years• We abandoned the building blocksof the web with reliance on pluginssuch as Flash and QuickTime• We can’t even use the normalbrowser functionality likescrollbars, the back button andcopying & pasting text• Bandwidth-heavy “Immersive”animation, intro screens & videos• Aesthetics won the day
    • Web Usability: The Dark Years• We abandoned the building blocksof the web with reliance on pluginssuch as Flash and QuickTime• We can’t even use the normalbrowser functionality likescrollbars, the back button andcopying & pasting text• Bandwidth-heavy “Immersive”animation, intro screens & videos• Aesthetics won the day
    • Seeing The Light: Web Standards• At the same time as Flash accessibility &usabilities were worked around, the webstandards movement focused on contentand semantics of HTML & CSS• Driven by accessibility and usability, notaesthetics• Text content prioritized over images andanimation• But, often still fixed width with small text• And still a world of desktop (and laptop)computers... The CSS Zen Garden - 2005
    • The Mobile Web c.2006• Small screen versions of sites forWAP phones & PDAs• Text-only “portal” sites for viewingon your phone• Physical keyboards ruled• Very few touch-capable devices &no “good” touch-capable devices• The full web hadn’t gone mobile
    • 2007: Everything Changed• Our mobile efforts quickly looked antiquated• No longer a need for WAP versions of sites• The iPhone introduced a new medium for the web• Portrait and landscape with free rotation• Touch input with swiping• Pinch to zoom• Web Applications
    • Enter Responsive DesignBack to the fluid basics of the web
    • Responsive Design• Takes advantage of advances in the basic web technologiesand a return to the days of fluid, content-driven sites• Clarity, usability, accessibility and semantics• And now, available across every imaginable device• HTML5 & CSS3 give us Media Queries to detect screen sizesand the ubiquity of modern web browsers allows us to respondin ever more seamless ways
    • Wait, what?
    • Wait, what?
    • Wait, what?Develop Once
    • Wait, what?Develop OnceDifferent Devices
    • Wait, what?Develop OnceDifferent DevicesOne Codebase
    • Wait, what?Develop OnceDifferent DevicesOne CodebaseCheaper & Easier
    • How Does It Work?• Basic principle: Everything within the site should be “fluid”and able to move around depending on the device.• CSS Media Queries let us detect the size of the screen size andreformat our layout to both suit the device and be true to thehierachy of our content• We can define when to show things, hide things, make thingsline up, drop things down & move things around
    • Show me!
    • Content Choreography“The concept of permanently placing content on a web page for asingle browsing width or resolution is becoming a thing of the past.”- Trent Waltonhttp://trentwalton.com/2011/07/14/content-choreography/
    • Making Responsive Happen• Requires planning and thinking throughout the web project• Must be considered as part of the Information Architecture• Essential to consider in the design phase. Sketching can help• Comes to life through prototyping for different device sizes• Realized through development• Some terms you may have heard...
    • Adaptive Design & Responsive DesignResponsive Design (layout) is a subset of Adaptive Design (abroader set of technically-focused practices)Mobile FirstStarting your thinking, content strategy, design anddevelopment with mobile devices as the base to build upon.Responsive ImagesHow can assets like images adjust themselves to differentsizes, resolutions (e.g. Retina displays) and bandwidth?
    • Further Reading• Responsive Web Designhttp://alistapart.com/article/responsive-web-design• Mediaqueri.eshttp://mediaqueri.es• Trent Walton’s Bloghttp://trentwalton.com/category/articles/• This Is Responsivehttp://bradfrost.github.io/this-is-responsive/
    • Process: Art, Copy & Code *A new process for multi-screen, multi-device design• To build responsively we need to work responsively• Considering many different screen sizes, layouts and device capabilities within asingle website requires a new way of thinking• Reorganizing the team: Design (Art), Writing (Copy) and Development (Code)• Thinking iteratively and prototyping for success* Googlehttp://www.artcopycode.com
    • Why Art, Copy & Code?“We’re in the midst of a second creative revolution, driven bytechnology. Code is being added to the core creative process,enabling new forms of brand expression and engagement.”- Googlehttp://www.artcopycode.com
    • 20 Years agoWe borrowed some ideas...
    • Waterfall• The way we make websites comes from a desktop softwaredevelopment process devised in the 70s/80s• The linear model with work phased into separate stages:research, plan, design, develop, launch, assess• All geared towards a big, monolithic goal: The Launch• Does this work when trying to move quickly and considermany different use cases and devices?
    • So Many Screens, So Little Time• This process works, it just depends on the type of project• For modern, multi-device projects there might be a better way• Considering such a range of phones, tablets, desktops and large screenscan seem overwhelming. Do we try and design & build different layoutsfor each and create static mockups of every different configuration?• Having such a grand overview would be great, but it’s simply notpossible. There isn’t enough time or money• Borrowing from Silicon Valley startup culture, we can move quicker andbe smarter
    • A Different ApproachIn order to work more efficiently, we should:1. Ask “how many static versions of different derivations do we need to design?”2. Planning and designing shouldn’t be done in a vacuum3. Think in terms of modules4. Set deliverable expectations5. Allow interaction (through prototyping) as soon as possible6. Think iteratively
    • When Do We Get To The “Design” Stage?“We deploy a cross functional team, all working in closecollaboration with our client partner to define, prototype,and evolve the system together. This collaborative,multidisciplinary team [...] is, in fact, the design team.”- Michael Piliero, Free Associationhttp://freeassociation.is/blog/when-do-we-get-to-the-design-stage
    • Iteration & Prototyping1. Research with responsive design and development in mind2. Design modularly in conjunction with development and prototype early ideas3. Use whatever tools are easiest and most effective for the individual process4. Evaluate our prototypes, look at metrics and feedback5. Start the loop again, addressing issues and/or adding featuresWhen thinking responsively, the lines between design anddevelopment become blurred. Working iteratively involves:
    • Further Reading• The Lean Startuphttp://theleanstartup.com/• Trent Walton’s Blog: Reorganizationhttp://trentwalton.com/2013/04/10/reorganization/• Teehan+Lax & Medium: A Place for Sharing Ideas and Storieshttp://www.teehanlax.com/story/medium/• Prototyping toolshttp://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/http://www.edenspiekermann.com/en/blog/espi-at-work-the-power-of-keynote
    • Embrace the MediumSkeuomorphic vs. Flat Design
    • User Interface Fundamentals• The graphical user interface, or GUI, is understood as theuse of graphic icons and a pointing device to control acomputer• The desktop metaphor is a user interface system that treatsthe users’ computer monitor as if it was the users’ physicaldesktop, upon which objects, such as documents andfolders, can be placed• The Macintosh, released in 1984, was the first commerciallysuccessful product to use a desktop metaphor: files lookedlike pieces of paper, and file directories looked like filefolders. There was a set of desktop accessories like acalculator, notepad and alarm clock, and to delete files theuser dragged them to a trash can icon.How did we get here? This is not my beautiful desk.
    • What happened next?You get a metaphor, and you get a metaphor, and you get a metaphor...
    • Skeuo-what?• A skeuomorph is an object designed to imitate anothermaterial or technique; this imitation serves little or no purposeto the new object, but was essential to the original• With the advent of the iPhone skeuomorphism truly took off• it was a completely new kind of device, and realism was away to make people feel at ease with their new device• Since the calendar looked like a physical calendar it was easyto understand it’s function
    • A design is not wholly skeuomorphic unless itcopies the material, shape and function of theoriginal object.Apple’s newsstand app for iPhone and iPad isthe epitome of skeuomorphic design. It copiesit’s shape from an actual newsstand, it’s fauxwooden texture mimics texture, and itfunctions like a shelf with magazines beingplaced on the racks; on top of this themagazines open as they would in real-life.Quintessential Skeuomorph
    • Skeuomorphic ProsFamiliarity• Users feel more comfortable with familiar things; by relating to a real-world objectusers feel more at ease with an interface task.Engagement• By replicating a real-world object we can also replicate a users feelings about itCommunicating• visual metaphors help build understanding; this is especially useful whenintroducing new interface concepts or new technologies
    • Skeuomorphic ConsAnti-Innovation• When borrowing elements from a design’s previous incarnation, you often bringalong it’s limitations, even when those limitations have no reason to exist anymoreMisleading Behavior• Making something look like a physical object, but not work like a physical objectcreates confusion: if it looks like a book, but doesn’t function like a book it’s baduser experienceDesign• Realism done wrong can morph into kitch; even in real-life fake wood and leathercan look tacky
    • Sometimes skeuomorphism is used without reasoncreating a confusing experience and poor design.Apple’s Find My Friends app uses leather texture,stamps, and stitching; while these elements may looknice and are fun to create in Photoshop they serve nopurpose other than decoration.Apple’s Contacts App was designed to imitatea traditional address book. It mimics theshape, material and function of the originalobject and is therefore truly skeuomorphic.
    • The Problem with SkeuomorphismWeb Design...It’s for the Internet• Skeuomorphism is not a web-firstapproach• These skeuomorphic designs take upexcess memory, and often under-utilizescreen real-estate in order to mimic theoriginal object.• In great design form follows function• in the early years of a new method itcan be helpful to mimic the forms ofthe past, but at some point thetransition should occur and formshould be based on current methodsVisual Metaphors Have anExpiration Date• While the reel-to-reel imagery used in the oldApple playlist app was beautifully designed,the thing that it mimicked has quickly goneout of the public’s visual vernacular.
    • The ReactionNatively Digital
    • What is Flat Design?• A minimalistic style of interface that emphasizes usability over aesthetics• It focuses on the screen, a two-dimensional space, and does not employ gradients,bevels or shadows to simulate a three dimensional world• Ornamental elements are viewed as unnecessary clutter which distracts from userexperience• Flat design often relies on bright contrasting colors and clean simple illustrations toguide the user’s eye• Large Typography is characteristic of flat design
    • Microsoft’s Metro user interfacelaunched the flat-design trend.Microsoft embraced a completelydifferent interface style with Metro;leaving behind the shadows, highlights,gradients and textures of iOS apps andreplacing them with large squares of flatcolor with large typography reminiscentof Swiss design.Flat design resonates with designerslove of minimalism, embodied by thefamous Antoine de Saint-Exupery that“perfection is achieved not when thereis nothing left to add, but when there isnothing left to take away.”Quintessential Flat Design
    • Flat Design Pros• Flat Design reverts back to the most basic principles of design to move a users’ eyearound the page• Flat Design forces a designer to really take notice of typography and layout (an areawhere web-design has lagged behind traditional design)• Flat is better for responsive• flat colors and live text are easier to reconfigure to different browser sizes thanimages and textured elements.
    • Flat Design Cons• Flat Design is trendy and therefore likely to be overused• Taking minimalism too far can have a negative impact on usability (the very thingflat designers should be placing at the forefront of their considerations)• Users have come to rely on subtle clues to make their way through an interface:buttons have a slight gradient and round corners, form fields have soft innershadows, and navigation bars float over other content; remove all of these clues andevery element is placed at the same level leaving the potential for confusion
    • The FutureDon’t I Know You From Somewhere
    • There is Another WaySo far the flat vs skeu debate has also loosely been a Microsoftvs Apple debate. An alternate to both can be found in Google.
    • With the recent release of their newer mobile apps, Google has begun pushinga style that is becoming know as ‘almost-flat’ or ‘skeuominimalism.’ This newstyle uses elements like shadows and gradients in a tasteful, subtle way. Itoffers the best of both worlds: realism’s subtle hints at function with thepurity and simplicity of flat design.
    • New MySpace is a good example ofalmost flat design: with buttons thatappear flat until rollover reveals atraditional ‘click-me’ gradient.Even Facebook, which has been largely flat and gradientfree since 2004 us using drop shadows to separateoverlays and drop downs from the rest of the page.
    • Apple has started to move away fromskeuomorphic design. As Jony Ive’s, SeniorVice President of Industrial Design at Appleand sometimes referred to as the next SteveJobs, influence spreads Apple’s UI designmoves to a more middle ground as can beseen in the redesign of the Podcast app.
    • Let’s Wrap This UpGood digital design is user centric.Each of these paradigms has benefits and appropriate uses; todecide which is best for a project think first about the user: whothey are, their level of knowledge, and what is being asked of them.
    • Further Reading• Daring Fireballhttp://daringfireball.net/2013/01/the_trend_against_skeuomorphism• Branch Conversation Dealing with Flat Design:http://branch.com/b/how-flat• Fast Co. Design:http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis• Tumblr of the best/worst of skeuomorphismhttp://skeu.it/• UX Blogshttp://ui-patterns.com/bloghttp://boxesandarrows.com/http://37signals.com/svn