47
Tencent • Online Media Group Design Center • bennyzhai • 2015.4.24 Future Friendly Web Design

Future Friendly Web Design

Embed Size (px)

Citation preview

Tencent • Online Media Group Design Center • bennyzhai • 2015.4.24

Future Friendly Web Design

For a Future Friendly Web

Responsive Web Design (RWD)

Since 2010.5

For a Future Friendly Web

Ethan Marcottehttp://ethanmarcotte.com

For a Future Friendly Web

Style SolutionRWD

For a Future Friendly Web

History: 2009, Mobile First

Luke Wroblewski, 2009.11.3, "Mobile First", http://www.lukew.com/ff/entry.asp?933

1. Mobile is exploding2. Mobile forces you to focus3. Mobile extends your capabilities

For a Future Friendly Web

History: 2010, Birth, Theory and Practice

Ethan Marcotte, 2010.5.25, "Responsive Web Design", http://alistapart.com/article/responsive-web-designAlexander Dawson, 2010.8.18, "Mobile Web Design: Best Practices", http://sixrevisions.com/web-development/mobile-web-design-best-practices

For a Future Friendly Web

History: 2011, Performance

Luke Wroblewski, 2011.9.12, "RESS:Responsive Design + Server Side Components", http://www.lukew.com/ff/entry.asp?1392

For a Future Friendly Web

History: 2012, Workflow

Mark Boulton, 2012.2.24, "Responsive Summit: Workflow", http://www.markboulton.co.uk/journal/responsive-summit-workflow

For a Future Friendly Web

History: Bootstrap and Grid System

http://getbootstrap.com

For a Future Friendly Web

Final Goals

DeviceAdaptive

DesignCost

Cool

For a Future Friendly Web

Core

DeviceAdaptive

For a Future Friendly Web

2015 Design Trend, Source-1

http://justcreative.com/2015/01/02/web-design-trends-predictions-2015/

1. The Rise of Flat & Material Design2. Background + Full Screen Videos3. Mobile Apps & Social Sites will

Dominate4. Interactive Webgraphics Replace

Infographics5. Micro-interactions6. Less Coding & More Websites7. Big Images / Video to Replace Sliders8. Responsive Design with Better

Performance9. Functional Web Typography

10. Card Design11. Augmented Reality12. Subtle UI Animations13. SVG Will Rise14. Responsive Icons15. More Personalization16. Less Clicks, More Scrolling17. Line Icons + Ghost Buttons18. Improved Parallax (Less Is More)

For a Future Friendly Web

2015 Design Trend, Source-2

http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015

1. Responsive or Go Home2. Ghost Buttons3. Bigger Emphasis on Typography4. Large, Beautiful Background Images & Videos5. Scrolling Over Clicking6. Card Design Will Continue (Get Better)7. Flat Design is Growing Up (or, The Rise of Material Design?)8. Microinteractions9. Interactive Storytelling10. Personalized UX

For a Future Friendly Web

Future Friendly (FFLY)

Since 2011.9

For a Future Friendly Web

http://futurefriendlyweb.com/http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012http://www.slideshare.net/dmolsenwvu/the-future-friendly-campus-12514902http://www.slideshare.net/lukebrooker/a-future-friendly-workflow

For a Future Friendly Web

Quick Thinking

• In case of1. Device fragments2. Complex Contexts3. Hardly to predict the future of the both

For a Future Friendly Web

Quick Thinking

• So1. Attitude: Embrace unpredictability2. Action: Think and behave in a future-

friendly way

For a Future Friendly Web

Principle

1. Content FirstJeremy Keith:https://adactio.com/journal/4523Do not trouble users.

2. Mobile FirstLuke W.:http://www.lukew.com/ff/entry.asp?933Mobile device break out, context and interaction method have changed.

3. Orbital ContentCameron Koczon:http://alistapart.com/article/orbital-contentUsers would get the same content at different times or devices, make the task more easier.

For a Future Friendly Web

Practice and Research

1. Adaptive DesignOne way: Responsive Web Designhttp://www.slideshare.net/bienfantaisie/webrebuild-as-design

2. Atomic Designhttp://www.slideshare.net/bradfrostweb/atomic-design

3. Pixel-Perfect will be endhttp://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-content-minnewebcon-version

For a Future Friendly Web

Atomic Design

http://www.slideshare.net/bradfrostweb/atomic-design

Design “System”, not pagesStart from html tags

