デザイナーのツールセット:ワークフロー、ソフトウェア、ウェブサイト

公開: 2020-12-17

ソフトウェア開発者、コンテンツライター、マーケティング担当者などと同じように、設計者は日常業務に取り組むのに役立つ優れたツールセットを持っている必要があります。 ここで私たちが試みたのは、そのようなツール、ワークフロー、およびそれらを組み合わせて作業をスピードアップし、間違いやエラーの可能性を減らす方法の概要を説明することです。

情報を収集する

新しいプロジェクトが来るとき、最初の数時間は主にそれに関する情報を収集することです–クライアントが直面する問題、彼らの目標は何か、彼らは何が好きかなど。この重要なステップの間に、デザイナーは可能な限り多くの有用なデータ。これは後で知識に基づいた決定を行うために使用されます。

Evernote

Evernoteは素晴らしいソフトウェアです。メモを取るためのアプリだけではありません。 ファイルを保存し、コレクション、タグ、グループなどに組み合わせることができます。強力な検索により、以前のプロジェクトなどを参照できます。 もちろん、それの最も強力な側面はあなたがそれをどのように使うかです。 彼らはいくつかの組織的アプローチのための大まかなガイドラインを持っています。

Evernoteホームページのスクリーンショット

メール、スラック、ズーム…

次はもう1つの明らかなものですが、それを追加した理由があります。電話、メッセージ、またはビデオ会議を延期すると、プロジェクトが大幅に遅れる可能性があります。 多くの場合、画面を共有し、モックアップ、ワイヤーフレーム、コンセプト、デザインを確認する機能は、命の恩人です。 決してそれを忘れないで

インスピレーションを見つける

十分な情報が得られたら、次のステップはインスピレーションを集めることです。アプリ/ウェブサイトの外観、スタイル、目標などです。使用する新しいテクノロジーやさまざまな種類のメディアに関するクールなアイデアはありますか? ? すべてのデザイナーは、ウェブサイト、本、雑誌など、左右のインスピレーションを求めています。

Dribbble、Behanceおよび同様のWebサイト

このため(そしてデザイナーが自慢するために)、Dribbbleのようなウェブサイトが存在します。 そこで、私たちデザイナーは、私たちが現在直面している問題を解決するアイデアやアプローチを閲覧することができます。 場合によっては、「サービスAの一般的な販売ページ」を作成することが目標になります。 その販売ページには、文字通りストックフォト付きの段落がいくつかあります。 まったく刺激のない目標ですが、それは現実的です。 ええと、色、タイポグラフィ、間隔などの組み合わせはすべてもう少しユニークにすることができます。 たぶん、さまざまなレイアウトも試してみてください! そして、そのアイデアは、3〜4年前に投稿されたランダムなランディングページから得られます。 99DesignのDiscoveryページも見るのに良い場所です!

ドリブルの例のスクリーンショット

ぎこちない

Awwwardsのようなサイトは、実際に構築されて機能していることがわかるものを紹介しているため、別のカテゴリに分類しています。 さらに、「デザイン作業」ではなく、芸術的な方法に焦点を当てています。 ほとんどの場合、サイトは非常に重いため、ハイエンドマシンでのみ使用できるようになりますが、それでもサイトからインスピレーションを得ることができます。

カラーパレット/ブランディング

事前定義された色がないまったく新しいビルドの場合、作業を開始する手順の1つは、新しいサイトに適合するものを選択することです。 アプローチには2つの方法があります。既存の配色を選択するか、プライマリ/セカンダリカラーを設定し、それらに基づいてスキーム全体を回避します。

ColorHunt

Color HuntのようなWebサイトは、コミュニティが作成したカラーパレットのコレクションを提供します。 直接選択して使用することも、最初にメインカラーを選択することもできます。 見た目はそれほどきれいではありませんが、ColorLoversも似ています。

カラーハントの例のスクリーンショット

BrandColors

BrandColorsの目標は少し異なります。主要なブランドとその配色のリストを提供します。 あなたのビルドを刺激することができるいくつかの素晴らしい色合いと組み合わせをそこに見つけることができます。 色には著作権はありませんが、たとえばAmazonのような場所からすべての色をコピーして貼り付けるのではなく、少し遊んでみることをお勧めします。

プレミアムアセットと無料アセット

サイトのすべてのコンポーネントで作業するのに十分な時間は常にありません。 他のデザイナー/写真家が作成したアイコンパック、イラスト、ストックフォトを入手して直接使用するのが最善の場合もあります。

  • Font-Awesome –フォントグリフの形のアイコンの膨大なコレクション
  • Envato Elements –高品質のアセットを手頃な価格で豊富に取り揃えています。
  • Unsplash –高品質で無料で使用できる写真の膨大なコレクション
  • squircley、getwaves、blobmakerなどのSVGジェネレーター
  • Adobe Fonts(有料)およびGoogle Fonts(無料)

ここでの最良のヒントは、上記のようないくつかのサイトを見つけて近くに置くことです。そうすることで、仕事に最適なグラフィックを検索して見つけるために必要な時間と労力を可能な限り減らすことができます。

主な設計ツール

最初の作業が邪魔にならないので、実際にデザインを構築することになります。 デザイナー向けのすべてのプログレッシブソフトウェアには、Web /アプリのデザインを構築するために必要なすべてのツールがあるため、ワイヤーフレーミングツールはスキップします。

フィグマ

DevriXでの設計作業の中心的な選択肢はFigmaです。 Linux、Mac、Windowsなど、チームの誰もがアクセスできる優れたコラボレーション機能とブラウザベースのアプリを提供します。 以前はAdobeXDを使用していましたが、Linuxベースのメンバーはそれを利用できず、SketchはMacでのみロックされています。

Figmaホームページのスクリーンショット

イラストレーター/アフィニティデザイナー

よりカスタムな作業については、IllustratorまたはAffinityDesignerが間違いなくトップチョイスの一部です。 過去1、2年で、カスタムイラストはウェブサイトの最もトレンドの部分の1つです。 大きくてカラフルなグラフィックがスクロールせずに見える範囲を支配し、適切なツールでより多くの経験を積むことは間違いなく良いことです。 この場所で、3DモデルをレンダリングするためのBlenderのような3Dソフトウェアを追加することもできます。これは、Webページのアセットとして使用できます。

Photoshop / Affinity Photo

Photoshopは、Webデザインの主要なソフトウェアでした。 特に、主にWebに焦点を当てたこれらの優れたツールがすべてあるため、今日は奇妙に聞こえるかもしれません。 しかし、Photoshopは依然として優れたツールであり、シェイプやフォームの編集やトリミングが必要な写真がある場合によく使用します。

プレゼンテーション

しかし、それは設計作業だけではありません–静的PNG。 モーショングラフィックスとインタラクションにもう少し焦点を当てているデザイナーもいます。 ホバー、スワイプ、またはクリックで要素がどのように動作するかについての優れたデモは、フロントエンド開発者の作業に大いに役立ちます。 FigmaとAdobeXDの両方がそれを助けることができますが、両方とも制限されています。

Adobe After Effects

After Effectsは、モーショングラフィックスの最初の選択肢の1つと見なされています。 これは、すべてのアクションとアニメーションを表すために必要なすべてのツールを提供します。 ここでデザイナーに思い出させるのは、アニメーションはWebの制限に従う必要があるということです。 モーションブラーを追加することはできません。 したがって、より高度なアニメーションを使用する場合は、フロントエンドの開発チームと必ず話し合うか、Web上のアニメーションとその可能性について詳しく読んでください。 UXとA11yについても同じことが言えます。

ストレージ

FigmaとAdobeXDはほとんどクラウドに焦点を合わせているので、作業を失うことを心配する必要はありませんが、Photoshop、Illustratorファイル、ダウンロードしたフォント、写真など、すべてがマシンに存在するわけではありません。

特に複数のマシンで作業している場合は、それらをバックアップして、常にアクセスできるようにすることをお勧めします。 そして、それらを共有することになると、それは非常に簡単です。

ドロップボックス

このための一番の選択はDropboxでしょう。 使いやすいデスクトップアプリで、ファイルを監視し続け、変更を加えるとすぐにクラウドに同期します。 そこから、クライアントまたはチームとそれらを共有するのはワンクリックです。