개발자에게 디자인을 전달하는 가장 좋은 방법은 무엇입니까?

Question

크고 복잡한 웹 응용 프로그램을 개발하고 있으며 개발자의 관점에서이 유형의 환경에서 설계를 엔지니어링에 넘기는 가장 좋은 방법이 무엇인지 궁금합니다. 나는 배달 방법과 장단점에 대해 궁금합니다. 대화 형 상태에 대한 레이어 구성 요소와

• 계층의 PSD : 나는 과거에 사용했던

  전달 방법 (아래 방법의 모든 세부 와이어 프레임을 포함).

• GUI 키트 - 개발자가 마크 업을 생성하고 끌어 와서 디자인이 와이어 프레임과 일치하도록 만드는 디자인 요소의 PSD입니다.
• CSS 키트 - 개발자가 와이어 프레임과 일치시키기 위해 끌어낼 수있는 CSS 스타일과 레이아웃이 포함 된 HTML 페이지입니다.

이 목록에 사용자의 방법, 이러한 방법에 대한 경험 및 선호하는 방법을 자유롭게 추가하십시오. 어떤 방법이 다른 경우에도 작동하는지 알고 싶습니다 (새로운 기능을 처음부터 만들거나 기존 기능을 업데이트하는 등).

Answer 1

저는 개발 팀용 UI 위젯과 관련된 비슷한 프로젝트를 진행해 왔습니다. 그들 중 일부는 자바 스크립트로 작성된 인터랙티브 기능을 내장하고있었습니다. DIST

• IMG
• JS
• CSS

소스

• IMG
  • :

    우리는 다음과 같은 하위 폴더를 포함하는 별도의 폴더에 각각의 위젯을 제공

  • JS
  • CSS
• 테스트

보통 JS 및 CSS 소스의 비 축소 된 버전을 포함하는 소스 폴더에 있습니다. 또한 SASS 또는 LESS를 CSS에 사용하는 경우 (그리고 거대한 프로젝트에이 스크립트를 사용해야하는 경우)/Source/CSS 폴더는 컴파일되지 않은 CSS 소스를 저장하는 장소입니다. 또한 여기의 IMG 폴더에 우리는 일반적으로 우리가 구성 요소를

을 디자인하는 데 사용 한 PSD 파일을 포함 한 DIST (ribution) 폴더 우리 제공된 컴파일 및 축소 된 CSS를 사용 이미지 (필요한) 스프라이트로 결합하고, 또한 축소 된 js 코드. 이러한 모든 축소판을 혼자서 준비 할 수는 있지만, Grunt를 사용하여 전체 프로세스를 자동화하면 더 빠릅니다. js와 css를 축소하고 적절한 폴더 구조를 생성하는 작업을 간단히 정의하십시오. 하나의 버튼을 한 번만 누르면 (실제로 명령이 실행됩니다).

테스트 폴더에는 일반적으로 구성 요소를 렌더링하고 해당 상태 또는 대화 형 기능을 테스트하는 방법에 대한 지침을 제공하는 html 페이지가 포함되어 있습니다.이 html 페이지는 항상 Dist 폴더의 css 및 js 파일을 사용해야합니다. 또한 기존 페이지에 구성 요소를 포함시키는 데 필요한 단계를 설명하는 짧은 read.me 파일을 포함하는 것이 좋습니다. 마지막으로 중요한 점은 반응 형 레이아웃에 대해 말하면 모바일 브라우저에서 다양한 해상도 (ipad/iphone/android phone)로 렌더링 된 위젯/구성 요소로 스크린 샷을 제공하는 것이 좋습니다.