← OpenDesign
厳選・オープン・無料
Richardekwonye
大胆なタイポグラフィ表現を特徴とするミニマリストなクリエイティブデベロッパーポートフォリオ
Portfolio Bold Typography Clean Developer Photographic
01
デザイン DNA
ミニマリスト プロフェッショナル タイポグラフィ デザインエンジニア
デジタルポートフォリオのための、構造化された建築設計図
02
カラー
#000000Ink
#E1DFDDBG
rgba(0,0,0,1.0)Line
暖色の中性背景を用いた高コントラストモノクローム
03
タイポグラフィ
geometric-sans
display 144px · 500h2 40px · 500body 16px · 400全見出しとディスプレイテキストは大文字表記 · 大型タイポグラフィの tightened レタースペーシング · 本文400ウェイトと見出し500ウェイトのウェイトコントラスト
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
170px
4pxグリッドに基づく、豊かな余白を備えた垂直リズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
目立つボーダーは使用せず、エッジからエッジへのクリーンなレイアウト
06
レイアウト
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
豊かなネガティブスペースを備えた非対称グリッド
07
モーションとインタラクション
220ms micro
400ms small
1000ms medium
cubic-bezier(0.62, 0.05, 0.01, 0.99) easing
スクロール時のスムーズなトランジション · 全要素にトランジションプロパティを定義
インタラクティブ要素上のカーソルポインタ · 視覚的フィードバック付きの即座のレスポンス
08
コンポーネント
button 大文字表記の最小限テキストベースナビゲーション card ボーダーやシャドウのない写真要素 hero 大型画像を統合したフルブリードタイポグラフィヒーロー
09
文体と禁止事項
トーン 自信に満ち、プロフェッショナルで控えめ 見出し 太字、大文字、直接的なステートメント CTA ボタンなしのミニマルなテキストナビゲーション 角丸を使用しない — スクリーンショットではシャープな矩形のエッジを確認できます ドロップシャドウを追加しない — スクリーンショットではフラットでシャドウのないサーフェスを確認できます 複数の色を使用しない — スクリーンショットではブラックとウォームグレーのみを使用しています 密集したレイアウトを作成しない — スクリーンショットでは豊かな余白を確認できます 小文字の見出しを使用しない — スクリーンショットではすべて大文字テキストを使用しています 装飾的なボーダーを追加しない — スクリーンショットではボーダーレスのデザインを確認できます 避ける: 装飾的な要素 避ける: 複雑なアニメーション 避ける: 明るい色 避ける: 雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 実ページから取得 · 実 computed styles
11
System Prompt
これはRichard Ekwonyeのためのミニマリストなクリエイティブデベロッパーポートフォリオで、現在StripeのDesign Engineerです。デザインは暖色の中性背景(#E1DFDD)と黒色テキスト(#000000)を使用した厳格なモノクロームパレットを採用しています。タイポグラフィは幾何学サンセリフ(PP Neue Montreal)で、144pxのディスプレイタイプと16pxの本文テキストという極端なスケールコントラストが特徴です。重要なデザイン原則:全見出しの大文字表記を維持し、豊かな余白(170pxの垂直パディング)を保持し、装飾的な要素やボーダーを避け、ボーダーラジウスのないシャープな矩形形状を使用し、スムーズな1秒間のcubic-bezierトランジションを実装します。レイアウトは12カラムグリッドによる非対称で、視覚的な装飾よりもタイポグラフィ表現に焦点を当てています。
ライブラリからもっと
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
なぜ収録: 視覚的な複雑さよりも明確さとプロフェッショナルな提示を優先した、タイポグラフィ主導のポートフォリオデザインの優れた例です。