2013年 webデザインのトレンドを振り返る

Download 2013年 Webデザインのトレンドを振り返る

Post on 05-Dec-2014

8.500 views

Category:

Design

3 download

Embed Size (px)

DESCRIPTION

2013年11月1日に、あるセミナーに登壇させていただきました。その時のスライド資料です。 フラットデザインとレスポンシブWebデザインを中心に、2013年のWebデザインのトレンド・6つについて、事例やメリット・デメリットを織り交ぜながら振り返りました。

TRANSCRIPT

  • 1. 2013 Web 2013/11/1 1
  • 2. Web Web Tips*Blog :) www.coprosystem.co.jp/tipsblog/ 2
  • 3. 2013 Web Web CSS jQuery 3
  • 4. 6 Web CSS jQuery 4
  • 5. 2013 Web 5
  • 6. Microsoft - Windows 6
  • 7. Yahoo! Japan 7
  • 8. Google 8
  • 9. Google - Android 4.4KitKat 9
  • 10. Apple - iOS 7 10
  • 11. Google 2013/10/30 11
  • 12. Flat , 12
  • 13. Flat , 13
  • 14. 14
  • 15. SubCreative http://www.subcreative.com.au/ 15
  • 16. JUSTIN AGUILAR http://www.justinaguilar.com/ 16
  • 17. DIESEL http://www.diesel.com/ 17
  • 18. 18
  • 19. Twitter Bootstrap http://getbootstrap.com/2.3.2/ 19
  • 20. Buffalo http://builtbybuffalo.com/ 20
  • 21. Future Insights Live 2013 http://futureinsightslive.com/las-vegas-2013/ 21
  • 22. 22
  • 23. #FFD464 #F26964 #1253A4 #F1F0EE Lorenzo Verzini http://lorenzoverzini.com/ 23
  • 24. #08233E #F8823C #2C5379 #EB2142 Adam Rudzki http://adamrudzki.com/ 24
  • 25. #0E7AC4 WISTIA http://wistia.com/ #58BE89 #FBA848 #F27398 25
  • 26. Web 26
  • 27. 27
  • 28. Less is more. Less is bore. 28
  • 29. Baby and iOS 6 vs iOS 7 29
  • 30. iOS 6 iOS 7 30
  • 31. Flat UI Design http://fltdsgn.com/ Flat UI Colors http://flatuicolors.com/ 31
  • 32. 2013 Web 32
  • 33. 2013 Web (parallax) 33
  • 34. 2013 Web Fast Speed Middle Speed Slow Speed More Slow Speed 34
  • 35. KRYSTALRAE http://krystalrae.com/ 35
  • 36. OK Studios http://www.ok-studios.de/home/ 36
  • 37. PRO TREKSlim line http://protrek.jp/products/slim-line/ 37
  • 38. 2013 Web 38
  • 39. 2013 Web 39
  • 40. http://www.kaiyukan.com/newkaiyukan/ 40
  • 41. ECSQUARESPACE http://www.squarespace.com/ 41
  • 42. http://akasaka-akechi.com/ 42
  • 43. http://www.wamokei.com/ 43
  • 44. 2013 Web 44
  • 45. 2013 Web (blur) 45
  • 46. 2013 Web (blur) 46
  • 47. toggl https://www.toggl.com/ 47
  • 48. Chec https://trychec.com/ 48
  • 49. iPhonePiction http://pictionapp.com/ 49
  • 50. Bastien Pean http://www.bastienpean.com/ 50
  • 51. 2013 Web Web 51
  • 52. 2013 Web Web PC WebOS OS CSS HTML HTML 1200px iPhone HTML 480px 52
  • 53.