2018年4月の10の新しいウェブデザインツール

著者: Monica Porter
作成日: 17 行進 2021
更新日: 17 5月 2024
Anonim
「2018年に向けたツールの選び方」長谷川 恭久
ビデオ: 「2018年に向けたツールの選び方」長谷川 恭久

コンテンツ

今月のまとめのテーマはスピードと効率です:これらのいくつか ウェブデザインツール デザインとは関係のない退屈でイライラするタスクを排除することで、ワークフローに驚くべきことをします。 Stackswellを利用してください–Sketchでレスポンシブデザインを行う際の煩わしい部分をすべて自動化します。もう1つのツールは、.sketchファイルからすべてのアセットを抽出して整理することにより、処理を高速化します。

その上、Stripeのクールな新しい課金製品、Tina Roth Eisenbergによるクリエイティブ向けの優れたネットワーキングツール、画面上のものをピクセル単位で測定するための素晴らしいツールがあります。

01.デザインシステムリポジトリ

組織の設計システムの要素のいくつかに取り組むこと、あるいはシステム自体を構築または体系化することさえも任されている場合は、そのトピックに関する最新のリソースに慣れる必要があります。


このため、Design SystemsRepoはあなたの友達です。これは、一流の組織や一流の思想家が物事をどのように行っているかを理解するために使用できる本、記事、講演、ウェブサイト、ツール、デザインシステム、パターンライブラリ、スタイルガイドのコレクションです。

02. PixelSnap

PixelSnapは非常に気の利いたアプリで、画面上のものを測定することで、煩わしさが大幅に軽減されます。画像と見出しなどの2つの要素の間にカーソルを置くと、それらの間のピクセル数が自動的に表示されます。要素の周りに長方形を描くと、要素の周りにスナップして、その寸法がわかります。はい。あなたはそれを素早く測定することができます。

アイデアを得るためにホームページのビデオをチェックしてください。このアプリの価格は15ドルですが、唯一の欠点は、現時点ではMacアプリとしてしか利用できないことです。しかし、あなたがMacユーザーなら、それは素晴らしいことです。


03. Sketch.The.Ripper

Sketchからアセットをエクスポートして準備し、別のチームに引き渡すのは非常に難しいため、ワンクリックでそれを実行するツールの可能性はかなりエキサイティングです。 Sketch.The.Ripperは、画面を抽出して整理し、すべてのアートボードから.sketchファイルに画像をコピーしてラスター化し、便利な方法で表示します。ここで、リッピングされたファイルからの出力の例を見ることができます。

このツールはWebベースであるため、どのOSでも機能します。これにより、ユーザーが異なるシステムを使用している場合にワークフローの摩擦を取り除くことができます。 Icons8によって作成されており、詳細についてはこちらをご覧ください。

04.スタックスウェル

Stackswellは、メディアクエリをSketchに取り込み、各ブレークポイントのタイプスタイルとシンボルを更新するプロセスを自動化することで、レスポンシブデザインワークフローを高速化します。この作業を手動で行う代わりに、アートボードの幅を調整すると、スタイルが自動的に更新されます。


Stackswellはまた、ブレークポイントごとに垂直方向の間隔をチェックする必要がないため、最小限の手間で一貫した間隔を得ることができます。あなたはこの記事でそれについてもっと読むことができます。

05.可変フォント

可変フォントを使用すると、それぞれに個別のファイルを含めることなく、さまざまなフォントの太さと幅を使用できます。1つのファイルを含めてから、CSSを使用してフォントを変更します。ページの太さを増やさずに、タイポグラフィをデザインに最大限に活用できるので、これは素晴らしい状況です。

ただし、すべての可変フォントが同じというわけではありません。他のものより柔軟なものもあります。このツールを使用すると、さまざまなフォントを見つけて実験し、ニーズに合っているかどうかを確認できます。可変フォントの詳細と何が達成できるかについては、このデモを試してください。

06.ストライプ請求

Stripeのオンラインビジネス向けの新しい課金製品は、課金システムを構築するか購入するかというジレンマを検討している企業に3番目の方法を提供します(詳細については、オンラインショップソリューションに関する記事をご覧ください)。 Stripe Billing APIは、既存のサイトに簡単に統合でき、ビルディングブロックを使用して、ニーズに合わせた柔軟なシステムを作成できます。

システムがセットアップされると、サブスクリプション、請求書、財務レポートを管理できるダッシュボードからすべてが管理されます。また、さまざまな通貨やクレジットカードを処理するStripeのグローバル決済システムや、価格設定を試すことができる柔軟な請求コンポーネントなどの強力な機能も利用できます。

