デザインにおける「科学」の負担を軽減する可能性のあるアプリ

Webデザイナーが最も嫌うのは何ですか？ おそらくコーディング。 そして、おそらくすぐ近くに、すべてのデバイスのプロトタイピングがあります。 そして、そのようなことを簡単にすることができるものは何でも、デザイナーが彼の仕事の創造的な側面により多くの時間を費やすことを可能にします。

そのことを念頭に置いて、すべてのデザイナーが自分のツールキットへの潜在的な追加として探求する必要のある素晴らしい新しいアプリがたくさんあります！

FRONTIFY

独自のスタイルガイドを作成し、将来の参照や共有のためにクラウドに保存するのに最適なサイトです。 ロゴと画像、カラーパレット、タイポグラフィ、アイコン、および独自のテキストとメディア用のスタイルガイドテンプレートがあります。 ここでのもう1つの大きな利点は、独自のPDFスタイルガイドを手動で作成する必要がないことです。Frontifyに保存すると、ダウンロード、印刷、共有のためにPDFファイルに変換できます。 バージョン管理により、すべての古いバージョンがバックグラウンドで保持され、いつでもプルアップできます。 テンプレートから始めたり、ブランドブックの例を調べたりして、独自のテンプレートをカスタマイズできます。 すべての機能はAPIを介してアクセスできます。 Frontify独自のロゴを使用して、ロゴだけで何ができるかの例を次に示します。

これが基本的なロゴです。 Frontifyは、ここでは「ドロップ」が重要であると判断しましたが、ロゴの一貫性を保ちながら、他の多くのことを実行できると判断しました。 色の変更は次のとおりです。

そして、これが基本的なロゴのバリエーションの例です：

これは、独自のスタイルガイドを作成するために使用できるデザインとカラーテンプレートのほんの一例であり、すべてのコンポーネントは交換可能です。

ビジュアルコンポーザー

このアプリはしばらく前から存在していて、すでにご存知かもしれませんが、デザインオプションパッケージで別のアプリを見つけるのは難しいでしょう。 基本的に、計画とコーディングの面倒な作業を取り除きました。 ワンクリックで要素を追加して、わずか数分でデザインレイアウトを作成できます。 25ドルの値札はそれだけの価値があります。 すべてのボタン。 多くのアニメーションオプション、即時共有オプションなど。 この赤ちゃんには40以上のコンテンツ要素があります！ それは本当に万能ツールです！ そのすべての機能とこのアプリの使用方法について不明な点がある場合は、こちらのビデオチュートリアルをご覧ください。

ページを非常にすばやくデザインできる優れた機能があり、ほとんどすべての要素を変更できます。 たとえば、変更可能な事前定義されたグリッド要素や、独自のグリッドを設計するためのオプションがいくつかあります。

Visual Composerに欠点がある場合は、非アクティブ化したときに多くの小さなコードが残り、新しいテーマを開始する前に削除する必要があります。 VisualComposerで作成したデザインの例を次に示します。

デザインハント

あなたのインスピレーションが行き詰まったとき、あなたはおそらくあなたに素晴らしいアイデアを与えることができる新しいウェブサイトを検索することによってそれを求めます。 これは少し時間のかかる作業になる可能性があるので、もっと便利な方法を使用してみませんか？ Design Huntは一種の「クリアリングハウス」ですが、レパートリー全体を日常的に変更しています。 Pinterest、Dribble、Designer News、DesignInspiratonなどで見つかった素晴らしい新しいデザインを描き、新しいインスピレーションやアイデアを探しているデザイナー向けに公開しています。 今、あなたは毎日1つの場所に行って、まったく新しいコレクションを見つけることができます。

TOOKAPIC

ストックフォトビジネスの比較的新参者であるTookapicは、現在11,000枚を超えるストックフォトを所有しており、そのほとんどが無料で、残りは低価格です。 驚異的な色と透明度、そして本当にユニークな写真など、現在使用しているストックフォトソースよりもこれが本当に好きかもしれません。 彼らのサイトにアクセスして、彼らが持っているものをチェックしてください。 びっくりするかも！

