SketchでのUXデザイン入門

新しいUXデザイナーとデザイン学生向けの入門書

過去2年間、UX Power ToolsでSketchヒントについて多くのことを書いてきましたが、UXを使い始めたばかりのデザイナーを支援する方法でそれらを整理したかったのです。

また、どのツールが最適かを議論するつもりはありません。Sketchが(現時点では)最適であることに既に気付いており、UXデザイナーとして使用する方法を知りたいと思います

記事を5つのセクションに分割し、新しいデザイナーが初心者から熟練者にどのように進歩するかを説明します。

  • アイデアを引き出す
  • 入門
  • 速くなる
  • よりスマートに
  • 視覚化

アイデアを引き出す

UXデザインは、ツールに到達する前に始まります。アイデアを頭から出すところから始まります(…実際には、それより前に研究から始まりますが、この記事の長さは20分以内にしましょう)。

確かに、私はかなり早い段階からデジタルツールに直行します。しかし、それは主に、頭の中でより多くのことを行い、デザインチームとホワイトボードで協力してスケッチするためです。 UXの設計者は、問題の領域を探索し、間違いを犯しながら、実際に忠実度を低く保つ必要があります。

画面に何かを表示する準備ができたら、2つのツールがあります。 1つ目は、フリーハンドと呼ばれるInVisionツールです。

設計のこのフェーズを容易にする2番目のツールは、Matt D. SmithによるFlowkitと呼ばれるSketchのプレミアムライブラリのセットです。 29ドルの価値があります。

低忠実度のワイヤーフレームに適しているだけでなく、設計を伝えるために主要なワークフローを高忠実度でマッピングする必要がある場合に、設計の後の段階で使用できます。

入門

Sketch for UX Designの最大の強みは、物事を反復可能かつ高速にすることにあります。

共有スタイルほどシンプルで強力なものや、ネストされたシンボルのような最近の進歩を使用していないスケッチデザイナーの数を見るのは、まだ驚くべきことです。デザイナーがせっかちになり、ただ物を出したいだけだからだと思います。完全にわかりました。

しかし、優れたデザインとは、デザイナーが組織されていることだけです。料理の比cookingが好きです:

また、スタイルシートの概念をコードからデザインに拡張することも好きです(これを書いたので、デザインシステムは実際にシーンに爆発しましたが、これらのテクニックのほとんどは今日でも関連しています)。

そして最後に、Sketchでプロジェクトを開始する方法についての記事の聖杯について、すべてを網羅しています(フォルダー構造まで):

Sketchでレスポンシブにレイアウトを設定する方法に関するボーナス記事:

速くなる

さて、Sketchプロジェクトを効果的に開始する方法を理解できたので、今度はツールを使用して高速化を開始します。個人的には、設計者が設計中にショートカットを使用していないのを見ると、不快感を覚えます。つまり、それは本当に私の魂を傷つけます。あの男/ギャルにならないでください:

この記事を書いてから約100万半の新しいツールとプラグインが出てきましたが、正直なところ、Sketchの最高のコンパニオンは私の意見では実際には変更されていません(Nudg.itは現在、Sketch、AnimaでネイティブにサポートされていますいくつかはSketchのレイアウト機能に組み込まれていますが、それでも有用です:

ヒントとコツ

ジョンムーアは、シンプルさと力にあなたの心を吹き飛ばすいくつかの記事で、パワーユーザーの知恵を伝えました。

よりスマートに

プロジェクトの設定方法を知っていて、Sketchを使って高速化する方法を学んだので、今度はすべてをUXデザインに適用します。

前述したように、Sketchは繰り返し、一貫性、モジュール性を容易にするため、UXデザインに最適です。以下に、Sketchを使用してインテリジェントにUI要素を作成する方法の例をいくつか示します(すべて無料で提供されます)。

アイコンとグラフィックスを効率的に処理する

次のセクションでは、UXのビジュアルデザインの側面について説明しますが、グラフィックスの取り扱いは、UXデザイナーの操舵室の外にあることがよくあります。アイコンの作成を心配する代わりに、アイコンの使用方法を賢くします。

ネストされたシンボルは実際にはかなり自動化できます。

最後に、過去12か月でSketchが最も大きく進歩したことを指摘しなかったら、私は失望します。

視覚化

それだけでは十分ではないかのように、今日のUXデザイナーは、ビジュアルデザインに関してより高い基準を満たしています。

UXデザインを始めたとき、アスペクト比、フォントサイズ、ウェイト、色のコントラストなどを使用してデザインするのに必要な「マテリアル」に精通するのは難しいと感じました。

良くするために、私は既存の製品をコピーすることから始めて、UIがどのように構成されているかを感じることができました。

昨年、これを取り上げ、Sketchで再作成されたいくつかの一般的な製品へのリンクを提供しました(ただし、一部の製品はその後再設計されています)。

そこから、実際にいくつかの小さなテクニックを使用して、デザインにほんの少しのセンスを追加することができます。

ただし、ビジュアルデザインにとって、正確なサンプルデータはビジュアルそのものと同じくらい重要であることを忘れないでください。

*パート2は作成しませんでした

最後になりましたが、キャリアのある時点でダッシュボードを設計する必要があります。これは、UXデザイナーにとって最大の悪夢の1つです。個人的には、ダッシュボードは表にわずかな価値をもたらすことがわかっているので、チャートをきれいに仕上げるのに何日も費やしたくありません。

UX Power Toolsを介して設計コミュニティを支援していた18か月は驚くべきものでした。デザイナーが武器として持つべきツールはSketchだけではありませんが、最も強力なツールです。この付録が、UXキャリアを始めたばかりの人や、設計ワークフローのためにSketchに移行している人に役立つことを願っています。

新しいプロジェクトを開始するのに最適なバニラデザインシステムに興味がある場合は、構築したものをご覧ください。設計時間を数千時間節約できます。

MediumでSketchの記事を収集していないときは、UX Power ToolsでSketchデザインツールに取り組んでおり、より良い、より効率的なデザイナーにしています。

TwitterでUX Power Toolsをフォローする
Twitterでフォローしてください