본문 바로가기
728x90

UI UX Design14

UI디자인 해상도 정의에 도움이 되는 사이트 - 스탯 카운터 어떤 기준으로 해상도를 정하지? 디자인에 앞서 모바일이든 웹이든 해상도를 정해야 디자인을 시작할 수 있습니다. 평균적으로 많이 쓰는 디바이스의 해상도를 토대로 기준을 잡거나 선행하여 디자인된 화면을 참고하여 기준을 잡기도 하죠. 경우에 따라서는 해상도를 기준을 직접 정하는 것이 애매하거나 부담스러운 경우도 종종 있습니다. 스탯 카운터는 기준을 잡을 수 있도록 전 세계 트래픽 데이터를 제공합니다 스탯 카운터 - 웹 트래픽 분석 사이트 스탯 카운터는 전 세계의 웹 브라우저 점유율부터 OS점유율, 디바이스 점유율, 모바일과 데스크탑 해상도 등 여러 가지 정보를 열람해 볼 수 있는 사이트입니다. 기간이나 국가, 디바이스별로 필터링해 볼 수 있어 IT관련하여 굉장히 유용한 사이트입니다. Statcounter Gl.. 2023. 2. 9.
디자인 시스템 실제 사례 관련 사이트 모음 Design System 디자인 시스템이란 디자인 시스템은 다양한 제품에서 일관된 경험을 생성하는 데 사용하는 명확한 표준에 따라 재사용 가능한 기능 요소(구성 요소 및 패턴)의 모음입니다. 디자인 시스템은 디지털 제품 디자인 및 응용 프로그램이나 웹 사이트와 같은 제품 개발을 지원합니다. 여기에는 패턴 라이브러리, 디자인 언어 , 스타일 가이드, 코딩된 구성 요소, 브랜드 언어 및 문서가 포함될 수 있지만 이에 국한되지 않습니다. 관련된 다양한 팀(예: 디자이너, 개발자, 카피라이터 및 프로젝트 관리자)이 디지털 제품을 설계하고 구축하는데 도움이 되는 역할을 합니다. 디자인 시스템의 장점 중 일부는 다음과 같습니다. 재사용 가능한 구성 요소와 공유된 근거를 통해 더 빠르게 빌드 보다 일관된 사용자 경험과 일관된 디자인 언어를 .. 2022. 12. 13.
웹 접근성 Web Accessibility 관련 사이트 모음 정의 W3C 접근성 원칙 https://www.w3.org/WAI/fundamentals/accessibility-principles/ko 네이버 접근성 가이드 https://accessibility.naver.com/accessibility 웹 접근성(Web Accessibility) 4대 원칙 https://365kim.tistory.com/71 웹의 평등성을 위한 웹 접근성 https://brunch.co.kr/@remain/10 컬러 모바일 UI 디자인 기본 요소 - 색채 Color https://brunch.co.kr/@chulhochoiucj0/17 WCAG 표준 팔레트 Color Review https://color.review/ 개선사례 온라인 쇼핑몰 웹 접근성 개선하기 2 - 청각 htt.. 2022. 12. 12.
최신 SNS 아이콘 모음 svg 다운로드 / 공식 링크 주요 SNS 로고를 SVG 형식으로 변환한 파일 세트(흑백 2패턴)를 다운받을 수 있습니다 SVG 형식이므로 다른 색으로도 변경할 수 있습니다 twitter Instagram Facebook YouTube LINE TikTok 아래에 공식 로고를 다운로드할 수 있는 링크도 정리했으므로 SVG 이외의 데이터를 원하시는 분은 아래 링크를 참고하면 되겠습니다. svg 로고 세트 다운로드 공식 로고 다운로드 링크 twitter https://about.twitter.com/en/who-we-are/brand-toolkit Instagram https://en.facebookbrand.com/instagram/assets/instagram?audience=instagram-landing Facebook https.. 2022. 12. 11.
디자이너를 위한 나인 패치 (nine-patch) 가이드 나인 패치란? 나인 패치(9-Patch)란 확장 가능한 비트맵 이미지입니다. 효율적인 리소스 관리를 위하여 반복되는 이미지를 9개의 영역으로 나누어 영역에 대한 역할을 부여하는 것을 말합니다. 나인 패치 이미지는 1픽셀 테두리(#000000)가 포함된 png이미지로 확장자명은 9.png가 되어야 합니다. 나인 패치는 보통 콘텐츠의 배경 이미지로 쓰이며, 예를 들어 버튼의 경우 하나의 나인 패치를 사용하여 버튼의 사이즈가 달라져도, 버튼 안의 글자 수가 달라져도 동일한 스타일을 유지할 수 있게 해 줍니다. 실제 프로젝트 진행 시 경우에 따라 안드로이드 개발자분들께 나인 패치 이미지를 요청받습니다. ex) 버튼, 말풍선, 툴팁 등 나인 패치의 구조 아래 버튼을 예로 들어보겠습니다 4개의 모서리 r값이 들어간.. 2022. 12. 10.
UI UX 디자인 레퍼런스 사이트 7곳 반갑습니다. 현직 UI디자이너 들댕댕입니다. 디자이너는 매 순간 크리에이티브와 싸워야 하죠. 무기가 되기도 재산이 되기도 하는 것이 레퍼런스입니다. 실제로 제가 레퍼런스를 찾을 때, 트렌드를 살필 때 탐색하는 사이트 7가지입니다. 여러분도 아래 사이트에서 분명 디자인 영감을 얻을 수 있을 것입니다. 1. Pinterest 스크랩하고자 하는 이미지를 포스팅하고 다른 이용자와 공유하는 소셜 네트워크 서비스 디자이너라면 모두 이용하고 있을 도구 중 하나입니다. 사용자는 주제에 맞는 핀 보드를 만들고 거기에 이미지를 아카이빙 합니다. UI UX 디자인은 물론 제품, 패션, 인테리어 등 여러 주제의 다양한 이미지들이 개제 되어있어 각 주제의 트렌드를 알아볼 수 있고, 내 취향에 맞는 이미지를 아카이빙하며 잠자던 .. 2022. 12. 7.
UI UX 디자인 인사이트 사이트 5곳 UI 디자이너는 사용자가 서비스를 원활히 작동할 수 있도록 시각적인 화면 구성력이 있어야 합니다. 거기에 더하여 마냥 이쁘게만 하는 디자인이 아닌 보다 본질적이고 🤔사용자 경험에 충실한 사고가 뒷받침되어야 한다고 생각합니다. 많은 전문가들에 의해 선행된 UX에 관한 고찰, 아이디어들을 찾아보면 금방 나오는데요, 제가 사용자 경험을 고려할 때 참고하고 UX 트렌드를 살필 때 탐색하는 사이트 5곳입니다. 여러분도 아래 사이트에서 인사이트를 얻길 바랍니다. 1. 서핏 다양한 채널에서 생산된 전문가들의 콘텐츠를 간편하게 맞춤 제공하는 커리어 지식 플랫폼 디자이너들에게 유용한 아티클이나 비주얼 레퍼런스, 디자인 리소스를 한 곳에 모두 큐레이션 해놓아 인터넷 이곳저곳을 찾아다닐 필요 없이 매일 추천 콘텐츠를 받아 .. 2022. 12. 7.
무료로 일러스트 캐릭터를 만들 수 있는 Sapiens Sapiens 캐릭터 빌더 라이브러리 from UI8.com Sapiens는 컴포넌트 기반의 모듈식 캐릭터 일러스트레이션 라이브러리입니다. 사피엔스는 수십 가지 신체 부위 구성 요소, 배경 및 세 가지 스타일의 포즈 중에서 선택하여 수백 개의 고유 한 캐릭터 일러스트레이션을 만들 수 있습니다. 성별 선택 가능 신체부위 (머리, 상의, 하의) 각각 커스텀 가능 4가지 포즈 (스탠딩, 걷기, 뛰기, 자전거) 배경 선택 가능 (제외도 가능) 3가지 일러스트 스타일 (컬러, 면, 선) 사이트에서 생성한 캐릭터를 PNG 및 SVG로 추출할 수 있으며, 개인 작업은 물론 상업적 용도로도 완전히 무료로 제공하고 있으므로 일러스트를 만들고 추출하여 앱이나 웹사이트, 운영하는 블로그에 활용할 수 있습니다. 기본적으로 일.. 2021. 3. 2.
무료 아바타 라이브러리 for Sketch Figma 많은 프로필 이미지가 포함되는 작업일 경우 플러그인보다 스타일 라이브러리를 사용하는것이 빠릅니다. 귀여운 동물 아바타와 일반적으로 사용할 수 있는 인물 아바타 라이브러리를 소개합니다. 두 라이브러리 모두 Unsplash 이미지를 가공한것으로 저작권 문제도 없어보입니다. Avatars, lol 디자인을 위한 60개 이상의 사랑스러운 개, 고양이 및 임의의 동물 아바타 라이브러리입니다 본 라이브러리는 무료로 제공되고있으며 스케치, figma 라이브러리로 사용할 수 있습니다. PNG도 첨부되어있어 이미지로도 사용이 가능합니다. 60개 이상의 사랑스러운 강아지, 고양이, 랜덤 동물 아바타 디자인입니다. 현재는 강아지 30마리와 고양이 30마리로 구성되어있습니다. 랜덤 동물 아바타는 업데이트 예정이네요. 솔직히 .. 2021. 3. 1.
UI디자이너의 실무 디자인 툴 3가지 - 피그마 프로토파이 제플린 반갑습니다. 현직 UI디자이너로 일하고 있는 들댕댕입니다. UI와 UX의 정의는 명확히 나눌 수 있지만 실무에서 이 둘을 명확히 나눠 프로젝트를 진행할까요? 실제 서비스를 디자인할 때 UX를 충분히 고려해야 사용성 좋은 UI가 나옵니다. 어떨 때 디자이너는 기획자보다 더 기획자스럽게 파고들어야 빈틈없는 UX와 그에 알맞은 UI를 만들어 낼 수 있습니다. 현재 제가 실무에서 사용하고 있는 툴은 크게 세 가지입니다. 피그마 UI 디자인 프로토파이 프로토 타입 제플린 디자인 가이드 그리고 필요하면 추가적으로 어도비 일러스트레이터나 포토샵을 쓰기도 합니다. 참고로 UI디자인 툴은 스케치를 써오다가 작년부터 피그마로 넘어왔습니다. 그럼 각 툴의 자세한 내용을 정리해보겠습니다. 1. 피그마 디자인, 프로토 타이핑 .. 2021. 2. 26.
728x90
반응형

티스토리툴바