와이어 프레임에 색상을 사용하는 것이 "아니요"입니까?
최근에는 와이어 프레임에서 색상 사용에 관한 내부 토론이 시작되었습니다. 주니어 디자이너는 멋진 와이어 프레임 세트를 완성했으며 마지막에 모든 것을 그레이 스케일로 바꾸라는 지시를 받았습니다! 그들은 색상이 와이어 프레임에 있어서는 안된다고 들었습니다.
그레이 스케일로 디자인하면 도움이되는 몇 가지 이유를 알 수 있습니다.
- 접근성을 위해 (따라서 차별화를 위해 색상에 의존하지 않아야 함)
- 와이어 프레임에서 시각적 디자인을 잘못 전달하지 않아야 함
저는 실제로 컬러 아이콘 팔레트를 사용하고 시각적 차이를 전달하는 데 도움이되도록 컬러를 사용합니다. 때로는 다른 회색 음영을 사용하거나 패턴을 사용하여 할 수있는 일이 너무 많습니다.
표준 관행은 무엇입니까? 색상이 있거나없는 와이어 프레임을 보았습니다.
와이어 프레임의 목적이 무엇인지에 대한 생각없이 동료들이 가정에서 조금 잃어버린 것처럼 들립니다. Wikipedia에서 제공하는 느슨한 정의로 시작하겠습니다 :
웹 사이트 와이어 프레임 ( "웹 와이어 프레임", "웹 와이어 프레임", "웹 와이어 프레임")은 웹 사이트의 구조와 페이지 간의 관계를 제안하기 위해 인터페이스 디자인에 사용되는 기본 비주얼 가이드입니다. 웹 페이지 와이어 프레임은 인터페이스의 기본 요소 레이아웃과 유사한 그림입니다. 일반적으로 아트 워크가 개발되기 전에 와이어 프레임이 완성됩니다.
다른 단어 나 용어와 마찬가지로 실제로 의미하는 것이 무엇인지 고려해야합니다. A wire-frame model 은 정점 간의 연결점을 표시하여 렌더링되는 다각형 모델의 물리적 구조 표현에 대해 말할 때 3D 모델링에 사용되는 용어입니다. 와이어 프레임 모델의 요점은 무엇입니까? 구조를보다 잘 이해하기 위해 구조의 "창자"를 보여줍니다.
Wikipedia에서 설명하는 것처럼 웹 사이트 와이어 프레임으로 넘어갈 때 우리는 그 의미가 적용되는 방법을 고려해야하며 Wikipedia의 정의에 따라 "웹 사이트의 구조와 페이지 간의 관계를 제안하는 데 사용되는 기본 비주얼 가이드"가 있습니다.
알다시피, 색상에 대한 언급이나 시각적 가이드가 어떻게 보이는지에 대한 언급은 없습니다. 중요한 것은 웹 사이트의 구조가 어떻게 작동하는지 제안한다는 것입니다. 그것을 달성하는 한 효과적인 와이어 프레임입니다. 예를 들어 다음은 모두 "유효한"와이어 프레임입니다.
- 냅킨에 스케치
- 37signals 'Draft의 스케치 또는 iPad의 다른 앱
- balsamiq Mockups와 같은 도구를 사용하여 스케치처럼 보이는 와이어 프레임
- axure 또는 Illustrator와 같은 것을 사용하여 꽉 조여진 와이어 프레임
- photoshop에서 제작 된 사이트의 경량 디자인으로, 페이지 구조가 명확 해지면서 관련성이 높은 디자인 요소가 포함됩니다.
- 페이지를 구성하는 요소를 확인할 수있는 Fireworks에서 HTML로 내보낼 수있는 디자인
- 완전 대화식 HTML/CSS 와이어 프레임
충실도와 세부 사항의 문제 일뿐입니다. 결과물에 어떤 종류의 충실도가 기대되는지 명확하게 설명하고 디자이너가 해당 경로를 따라 가도록 안내해야합니다. 그러나 "와이어 프레임에 색상을 사용해야합니다"는 문제가 아닙니다. 색상이 사이트의 구조를 전달하는 데 도움이되면 와이어 프레임에 절대적으로 색상을 사용해야합니다!
동의했다.
일반적으로 색상은 기본 구조, 레이아웃 및 IA (정보 아키텍처)에 대해 "추정 된"토론에 감정적/문화적 색조를 제공합니다. 그것이 논란의 여지가 있지만, Color를 사용하면 최소한 렌더링에 더 많은 정보를 전달할 것이라는 데 동의 할 수 있습니다.
와이어 프레임의 요점은 필요한 것만 통신하는 것입니다.
실제로, 사람들은 "와이어 프레임"이라는 용어를 사용하여 라훌이 나열한 모든 유물을 의미합니다.
내 경험에 비추어 볼 때 그것은 주로 두 번째로 나열한 이유입니다.
- 때로는 내부 이해 관계자조차 "실제"로 보이는 와이어 프레임에 혼동되기도합니다. 내 Axure 목업은 조직에서 사용되는 다른 PowerPoint 목차보다 충실도가 높기 때문에 때로는 다르게 보이는 단추 또는 내용에 따라 높이를 조정하지 않는 패널과 같은 그래픽 디자인과 관련이있는 의견을 얻습니다.
- 내 친구가 고객이 실제로 그것을 너무나 좋아하여 바로 구현할 수있는 하이파이 와이어 프레임을 만들었습니다. :)
그레이 스케일에서 풀 컬러로, 다시 돌아 왔습니다. 나는 풀 컬러가 일어날 토론에 정말 혼란스러워하는 경향이 있음을 발견했다.
참고로, 저와 개발자 사이에 그래픽 디자이너가없는 프로젝트를 진행하고 있으므로 "현실적"또는 "정말 예쁜"와이어 프레임은 그대로 구현 될 위험이 있습니다. 나는 그래픽 디자이너가 아니기 때문에 재난을 거의 보장합니다 ...
와이어 프레임에서 색상의 한 가지 단점은 컨트롤의 충실도와 그와 같은 품질이 향상됨에 따라 개발자 중 한 명 이상이 GUI 모양 을 만들어야한다고 가정한다는 것입니다. 와이어 프레임 과 같습니다.
알아. 알아. 이것은 와이어 프레임의 목적에 대한 중대한 오해를 지적합니다.
그러나 실제로 일어난다.
구성 요소에 주석을 달 때 색상을 사용하는 경향이 있습니다. 최종 사이트 디자인이 완전히 다른 색상 스토리를 가질 수 있더라도 하이퍼 링크처럼 동작하는 텍스트 비트가 파란색과 밑줄로 표시되도록합니다. 정적이 아니며 사용자 입력에 따라 다른 텍스트 비트는 다른 색상을 얻습니다. 의심스러운 다양한 상자와 선이 있거나 더 연마가 필요하다는 것을 알고 있다면 빨간색 선을 갖도록 설정합니다. 와이어 프레임 바로 위에 주석이 달린 텍스트 블록은 연한 노란색 배경으로 채워집니다.
시각적으로 보면 매우 무섭지 만 의사 소통하는 데 도움이됩니다. 대표하지 않습니다.
개인적으로, 일종의 기능을 부여한다면 색상을 사용하는 것이 좋습니다.
링크와 버튼이 파란색 인 등 와이어 프레임의 대화 형 요소에 색상을 사용하는 경향이 있습니다. 이를 통해 클라이언트에게 제시 할 때 대화 형 요소를 명확하게 강조 할 수 있습니다.
또한 녹색, 주황색 및 빨간색을 사용하여 항목 목록에서 다른 경고 상태를 나타 냈습니다. 이 기능이 클라이언트와의 기능을보다 빠르게 전달하는 데 도움이되었으며 이전의 그레이 스케일 버전에서는 그다지 명확하지 않았습니다.
그러나 최소한 초기 와이어 프레임이나 모형에는 장식 요소로 색상을 사용하지 않습니다. 다른 사람들이 대답했듯이, 고객은 때때로 '어떻게 보이는'것과 작동 방식에 빠질 수 있습니다. 이로 인해 프로세스 속도가 약간 느려질 수 있습니다.