내가 배우는 이야기

UI 디자인할 때 체크할 요소 7가지 1. 명확성의 법칙(Law of clarity)유저가 바로 알 수 있는 인터페이스를 사용할 것 2. 우선순위의 법칙(Law of preferred action)- 작업의 우선순위를 알 수 있도록 디자인할 것(->유저가 사용하기 수월)- 가장 먼저 해야하는 버튼을 오른쪽 상단에 배치 (시선의 흐름상 왼쪽 배치가 맞지만 오른손잡이가 많기때문에 모바일에서는 우측상단)- 중요한 아이콘의 크기를 크게, 튀게 3. 문맥의 법칙(Law of context)- 문맥상 비슷한 인터페이스(버튼)는 가까이에 배치 4. 기본설정의 법칙 5. 유도의 법칙(Law of guided action)- 유저가 하길 바라는 액션을 유도할 것(요청!) 6. 피드백의 법칙- 클릭을 했는지, 저장이 되었..

UI 디자인 가이드 만들기: 폰트가이드, 버튼가이드 등- 가이드: 기준선에 맞는 컨텐츠 배치- 레이아웃: 메인 레이아웃 및 그리드 배치 1. 폰트 가이드- 타이틀용 서체(약 1~2개+)- 본문(서술)용 서체(약 2~3개)- 포인트용 서체(약 1~2개) FONT GUIDE- Title: Noto Sans Bold 20px #ffffff- Main: Noto Sans / Regular / #000000- Sub: Noto Sans / Regular / #000000 ex. 2. 색상 가이드- 주조색(주로 쓰이는 색상)- 보조색- 강조색

색상이 주는 이미지 1. 화이트느낌: 깨끗, 순수, 여백, 성스러움사용: 병원 등 의약업체, 결혼식, 신부,애도어떤 색상과도 조합이 용이여백디자인에 활용도가 높음 2. 블랙느낌: 죽음, 애도, 보수적이고 진지, 세련되며 우아, 무거운 중후함사용: 고급 제품 디자인(카메라, 자동차 등의 제품에 사용했을 때 고급스러움)반대로 비행기에는 거의 쓰이지 않음(위험하게 느껴짐. 항공사에서는 주로 밝은 톤)블랙+옐로우 = 강렬한 대비(ex. 경고)또는 공포 3. 그레이느낌: 톤에 따라 다르게 표현 됨.- 고명도: 밝고 경쾌- 저명도: 무겁고 침울사용: 내용과 내용을 구분할 때. 4. 그린느낌: 봄의 컬러로 건강/삶/새로운 시작을 의미. 안정, 균형, 차분, 웰빙, 자연, 환경색이 굉장히 다루기 어려움. 쉽게 망하는 ..

* 로고 저장로고 - png나 ai파일큰 파일로 저장로고 일러로 변환하기: 이미지를 잘라서, image tracing > High quality > Expand> 그룹해제, 겉에 있는 것 삭제 업계별 모음01. 동종업계AB회사 (메인과 서브페이지를 같이 캡쳐- 통일성 확인)BC회사CD회사... 02. 트렌드에 맞는 디자인(업계 관계 없이)잘 된 사이트디자인, 레이아웃,비쥬얼, 컨텐츠 참고할 만한 사이트색상별 모음(메인 색상에 따른 비슷한 사이트 모음)(폴더정리: INTRO, MAIN, SUB, LOGIN 로 나누거나, 하나의 사이트 폴더에 다 넣기)선생님이 준 벤치마킹 사이트에서 리서치! (이미지리서치 사이트 (dehance, dribble, pinterest, rwdb.kr(이건 반응형사이트))) 03..

