ツールとチュートリアル
開発者と設計者の間のギャップは薄れつつあります
過去10年間以来、設計者と開発者の間で冷戦がありました。設計者は、作成するために開発者にどれほど依存しなければならないかについて不満を持っています モックアップ 静止画像を超えています。一方、開発者は、コンセプトをユーザーフレンドリーなインターフェイスに変えるためのデザイナースキルの必要性に憤慨しています。
しかし、設計ツールがますます使いやすくなるにつれて、冷戦は終わりに近づいています。
Androidでm3u8ファイルを再生する方法
コーディングの経験がなくても、アプリを使用して非常に印象的なインタラクティブなプロトタイプを作成できるようになりました。つまり、設計者は1行のコードを記述しなくても新しいアプリケーションをテストでき、開発者は簡単なツールを使用して、専門家の助けを必要とせずに設計を専門的に行うことができます。
設計者は、コードの使い方を学べば、明らかにさらに多くの利益を得ることができます。開発者はおそらく設計を研究する必要がありますが、2つのスキルのギャップはますます簡単に埋められています。
遠くない、遠く離れたウェブ上で..。
の主な役割 デジタルデザイナー 5〜7年前は、Photoshopでページや画面の静止画像をデザインし、魔法の開発者に送信して、機能的なWebサイトやアプリに変換していました。モックアップは常に限られた結果でした。それは静的であり、データは偽物であり、相互作用はありませんでした。静止画像でユーザーテストを行ったことがありますか？それほど遠くはありません。
デザイナーと開発者の間でデザイナーの意図を理解しようとするコミュニケーションは、全世界を巻き込むのに十分な長さの電子メールチェーンを作成します。開発の数週間は、リリース後、開発者が「上にスワイプ」と理解したものが、設計者が考えていたものとは非常に異なることを発見するためにのみ経過しました。地獄だった。
このような世界では、デザイナーがコードの使い方を学ばなければならない記事をすべての開発者が書いたのは間違いありません。名前のない数十のレイヤーを持つ注釈のないPSDを受け取った開発者は、ウィンドウから飛び出したいと思っても罪はありません。
同時に、独自のアプリの設計に関心のある開発者は、PhotoshopやIllustratorなどの複雑なツールに不満を感じていました。彼らは彼らのアイデアを実現するために彼らのコンピュータサイエンスの見習いに加えて完全なグラフィックデザイン教育を必要としています。エッジを切り取ってその場で設計しようとする開発者は、市場に参入するとすぐにつまずく設計とテストのレベルが低いアプリになってしまいます。
デジタルデザインはもう悪臭を放ちません
現在、設計者と開発者の間の状況は大幅に改善されています。 Craft by InVision、InVisionアプリ、Framer、Flow、Flinto / Principle、Sketchなどのスマートなデザインツールとプラットフォームの発明により、デザイナー Y 開発者は、バックエンドなしでアプリを使用していることをユーザーが知らなくても、アプリのプロトタイプを簡単に作成してテストできます。
アプリは、ユーザーの観点からは完全に機能しているように見えます。すべての相互作用と流れがそこにあります。設計者はコード行に触れることなく貴重な情報を取得し、開発者は数回クリックするだけで独自の設計を作成できます。
これらの6つの設計ツールを詳しく見てみましょう。
レスポンシブデザインのメディアクエリ
このアプリスイートを使用すると、デザイナーは標準の「Loremipsum」やマイケルジャクソンのアイコンフィラーではなく、実際のデータを取り込むことができます。さまざまなアプリが連携して、設計プロセスをよりスムーズかつ自動化します。アプリは、コラボレーション、プロトタイプのモックアップ、同期、そして最も重要なことに、独自のデータをサポートします。
InVisionは、デザイナーが静的ではないモックアップを作成できるようにすることで、ゲームを大きく変えました。 InVisionのシンプルなツールを使用すると、画像を実際のアプリのように感じるクリック可能なインタラクティブなプロトタイプに変換できます。 InVisionはコラボレーションをサポートし、仲間のデザイナーやユーザーがあらゆる段階で変更についてコメントしやすくします。
Marvel（Invisionの競合製品）を使用して作成されたプロトタイプを見てください。
フレーマ InVisionとほとんど同じですが、より複雑な相互作用を実現する機能があります。一部の大企業は、Framerを使用して、直感的で便利でありながらシンプルなアプリを設計できるようにしています。 Uberは良い例です、彼らはフレーマーを使って彼らのデザインをしました app de Apple Watch Y UberPOOL 。
両方のアプリを使用して作成できます 複雑なアニメーションを数分で。 どちらも少し練習が必要ですが、デザイナーがこれらのアプリに堪能になると、非常にプロフェッショナルで、不必要に散らかることのないルックアンドフィールのアニメーションを簡単に作成できます。 あなたはここで見ることができます Principleでユーザーができることの驚くべき例がたくさんあります。
従業員計算機の総コスト
SketchはPhotoshopに似ていますが、Webおよびモバイル開発者向けの機能の量は約4倍です。この強力なツールは、デザイナーが完全にユニークで手作りのアイコン、インターフェース、およびWebサイトを作成できるようにすることで、静的なデザインが何もしないという問題を解決します。
これはマイクタイソンのフックのように感じます。 Webflowは基本的に、設計者がフロントエンドコードを作成する必要をなくします。現在、設計者はこの美しいWYSIWYGエディターを使用して、すべての面倒な作業に対処しています。
コードのないアプリ
Heco ：このエージェンシーは、信じられないほど複雑なアニメーションを作成し、Webflowのみを使用して、フロントエンド開発者なしでかなり洗練されたフロントエンドを実現しました。
どのようにあなたのやることリスト（または やることリスト ）このライブモックアップで動作します。アプリをタップすると、Todoistが当て推量なしでどのように機能するかの全機能を確認できます。
CSSアニメーションの作成には、変換、3D遅延、および無限のCSSとJSハックを操作して複雑なものを作成する方法を知っているCSSウィザードが必要でした。 Webflowを使用すると、何かを作成できます このアニメーションのように 半分の時間で、1行のコードを記述せずに。
未来はデザインであり、見るべきことがたくさんあります
このような設計ツールを使用すると、設計者は静止画像に集中する必要がなく、プロフェッショナルで美しく機能的なプロトタイプを作成するために開発者に頼る必要もありません。
Web開発におけるブートストラップとは何ですか
同時に、開発者は優れたアイデアを思いつくためにデザイナーに頼る必要がなくなりました。開発者は、上記のツールから始めて、履歴書にデザインスキルを追加することができます。これらのプログラムはどれも習得が特に複雑ではなく、開発者がデザイナーに依存するのをやめ、美しいプロトタイプを自分で作成し始めた場合、専門家を雇いやすくし、アイデアをコンセプトから市場に運ぶことの満足度（節約は言うまでもなく）を体験できます。 。
これは設計者にとって悪いニュースのように聞こえるかもしれませんが、そうではありません。シンプルなAPI統合、自動化されたワークフロー、および実際のデータを取り込む機能が追加されているため、設計者は、開発者と頻繁にやり取りすることなく、洗練されたテスト可能なプロトタイプを作成できます。その結果、設計者は自分が最も得意とすることに集中できます。 設計 。
デザイナーの作品が解釈され、必然的に彼のビジョンを共有しない誰かによって汚染される必要はもうありません。したがって、これらの同じツールを使用すると開発者は設計できますが、経験豊富な設計者を脅かすことはありません。設計者は、開発者が自分の分野に参入することを心配するのではなく、上記のすべてのツールを優先して、作成を進めていく必要があります。
