티스토리

내가 배우는 이야기

검색하기

블로그 홈

내가 배우는 이야기

curious23.tistory.com/m

꼼지락 다이어리

구독자: 3

방명록 방문하기

주요 글 목록

UI/UX 디자인 - 디자인할 때 체크할 요소 7가지 UI 디자인할 때 체크할 요소 7가지 1. 명확성의 법칙(Law of clarity)유저가 바로 알 수 있는 인터페이스를 사용할 것 2. 우선순위의 법칙(Law of preferred action)- 작업의 우선순위를 알 수 있도록 디자인할 것(->유저가 사용하기 수월)- 가장 먼저 해야하는 버튼을 오른쪽 상단에 배치 (시선의 흐름상 왼쪽 배치가 맞지만 오른손잡이가 많기때문에 모바일에서는 우측상단)- 중요한 아이콘의 크기를 크게, 튀게 3. 문맥의 법칙(Law of context)- 문맥상 비슷한 인터페이스(버튼)는 가까이에 배치 4. 기본설정의 법칙 5. 유도의 법칙(Law of guided action)- 유저가 하길 바라는 액션을 유도할 것(요청!) 6. 피드백의 법칙- 클릭을 했는지, 저장이 되었.. 공감수 0 댓글수 0 2018. 6. 14.
UI/UX 디자인 - 가이드 만들기(ex.폰트가이드) 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. 색상 가이드- 주조색(주로 쓰이는 색상)- 보조색- 강조색 공감수 0 댓글수 0 2018. 6. 14.
디자인 - 색상이 주는 이미지 색상이 주는 이미지 1. 화이트느낌: 깨끗, 순수, 여백, 성스러움사용: 병원 등 의약업체, 결혼식, 신부,애도어떤 색상과도 조합이 용이여백디자인에 활용도가 높음 2. 블랙느낌: 죽음, 애도, 보수적이고 진지, 세련되며 우아, 무거운 중후함사용: 고급 제품 디자인(카메라, 자동차 등의 제품에 사용했을 때 고급스러움)반대로 비행기에는 거의 쓰이지 않음(위험하게 느껴짐. 항공사에서는 주로 밝은 톤)블랙+옐로우 = 강렬한 대비(ex. 경고)또는 공포 3. 그레이느낌: 톤에 따라 다르게 표현 됨.- 고명도: 밝고 경쾌- 저명도: 무겁고 침울사용: 내용과 내용을 구분할 때. 4. 그린느낌: 봄의 컬러로 건강/삶/새로운 시작을 의미. 안정, 균형, 차분, 웰빙, 자연, 환경색이 굉장히 다루기 어려움. 쉽게 망하는 .. 공감수 0 댓글수 0 2018. 5. 29.
UI 디자인 업계별 조사 방법 * 로고 저장로고 - png나 ai파일큰 파일로 저장로고 일러로 변환하기: 이미지를 잘라서, image tracing > High quality > Expand> 그룹해제, 겉에 있는 것 삭제 업계별 모음01. 동종업계AB회사 (메인과 서브페이지를 같이 캡쳐- 통일성 확인)BC회사CD회사... 02. 트렌드에 맞는 디자인(업계 관계 없이)잘 된 사이트디자인, 레이아웃,비쥬얼, 컨텐츠 참고할 만한 사이트색상별 모음(메인 색상에 따른 비슷한 사이트 모음)(폴더정리: INTRO, MAIN, SUB, LOGIN 로 나누거나, 하나의 사이트 폴더에 다 넣기)선생님이 준 벤치마킹 사이트에서 리서치! (이미지리서치 사이트 (dehance, dribble, pinterest, rwdb.kr(이건 반응형사이트))) 03.. 공감수 0 댓글수 0 2018. 5. 24.
UX UI - 회원가입 페이지 만들기 모바일 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) 간결.. 공감수 0 댓글수 0 2018. 5. 15.
UI UX 실습- 탭 메뉴 만들기 + 레이어정리 팁 탭 메뉴 실습 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.. 공감수 0 댓글수 0 2018. 5. 8.
포토샵 레이어 개념 정리 [레이어 개념정리] 1. 레이어의 종류레이어는 이미지형태와 오브젝트형태 레이어로 나눌 수 있다. 1) 일반 레이어- 이미지(픽셀) 형태- 일반 레이어 수정 툴 2) 오브젝트 레이어- 패스 구조. 확대/축소해도 형태가 유지- 오브젝트 레이어 수정 툴 2. 레이어 박스 더블 클릭 시 색/ 이름/ 레이어 스타일 변경이 가능하다왼쪽 끝: 색상변경 글씨 부분: 이름 변경 오른쪽 끝: 레이어스타일 변경 공감수 0 댓글수 0 2018. 5. 1.
UI 구성요소 만들기 - 체크박스/ 라디오박스/ 버튼/ 드롭다운 체크박스 + 라디오박스 + 버튼 + 드롭다운버튼 만들기 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) 긍정버튼에 포인트컬러 포인.. 공감수 0 댓글수 0 2018. 5. 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: 화.. 공감수 0 댓글수 0 2018. 4. 28.
2018년 디자인 트렌드 https://youtu.be/dcc1VyGvaYk 공감수 0 댓글수 0 2018. 4. 26.
[UI.UX] 포토샵 작업을 도와주는 환경설정 포토샵 환경설정Edit> Preference> Interface Interface지나간다. Color mode는 포토샵6인가?부터 추가된 기능인데 UI 배경색을 바꾸는 기능이다. File HandlingAutomatically Save Recovery Information Every~는 꼭 체크! 자동저장 기능!(단점: 메모리를 많이 잡아먹으므로 사양이 좋지 않다면 꺼주는게 좋다) PerformanceMemory Usage: 70~80% 정도면 충분Scratch Disks: 컴에 용량이 없으면 저장이 안되고 작업물이 날아갈 수 있다. D드라이브를 체크해주면 몇메가는 D드라이브를 사용하여 저장 가능하다.History & Cache - History States: 100이하 Units & RulersUnit.. 공감수 0 댓글수 0 2018. 4. 26.
UI/UX 디자인 실무 프로세스 1. 디바이스란: 화면이 있는 모든 기기ex. 스마트폰, 놋북, 데탑, 네비... 2. 해상도DPI: Dot Per Inch커질수록 화면/종이가 커진다. PC: 72dpi인쇄물: 300dpi 이상그러나 스마트폰은 화면 사이즈에 비해 DPI값이 높다. PPI: Pixels Per Inch아이폰6(326ppi) 750*1334아이폰6플러스(401ppi) 1242*2208 3. 실무 프로세스[1] 프로젝트 발주[2] 기획기획자가 스토리보드를 만들어 디자이너에게 전달(기획자 연봉이 높다고 함)프로토타입 : 가상플레이어 : 실제 서비스처럼 인터렉션이 결합되어 작동하는 모형. : 실무에서는 포스트잇을 붙여가며 가상플레이. : 이것이 완료되면 와이어프레임을 짠다.와이어프레임 : UI중심의 화면 레이아웃(화면 설계서).. 공감수 0 댓글수 0 2018. 4. 26.
모바일UI/UX 디자인 기본 및 실습 -1 UI/UX 디자인을 배우기 시작했다. 국비지원수업으로 약 2~3개월정도 진행되는 수업이다.배운 내용을 리뷰하는 마음으로 수강기간동안 쭉 포스팅 될 예정이다.오늘 수업은 기본 개념이라 조금 지루한 면이 있었다. 후반부에는 실습으로 넘어가서 훨-씬 재미있었다.모바일 개념에서 확인할 점은 아이폰개발은 뒤로가기 버튼이 필수라는 것과 아이콘에는 On/Off 버전이 있다는 것. 이정도만 짚어도 될 것 같다.실습은 일러로 아이콘 라인을 따는 작업을 했다. (해당포스트: [UI] 모바일UI/UX 디자인의 기본과 약간의 실습 -2 ) 0. 네비게이션 영역 1. 모바일 종류1) 모바일 앱- 네이티브 앱(인터넷 연결 없이 사용 가능)- 하이브리드 앱(ex. 멜론. 앱이지만 인터넷 연결이 되어야 사용 가능) 2) 모바일 웹-.. 공감수 0 댓글수 0 2018. 4. 25.
모바일UI/UX 디자인 기본 및 실습 -2 모바일 UI 개념에 이어, 일러스트레이터로 주어진 아이콘 이미지의 라인을 따는 작업을 했다.이전 포스트: 모바일UI/UX 디자인의 기본단축키를 많이 배워서 유익했다. 1. 새 파일 만들기 - Ctrl + N 2. 표시단위 픽셀로 변경- 상단메뉴 Edit > Unit > Stroke, Type, Asian Type을 모두 픽셀로 바꿔준다. 3. 라인을 따 올 이미지 드래그해서 넣기- 투명도를 50으로 낮추고 작업중 움직이지 않도록 잠궈준다 4. 레이어 추가(레이어 창이 없을 경우 Window > Layer에서 선택한다)- 실 작업은 이 레이어에서. 5. 펜툴 선택- 사이즈는 3px 로 작업- 라인만 그려주기 때문에 채우기 색은 투명으로 바꾸어준다- View > Smart Guide 를 켜준다** 라인툴로 .. 공감수 0 댓글수 0 2018. 4. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.