모바일 UI 영역별 명칭 1. Indicator 영역: Status bar ex. 통신사, LTE, 시간, 배터리 표시 상단바 2. Title 영역: Navigation bar ex. 상단 메뉴들. 햄버거메뉴 버튼, 로고, 마이페이지, 홈, 메뉴소개, 매장안내, 회사소개 등.. [ Navigation ]- 텍스트 기반- 일관성, 직관성 중요- 사용자가 웹사이트의 어느 페이지에 있는가를 알려줘야함(아래 세가지를 항상 유념할 것) 1) 내가 지금 어디에 있나 Where am I (ex. 회원가입의 약관동의 페이지) 2) 내가 어디에 간 적이 있나 Where have I been(ex. 링크 색상 변화) 3) 내가 어디로 갈 수 있나 Where can I go - 점검사항 1) 가장 먼저 로딩되는가 2) 간결..

탭 메뉴 실습 1. 새파일 열기700*500 2. 가이드라인 그리기 - 상단 60px, 좌우하단 40px 3. 상단 메뉴 세 개 그리기 4. 온오프 버전 만들기 - Ctrl + J를 눌러 레이어 복사 -> 폴더링(보통 Off 탭이 아래에 위치) - On 탭 눈에 오른쪽 마우스를 눌러 색을 넣어준다 5. 이미지 넣기그냥 넣으면 안됨!원하는 사이즈의 도형을 넣고> 이미지를 위에 얹어서> Ctrl + G로 레이어마스크를 씌워야함 6. 배경도형 넣기배경. 도형을 일반레이어로 바꿔줘야한다! [오늘 배운 일러스트 단축키]1. Ctrl + NBackground color가 있어야 정렬이 쉽다2. Ctrl + J 레이어 복사 [기타 팁]1. 폴더/레이어 정리하기+++Header >Util menu >>123 >1men..

[레이어 개념정리] 1. 레이어의 종류레이어는 이미지형태와 오브젝트형태 레이어로 나눌 수 있다. 1) 일반 레이어- 이미지(픽셀) 형태- 일반 레이어 수정 툴 2) 오브젝트 레이어- 패스 구조. 확대/축소해도 형태가 유지- 오브젝트 레이어 수정 툴 2. 레이어 박스 더블 클릭 시 색/ 이름/ 레이어 스타일 변경이 가능하다왼쪽 끝: 색상변경 글씨 부분: 이름 변경 오른쪽 끝: 레이어스타일 변경

체크박스 + 라디오박스 + 버튼 + 드롭다운버튼 만들기 1. 체크박스• 사이즈: 50px * 50px• 사용툴: 포토샵• Full, Line 각각의 On, Off를 제작 1) 새파일 만들기 Ctrl + N 도형 사각툴 선택후 클릭 2) 체크모양 만들기- 사각툴 3px * 30px -> 체크 모양을 만든다- Ctrl T로 왼쪽으로 돌린 후, 알트 복사. 오른 마우스로 Horizontal 반사- 두 레이어를 잡고 아래 정렬- Ctrl + E를 눌러 레이어를 합치기- 흰 화살표(단축키 A)로 오른 두 점 잡고 길게 뽑아준다 3) Off 아이콘 만들기 - 색상: 채도값이 2퍼를 넘지 않도록 좋은 사이트https://dribbble.com/tags/checkbox 3. 버튼만들기 (1) 긍정버튼에 포인트컬러 포인..

Ctrl + D: 변형작업 반복 Ctrl + F/B (Front/Back): 제자리 위/뒤에 붙여넣기 Ctrl + G: 그룹화 Ctrl + Shift + G: 그룹해제 Ctrl + 7: 클리핑마스크 Ctrl + 7 + Alt: 클리핑마스크 해제 Ctrl + Alt + B: 블렌드 만들기 Ctrl + Alt + B + Shift: 블렌드 해제 Ctrl + ]: 앞으로 Ctrl + [: 뒤로 Ctrl + ]: 맨앞으로 Ctrl + [: 맨뒤로 Ctrl + Shift + R/L/C: 오른/왼/가운데 정렬 Ctrl + Shift + J: 정렬 초기화 Ctrl + Shift + N: 새 레이어 추가 Alt + 휠: 확대/축소 Ctrl + +/-: 확대/축소 Ctrl + Y: 아웃라인 보기 Ctrl + 0/1: 화..

​​​​​​​​​​ ​​​​​ https://youtu.be/dcc1VyGvaYk