厳選・オープン・無料

Diogoakio Com Br

インディペンデントなデザイナー＆アートディレクターのための、大胆なタイポグラフィとダークで没入感のあるギャラリー体験にフォーカスした、精錬されたポートフォリオ・サイト。

01

デザイン DNA

キュレーションされたハイコントラストの展示を行うデジタル・ギャラリー。

02

カラー

高いコントラストと抑制。ダークな背景を用い、写真とタイポグラフィが際立つように設計。

03

タイポグラフィ

humanist-sans

• display34px · 400
• body16px · 400

すべてのテキストにはウェイト400を使用。 · ディスプレイには負の字間、本文には正の字間を使用。 · タイポグラフィが主要な構造要素となる。

04

余白

一貫した30pxの間隔が、主要なセクションの区切りを定義。

05

サーフェス (角丸 / 影 / 罫線)

最小限から皆無。区切りは間隔と背景のコントラストによって実現。

06

レイアウト

上部に配置された目立つヒーロー声明と、グリッドベースのポートフォリオ・ギャラリーを備えた、フルブリードのダーク・キャンバス。

07

モーションとインタラクション

すべての要素には、スムーズな状態変化のための標準的な'all'トランジションが適用されています。

インタラクティブ要素上の微細な色の変化や表示による、視覚フィードバックが想定されます。 · プロジェクト・オーバーレイなどの、より多くのコンテンツを表示するためのトランジション。

08

コンポーネント

• button ダーク背景に対してハイコントラストの、ミニマリストなテキストリンクまたはボタン。
• card グリッド内に配置された、大型の写真カードまたはクリーンなテキストブロックとしてコンテンツを表示。
• chip シンプルで無飾のテキスト要素。
• input 提供されたスクリーンショットには見当たりません。
• hero ページ全体をアンカーとする、巨大なフルワイドのタイポグラフィ・ステートメント。

09

文体と禁止事項

• トーン 自信に満ち、率直でプロフェッショナル。
• 見出し 宣言的で直截的。デザイナーの名前を主要なフックとして使用。
• CTA 控えめで機能的。例：'Ver matéria'。

• 白い背景を使用しない — スクリーンショットではダークテーマが支配的です。
• 太字のウェイトを使用しない — スクリーンショットでは一貫してウェイト400が使用されています。
• ドロップシャドウを追加しない — スクリーンショットではフラットな、表面的な奥行きが示されています。
• 幅広い色を使い分けない — スクリーンショットでは厳密なモノクローム・パレットが使用されています。
• 要素に丸みのある角を使用しない — スクリーンショットではシャープで四角いエッジが示されています。
• 複雑な装飾的なボーダーを使用しない — スクリーンショットでは区切りに間隔が頼られています。
• 避ける: 過度な装飾
• 避ける: 派手な色
• 避ける: 複雑な専門用語

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko