リボンスタック：なめらかな S 字カーブで交差する、太いアイリスとサーモンのリボン
ここでは、幅広で半透明のリボンがすべてです。14 本のリボンが長い S 字カーブでキャンバスの幅いっぱいに走り、隣同士は逆方向に曲がるので、交差するたびにアイリスバイオレットとサーモンが混ざり、淡いペリウィンクルの地の上に新しいトーンが生まれます。「グレイン」はわずか 1 で、「エッジ」の構図が左側を空けるため、このプリセットは磨き上げたベクターのような見た目になります。
自分好みに仕上げる
リボンを細いコードにする
ここでは「奥行き」が 2 つの役割を担い、リボンの幅と不透明度の両方を決めます。62 から「奥行き」を 10 まで下げると、幅広い帯が細く淡いコードになり、「プロダクト」プレビュー向けの軽い選択肢になります。
織りを誇張する
「緊張感」は各カーブの曲がりの強さを決めます。ここではゆったりした波になる 40 です。90 ではリボンが焦点の線の上下に大きく振れ、より急な角度で交差して、キャンバスのより多くを埋めます。
よくある質問
リボンスタックに最も合うのはどんなレイアウトですか？
横に広いレイアウトです。リボンはキャンバスの幅いっぱいに走るので、フェードした左側に見出しを置く「ランディングページ」、「キャンペーン」、「分割」のプレビューで最も映えます。縦長の「モバイル」や「ストーリー」のフレームではカーブの一部しか見えません。リボンがより垂直に走るよう、「回転」を 8 から 60 あたりまで上げてください。
使い方
ビジュアルシステムを選ぶ
エコーリング、ハローグリッド、粒子の海岸、グリフ地形、リボンスタックなど、20 のファミリーから 1 つを選びます。
構成する
バランス、焦点、エッジ、繰り返しのいずれかの構図を選び、焦点を動かし、密度、スケール、回転、リズム、緊張感、奥行き、グレインを設定します。
文脈の中で見極めて使う
プロダクト、ランディング、AI、モバイルのレイアウトでプレビューします。その後、無料の UX Pilot アカウントでログインすると、キャンバスで使用したりエクスポートしたりできます。