[기초 탄탄 UX/UI 디자인을 위한 Adobe XD] CHAPTER 3-1

💡 맥 이용자는 Alt > Option , Ctrl > Command 로 바꿔서 생각하기

Chapter3 실무 웹/앱 UI 디자인 분석과 실습

To-Do 앱 UI 디자인

• To-do(할 일) 앱을 분석
  • UX분석으로 사용자가 UI 화면에서 원하는 할 일을 체크하고, 동선을 편리하게 잘 관리할 수 있게 하는 것이 무엇보다 중요

• 기본 화면 만들기
  • 레이아웃을 잡기 위한 좌우 마진을 [16px]로 설정
  • 아트보드 양 옆 가장자리에 폭 16px의 사각형을 그림
  • 바깥에서 안으로 드래그해서 가이드라인을 추가
  • 그림 & 상단요소 & 텍스트 삽입
• 글쓰기 팝업 화면 만들기 
  • 사각형(모서리 값 25) & 텍스트 삽입
  • 수첩 아이콘 & 스마트폰 키패드 삽입
  • 사각형 추가하여 그 안에 프로필 이미지와 ID를 입력

 

• 프로필 화면 만들기
  
  • 글쓰기 팝업 화면 위에 전체 크기의 불투명도 검은색 사각형 삽입
  • 흰색 사각형 삽입
  • 아이콘을 나열하고 왼쪽에 각각 항목명을 입력 (반복 그리드 활용)
  • 프로필 이미지와 ID를 입력
  • 프로필 화면 만들기

 

SNS 앱 UI 디자인

SNS 기반 인터페이스는 커뮤니티 글과 이미지를 업로드 하고 댓글 및 좋아요로 사용자들끼리 소통한는 화면이 주요 인터페이스로 구성

*요즘 빠진 아이돌 : 제로베이스원*

• • 좌우에 각각 16px과 20px 간격으로 가이드라인 그리기
  • 아이콘 & 상단 요소 배치
  • 사용자 목록을 표현하기 위한 사각형과 텍스트 삽입 (반복 그리드 활용)
  • 구글에서 원하는 인물 사진 검색 후 이미지를 화면에 가져오기
  • 사람 프로필 사진과 글 제목, 좋아요 수, 작성한 시간, 글 내용을 임의로 작성해 넣기
  • 텍스트는 중요한 요소를 검은색, 덜 중요한 순서에 따라 회색 톤으로 지정
  • 아래에 내비게이션 영역을 만들기 위해 사각형과 아이콘들 삽입
  • 키패드 또한 삽입 가능UI 디자인 (커뮤니티 글 & 이미지 업로드 & 댓글 및 좋아요)

 

반응형 웹/앱 UI 디자인

반응형 웹이란 데스크탑, 태블릿 PC, 모바일 모두에 최적화된 웹사이트 화면을 구현하는 기법이다.

• 반응형 웹의 장점
  • 간편한 유지보수 : HTML/CSS 작업도 수월하고 유지보수를 할 때 하나만 수정하면 자동적으로 모바일, 테블릿, 데스크탑에 맞게 수정
  • 모바일 점유율 증가 : 사용자가 스마트폰으로 인터넷을 접속할 대 반응형 웹은 기기 종류와 상관 없이 편리한 접근성을 보장
  • 마케팅 이점 : 웹과 앱에서 서비스를 좀 더 원활하게 보여줄 수 있음
• 데스크탑 버전과 모바일 버전 최적화
  • 모바일 기기 : 너비 768px 미만
  • 태블릿 : 너비 768px~1024px
  • 데스크탑 : 너비 1024px 이상

 

반응형 웹은 CSS3에서 사용되는 미디어 쿼리를 사용

@media screen and. min-width: 320px) {
	body {
		background-color: red;
	}
}

/* 대형 화면 PC 데스크탑 */
.column {
	float : left;
	width : 25%; /* 4개의 구성 시 비율 */

/* 중간 화면 : 너비가 992px 이하인 화면에서는 4열에서 2열로 이동합니다. */
@media screen and (max-width: 992px) {
	.column {
		width : 50%; /* 2개의 구성 시 비율 */
	}
}

/* 작은 화면 : 너비가 600px 이하인 화면에서는 열이 나란히 쌓이는 대신 위로 쌓이도록 합니다. */
@media screen and (max-width: 600px) {
	.column {
		width : 100%; /* 1개의 구성 시 비율 */
	}
}