「コード」をデザイナーから遠ざけますか？

私は友人とかなりの数のプロジェクトを構築していますが、私たちは常に同じ落とし穴に何度も訪れます。PHP、Javascript、その他すべて（CSSとHTMLも知っている）の書き方を知っているので、実際の機能を構築する際にほとんどの作業を行うことができます。しかし、彼はできませんが、私がやっとできること、つまりサイトを設計することはできます。

しかし、毎回、私たちは問題に出くわします。彼はコードの書き方を知らないので、一般に開発がかなり遅くなります。現時点ではこれが私たちのワークフローです：

1. 機能を考え出す
2. 彼は、フロントエンドのデザインを構築します（配置する場所、外観など）。
3. 彼は私に完全なテンプレートを送信します（PinegrowからのHTMLエクスポート）
4. 彼が行った変更を探し、実際のサイトに実装します（数週間前からCakePHPを使用しています）。
5. 何かが意図したとおりに動作しない場合（たとえば、何らかの理由で計画どおりに動作しなかった場合など）、問題を自分の側で修正し、テンプレートを送り返します
6. すすぎ繰り返し

想像できるように、このプロセスは骨の折れるほど遅く、非効率的です。私の質問は、このプロセスをよりスムーズに進めるにはどうすればよいですか？Reactを使用し、RESTfulを使用する必要があること、およびそうでないことについて多くのことを見てきましたが、CakePHPを使用したいと考えています。いくつかの人々はそれについていくつかの有用なリソースに私を導くことができますか？私はこれをしばらく探していましたが、これに対するまともな解決策には至りませんでした。

基本的に、私のパートナーができることは、サイトの設計だけです。彼はDocker（私は常にDockerを使用しています）、PHP、Javascript、その他ほとんど何も使用できません（彼はCSSを知っていますが、ほとんどWYSIWYGエディターで動作します）興味がない（だから私はそれを尊重している）。私はそれが非常に重要なことだと思うので、ここの誰かが私を助けてくれることを願っています（そしておそらく他の人はこの質問で後で来ます）。

フロントエンドデザイナーをコードから解放したいですか？統合をスピードアップしたいですか？最も洗練されたWebサイトで使用されている専門的な手法を使用したいですか？これに最適なツールは次のとおりです。

ペイント。

はいペイント。とにかくいくつかの描画プログラム。彼にあなたのサイトのスクリーンショットを撮らせ、物事を移動させ、彼が見つけた物を他の場所に追加させてください。これにより、彼はアイデアの速さで作業し、必要なものを提供しながら、コードを自由に最適な形状に曲げることができます。

それでも顧客があなたと一緒に部屋にいるなどの理由でそれでも遅すぎる場合は、より高度なツールセットをお勧めします。

紙、はさみ、テープ。

あなたが野心を感じているなら、多分ペン。

この手法を使用して、誰かが私たちが食べ終わったことに気付く前に、パネラパンのテーブルにあるサイトのテーマ、スタイル、コンテンツ、および主要な機能に関する決定を顧客と一緒に成功させました。

それは彼を速くし、彼の「コード」からあなたを解放します、そしてそれは実際にユーザーインターフェースを開発する最も強力な方法です。彼は、コード行を書く前にユーザビリティテストを開始できます。

「はじめにこれで問題ないが、サイトが開発されたらこれを使用しない」と考えているかもしれません。違います。安定したサイトでも同様に機能します。しかし、今ではほとんどのスクリーンショットはあなた自身のサイトから来ています。

フロントエンドデザイナーがコード生成ツールを使用してモックアップを作成する場合はどうなりますか？結構ですが、彼の「コード」を使用しなければならないとは思わないでください。あなたが尊重する必要があるのは、外観、フロー、およびプレゼンテーションに関する彼の決定です。それを実現するためにカーテンの後ろで起こるのは、彼の専門分野ではありません。あなたのものです。その責任を負います。

彼の仕事を十分に尊重してください。ユーザーが経験するすべてのものを彼に選択させます。新しいアイデアでヒットする準備をしてください。

これは反復的な開発です。尋ねる前に多くのことをしないでください。できる限り少なくします。できるだけ頻繁に尋ねてください。おもちゃを机の上に置いて楽しませてください。最新のアイデアを実装する間、彼はそれが読み込まれたらすぐにレビューできます。顧客と会う時が来るまで、このようにしてください。

フロントエンドデザイナーが生成するコードが実際に手間をかける価値がある場合は、コードを彼と統合することを学ぶ必要があります。このため、ソース管理を学ぶことを強くお勧めします。フロントエンドデザイナーに使用方法を教えることができるほど、よく学んでください。

両方のユーザーがソース管理ツールを確実に使用できるのは一度だけで、コードのマージに基づいて統合計画を立てることをお勧めします。この時点で、友人はFront End DesignerからFront End Developerにタイトルを変更するに値します。

これを行ったとしても、スクリーンショットをだらだらとするテクニックが、2人で共同作業を行う最速の方法にならないとしても、私は驚かないでしょう。

