[UX/UI 제작 실무] 자주쓰는 페이지 디자인

 

목차

1. 로그인 페이지

 - 아트보드에서 원하는 모바일 사이즈를 선택합니다. (테블릿, 웹 등 사이즈 선택가능)

예시 - 로그인 페이지

- 와이어프레임을 그대로 사용할 수 도 있고 디자인 요소를 추가하여 사용할 수 있다.

와이어프레임 : 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합

로그인 페이지 예시 와이어프레임 우

 

2. 카드형 프로필 페이지

- 기본 프로필 와이어프레임에 이미지 넣어보기

① 드래그해서 이미지 삽입

② 이미지 위에 사각형 삽입 후 배경 흐림 효과 사용

③ 이미지 맨 뒤로 보내기 (순서 : 이미지(맨 뒤) - 사각형 - 와이어프레임에 있던 기본 박스)

 

출처

HRD FLEX : UXUI 제작 실무

와이어프레임 예시 출처 : adobe - UI 디자인 키트 액세스 - 와이어프레임