로고 이외에도 색상은 브랜드 인지도 중 가장 눈에 띄는 부분이다. 대부분 브랜드 컬러는 대담하고 다양한 커뮤니티를 반영하며, 색상을 적절히 사용하는 것이 브랜드를 응집력 있게 반영하는 가장 쉬운 방법 중 하나이다.
- Color Combination
- Color Picker
- Color Style Guide
- References
- Practice & Assignment

로고 이외에도 색상은 브랜드 인지도 중 가장 눈에 띄는 부분이다. 대부분 브랜드 컬러는 대담하고 다양한 커뮤니티를 반영하며, 색상을 적절히 사용하는 것이 브랜드를 응집력 있게 반영하는 가장 쉬운 방법 중 하나이다.

색상은 사람의 눈에 가장 먼저 인식되는 시각 디자인의 요소인 만큼 그 중요성을 알고 있다. 잘 조합된 음영, 색조는 호기심을 자극하고, 메시지를 전달하며, 감정과 생각을 만들어 낸다. 영상 제작에서도 전체 디자인에 영향을 미치는 색 구성표를 짜는 과정은 굉장히 신중하게 진행된다. 그러나 표준에 맞는 색상을 선택하고 조합하기란 그리 쉽지는 않다. 그러기에 디자이너는 가장 적합한 색상 조합을 도와주는 창의적이고 인기 있는 도구를 잘 골라서 활용하는 것이 매우 중요하다.
질문 1
개인 과제에서 내가 전달하고자 하는 감성과 개성을 형용사 어휘로 나타내보자.
– 몇 개의 형용사어휘로 주로 나타내고 싶은 개성을 적어보자. 선택한 어휘가 과제에서 드러내고 싶은 대표적인 느낌이나 맞는지 고민해보고 특징을 가장 잘 드러낼 수 있는 어휘로 2~3개를 선택하자.
질문 2
1번에서 선택한 어휘를 가장 잘 드러낼 수 있는 컬러 Set을 디자인해보고 주조 색과 보조 색으로 이루어진 4~5개의 칼라 Set을 만들자.
– 최종적으로 내가 선택한 컬러의 색(Hue), 채도(Saturation), 명도(Brightness)를 각각 적어보자.

UI/UX의 경우 종이 위에 프린트되는 정적인 결과물과는 달리 시각적 계층구조와 동적인 요소로 이루어져 있으므로 정보성과 시지각에 대한 이해가 필요하게 된다. 이 과정을 통해서 스크린 디자인에 있어서 기본적인 정보관리와 시각적 계층구조를 효과적으로 설계하는 방법을 학습하도록 한다.
아래의 2가지 항목에 관한 내용을 해결해 보자.
질문 1
지난 시간에 배운 레이아웃 내용을 복습해보고 내가 기획한 페이지에서 시각적 계층구조를 어떻게 만들것인지 생각해보고 계획을 세워보자.
질문 2
내가 정한 개인 주제의 메인화면에서의 주요 사용자 과업을 파악하고 시각 계층구조를 설계해본다.

GUI를 위한 레이아웃 접근을 효과적으로 디자인하기 위해서 몇 가지 알아야 할 사항을 정리해 본다.
아래의 3가지 항목에 관한 자기 생각을 댓글로 남기기 바랍니다.
질문 1
다양한 스크린에 대한 경험 또는 본 기억에 관한 이야기를 적어 보자. (예, TV/키오스크/사용한 기종별 스마트폰/PC 모니터/게임기/옥외 전광판 등을 나열하기)
질문 2
모바일과 데스크톱의 다른 점에 관한 자신의 경험을 중심으로 아는 대로 자세히 적어 보자.
질문 3
자신이 사용하는 스마트폰 기종과 운영 체제의 이름, 그리고 해상도를 적어 보자.

그래픽 사용자 인터페이스 디자인을 위해 일반적으로 허용되는 원칙은 다음과 같다.
의 결과로 사용자가 결코 업무를 잃지 않도록 한다.
단순성을 제공하는 5가지 방법 :
아래의 3가지 항목에 관한 자기 생각을 댓글로 남기기 바랍니다.
일관성/Consistency
휴대폰 앱을 사용하면서 UI 또는 GUI에서 일관성이 지켜지지 않아 불편함을 느낀 적이 있는지 생각해보고, 예를 들어 자유롭게 설명해봅시다.
시각적 계층구조/Hierarchy
홈페이지에서는 많은 양의 컨텐츠를 구조화하여 보여주기위해 시각적 계층구조를 이용하여 보여주고 있습니다. 강원대학교 홈페이지에서 시각적 계층구조를 만들기 위해 사용한 방법 들이 어떤것이 있는지 살펴보고, 적절한 방식으로 사용하고 있는지(혹은 그렇지 않다고 생각되는 부분도 있는지) 생각해보고 그 이유를 설명해봅시다.
개성/Personality
인터페이스를 사용하면서 느낄 수 있는 매우 다양한 인상과 개성이 있고 이로 인해 사용자들은 좋고 싫음에 대한 기호가 생기기도합니다.
예를 들어 밝음, 긴장감, 강렬함, 깔끔함, 고급스러움, 고전적임, 미래적임, 신비로움 등등 다양한 인상을 줄 수 있습니다.
각자 정한 개인별 과제가 무엇이고, 개인별 과제에서 내가 전달하고 싶은 Personality는 어떤 인상/어떤 개성인지 구체적으로 설명해 봅시다.

