웹사이트를 방문하는 순간, 사용자는 디자인을 통해 첫인상을 형성합니다. 이 첫인상은 사용자의 참여, 웹사이트에 대한 인식, 심지어 브랜드에 대한 신뢰도에 영향을 미칩니다. 현대적인 웹 디자인에서는 단순히 좋은 첫인상을 넘어서, 사용자와의 지속적인 상호작용을 유도하는 인터랙티브 요소들이 중요한 역할을 합니다. 오늘은 이러한 인터랙티브 요소 중 두 가지 빛나는 버튼 애니메이션과 숫자 롤링 애니메이션 에 대해 자세히 알아보겠습니다. 빛나는 버튼 애니메이션 버튼은 웹사이트에서 사용자의 행동을 유도하는 핵심 요소입니다. 그렇기 때문에 버튼의 디자인은 사용자의 주의를 끌고, 행동을 유도하는 데 중요한 역할을 합니다. 여기에서는 빛나는 효과의 버튼 애니메이션을 구현했습니다. 이 애니메이션은 버튼에 동적이고 매력적인 ..

아이콘 그리기의 법칙 1 . 격자를 이용해 그려야 안깨진다 2. 모바일의 경우 *1배수~ 4배수가 있다 3. 그려지는 아이콘은 2배수의 형태로 진행할것이다 4. 격자에 맞춰 그려지지 않으면 백터로 제작할땐 안깨져 보이지만 png로 뽑아냈을때 깨져보인다 5. 격자를 키기전에 Snap to grid를 켜준다 6. 대각선의 더 길어보이는 습성을 인지한 상태로 디자인해야한다 6. 아이콘 완성 이후에 스트로크를 깨주는 경우 아이콘사이즈의 미세한 변동이 생기게된다 면과 면의 거리를 측정하는게 아니라 스트로크에 선택된 선 사이의 거리를 측정하기 때문에 변동이 생긴다 7.이부분을 고려해서 아이콘 생성 초기부터 크기가 작아질것을 예측하고 스트로크를 안쪽으로 세팅이후 작업한다 w:31 H:22 로 총 크기 세팅해준 이후 ..

뉴모피즘. 그림자와 명암 차로 배경과 UI를 구분하는 디자인 방식이다. 뉴모피즘은 디자인 커뮤니티 Dribbble의 사용자 알렉산더 플라이로 가 자신의 작품을 올리면서 많은 호응을 얻으며 뉴모피즘 트렌드가 시작되었다 “하나의 색상을 사용하여 빛과 그림자만으로 입체적인 느낌을 살려주는 스타일 기 좀의 플랫 디자인과 머티리얼 디자인의 방식이 양방향에서 빛을 적용시켜 공중에 떠있는 느낌으로 대상을 강조했다면, 뉴모피즘은 버튼이나 대상 자체가 바닥에서 자연스럽게 돌출된 느낌을 제공한다 때문에 사용자들로 하여금 눌러보고 싶다는 충동이 들도록 욕구를 자극하는 디자인이기도 한데요 어포던스(행동 유도성)을 잘 전달한다고도 할 수 있는데, 어포던스란 특정 행동을 하게끔 유도한다는 의미를 지녔습니다 뉴모피즘으로 디자인된 ..