Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / 웹·UI 모션← 모션 그래픽
살아 있다고느껴지는 인터페이스.
스크롤 스토리, 마이크로 인터랙션, 페이지 전환으로 속도와 접근성을 해치지 않으면서 사이트를 더 이해하기 쉽고 잊기 어렵게 만듭니다.
솜씨 살펴보기
모션 랩: 직접 만져 보는 일곱 가지 인터랙션
영상이 아니라 실제로 작동하는 인터페이스 모션입니다. 전환하고, 올리고, 끌고, 클릭해 보세요. 여기 있는 모든 것은 모션 줄이기 설정을 존중합니다.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Roaswell 스튜디오가 우리의 작업 방식을 보여 주기 위해 만들었습니다. 고객 작업도, 실제 브랜드도 아닙니다.
제공 내용출시까지 필요한
출시까지 필요한
모든 것.
작업 시작 전에 정한 명확한 산출물로, 범위가 놀라움이 되지 않게 합니다.
01
모션 원칙
이징, 타이밍, 스프링 토큰으로 모든 인터랙션이 하나의 제품에 속한 것처럼 느껴지게 합니다.
02
스크롤·페이지 전환
이 사이트처럼 주의를 이끄는 스토리 중심의 스크롤 시퀀스와 라우트 전환.
03
마이크로 인터랙션 라이브러리
의도를 가지고 반응하는 버튼, 토글, 메뉴, 카드, 폼.
04
프로덕션 코드 또는 내보내기
깔끔한 CSS와 JavaScript 또는 Lottie, 영상 내보내기. 당신의 스택에 바로 사용할 수 있습니다.
05
접근성 변형
모션 줄이기 대안과 포커스 동작을 나중에 덧붙이지 않고 처음부터 설계합니다.
06
성능 예산
출시 전에 로드 시간과 상호작용 지연에 대해 모션을 측정합니다.
진행 방식브리프에서
브리프에서
완성까지.
각 단계마다 분명한 결과물이 있어 무엇을 왜 만드는지 언제나 알 수 있습니다.
감사
모션이 무언가를 분명하게 하는 곳과 소음만 더하는 곳을 찾습니다.
원칙 세우기
이징과 타이밍의 어휘를 정의해 결정이 건별로 흔들리지 않게 합니다.
브라우저에서 프로토타입
실제 매체에서 만들어 승인한 것이 그대로 출시되게 합니다.
출시하고 측정
성능 예산과 함께 출시하고 사용자가 실제로 무엇을 하는지 지켜봅니다.
연결되는 곳하나의 스튜디오.
하나의 스튜디오.
하나의 시스템.
모션은 데이터로 브리핑하고 예산이 있는 곳에 전달할 때 가장 큰 힘을 발휘합니다.
질문좋은 질문에
좋은 질문에
솔직한 답변.
찾는 내용이 아닌가요? 직접 물어보세요. 시니어가 답해 드립니다.
애니메이션이 사이트를 느리게 하나요?
제대로 만들면 그렇지 않습니다. 성능 예산을 정하고, 비용이 가장 낮은 속성으로 애니메이션하고, 실제 기기에서 테스트합니다.
코드도 작성해 주시나요?
네. 프로덕션 수준의 코드를 납품하거나, 팀이 구현할 수 있도록 사양과 내보내기 파일을 전달할 수 있습니다.
접근성은 어떤가요?
모든 모션에 모션 줄이기 대안이 있으며, 키보드와 스크린 리더 동작은 애니메이션과 함께 설계합니다.
저희 CMS나 프레임워크에서 작동하나요?
대부분의 최신 스택과 작업합니다. 사용 중인 것을 알려 주시면 최선의 방법을 확인해 드립니다.
실제로 작동하는 모습을 볼 수 있나요?
지금 보고 계십니다. 이 사이트의 스크롤 시퀀스, 카운터, 리빌은 같은 방식으로 만들어졌습니다.