본문 바로가기

Category

(320)

지금 당장 적용할 수 있는 '10가지 UI Tips' 출처: https://www.uidesign.tips/ui-tips 1. 삭제하기 전에 반드시 확인 사용자가 아무런 확인 과정 없이 삭제하게 두지 마세요. 사용자는 자주 잘못 터치합니다. 만약에 한 번의 터치만으로 정보가 삭제된다면 사용자는 크게 당황할 것이고 결국 여러분의 서비스에 대한 부정적인 생각을 갖게 될지도 모릅니다. 그렇기에 여러분은 UI를 통해(인라인 또는 팝업으로) 삭제 전에 확인 과정을 반드시 넣어줘야 합니다. 물론 '취소'기능이 있긴 하지만, 다양한 변수에 따라 어떻게 될지 모르기 때문에 미리 대비하는 게 좋습니다. 정말 삭제할 것인지 확인이 필요합니다. 2. 삭제하시겠습니까? 삭제하는 상황에서 특히 버튼에 작성되는 문구에 집중하세요. 맥락 없이 '예', '아니요'와 같은 문구는 피하는..

UI 디자인에서 이상적인 그림자를 만드는 방법 현대 UI 디자인에서 그림자는 모든 곳에 자리하고 있다. fill, stroke 그리고 corner radius의 뒤를 잇는 UI 요소의 중요 부분 중 하나이다. 완전한 플랫 디자인(flat design)은 더 이상 트렌드가 아니다. 간단한 튜토리얼을 통해 카드, 버튼 또는 원하는 UI 컨트롤에 멋진 그림자를 만드는 방법에 대해 알아볼 것이다. 1. 그림자의 기본값(default)을 사용하지 마십시오. Sketch, Figma 또는 Adobe XD 어떤 것을 사용해도 상관없다. 디자인 툴의 모든 기본 그림자는 지양하는 것이 좋다. 만약 당신의 컴포넌트가 깔끔하고 현대적으로 보이게 하려면 항상 모양을 수정해야 한다. 2. 그림자를 부드럽게 만들기 이상적인 그림자 대부분은 그라데이션이 고르고 부드럽다. op..

UI 속 글래스모피즘 UI 속 글래스모피즘 뉴모피즘에 이어 2021년에는 글래스모피즘이 흥하게 될까요? 글래스모피즘이란 과연 무엇일까요? 이 글은 원작자의 허락을 받고 번역한 글입니다. 출처: https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9 지난해에 뉴모피즘이 큰 인기를 끌기 시작했다. 하지만 뉴모피즘은 디자인 씬에선 그렇게 많이 사용되지는 않고 있다. 뉴모피즘은 잠재적인 '접근성 문제'를 가지고 있기 때문이다. 물론 몇몇 앱이나 제품들은 이 스타일을 사용하고 있지만, 가장 주목 받은 것은 삼성의 광고와 MKBHD의 인트로 동영상에 사용한 것이었다. 하지만 어떤 제품군 전체보다는 일부 요소로만 사용되었다. 즉, 이런 스타일은 조금만 사용해도 효과가 있고, ..

모바일 UI·UX 디자인시 고려해야 할 가이드라인 5 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulh zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 5 출처: https://brunch.co.kr/@chulhochoiucj0/14 41. 한 화면에 뒤로 가기 버튼은 하나여야 합니다. 작은 화면에 동일한 기능을 중복 배치하는 것은 사용자에게 혼란을 줍니다. 하단 텝바(bottom navigation bar..

모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulhochoiucj0/10 26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다. 라디오 버튼은 선택과 관련된 기능에서만 사용되어야 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 4 출처: https://brunch.co.kr/@chulhochoiucj0/12 34. 내비게이션 요소와 UI 요소가 콘텐츠보다 더 부각되지 않아야 합니다. 내비게이션 요소와 컨트롤은 사용자가 콘텐츠를 탐색하고 상호작용할 수 있게 해주는 수단일 뿐입니다. 이 두 요..

모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 [디자인로그/UI.UX] - 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 출처: https://brunch.co.kr/@chulhochoiucj0/9 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요. 입력한 비밀번호는 기 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 3 출처: https://brunch.co.kr/@chulhochoiucj0/10 26. 라디오 버튼은 소팅 기능에 사용할 수 없습니다. 라디오 버튼은 선택과 관련된 기능에서만 사용되어야 합니다. 라디오 버튼을 텝했을 경우 하나의 옵션만 선택 상태가 변경되고 그 외의 ..

모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 [디자인로그/UI.UX] - 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1 출처 : https://brunch.co.kr/@chulhochoiucj0/8 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 zoeylog.com 모바일 UI·UX 디자인시 고려해야 할 가이드라인 2 출처: https://brunch.co.kr/@chulhochoiucj0/9 회원가입 또는 로그인 시 입력한 비밀번호를 가리거나 볼 수 있는 옵션을 제공하세요. 입력한 비밀번호는 기본적으로 (......) 형태로 가려져 있어야 합니다. 모바일에서는 작은 키보..

