Interface design(1) Orientation

Midterm Project_Week 03
03-1 본인 UI Kit의 Concept, Look & Feel, Styling 구체화
03-2 Component Design
Bars(App Bars(Bottom Bar, Top Bar, Snack Bars), Navigation Bars, Search Bars, Sidebars, Status Bars, Tab Bars, Toolbars, etc.)

Geon Dong Kim

Professor / Doctor of Design
School of Design Convergence
College of Design and Arts
Hongik University, South Korea
former Visiting Scholar at Duke University
email: geon705@naver.com
Interface design(1) 학기 과제 스케줄

총 15주 수업중

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
중간발표 기말발표
4/10 제 22대 부처님 오신날
국회의원 선거 보강
보강

2
 Interface design(1) 과제 설명

UI kit Design
지난주차에 분석된 내용 바탕 컨셉 도출 → 필요 시 추가 리서치 & 분석 후 → 나만의 컨셉, 스타일로 주차 별 UI kit 제작

03-1. 본인 UI Kit의 Concept, Look & Feel, Styling 구체화

1) 각종 용어 스터디: NeuFlat Design, Design Tokens(Figma에서 Components기능), DP, Margin, Gutter, Padding, Elevation,…
* Chat GPT활용 각종 용어스터디 / UX/UI트렌드 리서치 장려-내용 캡처(질문과 답변) “질문이 창의적이어야 결과도 창의적일 수 있습니다.” * 모든 작업물 중 본인 직접 제작 작업물 아닌 경우 꼭 출처 명기
The NeuFlat or New Flat UI Design Trend Design Tokens Figma에서 Components기능 DP
https://www.youtube.com/watch?v=WPZNUkA9RUk https://m3.material.io/foundations/design-tokens/overview https://www.youtube.com/results?search_query=what+is+component+in+ gma+ https://m2.material.io/design/layout/pixel-density.html#pixel-density-on-the-web

https://medium.com/codeart-mk/ux-ui-design-trends-2024-3637374ba59b https://brunch.co.kr/@somgs34/22 https://www.youtube.com/results?search_query=Figma+%EA%B0%95%EC%A2%8C https://brunch.co.kr/@jihoonleeh9l6/10

https://www.youtube.com/watch?v=OHrCLgscxfI https://designbase.co.kr/sketch-3/
https://medium.com/@FlowMapp/10-fresh-design-trends-from-dribbble-4dfe27a3e364

2) 본인 UI Kit의 컨셉 도출: 서비스 영역, 사용 대상자, 서비스 컨셉 키워드(UX Keyword, UI Keyword구분)

3) 컨셉의 구체화(Look & Feel): 전체 스타일 정의, 플랫폼 Screen Dimension, 그리드(Margin & Gutter, Padding), 화면 Elevation 체계, Color, Type, Shape, Shodow System 등
https://m2.material.io/design/layout/spacing-methods.html#touch-targets https://m3.material.io/styles/elevation/overview
-> 첫 Practice 컨셉에 이어 주차 별 추가 업데이트 및 고도화 https://bootcamp.uxdesign.cc/ux-ui-tips-a-guide-to-the-grid-9830c6cb6c6e https://m2.material.io/design/environment/elevation.html#depicting-elevation

03-2. Component Design

1) 각종 Bar Design에 대한 선행사례 리서치
2) Bars(App Bars(Bottom Bar, Top Bar, Snack Bars), Navigation Bars, Search Bars, Sidebars, Status Bars, Tab Bars, Toolbars, etc.) * 각 기업별 가이드라인 링크
- 본인 선정 플랫폼 스크린 사이즈에 맞춰 Bar Component 유형 중(위 예시 혹은 추가) 최소 5개 이상 선정 후 디자인 시도. https://m3.material.io/
https://m2.material.io/components
- 본인 선정 플랫폼 스크린 사이즈에 따른 Bar Component의 가로x세로 요소별 dp 사이즈, Grid, Color, Type, Shape System 고려하여 디자인 https://developer.samsung.com/one-ui

(각 컴포넌트별 스케치, 제작과정, 원리, Anotomy, 실제 적용 예시 등 제시 장려 / 맨 뒤에는 전체 제작된 컴포넌트 모아서 제시) https://developer.apple.com/design/human-interface-guidelines/components
https:// uent2.microsoft.design/
https://www.uiguideline.com/components

* 클래스룸 과제록에 제출 (수456반: 수업일 오전 9시까지, 수789반: 수업일 오전 10시까지)

* 16:9 비례로 Figma에서 제작 후 pdf export → pdf 파일로 제출 (파일명: 학번_이름)
: 각 페이지 첨부 사례들은 Save for Web 등으로 불러들여 파일사이즈 최적화(퀄리티는 좋게 용량은 작게)
3
fl
fi