For a Future Friendly Web

Pixel-Perfect will be end

http://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-content-minnewebcon-version

Say goodbye to pipeline, more responsibility, more cooperation.

For a Future Friendly Web

FFLY’s background

2011.9

For a Future Friendly Web

A week before 21st, September, 2011

http://globalmoxie.com/blog/future-friendly-mobilewood.shtmlhttp://userfirstweb.com/558/mobilewood-and-futurefriendly

TennesseeMobilewood party10 members

For a Future Friendly Web

1. Josh Clark

https://www.linkedin.com/in/joshclarkhttp://globalmoxie.com

Tapworthy(Chinese Ver.)

For a Future Friendly Web

2. Brad Frost

https://www.linkedin.com/in/bradfrost

I make websites

For a Future Friendly Web

3. Bryan Rieger

https://uk.linkedin.com/in/bryanrieger

For a Future Friendly Web

4. Jason Grigsby

https://www.linkedin.com/in/grigs

Head First Mobile Web(Chinese Ver.)

For a Future Friendly Web

5. Lyza (danger) Gardner

https://www.linkedin.com/in/lyzadanger

Head First Mobile Web(Chinese Ver.)

For a Future Friendly Web

6. Jeremy Keith

https://adactio.com

For a Future Friendly Web

7. Luke Wroblewski

https://www.linkedin.com/in/lukew

For a Future Friendly Web

8. Scott Jehl

http://scottjehl.com

For a Future Friendly Web

9. Scott Jenson

https://www.linkedin.com/in/scottjensonhttp://designmind.frogdesign.com/blog/author/beyond-mobile/

For a Future Friendly Web

10. Stephanie Rieger

https://uk.linkedin.com/in/stephanierieger

Yiibu产品总监/UX设计

For a Future Friendly Web

客串. Ethan Marcotte

http://alistapart.com/article/responsive-web-designhttp://ethanmarcotte.com/http://unstoppablerobotninja.com/about/

RWD Founder

For a Future Friendly Web

客串. Stephen Hay

https://nl.linkedin.com/in/stephenhay

For a Future Friendly Web

A List/Book Apart

Since 1998

For a Future Friendly Web

www.alistapart.com

• explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

For a Future Friendly Web

www.alistapart.cn

For a Future Friendly Web

www.abookapart.com• Web design is about multi-disciplinary mastery and laser focus, and that’s

the thinking behind our brief books for people who make websites. We cover the emerging and essential topics in web design and development with style, clarity, and, above all, brevity — because working designer-developers can’t afford to waste time.

• A Book Apart publishes highly detailed and meticulously edited examinations of single topics. We produce brief books of about 100 pages — the perfect size in terms of subject depth and coverage for topics like HTML5, CSS3, content strategy, responsive web design, and more.

• The goal of every title in our catalog is to shed clear light on a tricky subject, and do it fast, so you can get back to work. Thank you for supporting our mission to provide professionals with the tools they need to move the web forward.

For a Future Friendly Web

www.abookapart.com

For a Future Friendly Web

1. Jeremy Keith:HTML5 For Web Designers, Chinese book launched in November, 20142. Dan Cederholm:CSS3 For Web Designers, Chinese book launched in November, 2014

For a Future Friendly Web

3. Erin Kissane:The Elements of Content Strategy, Chinese booklaunched in August, 20145. Aarron Walter:Designing For Emotion , Chinese book launched in August, 2014

For a Future Friendly Web

4. Ethan Marcotte:Responsive Web Design, Chinese book launched in November, 20146. Luke W.:Mobile First, Chinese book launched in November, 2014

For a Future Friendly Web

7. Mike Monteiro:Design is a Job, Chinese book launched in January, 2015

For a Future Friendly Web

8. Karen Mcgrane:Content Strategy for Mobile9. Erika Hall:Just Enough Research10. Dan Cederholm:Sass For Web Designers11. Jason Santa Maria:On Web Typography12. Mike Monteiro:You‘re My Favorite Client13. Scott Jehl:Responsible Responsive Design

http://www.ptpress.com.cn

For a Future Friendly Web

You may know

• Future-friendliness describes design principles, not specific techniques”-FFLY

• “Blame the Implementation, Not the Technique”-Tim Kadlec

• “ “Nobody's saying this is easy, but it's 100% necessary.”-Brad Frost

THANK YOU!

Tencent • Online Media Group Design Center • bennyzhai • 2015.4.24