“코드”를 디자이너로부터 멀리 유지 하시겠습니까?

나는 내 친구와 꽤 많은 프로젝트를 구축하지만, 우리는 항상 같은 함정에 계속해서옵니다. PHP, Javascript 및 그 밖의 모든 것들 (CSS 및 HTML도 알고 있음)을 작성하는 방법을 알고 있으므로 실제 기능을 구축 할 때 대부분의 작업을 수행 할 수 있습니다. 그러나 그는 할 수 없지만 사이트를 디자인하는 것만으로는 거의 할 수없는 일을 할 수 있습니다.

그러나 코드를 작성하는 방법을 모르기 때문에 매번 문제가 발생합니다. 일반적으로 개발 속도가 약간 느려집니다. 현재이 작업 과정은 다음과 같습니다.

1. 기능을 생각해냅니다
2. 그는 프론트 엔드 디자인 (디자인, 디자인, 모양 등)을 제작합니다.
3. 그는 완전한 템플릿을 나에게 보낸다 (Pinegrow에서 HTML 내보내기)
4. 그가 변경 한 사항을 찾은 다음 실제 사이트에서 구현합니다 (몇 주 이후 CakePHP 사용).
5. 의도 한대로 작동하지 않는 경우 (예 : 어떤 이유로 계획 한대로 작동하지 않은 경우) 문제를 해결 한 다음 템플릿을 다시 보냅니다.
6. 헹굼 및 반복

상상할 수 있듯이이 과정은 느리고 비효율적입니다. 제 질문은 어떻게이 프로세스를 더 순조롭게 할 수 있습니까? React를 사용하고 RESTful을 사용하지 않아야한다는 점에 대해 많은 것을 보았지만 CakePHP를 사용하고 싶습니다. 어떤 사람들이 저에게 도움이되는 자료를 안내해 줄 수 있습니까? 나는 이것을 잠시 동안 찾고 있었지만 이것에 대한 적절한 해결책을 찾지 못했습니다.

기본적으로 파트너가 할 수있는 일은 사이트를 디자인하는 것입니다. 그는 Docker (항상 Docker를 사용함), PHP, Javascript 및 기타 다른 것을 사용할 수 없습니다 (그는 CSS를 알고 있지만 대부분 WYSIWYG편집기 와 함께 작동합니다 ). 그에게 기꺼이 배우려고하지만 관심이 없습니다 (그래서 나는 존중합니다). 나는 이것이 중요한 일이라고 생각하면서 여기 누군가가 나를 도울 수 있기를 바랍니다.

코드에서 프론트 엔드 디자이너를 해방하고 싶습니까? 통합 속도를 높이고 싶습니까? 가장 매끄러운 웹 사이트에서 사용하는 전문 기술을 사용하고 싶습니까? 지금까지 가장 좋은 도구는 다음과 같습니다.

페인트.

예 페인트. 어쨌든 일부 그리기 프로그램. 사이트의 스크린 샷을 찍고 주변을 이동하며 다른 곳에서 찾은 것을 추가 할 수 있습니다. 이를 통해 그는 아이디어의 속도로 작업하고 필요한 것을 제공하면서 가장 적합한 모양으로 코드를 구부릴 수 있습니다.

고객이 둘 다 함께있는 방에 있기 때문에 여전히 너무 느리다면 훨씬 고급 도구 세트를 사용하는 것이 좋습니다.

종이, 가위 및 테이프.

야심이 있다면 펜일 수도 있습니다.

나는이 기술을 사용하여 누군가가 우리가 식사를 마쳤다는 것을 깨닫기 전에 Panera Bread의 테이블에있는 사이트의 주제, 스타일, 콘텐츠 및 주요 기능에 대한 결정을 성공적으로 내 렸습니다.

그렇게하면 그를 빨리 만들고 "코드"에서 벗어날 수 있으며 실제로 사용자 인터페이스를 개발하는 가장 강력한 방법입니다. 코드를 작성하기 전에 사용성 테스트를 시작할 수 있습니다.

"오 시작할 때 괜찮지 만 사이트가 개발 된 후에는 사용하지 마십시오"라고 생각할 수 있습니다. 사실이 아니다. 안정적인 사이트에서도 잘 작동합니다. 그러나 이제 대부분의 스크린 샷은 자신의 사이트에서 나옵니다.

프론트 엔드 디자이너가 코드 생성 도구를 사용하여 자신의 모형을 만들고 싶다면 어떻게해야합니까? 그러나 "코드"를 사용해야한다고 잠시 생각하지 마십시오. 당신이 존중해야 할 것은 외모, 흐름 및 표현에 대한 그의 결정입니다. 그런 일을하기 위해 커튼 뒤에서 일어나는 일은 그의 전문 분야가 아닙니다. 니 꺼야. 책임을 져야합니다.

