厳選・オープン・無料

Michaelspeichert

デザインスタジオのための、ストリックトなtyography-firstポートフォリオ。

01

デザイン DNA

攻撃的で過剰なサイズの文字とハイコントラストなグラフィックで kommunizieren するブルータリストなアートギャラリー。

02

カラー

極端なコントラストとネガティブスペースに依存し、インパクトを生む厳格な二色のパレット。

03

タイポグラフィ

display-sans · humanist-sans

• display170px · 500
• heading60px · 300
• title54px · 500
• body28px · 500

強調やナビゲーションのために大文字を頻繁に使用 · よりコンパクトでブルータリストな印象のため、行間はタイトに設定 · 強いコントラクトを生むため、フォントウェイトはlight (300) とmedium (500) で交互に使用

04

余白

巨大なタイポグラフィを収めるため、非対称で大胆な設計

05

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

コンテンツブロックを枠付け、区切るためにシャープな1pxの白いボーダーが使用されます。

0px 0px 0px 1px rgba(255,255,255,1.0)

06

レイアウト

大きな没入感のあるイメージと巨大なテキストブロックをサポートするグリッドベースの構造。

07

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

微細な表示のための滑らかなopacity遷移 · インタラクティブなhover状態のための直接的なtransform

opacityの変化や微細なtransformを用いた、即座のビジュアルフィードバック。 · 最小限の遅延での直接的なレスポンス。

08

コンポーネント

• button 最小限の、ボーダーレスまたはシャープなコーナー。テキストスタイルとhover状態に依存。
• card 大胆なタイポグラフィオーバーレイをもつハイコントラストなイメージコンテナ。
• chip 大文字スタイルのシンプルなテキストラベル。
• input シャープなボーダーで定義されたクリーンで最小限のフィールド。
• hero 巨大で表現力豊かなタイポグラフィとハイコントラストなイメージが支配する、フルスクリーンの没入感のあるエリア。

09

文体と禁止事項

• トーン 大胆で、直接的、そして自信に満ちている。
• 見出し 主要なビジュアル要素として機能する、巨大で表現力豊かなタイポグラフィ。
• CTA 控えめだが明確。全体的なタイポグラフィレイアウトに統合されることが多い。

• カラーグラデーションを使用しない — スクリーンショットは厳格なモノクロパレットを示している
• テキストにドロップシャドウを使用しない — スクリーンショットはフラットでハイコントラストなタイポを示している
• テキストをすべて中央揃えにしない — スクリーンショットは左揃えと表現力のあるレイアウトの混在を示している
• 小さく繊細なタイポグラフィを使用しない — スクリーンショットは巨大で大胆なディスプレイタイポを示している
• 広範囲に丸みのある角を使用しない — スクリーンショットはシャープで幾何学的な要素を示している
• 複雑で複数カラムのテキストブロックを使用しない — スクリーンショットはシンプルでインパクトのあるタイポグラフィステートメントを示している
• 避ける: ソフトなグラデーションやドロップシャドウの使用を避ける
• 避ける: 多くの小さな要素を含む雑然としたレイアウトを避ける
• 避ける: デコラティブなフォントや遊び心のあるイラストを避ける
• 避ける: 抑制されたカラーパレットやソフトなパステルカラーを避ける
• 避ける: 伝統的なグリッドベースの均一なレイアウトを避ける
• 避ける: 2つ以上のフォントファミリーの使用を避ける

10

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

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

11

System Prompt

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