디자인/UIUX18

• 

  [피그마] 전체/페이지만/프레임 위치 공유하기 기능 1. 전체 공유하기 1-1. 초대하기 링크를 공유하기 원하는 상대의 이메일을 입력하고 invite 버튼을 클릭하면, 상대에게 이메일이 전송되고 파일이 공유된다. 1-2. copy link 링크를 복사해서 원하는 상대에게 공유한다 2. 페이지만 공유하기 하나의 프로젝트 내 하나의 페이지만 공유하고 싶다면, 페이지 우클릭 페이지공유를 시도하면 된다. 3. 프레임 위치 공유하기 프레임만 공유될 수 있는 기능은 없다. 프레임이 워낙 많이 생성되다 보니, 프레임 위치는 공유할 수 있다. 1. 공유하기 원하는 프레임을 선택 2. share 버튼 클릭 3. link to selected frame 체크하기 4. copy link 클릭 과정을 거치면 선택된 프레임 위치가 공유되고, 링크를 클릭해 접속하게 되면 프레임 .. 디자인/UIUX 2022. 1. 3.

• 

  [피그마 사용법] 라이브러리 사용하기 피그마에서 스타일을 지정해서 불러오는 방법도 있지만, 커뮤니티에서 사람들이 잘 만들어놓은 자료를 duplicate 해서 불러오는 방법도 있다 아무래도 한국자료가 없다보니 커뮤니티에서 다운로드 받더라도 한국어 패치가 필요하기 때문에 커뮤니티에서 다운로드 받더라도 수정이 필요하다. 1. 라이브러리에 등록하기 1-1 커뮤니티에서 원하는 색상톤을 가진 파일을 duplicate 한다. 1-2. 열려진 파일에서 assets - 책모양의 아이콘 - Publish 클릭 1-3 Publish 할 항목 선택하여 publish styeles 클릭하기 2. 디자인 하려는 파일에서 publish 한 assets 불러오기. 2-1. 라이브러리 불러오기 디자인 하고자 하는 파일을 열어 assets-라이브러리 아이콘 클릭하면, 내가.. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 구글 폰트 설치 안될 때, 폰트 설치 관리자 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 피그마에 글씨체를 설치하기 위해 구글 폰트에서 원하는 서체를 바로 설치했을때 폰트가 지원된다? 그대로 사용하면 된다. 만약 설치를 했음에도 불구하고 설치가 되지 않는다면, 피그마에서 지원하는 폰트 인스톨러를 설치해야한다. 1. 네이버에서 피그마를 검색하고, downlaods 페이지로 이동한다. 2. Font installer -> 컴퓨터 운영체제에 맞는 installer 다운로드 하기. 맥사용자는 맥용 윈도우 사용자는 윈도우용 다운로드. 3. 이후 구글 폰트에서 원하는 폰트를 다운.. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 추천 기초 플러그인 및 설치, 사용방법 플러그인과 파일은 다르다. 파일은 파일이고, 플러그인은 소프트웨어다. 소프트웨어를 이용하면 훨씬 쉽게 피그마를 이용할 수 있다. 먼저 플러그인을 설치하는 방법을 알아보고, 플러그인을 불러오는 방법과 플러그인 사용법에 대해 글을 작성해보겠다. (더불어 기초 플로그인에 대해서도 안내할 것이다) 0. 플러그인 설치하기 피크마 - 커뮤니티 - 플러그인 선택 - 검색어 입력 - 인스톨 기초적으로 사용해야할 목록은 (이미지에는 없지만 아이콘도 필요하다) -Unsplash : 무료 이미지 사이트 -Arrow Auto : 화살표 -Lorem Ipusum : 텍스트 -Similayer : 비슷한 유형의 요소를 선택하는 기능. 포토샵의 마술봉 기능과 비슷한듯? + Material Design Icons : 아이콘 이다. .. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 구글 머터리얼 디자인 플러그인 설치 커뮤니티에서 Material을 검색하거나 https://www.figma.com/community/file/778763161265841481?fuid=763322827958699037 url 하여 바로 duplicate(복제)버튼을 클릭하면 된다. 검색를 한다면, Material을 검색한다면, 공식계정인지 확인을 해야한다. 프로필 이미지에 동그라미 내 사각형 내 세모가 들어간 프로필 계정을 확인해야한다. 이외는 개인이 올린 것들이다. Duplicate 클릭하여 설치한다. recensts나 drafts에서 duplicate된 것을 확인해 볼 수 있다. 디자인/UIUX 2021. 12. 23.

• 

  [피그마 사용법] 오토레이아웃 단축키 및 여백 주기 웹에서 요소를 클릭할때, 정확하게 그 요소를 클릭하지 않아도 클릭 처리를 해야한다. 작은요소라면 더더욱이 필요하다. 내가 원하는 요소가 클릭이 쉽지 않다면, 사용자는 불편함을 느끼고 다른 사이트를 이용할 것을 예측할 수 있다. 쉽게 클릭하기 위해서 요소에 패딩값을 설정해주어야 한다. (패딩이 설정된 여백을 클릭하더라도 해당 요소에 들어갈 수 있게 만들어 주어야 한다.) 기본적으로 디자인 패널의 우측 TEXT 영역에 양쪽을 가르키는 화살표가 선택되어있을 것이다. 패딩이 설정되지 않은 순수한 텍스트 크기에 맞게 설정된 값이다. 패딩을 주기 위해서 해당 요소를 클릭한 뒤 SHIFT+A를 클릭하여 오토레이아웃(패딩)이 설정되는 것을 확인한다. 사각형 안 사각형이 들어간 아이콘 우측에 표시된 '10'을 확인할 수.. 디자인/UIUX 2021. 12. 23.

