ウェブ

キャリアを始めるときに必要だった不足しているアドバイス

同様の過ちを犯したり、人生の貴重な年月を無駄にしたりすることを避けるために、ポール・ボーグはキャリアの開始時に学んだ教訓と難しい真実を共有しています。

続きを読む

ウェブサイト速度テスト画像分析ツールの紹介

Web開発者はハイパーテキストの作成に日々を費やしていますが、バイトごとに、ほとんどのWebは画像で構成されています。 画像が平均的なWebページのパフォーマンスに与える影響を誇張するのは難しいです。 より速いウェブサイトはより広い範囲とより大きな影響を及ぼします。 **ウェブサイトの画像のパフォーマンスを改善する**ためにできる最初のそして最も重要なことは、それらを測定する方法を理解することです。 _Website Speed Test_を入力してください。これは、(Cloudinaryの)画像スマートを活用して、任意のWebサイトの画像パフォーマンスを測定、診断、および(重要に)伝達できる、無料で簡単なツールです。 さらに良いことに、Pat MeenanのWebPagetestの上に構築され、統合されています。 興味がある? 読む!

続きを読む

3Dビデオを撮影するためのiOSアプリの構築方法(ケーススタディ)

この記事では、EvgenyKhrolenokとIgorMikheikoが、人々が独自の3Dステレオビデオを作成するのに役立つアプリの開発中に学んだ教訓を共有します。

続きを読む

MarkdownでShadowDOMを使用してパターンライブラリを構築する

ドキュメントを書くのが嫌いな人もいれば、ただ書くのが嫌いな人もいます。 私はたまたま書くのが大好きです。 そうでなければ、あなたはこれを読んでいないでしょう。 専門的なガイダンスを提供するデザインコンサルタントとして、書くことは私がすることの大きな部分であるため、私が書くことを愛するのに役立ちます。 しかし、私はワードプロセッサが嫌い、嫌い、嫌いです。 技術的なWebドキュメントを作成する場合([パターンライブラリ](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/)を参照)、ワードプロセッサは不従順であるだけでなく不適切です。 理想的には、ドキュメント化するコンポーネントをインラインで含めることができる書き込みモードが必要です。これは、ドキュメント自体がHTML、CSS、およびJavaScriptで作成されていない限り不可能です。 この記事では、ショートコードとシャドウDOMカプセル化を利用して、Markdownにコードデモを簡単に含める方法を紹介します。

続きを読む

毎週のデザインミーティングを活用する方法

チームの関与をどのように維持しますか? チームがリリースされているすべてのものを最新の状態に保つにはどうすればよいですか? チームメンバーはどのくらいの頻度でお互いに顔を合わせて話しますか? 彼らは彼らの仕事を終えるか、彼らの成長を追求するのに十分なサポートを持っていますか?

続きを読む

左利き用ブラシレタリング:開始方法

レタリングと書道は​​、デザイナーのツールボックスですぐに必要なスキルになりつつあります。 マリアン・バンチェス、ジェシカ・ヒッシェ、ショーン・ウェス、マルティナ・フロールなどのデザイナーは、ほんの数例を挙げると、私たちの他の人々にインスピレーションを与えるだけでなく、スタンダードにもなっています。 彼らの仕事はクライアントベースだけではありません。 フォロワーにも商品を提供することで、独自のブランドになりました。 他のデザイナーもそれに続いており、今ではレタリングや書道がいたるところにあるように見えます。

続きを読む

完璧なアコーディオンのデザイン

デザインパターン。 畏怖や恨みを刺激することが多い、ほぼ神話的なフレーズ。 設計者として、私たちはデザインパターンを、多くの場合適切な考慮なしに、ほぼ機械的にさまざまなコンテキストに適用できる一般的な既製のソリューションと考える傾向があります。 ナビゲーション? オフキャンバス! その日の取引? カルーセル! あなたはその考えを理解します。

続きを読む

大きさが十分でない場合:ヒーロー画像を使用したデザイン

ユーザーがあなたのページに来るとき、彼らはある種の反応を感じるでしょう。 それがポジティブであろうとネガティブであろうと、その反応は主に彼らが見るものによって決定されます。 **視覚はおそらく最も強い人間の感覚**であるため、ヒーロー画像はユーザーの注意を引くための最速の方法の1つです。 大胆でグラフィックな意図的な画像がユーザーを引き付けます。 ユーザーをすぐに引き込み、ミニマリストのアプリやWebサイトの完璧な目玉になります。 ヒーローの画像は単なる美しい絵ではありません。 強力なコミュニケーションツールです。 この記事では、ヒーロー画像を使用するためのヒントをいくつか紹介します。 また、独自のデザインのプロトタイピングとワイヤーフレーミングをもう少し別の方法で開始して試してみたい場合は、_AdobeXD_を無料でダウンロードしてテストできます。

続きを読む

スクロールし続けてください! 長くて長いページをデザインする方法

長いまたは[無限スクロール](https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this/)を備えたWebサイトは、最近ますます一般的になっています。そしてそれは単なるトレンドや偶然ではありません。 長いスクロールの手法により、ユーザーは中断や追加の操作なしにコンテンツのチャンクをトラバースできます。ユーザーがページを下にスクロールすると、情報が表示されるだけです。

続きを読む

CSSポリ流体サイジングを使用した流体応答性タイポグラフィ

流動的なレイアウトは、何年もの間、フロントエンド開発の通常の部分でした。 ただし、流体タイポグラフィのアイデアは比較的新しく、まだ十分に検討されていません。 これまで、ほとんどの開発者の流動的なタイポグラフィのアイデアは、おそらくいくつかの最小サイズと最大サイズのビューポートユニットを使用することでした。 この記事では、それを別のレベルに引き上げます。 十分にサポートされているブラウザ機能といくつかの基本的な代数を使用して、複数のブレークポイントと事前定義されたフォントサイズにわたって**スケーラブルで流動的なタイポグラフィ**を作成する方法を検討します。 最良の部分は、Sassを使用してすべてを自動化できることです。

続きを読む