본문 바로가기

Design

 (24)
아이디어스 상세페이지 회고 오늘 회사에서 워킹로봇 키트를 아이디어스에 입점하였다. 나의 기획과 디자인이 회사의 매출로 연결되는 좋은 기회가 되었으면 좋겠다. 아이디어스 입점까지의 과정을 정리하고 회고해보려고한다. 상세 페이지 디자인 desiner PA 분의 레퍼런스를 많이 참고하였다. 전체적으로 포토샵을 통한 외부 배경 및 꾸밈 요소를 실사 합성하여 배치함. 도형과 솔리드만 사용하려했는데 디자인 막바지에 걸어오는 길을 연출하기 위해 차도를 합성하였는데 괜찮은 결과물이 나왔다. 배울점 : 디자인이 별로인지 아닌지는 직접 만들어 봐야 알 수 있다. 지우더라도 직접 만들어보고 눈으로 보고 난후에 지우자 그래디언트 및 쉐도우 활용 이번 졸작과 상세페이지 디자인을 하며 그래디언트와 쉐도우의 중요성과 활용성에 대해 많이 깨달았다. 솔리드만 ..
졸업작품 회고 11월 11일 커뮤니케이션디자인학과 졸업작품 심사가 있었다. 전날 A1 보드 패널을 태일사에 맡겼는데 저녁 플로터 부품 문제로 인쇄물을 오후 열두시에 받을 수 있단다. 디피는 한시까지 끝내야하는데 이동시간+디피시간을 고려해봤을때 열두시는 안 될것 같았다. 열한시반까지만 어떻게 안 되냐고 물어봤는데 확답을 못 주겠단다. 종이를 바꾸면 되는데 그럼 세로줄이 생긴다고 한다. 그냥 믿고 맡기기로했고 태일사에서 1순위로 최대한 빨리 해준다고했다. 다음날 열한시반에 수령해서 휘뚜루마뚜루 이동해서 디피 패널 붙히고 멀티탭 빌려서 디피까지 완료했다. 준비도 많이 못해서 부끄럽지만 회사 다니면서 밤새가며 패널 디자인하고 준비하느라 고생해서 올려본다. 다른 작품들보고 정말 잘하는 친구들 많고 열심히 준비했구나 느꼈다. 나..
#22, 인쇄와 감리 실무 1. 모니터와 인쇄물의 컬러 차이가 발생하는 2가지 이유 1. 컬러차이가 발생하는 상식적인 이유 [모니터]로 [종이와 잉크]를 만들 수 없다. -모니터는 하나의 조명으로 발광체 - 종이와 잉크는 반사체 2.컬러차이가 발생하는 실무적인 이유 - 장비 성능의 문제 흑백TV vs 컬러TV 데스크톱 vs 스마트폰 vs 태블릿 - 소프트웨어 설정의 문제 하나의 장비에서도 프로그램에 따라 다른 컬러 값이 나올 수 있다. 결론, 컬러 소통의 문제 해결, 표준 컬러 장비사용 & 표준 컬러 설정 사용 2. 내가 사용하는 모니터는 어떤 모니터인가? 컬러 작업에 필요한 모니터 스펙 체크 및 장비 추천 예시) 길이의 표준, 1cm = 1센티미터 회사에 따라 줄자의 1cm가 오차가 발생한다. >> 장비가 표준에 얼마나 가까운지..
#21, 디자인 회사의 프로세스 1. 매뉴얼 스튜디오의 디자인 컬러 레이아웃 타이포그라피 이미지 >> 표현에 관한 단어들 메시지 >> 무엇을 표현할지, 메시지가 무엇인지 발굴하고 정의 해야 좋은 디자인을 할 수 있다. 컬러, 레이아웃, 타이포그라피, 이미지 + 메시지 = 무엇을 어떻게 표현할 것인가 좋은 디자인 = 작업물을 접하는 모든이가 동일한 메시지를 느껴야 함 미감의 기준 (자신만의 미감 기준이 있어야한다.) 1. 단순 2. 기능 - Ui/Ux 분야에선 아름다움 보다 더 높은 가치라고 생각한다. 3. 균형 2. 리프트 오프 스튜디오의 디자인 선택기준 1. 이미지 2. 타이포그래피 3. 레이아웃 4. 컬러 제약들 1. 콘텐츠의 성격 2. 스케쥴 3. 예산 4. 클라이언트의 성향 5. 주어진 소스 6. 인쇄 (미디어) - 컬러 이슈 ..
#20, 모바일 디자인 및 디자인 시스템 이해하기 1. 터치 스크린을 위한 디자인 이해하기 모바일 디자인 - 제스처를 통해 조작 터치 UI에서 사용자에게 제공해야할 3가지 1. 트리거 Trigger 2. 액션 Action 3. 피드백 Feedback 2. 1배수 디자인 이해하기 IOS - 다양한 디스플레이 해상도에 대응하기 위해 개발한 디자인 시스템, PT - PT 기준으로 디자인하고 내보낼 때만 해상도에 맞추어서 배수로 내보낸다. Android - DP 개념을 사용, PT와 동일하지만 이름만 다름 - DPi 개념을 사용, PPi와 동일하지만 이름만 다름 - 벡터로 디자인하여 다양한 사이즈의 비트맵으로 익스포트 해주면 된다 - 1배수로 디자인을 한 후 정수 배수로 익스포트해주어야 깨지지 않는다 3. 입력 방식과 물리적 거리가 끼치는 영향 이해하기 -입력..
#19, 웹 사이트 디자인 이해하기 1. 그리드 시스템 이해하기 정적인 인쇄 영역과 달리 다양한 스크린 크기에 대응하기 위한 규칙을 만들기 위해 사용 - 컬럼 (Column) -- 실제로 컨텐츠를 포함하는 부분 -- 컬럼의 너비는 콘텐츠가 스크린 크기에 맞춰질 수 있도록 고정값이 아닌 백분율로 결정 - 거터 (Gutter) -- 컬럼과 컬럼 사이의 공간 -- 거터의 너비는 브레이크 포인트(화면 구성이 바뀌는 지점)에따라 결정. - 마진 (Margin) -- 컨텐츠의 왼쪽 및 오른쪽 가장자리 사이의 공간 -- 마진의 너비는 브레이크 포인트에따라 결정. 12컬럼 그리드 시스템 - 반응형 웹에서는 일반적으로 12컬럼 그리드 시스템을 사용한다. 2. 박스모델 이해하기 모든 HTML 요소는 박스 모양으로 구성 - Margin - Border - P..
#18, 디스플레이 환경 이해하기 1. 컬러 구현 체계의 차이 1. CMYK - 감산혼합 방식 - 인쇄물에 사용 2. RGB - 가산혼합 방식 - 디지털 환경에 사용 2. 컬러값을 전달하는 방식 1. RGBA - 마지막 A는 투명도 2. HEX - 색을 16진수로 표현한 값 - 투명도를 표현할 수 없음 3. 해상도를 표현하는 방식의 차이 1. DPI -Dot per inch - 인쇄 사용 2. PPI - Pixel per inch - 디지털 미디어 사용 주로 쓰는 3가지 해상도 72PPi - 디지털 미디어 150PPi - 신문 인쇄 300PPi - 잡지 인쇄 4. 이미지 포맷 1. Vector 2. Bitmap 디지털 미디어에서 사용하는 이미지 포맷 1. Gif - 최대 256개의 컬러만을 제한적으로 사용할 수 있다. - 용량이 아주 적..
#17, 시각화 ( Visualization ) 1. 시각화 (Visualization) 일반적인 시각화 :시각화는 커뮤니케이션을 위해 이미지, 다이어그램, 애니메이션 등을 만드는 행위이다. 시각 디자인에서의 시각화 : 정보를 시각적으로 보여주는 것뿐만아니라, 메세지를 전달하기 위해 디자인 컨셉, 내용을 시각적 형태로 보여주는 행위로 넓게 사용된다. EX) 포스터, 기업 로고, 브랜드 아이덴티티 2. 시각화 관련 팁 - 모든 시각화의 출발점은 키워드이다. - 그래픽 모티브의 통일성을 가지고 있어야 한다. - 디자인 키워드의 본질적 의미를 해석하고, 시각적으로 표현한다. - 감각이 아닌 스토리와 이야기를 가지고 출발해야한다. - 언어적인것에서 출발하면, 남들에게 기준을 가지고 설명할수 있어 설득력이 생긴다.

티스토리툴바