반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없습니다. 점점 더 많은 방문자가 웹 사이트를 열 수 있기 때문에 데스크톱 및 모바일 용 픽셀 단위로만 설계하는 것도 과거입니다. 따라서 여기에 반응형 웹 디자인의 기본 원리를 설명해 보겠습니다. 간단하게 유지하기 위해 레이아웃에 중점을 둘 것입니다.
그것은 같아 보일지 모르지만 그렇지 않습니다. 두 가지 방법 모두 서로 보완 적이므로 올바른 방법이나 잘못된 방법은 없습니다. 내용을 결정하게 하십시오.

화면 크기가 작아짐에 따라 콘텐츠가 더 많은 수직 공간을 차지하기 시작하고 아래의 모든 내용이 푸시 다운됩니다. 이를 흐름이라고 합니다. 픽셀과 포인트로 디자인하는데 익숙하다면 이해하기 까다로울 수 있지만 익숙해지면 완전히 이해할 수 있습니다.

캔버스는 데스크톱, 모바일 화면 또는 그 사이의 모든 것일 수 있습니다. 픽셀 밀도도 다양 할 수 있으므로 유연하고 모든 곳에서 작동하는 장치가 필요합니다. 그것은 퍼센트와 같은 상대적 단위가 유용 할 때입니다. 그래서 무언가를 50% 넓이로 만들면 항상 화면의 절반 (또는 viewport 창은 열려있는 브라우저 창의 크기)이됩니다.

브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있습니다. 즉, 데스크톱에서는 3 개의 열이 있지만 휴대 기기에서는 1 개의 열만 있습니다. 대부분의 CSS 속성은 하나의 중단 점에서 다른 중단 점으로 변경할 수 있습니다. 일반적으로 콘텐츠를 두는 위치는 콘텐츠에 따라 다릅니다. 문장이 중단되면 중단 점을 추가해야 할 수도 있습니다. 그러나 주의해서 사용하십시오. 무엇이 영향을 미치는지를 이해하는 것이 어려울 때 빠르게 지저분해질 수 있습니다.

때로는 콘텐츠가 휴대 기기와 같이 화면의 전체 너비를 차지하지만 콘텐츠가 TV 화면의 전체 너비까지 펼쳐지는 것이 좋지 않은 경우가 종종 있습니다. 이것이 Min / Max 값이 도움이되는 이유입니다. 예를 들어 너비가 100%이고 최대 너비가 1000px 인 경우 내용이 화면을 채우지 만 1000px를 넘지는 않습니다.

상대 위치를 기억 하십시오. 서로에 따라 많은 요소를 가지면 제어하기가 어려우므로 컨테이너의 요소를 래핑하면 더 이해하기 쉽고 깨끗하며 깔끔하게 유지할 수 있습니다. 여기서 픽셀과 같은 정적 단위가 도움이 될 수 있습니다. 로고와 버튼처럼 크기를 조정하지 않으려는 콘텐츠에 유용합니다.

기술적으로 작은 화면에서 큰 화면 (모바일 우선) 또는 그 반대로 (데스크톱 우선) 프로젝트를 시작하면 큰 차이가 없습니다. 그러나 모바일을 처음 사용하는 경우 추가 제한 사항이 추가되고 의사 결정을 내리는 데 도움이됩니다. 종종 사람들은 한 번에 양 끝에서 시작하기 때문에 실제로 무엇이 더 잘 작동하는지 확인해야 합니다.

귀하의 웹 사이트에 멋지게 보이는 Futura 또는 Didot을 원하십니까? 웹 폰트 사용! 그들이 멋지게 보일지라도, 각각이 다운로드 될 것이고 더 많이 가질수록 페이지를 로드하는데 더 오래 걸릴 것임을 기억하십시오. 반면에 시스템 글꼴은 매우 빠르며 사용자가 로컬 글꼴을 가지고 있지 않은 경우를 제외하고는 기본 글꼴로 돌아갑니다.

아이콘에 많은 세부 정보가 있고 멋진 효과가 적용 되었습니까? 그렇다면 비트 맵을 사용하십시오. 그렇지 않은 경우 벡터 이미지 사용을 고려하십시오. 비트 맵의 경우 jpg, png 또는 gif를 사용하고 벡터의 경우 SVG 또는 아이콘 글꼴을 사용하는 것이 가장 좋습니다. 각각에는 몇 가지 이점과 단점이 있습니다. 그러나 크기를 염두에 두십시오. 사진을 최적화하지 않으면 온라인 상태로 만들 수 없습니다. 반면에 벡터는 종종 작지만 일부 오래된 브라우저는 벡터를 지원하지 않습니다. 또한 곡선이 많으면 비트맵보다 무거울 수 있으므로 현명하게 선택하십시오.