당신이 끝났을 때 당신이 그에게 어떻게 나타 났는지 보여줄 정도로 그의 작품을 존중하십시오. 사용자가 경험할 수있는 모든 것을 nitpick하게하십시오 새로운 아이디어를 낼 준비를하십시오.

이것은 반복적 인 개발입니다. 묻기 전에 많이하지 마십시오. 당신이 할 수있는 한 적게하십시오. 가능한 한 자주 물어보십시오. 최신 아이디어를 구현하는 동안 책상에 장난감을 놓고 즐겁게 지내도록하십시오. 고객을 만날 때까지 계속 이렇게하십시오.

프론트 엔드 디자이너가 생성 한 코드가 실제로 문제가 될만한 가치가 있다면 코드와 코드를 통합하는 법을 배워야합니다. 이를 위해 소스 컨트롤 을 배우는 것이 좋습니다 . 프론트 엔드 디자이너에게 사용법을 가르쳐 줄 수 있도록 잘 배우십시오.

두 사람 모두 소스 제어 도구를 안정적으로 사용할 수있는 경우에만 통합 계획을 코드 병합에 기반하는 것이 좋습니다. 이 시점에서 친구는 프런트 엔드 디자이너에서 프런트 엔드 개발자로 제목을 변경할 자격이 있습니다.

이제이 작업을 수행하더라도 화면 위의 화면 캡처 기술이 여전히 두 사람이 공동 작업을 수행 할 수있는 가장 빠른 방법으로 밝혀지지 않은 것은 놀라운 일이 아닙니다.

어쩌면 당신은 이러한 모든 변화의 혼란을 감당할 수 없을 것입니다. 너무 많은 일을 만들고 있습니다. 변화를 받아들이 기 때문에 소프트웨어라고 불립니다. 그렇지 않으면 우리는 전기 엔지니어가 특수 칩에서 작업하게 할 것입니다. UI 변경 사항이 핵심 비즈니스 규칙에 영향을 미치지 않도록 동작 로직을 사용자 인터페이스 밖으로 옮기려면 도달 해야 할 수도 있습니다 . 프론트 엔드 디자이너의 속도를 높이려면이를 따라 잡을 준비가되어 있어야합니다.

프론트 엔드 디자이너가 코드를 작성하도록 강요하는 유일한 이유는 피곤하고 느리게하기 때문입니다. 글쎄, 나는 이것이 "좋은"이유가 아니라고 생각합니다.

도구 측면에서 내가 본 최적의 워크 플로우는 Sketch and Zeplin을 사용하는 것입니다. 스케치는 일직선 설계 도구입니다. Photoshop 또는 InDesign과 동일하지만 앱 및 웹 사이트 디자인에 최적화되어 있습니다. Zeplin은 Sketch (또는 Photoshop)에서 디자인을 공유하고 승인하는 도구입니다. CSS 또는 기타 레이아웃 코드에 대한 정확한 픽셀 측정 및 코드 스 니펫을 제공하고 그래픽 자산을 내보낼 수 있습니다. 디자인이 설정되면 개발자에게 전달됩니다. 이 시점에서 개발자는이를 선택하여 UI를 빌드합니다. 그런 다음 시각적 QA를 위해 디자이너로 돌아갈 수 있습니다. 그가 잘못 발견 한 것은 우선 순위를 정하고 해결하기 위해 버그로 기록해야합니다.

의도 한대로 작동하지 않는 경우 (예 : 어떤 이유로 계획 한대로 작동하지 않은 경우) 문제를 해결 한 다음 템플릿을 다시 보냅니다.

그것이 당신의 문제의 근원입니다. 디자인의 흐름은 항상 Designer to Developer역순으로 되어서는 안됩니다 . 디자이너가 수정하고 변경 한 다음 웹 사이트에서 구현하도록 사용자에게 푸시해야합니다. 항상 빠른 수정을 직접 수행 할 수 있지만 이러한 빠른 수정은 일시적인 것임을 인정하십시오. 디자이너는 자신의 디자인으로 돌아가서 적절한 솔루션을 찾아야합니다. 그런 다음 변경 사항을 사용자에게 푸시하고 빠른 수정 사항과 동일하면 훌륭합니다. 그렇지 않으면 그의 디자인에서 업데이트합니다.

그는 완전한 템플릿을 나에게 보낸다 (Pinegrow에서 HTML 내보내기)

작업 할 수있는 HTML을받는 데 중독되지 마십시오. 웹 사이트 기술 (부트 스트랩, CSS, jQuery, React, PHP 등)을 원하는 방식으로 구현하는 것이 좋습니다. 그런 다음 해당 도구를 사용하여 그의 디자인을 재현합니다. 그가 제공하는 HTML이 빠른 시작 이라면 훌륭하지만 나중에 프로젝트가 성장함에 따라 그다지 쓸모가 없습니다. 템플릿 엔진 (예 : CakePHP보기, 템플릿, 플러그인, 구성 요소 등) 만 이해하기 때문에 직접 변경해야합니다.