07. CreativeGuild

CreativeGuildは、10年前にブルックリンでTina RothEisenbergによって設立された無料の月例講義シリーズであるCreativeMorningsのスピンオフです。このコンセプトは大ヒットし、現在、世界中の185以上の都市にCreativeMorningsの支部があり、それぞれがメンバーを育て、刺激する独自の活気に満ちたコミュニティを持っています。

CreativeGuildは、コミュニティの側面の一部をオンラインにして、より多くの人がアクセスできるようにすることを目的としています。 LinkedInに少し似ていると考えることができますが、クリエイティブ向けです。クリエイティブな企業、個人、仕事のディレクトリがあり、場所で検索して自分の街での機会を見つけることができます。

08.モビン

Mobbinは、独自のプロジェクトのアイデアを得るために使用できるモバイルアプリデザインのギャラリーです。多数のアプリをインストールする代わりに、それらを1つの場所で参照して、他のユーザーがデザインの問題をどのように解決しているかを確認できます。アプリごとに6つの画面が表示されるので、各アプリのユーザージャーニーとデザインパターンを把握できます。求人情報を表示するサイドバーもあります。

09. HueSnap

インスピレーションがいつ発生するかはわかりません。ホテルの装飾や公園の明かりは、あなたの仕事にぴったりの配色のように感じるかもしれません。その場合は、写真を撮り、HueSnapを使用して画像から色を抽出し、パレットにすることができます。

このアプリはモバイルでの使用を目的としているため、携帯電話で最適に動作し、パレットを保存して他のユーザーと共有できます。補完色と複合色を選択するオプションなど、パレットの変更に役立つさまざまな機能があります。パレットには、それぞれ最大6色を使用できます。

詳細については、Webデザイナー向けの最高のカラーツールのまとめをご覧ください。

10.Eggradients

この美しいグラデーションのコレクションをまとめた人は誰でも、色と興味深いユーモアのセンスに大きな目を向けています。各グラデーションは卵形のコンテナに表示され、何らかの方法で色に関連する場合と関連しない場合がある名前が付けられます。関係がある場合、それを解読することはできません。

名前の例には、ターコイズのグラデーションの「Successful Immigrant」、淡いブルーの「Wozniak’s Broken Heart」、黄色から緑のトランジションの「MercifulEnemy」などがあります。

Generate NewYorkのチケットを入手してください

主要なウェブデザインイベント ニューヨークを生成する 戻ってきました。 4月25日から27日の間に開催されるヘッドラインスピーカーには、SuperFriendlyのDan Mall、WebアニメーションコンサルタントのVal Head、フルスタックJavaScript開発者のWesBosなどが含まれます。ワークショップや最高のネットワーキングの機会もあります。お見逃しなく。 今すぐGenerateチケットを入手してください.

最も読書
Googleアナリティクスのデザイナーガイド
続きを読む

Googleアナリティクスのデザイナーガイド

多くの場合、デザイナーは、パフォーマンスを一貫して監視せずに美しいWebサイトをデザインすることに罪を犯しています。もちろん、サイトを設計してそのままにしておく方が簡単ですが、訪問者を引き付けて維持したい場合は、サイトを監視して問題領域を改善することが重要です(これはWebサイトの要点です...そうですか?)。分析は、オーディエンスとWebサイトのパフォーマンスを理解するために不可欠です。また、G...
Photoshopでリアルなスケッチ効果を作成する
続きを読む

Photoshopでリアルなスケッチ効果を作成する

Photo hop C 6には、Arti ticフィルターフォルダー内の色鉛筆フィルターなど、写真をさまざまなアートスタイルに変換するように設計されたフィルターの優れたコレクションがあり、すべてPhoto hopのスケッチを簡単に作成できます。ただし、鉛筆の幅や筆圧などの属性を変更することはできますが、最終的な結果は少し詳細で均一になりすぎて、他のフィルター処理された写真と同様のコンピューター生成...
デザイナーのための20のトップ2016カレンダー
続きを読む

デザイナーのための20のトップ2016カレンダー

誰もがちょっとした文房具のポルノにふけることができるのは、今年もその時期です。カレンダーを選択することは、多くの人にとってスリルがあります。それが、美しく手作りされた卓上カレンダーのタッチであろうと、走り書きと一目でわかる整理のためのスペースの完璧な組み合わせを見つけるスリルであろうと。ここに私たちの注意を引いたいくつかがあります-スタジオの壁、フリーランスのデスク、またはオフィスのブレイクアウト...