서론
한 주의 끝인 오늘의 수업은 'Figma'의 'Prototyping'이라는 새로운 기능을 배우고 적용, 여러 웹사이트의 Design Concept을 분석해 본 뒤 한 기업을 정해 Design Concept을 잡아보는 시간을 가졌다.
'Figma'의 'Prototyping'
'Figma' 안에서 디자인한 화면들을 Interaction 동작을 수행해 볼 수 있는 기능이다.
- 우측 Panel 상단 Prototype 탭 선택
- 'Flow starting point' 선택 후 이름설정 (
삭제를 원할 경우에는 'Prototype' 탭에서 '-' 버튼 선택)
- 객체 선택 후 '+' 버튼 선택 후 전환화면으로 연결
※ 전환화면으로 연결할 경우 기본값이 설정되어 있는데 'Destination'으로 원하는 Page 설정이 가능하고 'Animation'등 옵션 선택 가능
※ 여러페이지를 같은 화면전환으로 사용하고 싶은 경우 'Shift+객체선택' 후 묶어서 일괄적용이 가능
※ 'Overlay'설정을 통해 Background 처리한 화면을 따로 만들지 않고도 'Top up success' 화면전환 설정이 가능
※ 원하는 화면부터 Interaction 동작 확인을 하고 싶다면 우클릭→'Add Starting'선택 또는 우측 상단 Play 버튼 옵션 Preview설정 후 확인 가능
※ 'Prototype'을 설정한 이름 옆 Icon 선택시 Interaction 동작 확인 가능
이때까지 배웠던 'Figma'의 기능 중에 가장 재미있고 흥미롭게 배운 내용이다.
Design Concept
여러 웹사이트를 보며 Design Concept을 파악해보았다.
웹사이트의 Main Color는 어떻게 되는지, Font는 어떤 걸 사용했는지, UI System은 어떻게 구성되었는지, 사이트의 목적이 무엇인지를 분석하고 이에 따른 효과들도 정리해보는 시간을 가졌다.
웹사이트에는 'Serif'와 'San-serif'가 사용되는데 이에 대해 알아보자
*Serif는 획의 삐침이 없고 Sans-Serif는 획의 삐침이 있는 서체
Serif : 프랑스어로 획의 삐침이 없는 모던한 글씨체를 뜻하며 한글로는 고딕체에 해당
San-serif : 프랑스어로 획의 삐침이 있는 다소 전통적인 느낌의 한글 명조체에 해당
※ 간결한 San-serif는 디지털, 모바일 화면에 적합하게 가독성이 좋고 선명한 서체 전달이 가능하다는 점이 특징 (많은 브랜드들이 로고를 San-serif로 변경하는 추세)
Design Concept 설정해보기
수업내용을 토대로 명품 웹사이트의 Design Concept 분석을 진행하고 나아가 기업하나를 선택한 뒤 공통점이 있는 여러 웹사이트 비교분석을 진행해 선탠한 기업의 Design Concept을 설정해보는 시간을 가졌다.
여러 웹사이트 자료를 구할 때 'Awwwards'라는 사이트를 활용했는데 수상이력이 있는 웹사이트 자료를 모아둔 곳이라 후에도 참고하면 좋을 듯하다.
'Awwards'
▼ 아래는 'Figma'를 통해 내가 분석한 명품 웹사이트와 '맥도날드' Design Concept 설정이다.
<Design Concept 분석/설정>
'Prototype'이라는 엄청난 기능도 사용해보고 실습해보는 과정이 너무나도 재밌고 즐거웠는데 'Figma'에는 내가 이때까지 배운 기능보다 더 많은 기능이 있다는 사실이 설레기도 하고 긴장되기도 했다. Design Concept을 분석하는 시간에는 이론에 가까운 수업이라 걱정이 되었는데 여러 웹사이트를 보며 지식을 쌓고 실습을 해보니 더욱 이해하기 쉬었던 것 같다!