상상할 수 있듯이이 과정은 느리고 비효율적입니다.

항상 그랬습니다. 디자이너는 프로그래머가 아닙니다. 그들은 시간을내어 사용자에게 가장 적합한 것을 알아 내고 때로는 실수를합니다. 구성 요소, 프레임 워크 등과 같은 개념을 이해하지 못합니다. 프로그래머는 설계자와 대화하고 내가 디자인 한 것을 어떻게 구현하는지 공유해야 합니다 .

디자이너가 중간에 붙어 있습니다. 한쪽은 프로그래머의 요구를 만족시켜야하고 다른 쪽은 사용자의 요구를 만족시켜야합니다.

제 질문은 어떻게이 프로세스를 더 순조롭게 할 수 있습니까?

나는 디자이너와 프로그래밍 옆에 실제로 앉아 있으면 의사 소통에 실제로 도움이된다는 것을 알았습니다. 두 사람이 원격으로 작업하는 경우 며칠 동안 페이스 타임을 계속 실행하십시오. 실제로 속도를 높이는 데 도움이됩니다.

React를 사용하고 RESTful을 사용하지 않아야한다는 점에 대해 많은 것을 보았지만 CakePHP를 사용하고 싶습니다.

CakePHP는 지구상에서 가장 좋은 프레임 워크 중 하나입니다 (전체 공개, 저는 CakePHP 핵심 팀에 있습니다).

Cake는 토끼 개발 프레임 워크로 기능이 웹 사이트를 빠르게 구축하도록 설계되었습니다. 나는 그것이 판매 피치처럼 들리지만, 이것이 분류되는 것입니다. 토끼로 분류 된 다른 많은 프레임 워크가 있습니다. Java는 토끼보다 더 엔터프라이즈 인 프레임 워크의 예입니다. 당신이 그 언어를 사용하고 있다면, 나는 변경을 권고했을 것입니다. CakePHP를 사용하고 있기 때문에. 나는 당신이 그것을 유지해야한다고 주장합니다.

RESTful API가 필요한 경우 CakePHP는 훌륭한 백엔드 서버를 만듭니다.

React / Angular / Vue는 모두 인기 있고 트렌디 한 프론트 엔드 프레임 워크이지만 오랫동안 사용되지는 않았습니다. 반면 CakePHP는 13 년 이상 사용되어 왔습니다. 내 요지는 비판이 아니다. 이러한 JavaScript 라이브러리는 수명이 짧다는 사실입니다. 5 년 안에 우리 모두는 새로운 것에 대해 이야기 할 것이지만, CakePHP가 여전히있을 것이라고 생각합니다.

그래서 나는 말한다. 뜨겁지 않은 동안 지금 React / Angular / Vue를 사용하십시오. 새롭고 더 나은 것이 곧 나올 것입니다. 우리는 당신이 그들 없이는 좋은 웹 사이트를 만들 수없는 세상에 살고 있다고 생각합니다.

어떤 사람들이 저에게 도움이되는 자료를 안내해 줄 수 있습니까?

목록 요청은 여기서 다루지 않습니다. 죄송합니다.

편집 :

디자인 변경 사항 추적에 대한 부분을 놓쳤습니다.

디자이너에게 HTML 출력을 BitBucket에 저장하게하십시오 (무료 개인 저장소가 있음). 그런 다음 BitBucket 웹 사이트를 사용하여 비교하고 추적 할 수 있습니다. 디자이너가 크게 변경할 때마다 버전 번호가있는 새 분기를 추가합니다.

이 작업을 수행하는 것이 비교적 쉬워야하며, 이렇게하면 해당 변경 사항에 대해 의견을 제시 할 수 있습니다. 예를 들어; 변경 사항이 병합되기 전에 검토를 수행하는 저장소를 업데이트하도록 풀 요청을 작성할 수 있습니다.

이 두 가지를 분리해야합니다.

1. 비 코딩 활동 인 UX 및 UI 디자인
2. 구현, 확실히 코딩 활동

디자이너는 디자인을위한 Marvel 과 같은 창의적인 도구를 사용해야합니다 . 코드, HTML, CSS 등으로 무언가를하는 것은 디자이너의 관심사가되어서는 안됩니다. 색상, 치수, 미학, 상호 작용, 애니메이션은 그가 집중해야 할 모든 것입니다.

프로그래머는 애셋과 목업 (인터랙션과 애니메이션 포함)을 받고 소프트웨어를 프로그래밍하여 실현해야합니다. 여기에는 HTML과 CSS도 포함되었습니다. 프로그래머는 자신의 측면에서도 생성기 도구를 사용할 수 있습니다.

