DAY+20 [ UI디자인 실전반응형 랜딩페이지 개념 ]

안녕하세요, 주-주스 입니다! 🍹

 

(ˆ〉 𖥦 〈ˆ)✧･ﾟ
✺!~ 캠프 20일차  ~!✺

(♪٩(٩ •'ᵕ'• ) "✧♪( •'ᵕ'•و(و "✧

오늘은!! 

 UI디자인 실전반응형 랜딩페이지에 대해 알아보고 직접 디자인 해본 내용을 포스팅하겠습니다!

 

 

---

아토믹디자인(Atomic Design) !  ( 실습 조사, 재 정리!)

Atomic Design | 아토믹 디자인

• 화학에서의 원자, 분자 등의 개념을 디자인에 적용시킨 것
• 원칙과 U 컴포넌트를 분류하는 구조로 구성됨
• 브래드 프로스트의 책 제목이기도 함 Atomic Design by Brad Frost (2 ≥)
• 특정한 기술을 위한 개념이 아닌, 일종의 mental model
  
  

 

구성 요소	설명	비유	예시
1. 디자인 토큰	- 디자인 시스템의 가장 기본적인 속성 값. 기술 중립적인 변수.	물 물질을 구성하는 더 작은 아원자 입자.	color-primary, spacing-small
2. 원자 (Atoms)	- 원자는 물질을 구성하는 기본적인 단위. - Atoms(원자)는 라벨, 입력 필드, 버튼처럼 더 이상 나눌 수 ×. - 나눌 수 없는 가장 작은 UI 구성 요소.	화학의 원자.	텍스트(Label) 입력창(Input field) 버튼(Button)
3. 분자 (Molecules)	- 여러 원자가 모여 복합적인 기능을 수행하는 UI 요소.	화학의 분자.	검색 폼, 제품 카드 검색 폼 = (입력 필드 + 버튼)
4. 유기체 (Organisms)	- 여러 분자, 원자, 유기체가 모여 만들어진 복잡한 UI 섹션. - 인터페이스 디자인에서 뚜렷한 섹션(구역)을 형성.	생물의 유기체.	헤더, 푸터, 사이드바 헤더(header), 검색창(search), 로고(logo), 메뉴(menu)
5. 템플릿 (Templates)	- 유기체와 분자 등을 조합하여 만든 페이지의 구조적인 레이아웃. - Template(템플릿)은 Atoms, Molecules, Organisms를 조합하여 하나의 페이지 레이아웃 구조를 설계한 것. - 템플릿은 페이지 수준에서 UI 요소들을 어떻게 배치할지 정의한 틀로, 특정 페이지가 어떤 구조를 가질지를 보여줌.	건물의 설계도.	제품 상세 페이지 레이아웃 상단에 헤더/ 중간에 콘텐츠 영역/ 하단에 푸터
6. 페이지 (Pages)	- 템플릿에 실제 콘텐츠(이미지, 텍스트, 데이터)를 넣어 만든 구체적인 결과물. - 디자인이 실제로 어떻게 보이고 작동하는지를 보여주는 아토믹 디자인의 최종 단계.	건물의 완공된 모습 (가구가 채워지고 사람이 들어선 상태).	실제 데이터가 채워진 제품 상세 페이지 (제품 이미지, 가격, 설명이 모두 채워진 화면)

 

---

오늘의 실습 !

⭐️ 에어비앤비 디자인 시스템 클론 제작

 

- 스타일 응용 (텍스트, 색상) !!

 

---

[ 20일차 소감 ☺️]

스타일 기능만 있다면.. 뭐든 쉽게쉽게 디자인할 수 있겠다는 자신감이 생겼어용!! 그리고..초반에는 피그마가 어렵게 많이 느꼈었는데 쓰다보니 기능들 덕분에 조금 더 잘 할 수 있을 느낌이 듭니다! 추석 연휴를 앞두고 벌써 20일이나.. 강의를 들었더라구용 한 달 너무길게 느껴졌지만 그만큼 뿌듯합니다!! 다들 무탈하게 푹 쉬세영 ㅎㅎ

= 오늘의 한 마디 =
- 나는 아직 진행중인 작품이다 (완벽할 필요 없다~! 완성에서도 벗어나라!