MARVELAPP

この無料のプロトタイピングツールを使用すると、携帯電話やその他のデバイスからモックアップをスケッチして作成し、すぐにプロトタイプを見ることができます。 そこから、任意のデバイスとの即時の互換性を備えた、再配置、変更、色、テキストの追加、フォームの変更、および事実上すべてのことを行うことができます。 プロジェクトに名前を付けると、すぐにメインインターフェイスに移動して開始します。 完了したら、デザイン全体をプレビューして操作し、すべてが正常に機能することを確認できます。

この驚異的なツールの詳細については、Webサイトにアクセスしてデモをご覧ください。使いやすさにワクワクします。 最高の機能の1つは、どこからでも（Dropboxやスケッチでも）任意の画像タイプの画像をドロップできることです。 これが共同プロジェクトの場合は、チームを追加することもできます。 マーベルの最大の欠点は、無料版には制限があるため、必ずアップグレードする必要があることです。 それでもなお、これは非常に使いやすく、Justinmindと同じくらい優れています。

CSSをアニメーション化

たくさんのアニメーションを作成する場合は、間違いなくこのツールが必要になります。 コードを書かなくても本当にクールな機能。 すぐに使用できるアニメーション効果のライブラリ（実際には50以上）があり、ループの数と期間を簡単にカスタマイズできます。 アニメーションは、やりすぎない限り、素晴らしいエンゲージメントとエンターテインメントを追加します。

ただし、機能とオプションの本当に完全な配列を探している場合は、CSSだけでは問題を解決できません。 CSSとJavaScriptについての議論は確かに続いていますが、それらを一緒に使用できる方法は確かにあります。 たとえば、優れたCSSアニメーションを設計しましたが、ユーザーが下にスクロールして特定のポイントに到達したときに、左からスライドインさせたいとします。 それを行うには、JSを追加する必要があります。 CSSには制限があり、JSによって拡張できることを理解することは、利用可能なツールを賢明に使用することです。

それにもかかわらず、AnimateCSSは本当に簡単に実行できます。 それをダウンロードし、CSS、jQuery、およびその他の必要なコンポーネントを添付して、アニメーションを開始します。 YouTubeには、始めるための優れたチュートリアルがあります。

クーラー

あなたがたまたま色覚異常であるか、単に配色に挑戦している場合、このツールはあなたのために全体の配色を開発するか、あなたがどこから始めたいかを知っているならそれを作成します。 好きな色を見つけたら、それをロックしてクリックし続けるだけです。必要な数の色を使用した完全なスキームが得られます。 これは、カラーグラデーションを使用する場合に特に役立ちます。 このツールについて本当に物議を醸すものは何もありません-それを使用する設計者はそれを愛しています。 まだ試したことがない人。 唯一の欠点は？ 無料ではなくなり、ダウンロードするにはiTunesアカウントが必要です。

色に挑戦するための自動配色ジェネレータ

CIRCULUS.SVG

これは、多くのオプションやテンプレートなどを備えた包括的なツールではありませんが、メニューをデザインするためのユニークな方法、または必要な数のページにいくつかをデザインする方法があります。 メニューに必要なものの詳細を入力するだけです。 次に、それを構築して特定のページに埋め込む方法の詳細な手順が提供されます。

訪問者をよりよく引き付けるためのちょっとした何か

この種の要素を作成するには、おそらくCircularSVGの方がCSSよりも優れています。 ダウンロードしたら、3つのオプションがあります。Sketchなどのグラフィックエディタでセクターを描画し、それらをSVGとしてエクスポートし、インタラクションを追加して埋め込むことができます。 コードを使用してセクターを描画できます。 または、アプリでCirculusジェネレーターを使用することもできます。