작업 흐름 속도를 높이려면 Trello 와 같은 최소 도구를 사용하고 각 작업 단위에 대한 모든 것을 링크 / 문서화 하는 것이 좋습니다 .

이 과정을 어떻게 순조롭게 진행할 수 있습니까?

버전 관리를 주장하십시오

소프트웨어 분기 및 병렬 유니버스

• 버전 관리에없는 코드를 사용하지 마십시오. 마침표. 그리고 프로젝트가 모두 VCS에 올 때까지 파업을 시작합니다.
• 공식적으로, 자유롭게, 현지에서 분기
  • 공식적으로 : 릴리스 및 릴리스의 하위 부분에 대한 분기, 공식 테스트 픽스 등. 공식적인 버전 관리 계획을 발전시킵니다 (예 : 적어 둡니다).
  • 자유로이 : 4 가지 형식의 공식 릴리스 번호 매기기 외에, 직감이 좋은 아이디어 일 경우 분기.
  • 지역적으로 : 나는 팀으로서 처음에는 지점을 가지지 않았고, 경우에 따라 실험, 탐색 등을 자주하기 때문에 지점이 팀 소비를 위해 의도되지 않은 개인 저장소를 유지했습니다.

미들웨어 API로 지옥을 설계

혜택:

• 안정성-기본 코드가 진화하는 경우에도 마찬가지입니다.
• 테스트 가능한 코드
• 재사용
• 팀 커뮤니케이션 도구
• 계약입니다. 렌더링 된 서비스에 대한 약속
• SOLID 영역에서 코딩 == 행복한 유지 보수 프로그래머

그것은 강박 적으로 강박 적으로 적용되는 원리를 말하지 말라 . UI가 단일 비즈니스 계층 속성을 조작하는 경우에는 잘못된 것입니다.

비즈니스 객체에 관한 모든 것들은 BO에 있어야합니다. UI에서 가장 잘 보일 수있는 사소한 일, 심지어 단일 LOC조차도. 2 개의 사용자 제공 값을 추가하는 것과 같이 Minuita는 유효성 검사를 포함한 모든 관련 논리가 비즈니스 계층 API에 있어야합니다. IMO 이중화는 때때로 정상입니다. 중복성을 완화하기 위해 UI에 대한 전체 액세스가 허용되는 작고 집중된 비즈니스 계층 개체가있을 수 있습니다.

비즈니스 오브젝트에서 UI에 필요한 모든 것과 API를 API로 작성해야합니다. 예를 들어, 인수를 이벤트 핸들러에 연결하는 명시적인 메소드가 있습니다.

목발로 틀을 조심하십시오

미숙련의 손에있어서, 프레임 워크와 IDE는 그들이 만드는 B- 영화 몬스터에 대한 장벽이 아니다.

React와 같은 프레임 워크를 사용하면 모든 클라이언트 측이라고 말하고 백엔드 비즈니스 논리 계층이 없습니다. 여기서 핵심 아이디어는 프로그램이하는 일에서 사용자가 보는 것을 분리하는 것입니다. 할 수 있습니다. 실제 서버 대 사용자의 브라우저가 아닙니다.

직업과 실습으로 인한 미숙함을 나타내는 좋은 지표라고 생각합니다.

이것은 거의 다른 직업에서는 용납되지 않을 것입니다.

웹 사이트 / 앱 디자인을 전문으로하는 디자이너가 CSS 및 HTML을 잘 알고 해당 유형의 작업 가능하고 사용 가능한 파일을 제공 할 수있을 것으로 기대하는 것이 합리적입니다.

WYSIWYG 그래픽 편집기를 제공하는 디자이너는 비주얼 또는 그래픽 디자이너입니다. 많은 종류의 디자이너가 있습니다.

그러나 다양한 기술 수준, 능력 및 경험도 있습니다. 가구를 디자인하는 사람은 3D 디자인 도구가있는 컴퓨터에서만 가구를 만들 수 있습니다.이 경우 선반을 돌리거나 CNC 라우터를 작동하는 방법에 대한 지식은 전적으로 이론적 일 수 있습니다. 그들은 디자인을 한 다음 다른 사람들이 만들도록 보냅니다.

반대로 일부 전문 디자이너는 전체 프로세스를 제어하고 모든 세부 사항, 심지어 수공예까지 눈으로 가구를 만들 수있는 능력과 지식을 가질 수 있습니다.

친구가 일하는 방식을 바꾸도록 설득 할 수는 없습니다. HTML과 CSS 기술을 사용하여 자체 디자인을 구축하는 웹 디자이너를 원한다면 디자인을 찾아야합니다.