콘텐츠
- 반응 형 방법론
- 콘텐츠를 먼저 보관하려면 어떻게해야합니까?
- 왜?
- 01. 비즈니스 및 사용자 목표 정의
- 02. 기회가있을 때마다 참조
- 03. 밀어내는 것을 두려워하지 마세요
- 04. 자신의 팀도 밀고
- 05. 필요한 모든 콘텐츠를 미리 정의
- 프레젠테이션에서 콘텐츠를 추상화하려면 어떻게합니까?
- 레이아웃 측면에서 콘텐츠에 대한 생각을 멈춰야합니다.
- 고객이 디자인과 관계없이 콘텐츠를 계획하도록 강제
- 디자인하기 전에 콘텐츠 마무리
- 항상 실제 콘텐츠 사용
- 그렇다면 와이어 프레임은 반응 형 디자인 프로젝트에서 어떻게 작동할까요?
- 스케치
- 브라우저 내 프레임 워크
- 주석
- 와이어 프레임에 실제 콘텐츠 사용
- 먼저 작은 화면 용으로 디자인하려면 어떻게해야합니까?
- 처음에 장치에서 추상적 인 디자인
- 스타일 타일 사용
- 인터페이스 조화 만들기
- 브라우저에서 모두보기
- 정적 프로그램과 균형을 유지하십시오.
- 결론
명확히하자. 디자인은 당면한 더 깊은 문제, 모든이면에있는 이유에 초점을 맞춘 경우에만 해결책입니다. 견고한 프로세스는 항상 우리의 작업을 안내해야하지만 우리는 더 유연한 것을 수용해야합니다. 우리의 매체는 마침내 유동적이라는 것이 입증되었는데, 우리의 프로세스가 아니겠습니까? 시스템 설계에 대해 생각해보십시오. 전체 그림과 작은 세부 사항을 모두 볼 필요가 있습니다. 불가능한? 그것과는 거리가 멀다!
Frank Chimero는 자신의 책 The Shape of Design에서이를 아름답게 표현했습니다.“작가가 작품에 대한 새로운 관점을 얻기 위해 이젤에서 뒤로 물러나는 부분이 있습니다. 회화는 멀고 가까운 똑같은 부분이다. 작가는 가까이있을 때 자신의 흔적을 남기기 위해 열심히 노력한다. 멀리서 그는 작업의 자질을 분석하기 위해 작업을 평가합니다. 그는 일이 그에게 말하도록하기 위해 뒤로 물러납니다.”
우리는 우리의 작업 인 매체가 우리에게 말하도록해야합니다. 반응 형 디자인의 부상과 함께 우리는 마침내 원래의 매체 인 유동성을 수용하고 있습니다. 한 걸음 물러서서 작업을 평가하고, 분석하고, 일을 수행하는 새로운 방식 인 새로운 프로세스를 수용 할 수있는 좋은시기입니다. 코드를 이해하지 못하는 정적 모형과 웹 디자이너의 시대는 지났습니다. 반응 형 프로세스를위한 시간입니다.
반응 형 방법론
이 기사의 시작 부분에서 견고한 프로세스에 대한 큰 비밀을 알려 드리겠습니다. 우리가 그렇게 미쳤거든요 준비된? 반응 형 프로세스는 책임감있는 프로세스입니다. 막연한? 아마도. 바보? 아니요. 이전의 웹 표준 운동처럼 반응 형 디자인은 미래 친화적 인 방법으로 웹을 발전시키고 있습니다.
다른 디자인 프로세스와 마찬가지로 모든 디자인 프로세스의 '이유'에 초점을 맞춰야합니다. 그렇다면 웹 사이트는 왜 존재합니까? 콘텐츠를 전달합니다. 작업 기반, 사회적, 정보 제공이 될 수 있습니다.… 중요하지 않습니다. 모든 것은 이것으로 귀결됩니다. 이유, 잘 구성된 콘텐츠, 중요한 상호 작용으로 시작하십시오.
다음은 반응 형 디자인 프로세스에 대해 가장 자주 듣는 질문입니다.
콘텐츠를 먼저 보관하려면 어떻게해야합니까?
우리는 모두 프로젝트를 시작할 때 매우 낙관적입니다. "콘텐츠 우선!" 우리는 말을. “사용자 목표! 중요한 것을 기억하십시오!” 사실입니다. 그러나 그것은 무엇을 의미합니까? 콘텐츠 우선 프로세스를 어떻게 구현합니까?
알고 있거나 알고 있다고 생각하더라도 프로젝트가 진행됨에 따라 잊기 쉽습니다. 장기 프로젝트는 계속해서 끌리는 경향이 있습니다. 우리는 이유에 대한 생각을 멈추고 방법에 집중하기 시작합니다. 우리는 우리의 프로젝트가 독립적으로 존재할 수있는 별도의 '발견'과 '개발'단계로 나눌 수 있다고 생각하도록 속입니다.
진실은, 우리는 항상 이유를 계속 물어봐야합니다. 아무리 많이 알고 있다고 생각하더라도 아무리 많은 계획을했는지에 상관없이 결정을 내릴 때마다 버튼을 디자인하거나 헤드 라인을 작성할 때마다 다음과 같이 질문해야합니다.
왜?
내가이 일을하는 이유는 무엇입니까? 누구를위한 것입니까? 고객이 달성하는 데 도움이되는 비즈니스 목표는 무엇입니까? 내 사용자가 해결하는 데 필요한 것은 무엇입니까? 콘텐츠를 먼저 유지하지 마십시오. 이유를 먼저 유지하십시오.
이것은 쉽게 들립니다. 하지만 잘하려면 밀어야합니다. 먼저 고객과 팀을 밀어 그 이유를 정의하십시오. Lorem Ipsum도,‘나중에 설명하겠습니다.’가 아닙니다. 너의 숙제를해라! 모든 방법은 확실한 이유로 시작해야합니다. Yellow Pencil에서 이것은 우리가 프로젝트를 발표하고, 예측하고, 예산을 세우고, 계획하는 방식에 큰 변화를 가져 왔습니다. 견고한 연구, 전략 및 계획을 수행하기 위해 예산과 시간을 투자해야했습니다. 당신도 할 수 있습니다. 그러나 고객과 팀이 콘텐츠 요구 사항을 미리 정의함으로써 얻을 수있는 엄청난 이점을 알게되면 결코 뒤돌아 보지 않을 것입니다.
그리고 그들을 교육하는 것이 우리의 일입니다. (고객을 대하는 방법에 대해 자세히 알아 보려면 Mike Monteiro의 뛰어난 책 Design is a Job을 읽어보십시오.) 고객은 모든 조사를 수행하고 미리 작업하는 것의 가치를 이해하는 데 어려움을 겪을 수 있습니다. 그리고 왜 그래야합니까? 그들은 마지막에 '완성'을 얻지 못합니다. 너무 자주 송장과 큰 워드 문서를받습니다.
그것은 그들의 잘못이 아닙니다 – 그것은 우리의 잘못입니다. 그 가치를 더 잘 보여주는 것은 우리의 책임입니다. 모든 단계에서 우리는이 모든 것을 가장 중요한 이유로 되돌려 야합니다.
이것은 반응 형 디자인에 특히 중요합니다. 반응 형 웹 사이트는 더 많은 개발 노력이 필요하지 않지만 훨씬 더 많은 계획을 의미합니다. 그래도 우리가 계속해서해야 할 계획입니다. 3 년마다 진행되는 현재의 재 설계 프로젝트주기를 확인하십시오. 계속 하시겠습니까? 우리는 그렇지 않습니다.
따라서 프로젝트 프로세스에서 콘텐츠를 먼저 유지하는 세 단계가 있습니다.
01. 비즈니스 및 사용자 목표 정의
프로젝트에 대한 비즈니스 및 사용자 목표의 우선 순위 목록을 설정합니다. 사용자가 가장 알고 싶어하거나 무엇을하기를 원합니까? 당신의 조사를하십시오. 거친 추측이 아닌 정보에 입각 한 추론을하십시오. 모든 이해 관계자가 동의하도록하십시오.
02. 기회가있을 때마다 참조
결정을 내릴 때마다 누군가가 새로운 기능이나 디자인 요소 또는 콘텐츠 페이지를 제안 할 때마다 요청을 비즈니스 및 사용자 목표에 매핑하도록하십시오. 이 기능이 실제로 필요한 것은 무엇입니까? 진짜 이유는 무엇입니까? (힌트 :‘원하기 때문에’,‘파란색을 정말 좋아해요’,‘페이스 북에있는 모든 사람’은 포함되지 않습니다.)
03. 밀어내는 것을 두려워하지 마세요
이것은 힘든 일이 될 수 있습니다. 고객 관계는 미묘 할 수 있으며 전쟁에서 승리하기 위해 전투를 포기하고 싶을 수 있습니다. 하지만 기억하세요, 우리는 모두 함께합니다! 비즈니스 대 사용자가 아닙니다. 우리 대 그들.
사용자 요구를 충족하는 것은 비즈니스 요구를 충족하는 가장 좋은 방법입니다. 사용자 없이는 사업이 없기 때문입니다! 고객 (좋은 고객)은 모든 것에 '예'라고 말하도록 당신을 고용하지 않습니다. 따라서 고객이 자신의 목표 나 사용자의 요구를 충족하지 않는 것을 요구하는 경우 도전하는 것을 두려워하지 마십시오. 자존심에 관한 것이 아닙니다. 가능한 최상의 솔루션을 만드는 것입니다.
04. 자신의 팀도 밀고
이는 크리에이티브 팀 내에서 작업 할 때도 어려울 수 있습니다. 시각 디자인, 사용자 경험, 정보 아키텍처, 콘텐츠 전략, 콘텐츠 제작과 같은 역할 분리는 잘못된 의사 소통으로 이어질 수 있습니다. 우리는 바쁘고 이메일로 압도됩니다. 특히 '당신의'작업이 끝나면 프로젝트를 처음부터 끝까지 유지하기가 어렵습니다.
팀의 관계는 적어도 고객 관계만큼 중요합니다. 우리는 고객과 마찬가지로 그 이유를 스스로 상기시켜야합니다. 협업이 핵심입니다. 콘텐츠 계획, 와이어 프레임 또는 디자인을 단순히 '전달'할 수는 없습니다. 가능한 한 협력해야합니다. 결과물을 '마무리'하고 다른 작업으로 이동하는 것은 쉽습니다. 진행이 어려워 질 때 프로젝트를 유지하는 것이 훨씬 더 어렵습니다.
창의적인 작업에 대한 폭포수 접근 방식은 작동하지 않습니다. 팀 구성원 간의 민첩하고 협력적인 작업으로 더 나은 결과를 얻을 수 있습니다.
05. 필요한 모든 콘텐츠를 미리 정의
즉, 반응 형 웹 사이트를 계획하는 데 시간이 더 오래 걸립니다. 우리는 더 이상 단일 컨텍스트를 계획하는 것이 아닙니다. 현재 우리가 알고있는 모든 상황과 아직 존재하지 않는 상황에 대해 계획하고 있습니다.
그러나 이러한 모든 복잡성을 미리 계획하는 데에는 뒤로 돌아가서 고려하지 않은 기능과 기능을 다시 장착하는 것보다 훨씬 적은 시간이 걸립니다. 따라서 시간 / 노력 / 예산을 사용하십시오. 디자인을 시작하기 전에 고객과 팀이 모든 콘텐츠를 정의 (및 약속)하도록합니다. 페이지 테이블을 사용하십시오. 구조화 된 콘텐츠를 사용합니다. 지금 콘텐츠의 미래 보장! 아니면 나중에 울어.
프레젠테이션에서 콘텐츠를 추상화하려면 어떻게합니까?
당신은 이것을 인터넷 공간에서 많이 듣습니다. 하지만 잠깐만 요? 그리고 기다려 – 왜?
프레젠테이션이 변경 될 수 있기 때문입니다. 우리가 15 년 전에 웹 사이트를 디자인 한 방식은 지금 우리가 보여주는 방식으로는 거의 알아볼 수 없습니다. 하지만 변하지 않은 것이 무엇인지 알고 있습니까? 말. 우리는 여전히 'em'을 사용합니다. 인터넷은 주로 (텍스트 기반) 콘텐츠를 위해 존재합니다. 우리는 여전히 정보 문제를 해결하기 위해 그것을 사용합니다. 작업을 수행합니다. 하지만 콘텐츠가 프레젠테이션 수단에 의존한다면 (플래시 소개 페이지, 누구?) 몇 년 후에는 사용할 수 없게 될 가능성이 있습니다. 그리고 그거 짜증나.
레이아웃 측면에서 콘텐츠에 대한 생각을 멈춰야합니다.
우리는 (산업으로서) 고객이 레이아웃 측면에서 콘텐츠를 생각하도록 교육했습니다. "사이드 바에 넣어"우리는 말합니다. "바닥 글에 넣어야합니다." 중지! 멈춰. 중지. 그것은 위치에 관한 것이 아닙니다. 우선 순위에 관한 것입니다. 사용자에게 가장 중요한 콘텐츠는 무엇입니까? 왜냐하면 무엇을 추측하기 때문입니다. (아마도) 작은 화면 디자인에 사이드 바가 없을 것입니다.
고객이 원하는 거대한 슈퍼 메뉴? iPhone에서 날지 않을 것입니다.
고객이 디자인과 관계없이 콘텐츠를 계획하도록 강제
좋아요, 강요 할 필요는 없습니다. 그들을 격려하십시오. 강력히 격려하십시오. 페이지 테이블은 이에 적합합니다. 아직 읽지 않았다면 즉시 Kristina Halvorson과 Melissa Rach의 웹 콘텐츠 전략으로 이동하여 만드는 방법에 대한 자세한 내용을 확인하세요. 우선 순위에 따라 구성하십시오. 위치 나 레이아웃을 참조하지 마세요. 이를 통해 고객은보다 생산적인 방식으로 콘텐츠에 대해 생각할 수 있으며 최종 와이어 프레임 또는 디자인 이전에 콘텐츠 제작 프로세스를 진행할 수 있습니다.
디자인하기 전에 콘텐츠 마무리
좋아요, 항상 가능한 것은 아닙니다. 그러나 디자인을 시작하기 전에 제거 할 수있는 불확실성이 많을수록 나중에 돌아가서 변경해야하는 작업이 줄어 듭니다.
항상 실제 콘텐츠 사용
가능하면 가장 복잡한 페이지, 이미지 및 메뉴를 고객에게 보여줍니다. 이렇게하면 나중에 완성 된 제품에서 가장 지저분한 내용을 볼 때 놀라움을 피할 수 있습니다.
기능적인 브라우저 내 와이어 프레임이 세상을 변화시킵니다. 클라이언트가 다양한 화면 크기에서 콘텐츠가 이동하고 변경되는 것을 관찰 할 수 있습니다. 와이어 프레임을 제시 할 때 지적하십시오 (직접 프리젠 테이션을하고 있습니까?). 레이아웃이 변경되는 동안 정보의 우선 순위가 화면 크기에 따라 동일하게 유지되는 방법을 보여줍니다.
그렇다면 와이어 프레임은 반응 형 디자인 프로젝트에서 어떻게 작동할까요?
우리는 RWD의 상호 작용 디자인이 브라우저에 빠르고 자주 적용되어야한다고 굳게 믿고 있습니다. 모든 것을 설명하는 정적 문서를 만드는 것은 거의 불가능합니다. 물론 3 개, 4 개 또는 5 개의 중단 점을 보여주는 문서를 만들 수는 있지만 이는 이야기의 일부일뿐입니다. 중단 점 사이의 모든 순간은 어떻습니까? 그것은 브라우저에서 발생합니다.
스케치
그래도 공동으로 아이디어를 빠르게 스케치 할 수있는 것이 좋습니다. 이것은 특정 매체에서 일어날 필요가 없지만 종이에 연필에 관한 것입니다. 여기서 요점은 아이디어를 빠르고 반복적으로 꺼내는 것입니다. 우리는 가능할 때마다 스케치 보드를 좋아하며이를위한 앱인 UI Sketcher도 있습니다.
브라우저 내 프레임 워크
여기 진짜 티켓이 있습니다. 브라우저에서 RWD를 시연 할 때 패턴과 시스템을 재사용하는 것을 좋아합니다. 물론 매번 처음부터 자체 시스템을 만들 수는 있지만 이는 우리 나 고객에게 도움이되지 않습니다.
또한 Twitter의 Bootstrap 또는 Zurb ’s Foundation과 같은 신속한 반응 형 프로토 타이핑 프레임 워크를 사용하는 것을 좋아합니다. 우리는 워크 플로에 적합하기 때문에 재단에 개인적으로 의지합니다. 어느 쪽이든 작은 화면, 저 대역폭 우선 접근 방식을 취한다면 좋을 것입니다.하지만 이것이 우리가하는 방식입니다.
주석
RWD 와이어 프레임에 대한 주석은 필수적이지만 종종 간과되는 경우가 많습니다. 문서, 문서, 문서를 소리내어 말하세요! 우리는 친구들로부터 이에 대한 몇 가지 예를 보았고 배심원이 브라우저 내 반응 형 와이어 프레임에 적절하게 주석을 달 수있는 '가장 좋은'방법을 아직 찾고 있다고 생각합니다. 위에서 언급했듯이, 우리는 정기적으로 Foundation by Zurb를 사용하며 Reveal 애드온을 사용하여 주석을 표시합니다. 이러한 주석은 더 큰 화면에만 표시되며 이상적으로 켜고 끌 수 있습니다.
와이어 프레임에 실제 콘텐츠 사용
와이어 프레임과 디자인 모형에서 Lorem Ipsum에 대한 많은 논쟁이 있었지만, 와이어 프레임에 실제 콘텐츠가 없다면 잘못하고있는 것입니다. 콘텐츠는 상호 작용 결정을 알리고 디자인이 언제 중단되는지 알려줍니다. Lorem Ipsum이 어떻게 할 수 있습니까?
먼저 작은 화면 용으로 디자인하려면 어떻게해야합니까?
수년 동안 우리는 특정 해상도를 염두에두고 설계했습니다. 기본 설정입니다. 노트북에서 스케치하든, OmniGraffle에서 와이어 프레임 작업을하든, Photoshop에서 작업하든, 브라우저에서 디자인하든, 우리는 캔버스 크기가 어떻게 될지 알고있었습니다. 그 시절은 갔다. 우리는 작은 화면을 먼저 디자인하고 점진적으로 향상시키는 것을 믿습니다. 그렇다면 디자이너는 자신의 워크 플로를 고정 된 캔버스 크기에서 유동적 인 크기로 어떻게 변경합니까?
처음에 장치에서 추상적 인 디자인
특정 장치를 위해 설계하지 않는 한, 장치에 대한 생각을 멈추고 경험에 대한 생각을 시작하는 것이 중요합니다. 다음의 모든 기술은 디자이너가 장치에 구애받지 않는 상태를 유지하면서 (최대한까지) 경험을 제작하는 데 도움이됩니다.
스타일 타일 사용
스타일 타일을 사용하여 방향을 설정하고 빠르게 반복합니다. 스타일 타일을 사용하면 디자이너가 너무 구체적이지 않고 디자인 시스템의 방향을 설정할 수 있습니다. 제작자 인 Samantha Warren은 다음과 같이 설명합니다.
“스타일 타일은 무드 보드가 너무 모호하고 comp가 너무 문자적일 때 사용됩니다. 스타일 타일은 레이아웃을 정의하지 않고 실제 인터페이스 요소와 직접 연결됩니다.”
인터페이스 조화 만들기
모든 시각적 요소와 상호 작용 요소가 결합 된 캔버스를 상상해보십시오. 특정 UI 레이아웃을 보는 것이 아니라 모든 요소가 함께 작동하는 방식을 확인합니다. 인터페이스 하모니 캔버스입니다. 인터페이스 하모니 캔버스를 사용하면 디자이너가 아이디어를 함께 유지할 수 있지만 한 화면 크기에 초점을 맞추지 않습니다. 또한 전체 스타일 가이드를 생성하는 대신 디자인 된 요소를 효율적으로 전달하고 문서화 할 수있는 좋은 방법입니다.
더 자세한 내용을 읽고 싶다면 여기와 여기에서 인터페이스 조화에 관한 두 가지 훌륭한 기사를 찾을 수 있습니다.
브라우저에서 모두보기
모든 것이 브라우저에 통합되어야합니다. UI 디자인이 실제로 실현되는 곳입니다. 실제 콘텐츠가 시각적 요소와 어떻게 상호 작용하는지 확인하는 것이 중요합니다. 정적 환경에서는이 작업을 제대로 수행 할 수 없습니다. 네이티브 매체에서 어떻게 반응하는지 확인해야합니다.
정적 프로그램과 균형을 유지하십시오.
브라우저와 Photoshop과 같은 정적 프로그램 사이에는 흐름이 있습니다. 디자인 시스템을 유연하고 자연스럽게 만들 수있는 균형이 있어야합니다. 물론 이것은 Photoshop에서 발생하지만 반응 형으로 디자인하는 디자이너는 브라우저에서도 창의적으로 생각하는 방법을 배워야합니다.
결론
다시 한 번, 느낌으로 : 잘 구성된 콘텐츠와 중요한 상호 작용으로 이유부터 시작하십시오. 먼저 작은 화면과 낮은 대역폭에 초점을 맞추고 반응 형 개념을 점진적으로 향상 시키십시오. 우리의 매체가 성숙 해지고 있습니다. 한 번에 하나의 웹 프로젝트로 일을 올바르게 수행하고 세상을 바꿀 수있는 기회가 있습니다.
디자이너를위한 최고의 20 가지 와이어 프레임 도구 찾기
Steve Fisher는 캐나다의 Yellow Pencil에서 연구, 분석, 디자인 및 전략을 조정하고 RWD, UX 및 오픈 소스와 같은 주제에 대해 이야기합니다. Alaine Mackenzie는 Yellow Pencil의 콘텐츠 전략가입니다.