모바일 UI.UX 디자인시 고려해야 할 가이드라인 1 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1 출처 : https://brunch.co.kr/@chulhochoiucj0/8 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모바일은 데스크톱에 비해 화면의 크기가 작습니다. 데스크톱은 의자에 앉아서 실내에서 사용합니다. 큰 모니터에서 많은 정보를 탐색하고 업무를 봅니다. 포토샵 같은 몰입형 앱의 다양한 기능을 몇 시간 동안 집중해서 사용할 수 있습니다. 그에 비해 모바일은 야외에서 또는 이동 중에 사용합니다. - 횡단보도를 걷다 보면 스마트폰을 보고 걷는 사용자를 자주 볼 수 있습니다. - 사용자는 작은 화면의 스마트 폰으로 SNS를 사용하고 뉴스를 보..

타이포그래피 팁 | 타이포그래피에 대한 필수 사항 4가지 타이포그래피 세계에 입문하려고 하시나요? 기본 몇가지를 알면 이 복잡한 디자인 분야를 훨씬 더 쉽게 알아갈 수 있습니다. 다음 알려드리는 4가지를 먼저 알아보세요. 커버 이미지 De Repente. 그래픽 디자이너가 이상하게 쳐다본적이 있나요? 그렇다면 그들 앞에서 불쾌한 단어를 사용했을 가능성이 높습니다. 타이포그래피는 전문용어가 있습니다. 따라서 많은 용어들이 쉽게 혼동되거나, 잘못 사용되거나, 또는 실수로 바껴서 사용될 수도 있습니다. 이 포스트에서는 타이포그래피 언어에 대해 필수로 알아야 할 차이점 4가지에 대해서 설명하겠습니다. 이를 바탕으로 순식간에 타이포그래피 전문가처럼 얘기하고 생각해보세요. 차이점 #1: 활자(Typeface) vs 글꼴(Font) 타이포그래퍼 면전에 던질 수 있는 최악의..

타이포그라피의 활용- 몇 가지만 기억해 타이포그라피의 활용 몇 가지만 기억해~ SIMPLIFY 하나의 지면에 가능한 2종 ~3종 이하의 폰트를 효과적으로 사용합니다.하나의 폰트로도 적절히 사용하면 안정적이에요~ FAMILY 같은 형질의 동일성을 갖고 있는 서체 패밀리군을 활용하여 통일된 안정감을 극대화합니다.같은 군을 이용하면 편안한 느낌을 주죠 디자인의 의도에 따라 특별한 폰트를 쓰기도 하죠~ BLOCK 타이포그라피를 이미지 구성으로 판단하고 블록으로 묶어 그룹화하여 시각정보를 단순화합니다.타이포도 작게 보면 이미지에요~ GRID 많은 양의 정보를 분배하고 배열하여 일정한 체계를 만들어 규칙화 합니다.디자인의 뼈대! 안보이는 선이 있어요~ 실험적이고 역동적으로 그리드가 파괴되기도 해요~ 4가지 기본 원리만으로도 훌륭한 디자인을 완성할 수 있..

모두가 꿈꾸는 재미있는 게임, 그런데 '재미'가 뭐예요? 이장주 박사 [IGC2016] 모두가 꿈꾸는 재미있는 게임, 그런데 '재미'가 뭐예요? 이장주 박사 ▲ 이장주 이락디지털문화연구소 / 소장 [인벤게임컨퍼런스(IGC) 발표자 소개]이장주 이락디지털문화연구소 소장은 사회문화심리학자로 게임과 e스포츠를 비롯해 디지털 문화 전반에 걸쳐 많은 관심을 가지고 있으며, 심리학적인 연구를 진행하고 있다. 올해로 2회째를 맞는 IGC는 강연일을 하루에서 3일로 늘렸고 강연의 수도 70여 개에 달할 정도로 큰 성장을 이뤘다. 이에 기획에 한정된 강연 주제도 다양해졌다. 기술적으로 완벽한 게임 제작 방법 논의는 기본. 누군가는 많은 유저들을 더 많이 모으는 방법에 관해 설명했고 더 많은 이익을 거두기 위한 방안을 함께 고민하기도 했다. 기업 파워가 날로 커지는 국내 게임 시장에서 홀로..

8-Point 그리드 시스템 8-Point 그리드 시스템 출처 : https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.oh33ss65e Intro to The 8-Point Grid System Learn how it can take your design to the next level medium.com *왜 px단위가 아닌 pt단위인지는 https://brunch.co.kr/@blackindigo-red/18를 참고하세요 :) 픽셀 밀도(Pixel Density)에 대한 설명 픽셀 밀도란 무엇이며, 어떻게 작동하고, 이것이 디자인에 미치는 영향. | (출처 :[Pixel Density, Demystified – Peter Nowell –..

이전 1 2 3 4 5 6 7 ··· 27 다음

LIST

티스토리툴바