たぶん、あなたはこれらすべての変化の混乱をとることができないかもしれません。それはあまりにも多くの仕事を生み出しています。それは、変更を受け入れるため、ソフトウェアと呼ばれています。それ以外の場合は、電気技術者に専用のチップでそれを行わせます。UIの変更がコアビジネスルールに影響を与えないように、ユーザーインターフェースから動作ロジックを移動するには、itectに到達する必要があるかもしれません。フロントエンドデザイナーを高速化する場合は、それらに対応する準備ができている必要があります。

フロントエンドデザイナーにコードを生成させる唯一の正当な理由は、あなたが疲れていて、それらを遅くしたいからです。まあ、それは本当に「良い」理由ではないと思います。

ツールに関しては、私が見た最適なワークフローはSketchとZeplinを使用することです。スケッチは、まっすぐな設計ツールです。PhotoshopまたはInDesignと同等ですが、アプリやWebサイトの設計用に最適化されています。Zeplinは、Sketch（またはPhotoshop）でデザインを共有および承認するためのツールです。正確なピクセル測定値を提供し、CSSまたはその他のレイアウトコードのコードスニペットを提供し、グラフィックアセットをエクスポートできます。デザインが設定されると、開発者に引き渡されます。この時点で、開発者はそれを選択し、UIを構築します。その後、ビジュアルQAのためにデザイナーに戻ることができます。彼が間違っていると思うものはすべて、バグとして記録するだけで、優先順位を付けて解決できます。

何かが意図したとおりに動作しない場合（たとえば、何らかの理由で計画どおりに動作しなかった場合など）、問題を自分の側で修正し、テンプレートを送り返します

それが問題の根本です。設計の流れは常に元に戻されDesigner to Developer、決して元に戻されるべきではありません。修正と変更はデザイナーによって行われ、Webサイトでの実装のためにプッシュされます。いつでも自分で高速修正を行うことができますが、それらの高速修正は一時的なものであることに同意してください。設計者は設計に戻り、適切なソリューションを見つけ出す必要があります。その後、彼はあなたに変更をプッシュし、それがたまたまあなたのクイックフィックスと同じである場合は素晴らしい、そうでなければあなたは彼のデザインから更新します。

彼は私に完全なテンプレートを送信します（PinegrowからのHTMLエクスポート）

作業できるHTMLの受信に夢中にならないでください。Webサイトテクノロジー（ブートストラップ、CSS、jQuery、React、PHPなどなど）を必要な方法で実装する方が良いでしょう。次に、これらのツールを使用して彼のデザインを再現します。彼が提供するHTMLがクイックスタートである場合は素晴らしいですが、プロジェクトが成長するにつれて、あまり役に立たなくなります。テンプレートエンジン（CakePHPのビュー、テンプレート、プラグイン、コンポーネントなど）しか理解していないので、自分で変更する必要があります。

想像できるように、このプロセスは骨の折れるほど遅く、非効率的です。

それはいつもそうでした。デザイナーはプログラマーではありません。ユーザーにとって何が最も効果的であるかを理解するために時間をかけ、時には間違いを犯します。コンポーネント、フレームワークなどの概念を理解していません。プログラマーとして、あなたはデザイナーと話し、あなたがデザインしたものをどのように実装するかを共有する必要がありますた。

デザイナーは途中で立ち往生しています。一方では、プログラマーのニーズを満足させる必要があり、他方では、ユーザーのニーズを満足させる必要があります。

私の質問は、このプロセスをよりスムーズに進めるにはどうすればよいですか？

デザイナーの横に物理的に座って、そこでのプログラミングがコミュニケーションに本当に役立つことがわかりました。2人がリモートで作業している場合、facetimeを数日間実行し続けます。本当にスピードアップに役立ちます。

Reactを使用し、RESTfulを使用する必要があること、およびそうでないことについて多くのことを見てきましたが、CakePHPを使用したいと考えています。

CakePHPは、地球上で最高のフレームワークの1つです（完全な開示、私はCakePHPコアチームに所属しています）。

Cakeは、Webサイトを迅速に構築するための機能が設計されたウサギ開発フレームワークです。これはセールスピッチのように聞こえますが、これは分類されます。ウサギに分類される他の多くのフレームワークがあります。Javaは、ウサギよりもエンタープライズなフレームワークの例です。その言語を使用している場合は、変更することをお勧めします。CakePHPを使用しているため。私はあなたがそれにとどまるべきだと主張します。

CakePHPは、RESTful APIが必要な場合に優れたバックエンドサーバーになります。

React / Angular / Vueはすべて人気のあるトレンドのフロントエンドフレームワークですが、長い間使用されていません。一方、CakePHPは13年以上前から存在しています。私のポイントは批判ではありません。これらのJavaScriptライブラリの有効期間は短いという事実です。5年以内に私たちは皆、何か新しいことについて話しますが、CakePHPはまだ存在していると思います。

だから私は言います。今すぐReact / Angular / Vueを使用してください。ただし、それらにコミットしないでください。新しくてより良いものがまもなく登場します。私たちは今、彼らなしでは良いウェブサイトを構築できない世界に住んでいると思います。

いくつかの人々はそれについていくつかの有用なリソースに私を導くことができますか？

