kyooyeonhwang/bookmark

bookmark

• SVG
• Layout
• WebFont
• Interaction
• Animation / Motion
• Accessibility
• UI Pattern

SVG

Slide

• chrisgannon
  • http://slides.com/chrisgannon/svg-summit#/ [A More Holistic Approach to SVG - SVG Submit 2016]
  • http://slides.com/chrisgannon/reasons#/ [Animating SVG with Greensock]
• sarasoueidan
  • http://slides.com/sarasoueidan/tips-for-avoiding-common-svg-pitfalls#/
  • http://slides.com/sarasoueidan/styling-animating-svgs-with-css#/
  • http://slides.com/sarasoueidan/on-the-edge-of-svg#/
  • http://slides.com/sarasoueidan/animating-svg-with-css-and-smil__fonteers#/
  • http://slides.com/sarasoueidan/animating-svg-with-css-and-smil-full-version#/
  • http://www.slideshare.net/SaraSoueidan/svg-for-web-designers-and-developers / https://www.youtube.com/watch?v=WKr4ryx2-U4
  • https://sarasoueidan.com/slides/SVG-In-Motion.pdf
    • https://vimeo.com/album/3953264/video/166790778
  • https://docs.google.com/presentation/d/1Iuvf3saPCJepVJBDNNDSmSsA0_rwtRYehSmmSSLYFVQ/pub?start=false&loop=false&delayms=3000#slide=id.p
• sdrasner
  • http://slides.com/sdrasner/cssdevconf#/ [Designing Complex SVG Animations]
  • http://slides.com/sdrasner/fluent-keynote#/ [Complex Responsive SVG Animations]
  • http://slides.com/sdrasner/generateny#/ [Functional Animation]
  • http://slides.com/sdrasner/fluent-session#/ [Complex SVG Animations with GreenSock (GSAP)]
  • http://slides.com/sdrasner/smashing-ny#/ [Intricate SVG Animations]
  • http://slides.com/sdrasner/gsap-svg#/ [GSAP + SVG]
• http://cloudfour.github.io/slides-svg-101/#/ [SVG 101 A Gentle Introduction]
• http://talks.brennaobrien.com/svg-typography/#/ [Creative Typography with SVG]
• http://slides.com/chriscoyier/gettin-weird-with-shape-morphing#/ [Five minutes on Shape Morphing]
• chriscoyier
  • https://speakerdeck.com/chriscoyier/the-wonderful-world-of-svg / https://www.youtube.com/watch?v=tsGa-gcckwY
  • http://slides.com/chriscoyier/svg-summit-2016#/ [Building with SVG Q+A Round Table - SVG Submit 2016]
• Zell Liew
  • https://www.youtube.com/watch?v=6fdIva47wZE / https://github.com/zellwk/CSSConf.Asia-animating-svg [Animating SVGs]
• Clark Wimberly
  • https://speakerdeck.com/clarklab/svg-summit [SVG & Working with Sketch - SVG Submit 2016]
• joanleon
  • http://slides.com/joanleon/animaciones-svg#/
• http://talks.brennaobrien.com/svg/#/ [SVG CAN DO THAT?!?]
• http://www.slideshare.net/Maujor/svg-de-volta-e-paara-o-futuro
• http://ptamarit.com/slides-data-viz-web-d3/en/#/
• https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/pub?start=true&loop=false&delayms=5000#slide=id.p [Leaving Pixels Behind: A Vector Workflow for Designers]
• 일러스트 필터효과가 같이 SVG 파일로 적용안되는 부분이 있는데 몇가지 예제를 보여주고 해결방법을 제시. (P.64)
• https://ameliabr.github.io/css-svg-dynamic-duo/

Following

• https://sarasoueidan.com/
• http://sarahdrasnerdesign.com/
• http://tavmjong.free.fr/blog/
• http://svgimmersion.com

URL

• https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/
• http://ssvvgg.net/ [SVG의 최신 뉴스 및 제작 요령 등의 정보]
• https://css-tricks.com/svg-fallbacks/ [svg fallbacks 방법]
• https://css-tricks.com/svg-animation-on-css-transforms/ [SVG 애니메이션 및 CSS transform]
  • CSS로 조작하는 동안 꽤 만만치 않은 문제는 만날 수 있으며, 그 문제를 해결할 수있는 방법에 대해 설명합니다.
• https://medium.com/@iamryanyu/svg-sprite-workflow-that-works-f5609d4d6144#.dxcxy2i8s [SVG Sprite Workflow That Works]
• https://svgweekly.com/ {뉴스레터]
• http://mytory.net/archives/11169 [SVG 활용 1 – 아이콘 폰트가 아니라 SVG를 사용한 이유]
• http://mytory.net/archives/11175 [SVG 활용 2 – 일러스트레이터를 이용해서 SVG 파일 만들기]
• http://mytory.net/archives/11213 [SVG 활용 3 – 웹 문서에 SVG를 넣는 다양한 방법, 온갖 예외 피하기]
• http://mytory.net/archives/11338 [SVG 활용 4 – 미지원 브라우저 대응]
• http://mytory.net/archives/11444 [SVG 활용 5 – SVG에 애니메이션 효과 주기]
• https://css-tricks.com/comparison-animation-technologies/ [웹 애니메이션 기술 장단점 비교]
• https://github.com/iconic/SVGInjector [img태그 형색으로 되어 있는것을 DOM형식으로 SVG 마크업 인라인으로 대체 라이브러리]
• http://www.catswhocode.com/blog/tutorials-and-resources-to-learn-and-master-svg [튜토리얼와 리소스를 통해서 SVG 마스터]
• https://svgontheweb.com/ko/ [웹에서 SVG 사용하기 실습 가이드]

SVG JavaScript animation libraries

