Front End Develop Front End Develop

2022년에도 많은 일들이 있었습니다. 2023년에도 UX/UI에 있어서 끊임없는 변화는 당연합니다. UX 디자인의 좋은 예를 따르고 복제하는 것이 필수적인 상황입니다. 2023년 17가지 상위 UX/UI 트렌드와 새로운 트렌드를 확인해야 하는 이유를 살펴보시죠 : ) 1. 다크모드 올 해도 변함없이, 다크모드는 사랑받고 있습니다. 외관은 우아하고 세련되며 현대적입니다. 스마트폰과 노트북으로 더 많은 시간을 보내면서 다크 모드는 사용자 경험에서 중요한 역할을 합니다. 다크모드의 아름다움 외의 장점들에 대해서 살펴보시죠. 장치가 OLED 또는 AMOLED 화면을 사용하는 경우에는 배터리가 절약 됩니다. 텍스트 가독성 측면에서 좋습니다. 밤에 장치를 사용하는 동안 눈의 피로를 줄일 수 있습니다. 화면 눈부심..

오늘은 랜딩페이지 디자인에 있어서 13가지 팁이 있는 좋은 글이 있어 소개 드리려고 합니다. 01. 텍스트가 있는 이미지에 색상 오버레이 사용 02. 공간의 여백을 과도하게 사용하지 말 것 디자이너는 공간이 있는 디자인을 좋아하며 웹에서 더 많은 공간을 확보해야 한다는 의견을 항상 듣습니다. 그러나 함께 속한 요소 사이에 과도한 공간이 있으면 눈은 연결된 요소 위로 쉽게 흐르지 않고 더듬거리고 빈 공간에서 헤매게 됩니다. 03. 무리하게 장황한 워딩을 사용하지 말 것 웹사이트 분석을 본 사람이라면 누군가의 관심을 끌 시간이 매우 적다는 것을 알고 있습니다. 요점을 파악하세요. 04. 텍스트만 있는 레이아웃도 시각적으로 매력적이어야 합니다 랜딩 페이지의 텍스트 전용 섹션은 디자인하기 어려울 수 있습니다. ..

47가지 주요한 ui/ux 관점의 디자인 철학이 담긴 좋은 글이 있어 요약 해봅니다. 1편으로 가시려면 아래 링크를 클릭하세요. https://frontdev.tistory.com/entry/UIUX-47가지-UIUX-디자인-철학1-24가지 [UI/UX] 47가지 UI/UX 디자인 철학(1 - 24가지) 47가지 주요한 ui/ux 관점의 디자인 철학이 담긴 좋은 글이 있어 요약 해봅니다. 1. 픽셀이 아닌 밀도(Density)를 위한 디자인 밀도는 PPI라고도 하는 화면의 인치당 픽셀 수입니다. 예를 들어 200 x 50 dp frontdev.tistory.com 25. 적극적으로 경청하기 모든 훌륭한 UI/UX를 끌어내기 위한 한 방법으로 커뮤니케이션 할 때의 경청이 있습니다. 1. 말하는 사람을 바라..

47가지 주요한 ui/ux 관점의 디자인 철학이 담긴 좋은 글이 있어 요약 해봅니다. 1. 픽셀이 아닌 밀도(Density)를 위한 디자인 밀도는 PPI라고도 하는 화면의 인치당 픽셀 수입니다. 예를 들어 200 x 50 dp에서 버튼을 디자인하면 160ppi 화면에서는 200 x 50픽셀, 320ppi 화면에서는 400 x 100픽셀 또는 원본 크기의 2배 크기로 표시됩니다. iPhone XS Max의 화면 크기는 414 x 896입니다. 하지만 픽셀이 아니라 포인트 수입니다. 픽셀 단위로 1242 x 2688픽셀입니다. iPhone XS Max용으로 디자인할 때 414 x 896 포인트로 디자인한 다음 에셋 @3x를 전달합니다. 2. 8dp 간격으로 디자인 하기 최신 화면 크기의 대부분은 8로 나눌 ..

WCAG(웹 콘텐츠 접근성 지침)에 의한 이야기를 해볼까 합니다. Web Content Accessibility Guidelines(WCAG)에 따르면 애니메이션에 있어서 일시중지 및 재생제어 기능을 제공해야하는 시기와 화면 깜빡임 또는 깜빡임에 대한 제한 등 움직임에 민감한 사용자를 위한 애니메이션을 줄이는 등 다양한 지침들이 포함됩니다. Pause, Stop, Hide 특히, 애니메이션에 적용되는 WCAG 권장 사항 중 첫 번째는 Pause, Stop, Hide 입니다. For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is pres..

https://www.apple.com/kr/airpods-pro/ AirPods Pro 새롭게 선보이는 AirPods Pro. 액티브 노이즈 캔슬링, 투명성 모드, 맞춤형 핏까지. 이 모든 걸 갖춘 놀랍도록 가벼운 인 이어 헤드폰. www.apple.com 위와 같은 애플 에어팟 프로 사이트와 같이 스크롤에 따른 동영상 애니메이션과 가속도를 활용한 유려한 애니메이션들을 보면 어떤 생각들이 드시나요? 제품을 조금 더 구매하고싶은 욕구를 강력하게 만들어주는 이러한 사용자 경험(UX)에 대해서 어떻게 생각하시나요? 미적이고 유려한 것들이 제품의 사업적 가치를 더욱 더 올려주고 브랜드의 가치를 더욱 더 뛰어나게 해주고 그러한 랜딩페이지는 사용자로 하게끔 해당 제품을 구매할 수 있도록 유도하기에 충분합니다. 기..

요소의 움직임을 구성할 때 액티브되는 요소가 기존 요소들의 아래로 이동되는 것보다 사용자의 시선을 분산시키지 않도록 가장 상위로 구성하고 자연스러운 움직임으로 따라갈수 있도록 유도해야 한다. 요소의 움직이는 애니메이션 거리에 비례하는 시간은 제한사항이 분명히 있어야하고 멀어질 수록 빠르게 움직여야 한다. 사용자의 기다리는 시간은 최대한 짧도록, 그리고 크기와 거리의 비례에 따라서 동작하도록 구성한다. 하단 요소가 움직이는 것이 시선에 따라서 보이도록 약간의 딜레이를 주어서 사용자가 아래에서 컨텐츠가 올라오는 것을 볼 수 있도록 한다. 리스트를 뿌릴 때 사용자의 시선이 끊기도록 뿌리지 않고 자연스럽게 모든 컨텐츠를 눈의 속도로 이어지게 볼 수 있도록 구성한다. 리스트에서 하나의 포커스로 면이 확대될 때는 ..

스크롤 영역 자체를 보여주는 것이 디자인을 침해하는 상황이 잦습니다. 그래서 요즘 디자인에서 스크롤 영역을 가리는 부분들이 많은데요. 이를 대체하기 위한 방법들에 대해서 소개합니다. 특히 macOS같은 경우는 스크롤 시에만 스크롤을 노출 시켜줍니다. 아래의 코드들을 보시면 예시1은 스크롤에 대한 대책이 없어서 문제인 상황이고 2부터는 문제해결 상황입니다. 예시 2같은 경우는 스크립트가 별도로 필요없고, 3,4,5 같은 경우는 스크립트가 일부 필요합니다. 유용한 정보이길 바랍니다. 감사합니다. See the Pen Indicating Scrollable Content by YoungMinKim (@oinochoe) on CodePen. 출처 : https://css-tricks.com/thats-just-..