CSSを使用すると、循環ナビゲーションを作成できますが、ブラウザーのバグがいくつかあり、それに加えて、多くの作業が必要です。 長方形から始めて、それを分解してから、それらのセクションを傾斜させて回転させる必要があります。 また、セクターでアイコン以外のものを使用すると、扱いが難しくなります。

SVGを使用すると、特定の線と円弧コマンドを使用して、必要な「パイウェッジ」に任意の形状を描画できます。例を次に示します。

各ウェッジを描画し、アイコンやコンテンツを埋め込んだら、それらに参加するだけです。

メタフロップ

同じ古いフォントや文字スタイルにうんざりしていませんか？ 独自の作成–コーディングは不要–クリックしてドラッグするだけです。 テキストの独自のフォントやスタイルに変更すると、訪問者が実際にコンテンツを読むようになる可能性があります。 このアプリはとてもクールなので、何時間も遊んでいないと大変な時間を過ごすことになります。 そして、あなたはタイポグラフィがウェブデザインの最もセクシーでない部分であると二度と言うことはありません。

とても簡単です。 高さ、絞り、コントラストなど、さまざまな特性を持つ一連のスライドからフォントをカスタマイズします。 好きなものができるまで調整してから、Webフォントパッケージ（無料）としてダウンロードします。 選択可能なビルド済みフォントのライブラリもあります。 遊び続けてください–書体デザイナーが「死にかけている品種」である理由がわかります。

ユニークなフォントとスタイルで注目を集める

FONTFLAME

これは本当に「ブロックの新しい子供」です。 Fontflameは、デザイナーの負担をもう1つ軽減しようとします。それは、実際に機能するフォントの組み合わせを見つけることです。 現在、サイトには10​​のペアリングが公開されていますが、毎日追加されています。 Googleの無料フォントライブラリを使用したペアリングの例には、「Lobster-Asap」と「Roboto-OpenSans」が含まれます。 追加のライブラリはまもなく追加されます。 このサイトに注目してください–すぐにペアリングで提供することがたくさんあります。

フリーランサーポッドキャスト

アプリやツールではありません–これは、見逃したくないデザイナーや開発者向けの毎週のポッドキャストです。 Paul Jarvisが主催するこのアプリは、新しいトレンド、アプリ、ツール、そして多くの実用的なアドバイスにアクセスできます。

インビジョン

これは、他にはないいくつかの機能を備えた優れたプロトタイピングツールです。 他のすべてのデバイスと同様に、任意またはすべてのデバイスのモックアップを作成します。必要なデバイスを選択します。 プロトタイプが作成されたら、すべてのデバイスでプレビューして、レビューのためにクライアントまたはチームメンバーに送信できます。 彼らはデザイン自体について正しくコメントすることができ、それは大きなプラスです。 In-Visionの他の2つの優れた機能は、デザインの以前のバージョンをすべて表示できる履歴モードと、デザイナーがすべての機能に慣れるまで作業するための3つのデモプロジェクトです。

In-visionとMarvelアプリを比較すると、重要な違いはおそらく次のとおりです。

1. InVisionにはMarvelよりも多くの機能がありますが、それはまたそれをより複雑にします。 たとえば、より多くのライブコラボレーション機能、注釈のスクリーンショット用のツール、優れた履歴要素があります。
2. MarvelにはiOSアプリがあり、現在AndroidとiPad用のアプリに取り組んでいます–InVisionにはこれらがありません。
3. InVisionはおそらく大規模なチームに適していますが、Marvelはソロまたは小規模なチームに適しています。

これらのアプリの両方のユーザーからのコメントは、どちらがどの目的に最適であるかをより明らかにするでしょう。

あなたはおそらく、仲間のデザイナーが聞きたがっているお気に入りのアプリをいくつか持っているでしょう。 彼らが何であるか、そして彼らがどのようにあなたにアーティストになるためのより多くの時間を与えるかを教えてください。