UI/UX Product 아이디어에 빌딩에 관한 것(feat. CodeLion)

과거의 디자인?

의상, 공업제품, 건축 따위 실용적인 목적을 가진 조형 작품의 설계나 도안

보기 좋은것, 아름다운 것, 심미적인 것을 만드는 것이 디자인.

 

현재의 디자인?

PC의 등장 이래로 Hardware에서 Software로의 디자인 패러다임이 전환.

이전에는 GUI 또한 기술자들의 역할이였으나 시간이 흐르며 전문 디자인의 분야로 옮겨옴

GUI에서의 디자인은 사용자와의 상호작용을 쉽게 하는 것을 의미.

 

기술이 먼저 만들어지고, 이후 그 기술을 만지는 직업이 생긴다. Web Designer 와 같이.

사용자에 대한 이해 필요 - 사용자가 어떤 환경에서 나의 웹서비스를 사용하는가를 인식하는게 최우선.

프로세스

디자이너의 역할

1. 어떤 디자인이 필요한가 - UI디자인
2. 내가 왜 이 디자인을 해야하는가? - UX 리서치, 디자인
3. 내가 이 디자인 한 것이 어떻게 구현되는가? - Frontend 개발자들과의 협력

---

UI 디자인 시 고려사항 

1. 폰트
100% 이상,  제목, 타이틀은 200% 이상으로 디자인
미적기능보단 가독성을 중점으로 텍스트에 접근하는게 중요

 

2. 버튼
버튼은 작게하지 말것 - 터치 잘 안됨
손가락 두께 고려해 버튼 두께와 거리 조절

 

3. 아이콘 스타일
아이콘 간에는 '통일감' 줄것
사이트의 분위기를 조절하는 절대적인 요소

 

4.  접근성 폰트 컬러
아이콘,라인,버튼, 폰트 컬러
특히 폰트컬러는 가독성을 위해  잘 보이는 색으로 하기

 

5.  요소의 모서리 둥글기는 모두 동일하게 하는걸 추천

 

6. 계층구조 
중요도에 따라 사이즈, 폰트, 버튼 디자인 다르게 해야함
여러개 버튼이 동시에 노출될 때는  중요도에 따라 색이나 크기 다르게 주자
폰트계층은 강조, 줄바꿈 이용

 

7. 하단네비게이션
아이콘이 생소한 모양이면 텍스트 반드시 달기
하단 네비게이션은 5개 이하로, 터치도 힘들고 가독성도 저해

 

8.  컨텐츠간 여백
여백은 최대한 여유롭게 두자
요소간 여백이 좁으면 가독성 와장창
모바일에서는 스크롤 길이를 신경안써도 됨

 

9. 컨텐츠 그룹핑
컨첸츠간의 중간을 끊어준다. 단이나 라인을 주거나, 섹션간 여백을 주거나, 바닥에 면을 깐다(이때 면은 매우 옅어야함)

 

10. 레이아웃
레이아웃을 잘게 쪼개지말고 큼지막하게 하자 (모바일 시)