リストのリクエストはここではオフトピックです。ごめんなさい。

編集：

設計変更の追跡に関する部分を見逃しました。

デザイナーにHTML出力をBitBucketに保存してもらいます（無料のプライベートリポジトリがあります）。その後、BitBucket Webサイトを使用して追跡し、比較を行うことができます。デザイナーが大きな変更を加えるたびに、バージョン番号を持つ新しいブランチを追加します。

彼がこれを行うのは比較的簡単であるはずであり、これにより、あなたは上記の変更についてコメントする場所を持つことができます。例えば; 彼はプルリクエストを作成してリポジトリを更新し、そこでマージされた変更のレビューを実行できます。

次の2つのことを分ける必要があります。

1. UX＆UIデザイン、非コーディングアクティビティ
2. 実装、間違いなくコーディング活動

設計者は、Marvelのような、設計のためだけのクリエイティブツールを使用する必要があります。コード、HTML、CSSなどで何かをすることはデザイナーの関心事ではありません。色、寸法、美学、相互作用、アニメーションはすべて、彼が注目すべきものです。

プログラマーは、アセットとモックアップ（インタラクションとアニメーションを含む）を受け取り、ソフトウェアをプログラミングすることでそれを実現する必要があります。これにはHTMLとCSSも含まれていました。プログラマーは自分の側でジェネレーターツールを使用することもできます。

タスクフローを高速化するには、Trelloのような最小限のツールを使用し、各ワークユニットのすべてをリンク/ドキュメント化することをお勧めします。

このプロセスをよりスムーズにするにはどうすればよいですか？

バージョン管理を主張する

ソフトウェア分岐と並列ユニバース

• バージョン管理にないコードで作業します。フルストップ。そして、プロジェクトがすべてVCSになるまでストライキを続けます。
• 正式に、自由に、ローカルにブランチ
  • 正式：リリースおよびリリースのサブパートの分岐、正式なテスト修正など。正式なバージョン管理計画を展開します。つまり、書き留めます。
  • 自由に：4部の正式なリリース番号を超えて、あなたの腸がそれが良い考えかもしれないと言うなら分岐します。
  • ローカル：チームとして最初に分岐しなかったため、チームが消費することを意図していないブランチで個人リポジトリを保持しました。

ミドルウェアAPIを徹底的に設計する

利点：

• 安定性-基礎となるコードが進化している場合でも。
• テスト可能なコード
• 再利用
• チームコミュニケーションツール
• それは契約です。提供されるサービスの約束（しゃれた意図）
• SOLIDの領域でのコーディング==幸せなメンテナンスプログラマー

それは質問です、強迫観念的な方法で適用される原則を教えてはいけません。UIが単一のビジネスレイヤープロパティを操作している場合、それは間違っています。

ビジネスオブジェクトに関するすべてのものは、前述のBOに含まれている必要があります。UIで最もよくできていると思われる些細なことでさえ、単一のLOCでさえです。Minuitaは、ユーザーが提供する2つの値を追加するのが好きです。検証を含むすべての関連ロジックは、ビジネスレイヤーAPI内になければなりません。IMOの冗長性は時々問題ありません。冗長性を軽減するために、UIがフルアクセスを許可されている、小さく焦点が絞られたビジネスレイヤーオブジェクトが存在する場合があります。

UIがビジネスオブジェクトから必要とするすべてのものは、API化される必要があります。たとえば、引数をイベントハンドラーにワイヤリングする明示的なメソッドがあります。

松葉杖としてフレームワークに注意してください

熟練していない人の手に渡ると、フレームワークとIDEは、彼らが作成するBムービーモンスターに対する障壁ではありません。

Reactのようなフレームワークでは、すべてクライアント側であり、バックエンドのビジネスロジックレイヤーはないと言うかもしれません。ここでの重要な考え方は、ユーザーが見るものをプログラムの動作から切り離すことです。それは実行可能です。それは単なる物理的なサーバーとユーザーのブラウザーのことではありません。

私は、デザインや人ができないということを受け入れることは、職業と実践の未熟さの良い指標だと思います。

これは、他のほとんどの職業では受け入れられません。

Webサイト/アプリの設計を専門とするデザイナーがCSSとHTMLを十分に理解していることを期待するのは合理的です。

WYSIWYGグラフィカルエディターを提供するデザイナーは、ビジュアルデザイナーまたはグラフィックデザイナーです。デザイナーにはさまざまな種類があります。

ただし、さまざまな種類のスキルレベル、能力、および経験もあります。家具を設計する人は、3D設計ツールを備えたコンピューター上でのみそれを行うことができます。その場合、旋盤を回したりCNCルーターを操作する方法に関する知識は完全に理論的なものです。彼らは自分たちのデザインを行い、他の人に作られるように送り出します。

逆に、一部のエキスパートデザイナーは、プロセス全体を制御し、あらゆる細部、おそらくは手作業を考慮して家具を構築する能力と知識を持っている場合があります。

友人に働き方を変えるよう説得することはできません。HTMLとCSSのスキルを備えたWebデザイナーが独自のデザインを構築する場合は、Webデザイナーを見つける必要があります。