1-와이어프레임에아이콘넣기

1-1-준비

1. 시작프레임으로 이동

05-인터페이스/1.아이콘넣기

2. 플러그인 설치

3. 순서대로 진행

1-2-아이콘넣기

1. 그림과 같이 아이콘을 겹쳐 놓는다

2. 색상 복제적용
1. 피마의 색상 HEX코드를 복사하여 iconify의 color 입력상자에 붙여넣은후 아이콘을 적용해본다


e802c844cac9485284e121c1c6a11707

3. 하단탭바의 아이콘도 적용해보자
1. home, category, cart, search

2- Flow제작

화면의 흐름을 시각적으로 표현하는 flow 를 제작해보자

2-1-준비

autoflow플러그인 설치

무료버전은 파일당 50개 사용가능

2-2-활용

1. 플러그인 열기
2. 시작레이어 선택
3. 마지막 레이어 선택
4. 플로우선 자동생성
5. 선 모양은 플러그인 패널활용
1. 연결선을 선택하면 옵션창이 열린다\

화면의 플로우를 제작해보자

3-autolayout

3-1-오토레이아웃 적용

1. 표시된 레이어를 선택후 속성을 선택하여 조절한다

2. 레이어선택후 우클릭하여 표시된 메뉴선택

3-1-1-오토레이아웃 옵션확인

1. 정렬방향
2. 상하마진
3. 좌우패딩
4. 상하패딩
5. 패딩값 개별입력
6. 컨텐츠정렬

3-1-2-리사이징 옵션확인

📢

오토 레이아웃은 "자동으로" 레이아웃을 맞춰 주는 기능으로 요소를 공간(프레임)에 맞춰넣고 정렬하는 기능이다

리사이징옵션은 프레임의 크기 지정시 기준을 설정하는 것이다.

1. 프레임 내의 콘텐츠(하위요소) 기준(Hug Contents)
2. 무조건 정해진 너비 (Fixed)
3. 프레임 기준으로 콘텐츠(하위요소) 배치(Fill container)
4. 프레임을 세개 복사하여 차이점을 비교해보자

완성

3-2-제약-constraints

가변 디자인 제작시 설정하는 제약조건

요소의 위치,크기를 리사이징 할때 부모프레임의 기준점을 설정하는 옵션

• 프레임 하위의 박스 레이어의 제약 기준을 변경하여 아래와 같이 설정해보자

3-3-리사이징

리사이징은 오토레이아웃 상태에서 사용할수 있다.

1. 레이어세트를 복사한다
2. 레이어를 선택후 shift +a 를 눌러 오토레이아웃을 만든다

3. 그후 마지막 레이어 선택후 우측 패널에서 표시된 옵션을 선택


4. 한세트 더 복사후 autoLayout 으로 만든다
5. 아래처럼 만들어보자

4-반응형디자인

4-1-컴포넌트만들기

1. 24x24 #555 의 원 6개 그림
2. iconify 에서 insta, facebook, twitter,figma,ux,design 아이콘 검색
3. 원위에 배치 “@+H → @+V “

4. 컴포넌트로 등록

5. ^R : 컴포넌트 이름변경
1. icon/kind/color

6. 컴포넌트 선택
7. 우측 패널의 combine as variants 클릭

8. property명 수정

9. variant 값 수정
1. color 은 gray 로 수정
2. kind는 컴포넌트 개별선택 하여 해당 값으로 변경
10. 모든 컴포넌트 복사후 이동

11. 색상수정

12. variant 수정
1. white

13. 그후 햄버거메뉴와 좌우버튼 도 추가한다
1. 이때 새로 그린후 베리언트에 등록한다
14. 등록시 인스턴스하위 프레임의 제약조건이 scale 이어야 배경과 아이콘이 함께 크기조절 된다

4-2-PC레이아웃

4-2-1-PC/Header

frame: 1440x1024

grid:

◼ Header-left

