web-dev-qa-db-ja.com

マテリアルデザインUXをスケッチする方法を学ぶ

私は「フルスタック」の開発者と定義されています。私は自分自身を「改革」し、「飛躍を遂げる」方法を学びたいです。実際にUI(デザイン、色など)とモックアップを学びます。現在、Googleを使用して開発していますPolymer(material design)。「モックアップ」するために、現時点では実際にHTML/CSSを作成していますが、理想的ではなく、時間がかかります。

質問:

  • マテリアルデザインUIのモックアップに使用できるツールは何ですか? Gimp/Inkscapeは進むべき道ですか?

  • UIのデザイン方法を実際に学ぶという観点から、私はビジュアルアートスキル(私はそれらを習得する必要があります)とカラーコーディネートスキルが乏しいことを考えると、どのリソースをお勧めしますか?

3
Merc

あなたと同じように、私には開発のバックグラウンドがあり、デザインの経験はあまりありません。それにもかかわらず、私は自分でモバイルアプリを作成することにしました。

ワイヤーフレーム/モックアップのさまざまな代替案を数日試してみた後、 鉛筆ロリポップステンシル を併用することにしました。必要なウィジェットのほとんどが含まれており、非常に使いやすいです。それについての最もよい事はそれがオープンソースであり、無料であることです。あなたがお金を使いたいと思っているなら、より良いはずの有料の代替案がたくさんありますが、私の場合、それらはお金の価値がなかったので、アドバイスすることはできません。

お気づきのように、モックにHTML/CSSを使用するのは非常に遅いため、お勧めできません。 Gimp/Photoshop/Paintの使用は少し優れていますが、これらのツールはモックアップを作成するのではなく、一般的な画像操作用に設計されているため、依然として苦痛です。 Pencilを試してみて、それでもまだ必要だと感じている場合は、有料の代替案を試してください(すべて無料試用版を提供しています)。

リソースに関しては、私が常に使用するものは Googleのマテリアルデザインガイド です。簡単に消化できるので、何かをデザインする方法を決定する必要があるときはいつでもそれに戻ります。これまでのところ、結果には非常に満足しています。

1

マテリアルデザインは、UIデザインに着手するのに最適な場所です。私は同様のバックグラウンドを持っており、フロントエンドの開発者の役割に移り、高品質の製品を作成することへの情熱が高まった後、UI/UXデザインに移りました。

ワイヤーフレーミングでは、数分で物を一緒に投げるのが非常に簡単なので、忠実度を低くするためにモックを使用します。次に、アプリケーションフローの真の例を構築できるので、Axureを使用してさらに詳しく説明します。これは、技術者以外のユーザーにとっては失われることがあります。

私は現在Macを使用していませんが、使用する機会があればスケッチは本当に良い製品です。

デザイナーとしてさらに発展させて、白いラベリングに役立つマテリアルデザインを取り入れ、themeforestなどのサイトをチェックすると、これらのサイトを見て多くのアイデアを得ることができます。特定の要素について意見を得るためだけに。

この情報がお役に立てば幸いです。

0
user83260