• 

  우와! 인기앱 온보딩, 스크린샷 사이트 벤치마킹 여기서 다 한다 Q 안녕하세요!혹시 인기앱들 온보딩, 스크린샷 모아있던 사이트 링크 공유가능하실까요? A.첫번째 wwit(국내) https://wwit.design/ What Was IT 한국의 UI/UX 모바일 패턴을 수집합니다. wwit.design 쿠팡부터 시작해서 여러가지 사이트들이 있다. 캡쳐상태가 너무 깔끔해서 제작자에게 고마울 따름이다. A. 두번째 mobbin(해외) https://mobbin.design/browse/ios/apps Mobbin - The world’s largest mobile app design reference library Save hours of UI & UX research with our library of 50,000+ fully searchable mobile app sc.. 디자인/UIUX 2021. 8. 24.

• 

  하단 네비게이션 탭바(tab bar)에 대하여 우리는 무의식으로 인지하는 편리함을 얼마나 알고 있을까. 오늘은 네비게이션바. 탭바에 대해 알아보도록 하겠다. https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/ The Golden Rules Of Bottom Navigation Design — Smashing Magazine Design is more than just good looks – something all designers should know. Design also covers how users _engage_ with a product. Whether it's a site or app, it's more like a conversati.. 디자인/UIUX 2021. 8. 19.

• 

  XD 클라우드 문서 삭제 하는법 (feat. 열기) 2020/11/12 - [디자인/UIUX] - app bars(top) 앱바 상단 가이드 app bars(top) 앱바 상단 가이드 내가 다시 컴퓨터 앞에 앉은 이유는 다음과 같다. 첫째는 정보전달 둘째는 내가 오늘 하루동안에 배웠고 느꼈던 것을 다시한번 정리하는 시간이다. 티스토리를 열고 글을 쓰는 작업이 결코 적 yetis.tistory.com 어제 이 글을 쓰면서 xd 클라우드 파일을 삭제는 되지를 않고 둘째로는 이름을 바꾸기가 너무 어려웠다고 하소연을 했었다. 그리고 그 문제를 해결했던 방법을 오늘 알려드리고자 한다. 너무 간단하니, 놀라지 말것.. 내가 이거때문에 이렇게 마음고생을 했나.......!!! 구글이 말하는 xd클라우드 문서 삭제방법 https://helpx.adobe.com/kr/x.. 디자인/UIUX 2020. 11. 13.

• 

  app bars(top) 앱바 상단 가이드 내가 다시 컴퓨터 앞에 앉은 이유는 다음과 같다. 첫째는 정보전달 둘째는 내가 오늘 하루동안에 배웠고 느꼈던 것을 다시한번 정리하는 시간이다. 티스토리를 열고 글을 쓰는 작업이 결코 적은 시간을 들이는것이 아니기 때문에, 시간을 허투로 사용하지 않을 것이다. 정리를 하면서 보는 사람으로 하여금 이해가 되게 하고 나 또한 되새김질 할 것이다. 틀린 부분이 있다면 틀렸을 것이다. 나는 완벽하지 않기 때문이다. 따라서 어떤내용이건 '논리에 맞게' 피드백을 주면 수용할 것이고, '논리가 있더라도' 내가 이해할 수 없는 논리라면 수용하지 않을 것이다. ux/ui 디자이너들아! 힘들내자 오늘은 abb bar에 대해 알아볼 것이다. Abb bars: 상단(top) 위 그림은 내가 따로 디자인 한 것이 아니라, 구글 .. 디자인/UIUX 2020. 11. 12.

• 

  본고딕(Noto Sans CJK KR) 공식 다운 본고딕이라 불리는 Noto Sans CJK KR는 구글과 어도비의 합작으로 상업적으로 사용가능한 무료폰트입니다. Noto : 더이상의 to 는 No(없다!)로 to는 tofu(토푸)라 불리는 지원이 되지 않는 글자일 경우 등장하는 네모칸의 엑박을 의미합니다. CJK : China, Japan, Korea 로 3개국어가 지원됩니다. Noto Sans CJK KR 하나의 폰트로 중국어, 일본어, 한국어가 모두 해결됩니다. 물론 세계 공통어인 영어도 쓰입니다. 본고딕 Noto Sans CJK KR 공식 다운로드 압축파일 용량이 115MB가 되는 관계로 다운로드할 수 있는 URL과 함께 방법을 알려드리도록 하겠습니다. www.google.com/get/noto/#/family/noto-sans-kore Goog.. 디자인/UIUX 2020. 11. 2.

• 

  그레이스케일(grey scale) 그레이 스케일은 정보의 강약을 나타내기에 효과적입니다. 여러분들은 모두 알게 모르게 이 그레이 스케일에 익숙해져 있습니다. 특히 쇼핑몰에서 그레이 스케일을 많이 볼 수 있습니다. 검정 계열이 많이 쓰였습니다. 하지만 다 같은 #000이 아닐걸요? 티가 심하게 나는 #999 그러나 대부부은 #333을 사용하고 있습니다. 우리는 검은색을 #000이라고 부를 수 없습니다. 수많은 검은색처럼 보이는 것들이 사실은 #000에서 #fff에서 왔다 갔다 하고 있기 때문이죠. UI 디자인에서 그레이 스케일의 역할은 정보의 강약, 계층 구분 등이 있습니다. 그레이 스케일이 없다면 정보의 강약 조절도 힘들 것이라는 것이죠. 이는 스케치북*(흰색)과 연필(#fff~000), 검정 볼펜(#000), 색상 볼펜이 있는 이유와 .. 디자인/UIUX 2020. 11. 2.