Framer
גלריית ניאון בחלל
ה-Framer פועל כחושך כמעט מוחלט - בד ציור שחור שבו התוכן מרחף כמו שלט ניאון בפתיחת גלריה. כותרות, המעוצבות בגופן GT Walsheim Medium עם מרווח שורות צר של 0.8-1.1 וריווח אותיות שלילי אגרסיבי (-0.04em ב-54 פיקסלים), יוצרות גופן דחוס ודקורטיבי שדוחף קדימה במקום לשבת בצורה מסודרת על הדף. כחול חשמלי יחיד (#0099ff) מספק את כל הדגשים הפונקציונליים - גבולות, זוהר, סמלים, מצבים פעילים - בעוד ששאר הממשק נשאר אכרומטי, ומסתמך על מעברים אפורים עדינים (#111, #171717, #242424) כדי ליצור עומק משחור טהור. רכיבים מרגישים מתחשבים ולא דקורטיביים: רדיוסים מעוגלים של 8-25 פיקסלים, גבולות דקים של פיקסל אחד, צלליות מינימליות ומשטחים שקופים המאפשרים לחלל לזרוח דרכו.
מקטעים ברוחב מלא משתרעים מעבר לבד הציור השחור, כאשר התוכן מוגבל לרוחב מרבי של כ-1200 פיקסלים וממורכז בתוכו. המקטע הראשי כולל כותרת מיושרת לשמאל וכפתור קריאה לפעולה (CTA) יחיד, כאשר הצד הימני נותר ריק במכוון - באופן אסימטרי, לא ממורכז. המקטעים מתחלפים בין פריסות טקסט בלבד (כותרת גדולה + תת-טקסט) לבין צילומי מסך של המוצר. המקטע "מגיע עם מסגרת" משתמש בקיר לוגו ברשת בת 4 עמודות. במקטע הקהילה, צילום מסך של המוצר ממוקם בתוך מיכל מרוכז ברוחב מלא עם פינות מעוגלות. הניווט מינימלי - סרגל עליון דק עם הלוגו משמאל וקישורים מיושרים לימין, ללא פקדים גלויים. קצב המקטעים: פערים אנכיים משמעותיים של 80 פיקסלים בין המקטעים, היוצרים איים נפרדים של תוכן הצפים בחלל.
צילומי מסך של ממשק המשתמש של המוצר שולטים - ממוסגרים בחלון דמוי כרום עם נקודות רמזור, צילומי מסך מוטמעים של האפליקציה הופכים לתמונה הראשית. לוגואים, המשמשים כהוכחה לאיכות, מוצגים באותיות לבנות על רקע שחור עם מרווחים רחבים. לא נעשה שימוש בצילומים, איורים או גרפיקה מופשטת - השפה החזותית היא המוצר עצמו, המוצג כממשק חי. סגנון אייקונים: מינימליסטי, עם קווי מתאר, מונוכרום ולבן בגדלים קטנים. צפיפות טקסט: בעיקר טקסט, עם קטעים גדולים מדי פעם בצורת צילומי מסך של המוצר. האיזון החזותי של החלל מעדיף בבירור טיפוגרפיה על פני תמונות.
לוּחַ הַצְבָעִים
מותג
- Vivid Violet
#0066ff— כפתור הפעולה הראשי הוא המקום היחיד בממשק שבו מוצג רקע של כפתור בצבע אחיד.
נֵטרָלִי
- Bone
#ffffff— כותרות ראשיות, טקסט עיקרי על רקע כהה, רקע הכפתורים הוא מקור האור היחיד. - Void
#000000— בד הציור של הדף, רקע הניווט, משטחי הכרטיס, מילוי הסמלים - כולם בצבע שחור אינסופי הסופג את כל התוכן הלא חיוני. - Graphite
#111111— משטחי כרטיסים מורמים הם צעד אחד מעל החלל - כרטיסים גדולים ופונקציונליים ומיכלים מודאליים. - Obsidian
#171717— משטח ביניים עבור כפתורים, כרטיסים נוספים, מילויי ממשק משתמש - מפריד אלמנטים אינטראקטיביים מהקנבס. - Slate
#242424— בעת ריחוף, שדות קלט ופאנלים מוזחים הם בגוון ניטרלי בהיר ביותר לפני המעבר לפורמט טקסט. - Ash
#333333— מילוי עמוק עבור תמונות רקע ואלמנטים מבניים לא פעילות.
טיפוגרפיה
מ-12 עד 68 פיקסלים · 8 צעדים
- sans-serif — תַחֲלִיף: Inter · קווי מתאר 400 · sans-serif - נמצא בנתונים שחולצו אך לא מתואר על ידי הבינה המלאכותית.
- GT Walsheim — תַחֲלִיף: Inter Tight · קווי מתאר 500 · הגופן לכותרות וכותרות הוא גופן המותג. הוא דחוס בצורה אגרסיבית, עם מרווח שורות של 0.8-1.1 ומרווח אותיות של -0.04em עד -0.05em בטווח של 44-68px. זה לא אלמנט דקורטיבי; החמימות הגיאומטרית של GT Walsheim, בשילוב עם מדדים מחמירים, יוצרים את קול המערכת - בטוח בעצמו, קומפקטי ומעט עתידני. לביטוי גיאומטרי דומה, שקלו את Inter Tight או Space Grotesk Bold.
- Inter Variable — תַחֲלִיף: Inter · קווי מתאר 400 · הטקסט הראשי, הניווט והכותרות המשניות הם סוס העבודה. ציר Inter Variable מאפשר אינטרפולציה חלקה של משקלים. המעקב מצטמצם ככל שהגודל גדל: מ-0.001em ל-18 פיקסלים ומ-0.027em ל-22 פיקסלים. גרסת המשתנה מאפשרת מיקרו-אנימציות חלקות של האתר. תחליף: Inter ( Google) - גיבוי כמעט זהה.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | מְמוּצָע |
| שלב בסיסי | 10px |
| רדיוס הכפתור | 9999px |
| רדיוס הכרטיס | 20px |
| צללים | אין גבולות במקום צללים |
| בין סעיפים | 80px |
| רוחב העמוד | 1200px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Framer ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Auros — מסוף תהומי עם כדורי נתונים ביולומינסנטיים
- Origin Financial — גלריה חצות של פאר שקט. חדר שקט, כמעט חשוך, שבו גופני סריפים גדולים וכמה פאנלים צבעוניים מוארים יוצרים את התחושה שתחום הפיננסים הוא יצירת אמנות שנבחרה בקפידה.
- Raycast — מרכז פיקוד חצות, קורל ניאון
- Dimension — תחנת עבודה מוארת עם דמדומים ופאנלים מזכוכית חלבית
- Reflect Notes — חלל סגול זרוע כוכבים הוא מצפה כוכבים אפל שבו תווים מרחפים כמו קבוצות כוכבים על רקע של ריקנות כמעט בצבע אינדיגו שחור.
- Ameba — חדר הבקרה בחצות - פעימה כחולה חשמלית בתוך לוחות זכוכית חלבית
- Branding — קיר גלריה שחור, נגיעות אדומות דם - גופנים לבנים גדולים צפים על בד קנבס כהה הדומה לחלל ריק, נקטע על ידי נגיעת אדום בוהקת אחת ואלמנטים דקורטיביים בולטים שנראים יותר כמו שילוט גלריה מאשר ממשק אינטרנט.
- Harness — בקרת משימה בחצות עם נגיעות ירוקות זרחניות
- Koto — גלריית אובסידיאן בחצות. במה כמעט שחורה כמשהו, שבה מקור האור החם היחיד הוא טוש צהוב יחיד, וכתב דחוס מרחף בחלל השלילי העצום כמו פוסטרים של תערוכה.
- Ohzi — קובייה זוהרת תלויה בגלריה חשוכה
- Depot — מסוף שרת חשוך. קונסולת מפתחים כמעט שחורה, עם נורית LED ירוקה אחת המסמנת את תחילת העבודה, ושאר ממשק המשתמש מוצג בגרפיט.
- Maciej Zadykowicz — גלריית חצות, עם ציור הקיר הקליידוסקופי שלה, היא קיר סטודיו כמעט שחור, שבו יצירת אמנות טיפוגרפית תוססת וצבעונית אחת מושכת תשומת לב בעוד שכל השאר נותר שקט ומכוון.