1. Frame: Nav / 100% 40px / #d78d9

2. Typetool /


3. home work about contact 작성
1. 작성시 개별 레이어로 작성한다
2. 레이어 4개를 선택후 우측 패널에서 수평 여백을 40으로 조절

4. 메뉴텍스트를 그룹으로 묶은후 그룹명 변경

◼ Header-right

1. 상단 툴바→리소스→컴포넌트로 이동→제작한 아이콘 인스턴스 적용

2. 인스턴스를 2개 더 복사후 배치힌다
3. 아래의 순서대로 클릭하여 수평간격은 20으로 설정한다

4. 아이콘 스왑
1. 아이콘인스턴스 선택후 우측패널에서 kind의 옵션을 다른 sns로 변경

◼ Header-title

1. My Design Portfolio 텍스트 작성
2. 폰트설정


3. 정렬설정
1. 상단 레이어로 부터 50px 내려옴

4. 서브타이틀 추가
1. 순서대로 진행 F2B8A2

5. 세로간격 맞추기

모두 선택후 Header 프레임으로 묶는다

4-2-2-PC/Features

◼ 배경만들기

1. 사각형 : 1440 x 300 #F1F1F1
2. 사각형 : 1110 x 300

3. 이미지불러오기 : figma-image 의 이미지중 아무거나 불러온다
4. 레이어 누적순서 확인

5. 레이어 두개 선택후 마스크 적용


6. 배경레이어와 마스크 그룹 레이어를 그룹으로 묶은후 Feature 로 변경한다

◼ 컨텐츠블록

1. 프레임 : 370x 300
1. 1100/3=370
2. 선 : 1 x 300 / #fff /좌측상단정렬
3. 아이콘 : 인스턴스를 적용한다
1. 64x64
4. 하단에 텍스트 작성
5. icon 과 text 레이어 선택후 autolayout→icon-box

6. 선과 오토레이어를 선택후 컴포넌트로 등록한다.

7. 인스턴스를 두개 복사하여 우측에 배치한다
8. 세번째 인스턴스는 우측선추가

9. 인스턴스의 베리언트를 수정하여 아이콘을 변경한다

1. 모든 레이어를 Features 프레임으로 묶는다

4-2-3-PC/Services

1. Design service

2. text 툴 선택후 드래그 → 속성설정

3. 우클릭→plugin→lorem ipsum

4. 타이틀과 본문 간격 20

5. 문단 하나의 크기 : 540x120
1. 문단을 양쪽 정렬로 수정한다

6. 우측으로 문단복사

Design 프레임으로 모두 묶기

4-2-4-PC/Portfolio

◼ Portfolio 프레임만들기

1. 프레임: 1440 x 525 / #F4F1F1 → [Portfolio]

◼ carousel 프레임만들기

1. 프레임: 1110 x 335/ → [carousel ]

◼ 타이틀 작성

1. Features 타이틀 복사이동 → Portfolio 로 변경
2. 50px 상단여백

◼ 카드만들기

1. 랙탱귤툴→254 x 254 →[ photo-box ]
2. 프레임→텍스트툴→로렘입숨→오토레이아웃 →[ text-box ]



3. 두개의 그룹을 컴포넌트로 만든다 →[ card ]

◼ 콘텐츠 적용

1. 윗단계에서 제작한 인스턴스를 4개 적용하여 이미지와 텍스트를 변경한다

2. 카드 좌우의 콘트롤 버튼은 아이콘의 인스턴스를 넣는다 이때 레이어 누적순서는 캐로셀프레임의 바깥에 배치하도록 한다

3. 버튼제작
1. 프레임: 253x60
2. more portfolio
3. 두개의 레이어를 오토레이아웃으로 묶는다 →[button]

프레임하단여백 확인후 마무리

4-2-5-PC/Footer

프레임 : 1440 x 335 / #374140 →[Footer]

