DevTools를 사용하여 UX 디자인으로 개발 프로세스를 개선합니다.

이 기사는 코드와 디자인의 교차점을 탐구하며, 디자이너가 기본 코딩 지식을 활용하여 워크 플로우를 향상시키고 개발자와의 커뮤니케이션을 향상시키는 방법에 중점을 둡니다. 코딩 경험을 가진 UX 디자이너 인 저자는 코드에 대한 기초적인 이해조차도 설계 프로세스에 큰 도움이된다고 주장합니다.

저자는 디자이너가 개발자가되도록 옹호하지는 않지만 "코드와 함께 플레이"의 가치를 강조합니다. CSS 및 HTML을 실험하여 디자인을 개선하고 브라우저 호환성을 보장합니다. 이 접근법은 설계와 개발 사이의 자주 유의 한 격차를 해소합니다.

저자의 일반적인 디자인 프로세스에는 스케치, 와이어 프레임 (Axure, Adobe XD, Invision Studio, Figma 및 Sketch와 같은 도구 사용) 및 시각 자산 생성이 포함됩니다. 그러나 코드와 직접적인 상호 작용이 디자인의 충실도를 향상시키고 핸드 오프 중 오해를 줄인다는 것을 발견했습니다.

DevTools : 디자이너의 놀이터

저자는 브라우저 DevTools를 귀중한 리소스로 강조합니다. DevTools를 통해 설계자는 실시간으로 웹 사이트 코드를 조작하고 색상 정확도, 글꼴의 가독성, 장치 간의 응답 성 및 개발 환경이 필요하지 않고 상호 작용 요소를 조작 할 수 있습니다. 변화는 일시적이므로 위험이없는 실험 공간이됩니다. 저자는 Firefox의 Shape Path Editor를 포함하여 DevTools의 최근 개선 사항을 지적합니다. 개인 일화는 DevTools가 저자가 복잡한 웹 응용 프로그램에 대한 설계 변경의 영향을 신속하게 시각화 할 수있게하는 방법을 보여줍니다.

크롬 확장 : DevTools 기능 향상

저자는 설계 코드 상호 작용을 더욱 향상시키기 위해 두 가지 크롬 확장을 권장합니다.

• 사용자 CSS : 이 확장은 DevTools CSS 변경을 저장하여 디자이너가 편집을 다시 방문하고 공유 할 수 있도록합니다. 저자는 설계 검토에서의 사용과 제안 된 변화의 시연을 만듭니다. 내장 코드 편집기 및 ON/OFF 스위치는 특히 유용한 기능으로 강조 표시됩니다.

• 웹 오버라이드 : 이 포괄적 인 확장을 통해 HTML, CSS 및 JavaScript를 재정의 할 수 있으므로 프로토 타입을 만들고 다양한 설계 시나리오를 테스트 할 수있는 유연성이 향상됩니다. 저자는 동적 레이아웃 테스트를 위해 HTML 요소를 추가하고 CSS 편집 및 JavaScript를 주입하는 데 사용하는 것을 보여줍니다.

이러한 확장은 전통적인 디자인 도구의 기능을 능가하는 수많은 디자인 옵션의 빠른 프로토 타이핑 및 탐색을 가능하게합니다. 저자는 브라우저 내에서 직접 테스트 설계의 가치를 강조하여 개발 중 정확도를 보장하고 번역 문제를 피합니다.

주요 테이크 아웃과 결론

저자는 DevTools 및 Browser Extensions를 워크 플로우에 통합하여 디자인을 크게 향상시키고 개발자와 더 나은 협업을 시작했다고 결론지었습니다. 실제 코드를 사용하여 빠른 프로토 타입을 만들 수있는 기능은 통신을 향상시키고 개발 프로세스를 더 깊이 이해할 수 있습니다. 저자는 디자이너들이 이러한 도구를 탐색하고 자신의 경험을 공유하도록 권장합니다.

위 내용은 DevTools를 사용하여 UX 디자인으로 개발 프로세스를 개선합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!