• http://greensock.com/ [GreenSock Animation Platform (GSAP) - 일부 플러그인은 유료]
  • https://cdnjs.com/libraries/gsap [greensock 라이브러리 CDN]
  • http://greensock.com/ease-visualizer [GreenSock Ease Visualizer]
  • http://hwaba.nflint.com/lab/tween/ [간단한 한글 설명]
• http://snapsvg.io/ Snap.svg [The jQuery of SVG]
• http://julian.com/research/velocity/ [Velocity.js]
• https://d3js.org/ [D3.js]
• https://maxwellito.github.io/vivus/ [vivus.js 라인 드로잉]
• 모핑에 특화된 라이브러리
  • https://alexk111.github.io/SVG-Morpheus/ [SVG Morpheus]
  • https://github.com/gorangajic/react-svg-morph [React svg morph]
  • https://greensock.com/morphSVG [MorphSVG plugin]
  • https://github.com/veltman/flubber [flubber]
• https://popmotion.io/ [motion library]

SVG Demo

• http://thenewcode.com/1072/Radial-UI-Controls-with-HTML5-CSS-JS-and-SVG-Part-1 [Pie 차트]
• http://codepen.io/suez/pen/emjwvP [메뉴 탄성 효과]
• http://codepen.io/chrisgannon/
• http://tympanus.net/Development/Animocons/ [웹폰트/SVG 아이콘으로 만든 애니콘]
• http://tympanus.net/Tutorials/SVGDrums/
• http://tympanus.net/Tutorials/SVGRipples/ [Google Material Design Ripple Effect with SVG]
• http://tympanus.net/Development/ElasticSVGElements/
• http://tympanus.net/Tutorials/ShapeHoverEffectSVG/
• http://svg-wow.org/

SVG Animated Icon

• http://www.transformicons.com/
• https://icons8.com/c/animated-icons

Book

• http://svgpocketguide.com/ (Free)

Layout

Slide

• http://www.slideshare.net/rachelandrew/css-day-css-grid-layout
• http://people.igalia.com/mrego/talks/cssconf-us-2015-css-grid-layout/#/
• https://speakerdeck.com/rachelandrew/css-grid-layout-for-paris-web
• https://forwardcourses.com/lectures/87 [Flexbox: WTF - Forward 4 Web Summit]
• https://speakerdeck.com/jensimmons/modern-layouts-getting-out-of-our-ruts-1,
  • https://www.youtube.com/watch?v=ZNpn7FBp_9U
• http://jensimmons.com/presentation/revolutionize-your-page-real-art-direction-web [전통적인 디자인을 CSS로 구현하는것을 안내]
• https://www.slideshare.net/rachelandrew/into-the-weeds-of-css-layout
  • https://vimeo.com/254679499

Typography

URL

• http://prowebtype.com
• http://practicaltypography.com/
• http://webtypography.net/
• http://typographyhandbook.com/
• http://practice.typekit.com
• https://vimeo.com/156203722

WebFont

• http://mytory.net/2016/06/15/webfont-best-practice.html [웹 폰트를 로컬 스토리지에 저장하는 기법 - 캐시 안정성 증가, 글꼴 깜빡임 현상 제거]
• http://blog.coderifleman.com/post/111825720099/한글-웹-폰트-경량화해-사용하기 [한글 웹 폰트 경량화해 사용하기]
• http://www.beautifulcss.com/archives/431 [웹 폰트 파헤치기 - 웹폰트의 모든것]
• https://spoqa.github.io/2016/06/03/localize-type-setting.html [다국어 환경에 맞게 타이포그래피 세팅하기 - 다국어 반응형 타이포그래피]
• http://naradesign.net/wp/2012/06/19/1830/ [웹 폰트 문제 해결. @font-face troubleshooting]
• http://mytory.net/archives/9743 [내가 선호하는 글꼴 목록(font-family)과 그 이유]
• https://www.youtube.com/watch?v=Mho5DIT6MWM&index=10&list=PL37ZVnwpeshHuiIn2HnJ965qO2k3aADqz, https://www.w3.org/Talks/2016/font-level-up/#for-browser

Interaction

URL

• https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
  • https://brunch.co.kr/@lain/2 (모션으로 사용성 만들기 : 모션 선언문의 UX(1)번역글)
  • https://brunch.co.kr/@lain/3 (모션으로 사용성 만들기 : 모션 선언문의 UX(2)번역글)

Following

• http://lain.kr/
• https://gannon.tv/

Animation / Motion

• https://popmotion.io/ (A functional JavaScript motion library)
• http://greensock.com/

URL

• https://swissincss.com/

Accessibility

• https://material.io/guidelines/usability/accessibility.html
• https://deanbirkett.name/accessibility-for-ux-designers (UX 디자이너를위한 접근성)
• https://www.24a11y.com/
• https://a11yproject.com/resources
• https://developers.google.com/web/fundamentals/accessibility/?hl=ko
• http://a11y-style-guide.com/style-guide/ (A11Y 스타일 가이드)

Chrome Extension

• http://www.funkify.org (다양한 능력과 장애가있는 극단적 인 사용자의 눈을 통해 웹과 인터페이스를 경험할 수 있도록 도와줍니다.)

UI Pattern

• http://ui-patterns.com/patterns (User Interface Design Patterns : pagination, breadcrumbs, navigation 등)
• http://calltoidea.com/index.php (404, empty page, pricing, counters 등)
• http://collectui.com/designs
• http://ui-cloud.com/categories/
• http://emptystat.es/ (데이터가 없는 상태)

CSS 방법론

• https://gratiaa.github.io/young-blog/2016/10/09/css-at-BBCsports-1/

Agency

• http://okkapi.agency/
• https://waaark.com/