프레임의 길이가 짧아 잘린다. 아래의 순서대로 클릭하여 전체 프레임의 길이를 늘인다

◼ box1

1. 프레임 : 350 x 200
2. 텍스트 : From the Blog #E35765

3. 텍스트 : #9D9D9D


4. 텍스트 : 2023.01.23 / #9D9D9D

5. 3,4 를 오토레이아웃으로 묶는다 → [paragraph]

6. 5를 복사하여 아래로 이동후 5와6을 오토레이아웃으로 묶는다 → [content]

7. paragraph 그룹하나를 복사하여 붙여넣는다
8. 타이틀과 content 를 오토레이아웃으로 묶는다

◼ box2

박스1을 복붙한다

1. 타이틀 변경 : Contact Us
2. content>paragraph 는 한개만 남기고 삭제
3. 텍스트 #9D9D9D

4. 생성하여 연락처 처럼 편집한다

◼ box3

1. box1복붙
2. 타이틀 변경 Subscribe
3. 프레임 : 350x40 / fill : 4F5554 / stroke : 6D6D6D
4. 텍스트 : your name

5. 3,4 오토레이아웃 → [input]

6. input 그룹을 복붙 후 텍스트 수정하여 아래와 같이 변경한다

7. copyright 프레임 1440 x 40

4-3-태블릿레이아웃

PC프레임 복붙 프레임명 → [TABLET]

4-3-1-Header

1. #Nav 너비 768
2. # title 너비 768
3. 수동으로 위치 조정

4-3-2-Banner

1. 인스턴스 세개 선택후 폭을 줄인다

4-3-3-Design

1. 컬럼의 폭에 맞게 너비를 줄인다

4-3-4-Portfolio

1. 레이어의 구조를 아래처럼 변경한다

2. carousel 프레임의 속성을 아래처럼 변경한다

4-3-5-Footer

4-4-모바일레이아웃

• 태블릿 프레임 복붙
• 이름변경 → [MOBILE]
• width: 360

4-4-1-레이아웃그리드설정

1. 보더엣지

2. 컬럼

4-4-2-Header

1. 원뎁스의 프레임 레이어 너비를 모두 360으로 수정

◾ Nav

1. #Nav 안의 레이어를 프레임 밖으로 빼낸다
2. 아이콘 인스턴스를 넣는다

3. 인스턴스 종류를 햄버거로 변경후 간격을 조정한다

4. 우측에 프레임 밖에 있는 sns 아이콘들을 가져와 배치한다

5. sns 간격조정

◾ title

1. 폰트 크기수정

2. 하위프레임의 리사이징 옵션을 변경하여 중앙정렬로 수정한다 이때 서브타이틀이 두줄이 될경우 글 내용을 줄인다

◾ main-menu

해당 메뉴는 햄버거 아이콘 클릭시 보인다

일단 보이는 디자인을 구현해놓고 인터렉션은 추후 제작한다

1. #main-menu 을 #mobile 안으로 가져온다

2. #main-menu 의 fill 을 #374140 으로 한다
3. 오토레이아웃의 설정을 아래와 같이 한다

4. 레이어이름을 변경한다 → [mobile-toggle-menu]

4-4-3-Banner

#Banner의 fill 속성은 삭제한다

MOBILE 프레임의 길이를 전체적으로 늘인후 작업한다

4-4-4-Design

상단여백 50

1. 폰트사이즈와 줄간격은 아래의 그림과 같이 조정한다

4-4-5-Portfolio

상단간격 50

1. carousel 프레임을 중앙으로 이동후 너비를 328로 조정한다
2. 좌우 컨트롤 버튼 삭제
3. 아래의 그림처럼 여백과 폰트사이즈를 조정한다

4-4-6-Footer

1. box* 그룹 세로배치 이때 Footer 길이늘임

2. copyright 너비 360 /fontsize : 12 위치 아래로 내림
3. box* 그룹의 타이틀 fontsize:22
4. box* 그룹간 세로간격 30