방법/인터페이스 디자인시기

Question

필자는 실제 코딩을하기 전에 웹 사이트 인터페이스를 설계 초기부터 습득하려고합니다. 필자는 "Getting Real"을 37 개의 신호로 읽었으며 실제 코드가 생성되기 전에 인터페이스를 먼저 수행하는 것이 좋습니다.

정확히 무엇을 의미합니까? 그것은 순수한 HTML과 CSS를 사용하여 사이트를 디자인하고 이후에 PHP, js 로직을 추가하거나, 처음부터 PHP, js에 뿌려도 괜찮습니까?

프레임 워크를 사용하는 경우 단순히 뷰를 호출하는 빈 컨트롤러를 설정해야합니까? 아니면 초기 단계는 전적으로 html이어야합니까?

또한 디자인에 대해 처음부터 생각하는 사람은 무엇이라고 생각하십니까?

EDIT 필자는 필자가 펜과 종이로 모든 것을 스케치 한 후에 이야기하고있다. 나는 HTML 모형에 관해 전적으로 taslking하고있다. 그리고 이것을하기 위해 배워야 할 여분의 도구를 사용하는 것에 대해 너무 확신하지 못합니다.

Answer 1

인터페이스 디자인의 이점은 대부분 종이 스케치를 마친 후에 얻은 것입니다. 기본적으로, 당신은 당신의 머리 속에 디자인을 가지고 있는지, 당신의 코딩 과정은 다소 최종 사용자 중심이라고 확신 할 수 있습니다. 또한 불필요한 문서 작업에 시간을 낭비하지 않으려 고합니다.

HTML (또는 MVC 앱에서 뷰의 골격)을 얻는 것이 다소 의미가 있으며, 이것이 37signals의 주요 내용입니다. 나는 확실히 버려 질 것 인 이것 저쪽에 아무것도하지 않을 것이다.

올바른 디자인을 갖고 있다면 HTML 또는 CSS와 JavaScript를 수행 할 때 백엔드 코드를 작성하면 중요하지 않습니다. CSS와 코드는 서로를 인식 할 필요가 없습니다.

흥분과 동기를 유발하는 것은 무엇이든하십시오. 앱이 실제로 작동하는 방식에 대해 더 깊이 생각하게 만들면 무엇이든 할 수 있으므로 독창적 인 사고의 결함을 발견 할 수 있습니다. 나는 CSS 전에 코드하기를 좋아하지만 그것은 나 뿐이다. 앱이 머리에 떠오르 기 전에 CSS를 추가로 얻는 것이 중요 할 수 있습니다.

조엘 스폴 스키 (Joel Spolsky)는 조롱 도구로 Balsamiq을 좋아합니다. 나는 37 시그널들이 드래프트 (iPhone app)을 사용한다고 생각한다. 나는 Sharpie를 사용한다. 열쇠는 너무 자세하지 않고있다.

의견이 다양하지만 JavaScript가 오래 지속되어야한다고 생각합니다.나는 대부분의 사이트가 자바 스크립트없이 100 % 작동하도록 디자인되어야하고 자바 스크립트를 폴란드어로 추가해야한다고 생각한다.

는 (나를 위해) 그래서 더 약 Unobtrusive JavaScript

알아보기 :보기의

• 신속하고 더러운 스케치를
• 장소
• 어쩌면 레이아웃에 대한 기본적인 CSS (또는 그 이상에 일부 HTML을 가져 오기 누군가에게 일찍 감명을 줄 필요가 있다면)
• 코어 로직을 작성하십시오.
• 다음을 추가하십시오 : fo R 웹 서비스와 Ajax는 지글 지글

Answer 2

종이를 얻으십시오. 각 페이지는 사이트의 한 페이지를 나타냅니다.

인터페이스를 스케치하십시오. 각 페이지에는 어떤 컨트롤이 있습니까? 어떤 컨트롤이 각 페이지에서 동일합니까? 어떤 양식이 있고 어떤 페이지에 있습니까? 사용자가 항목 x를 클릭하면 어떻게됩니까? 항목 y?

이렇게하면 사이트의 콘텐츠 및 행동 계획을 확고하게 할 수 있습니다.

맹목적으로 코딩을 시작하면 불에 타는 스파게티로 끝납니다.

Answer 3

내가 물어볼 게. 당신은 작업 파트를 만들기 전이나 후에 차를 칠합니까? 어쩌면 당신은 페인트를 골랐지 만 궁극적으로 차가 끝날 때까지 계속할 수 없습니다. 어쩌면 당신은이 비유에 동의하지 않을 것이지만, 코딩이 사이트가 설계되기 전에 이해할 수없는 문제를 야기 할 것이라고 생각합니다. 코드 첫 번째, 두 번째 디자인.

Answer 4

사용자 인터페이스는 웹 사이트의 사용자가 볼 무엇을 추가 할 몇 가지 자바 스크립트를 쓰기 모두 최대 세련되지 CSS

와

예쁜 호출합니다. 코딩하기 전에 코드가 아닌 사이트의 일부 기본 스케치부터 시작하여 페이지 탐색, 콘텐츠의 일반적인 배치 및 사이트와의 상호 작용을 확인하십시오.

그러나 일찍 UI를 보여주고 토론 할 수있게되면 사용자/클라이언트가 최종 제품에 대해 쉽게 알 수 있습니다. 그래서 빨리 HTML로 이동, CSS, 자바 스크립트 및 이미지 같은 것들, 식별 : 페이지 (HTML)에 표시

• 데이터는 데이터의
• 의 표현 (CSS)
• 의 상호 작용과를 데이터 (JavaScript)

이렇게하면 클라이언트와 논의 할 수있는 실제 작업 UI가 점차적으로 개발됩니다. 이로 인해 프로젝트 초기부터 관계가 유지됩니다. 그것은 사이트에 대해 생각하고 내용, 모양 및 상호 작용에 대한 결정을 내리게합니다.

프로젝트 초기에 이러한 피드백을 받으면 나중에 변경해야하는 제품을 만들 위험이 줄어 듭니다. 프로젝트 초기에 변경 작업을하는 것이 더 쉽고 저렴합니다.

UI가 개발되는 동안 이미 다른 시스템과 데이터 구조, 소프트웨어 구성 요소 및 통합을 조사하여 사이트를 구동 할 수 있습니다. 그러나 그것은 사용자/클라이언트가 관심있는 것이 아니며, 제품을보고 사용하기를 원합니다.