
Substack
דיו כתום על השולחן במשרד העורכים
Substack נראה כמו לוח מחוונים משומש של חדר חדשות - בד קנבס לבן, טקסט חם, כמעט שחור, וגימור כתום בוהק יחיד המסמן כל שלב ביצירת תוכן. ההיררכיה החזותית בנויה על צפיפות ולא על קישוט: קווים אפורים דקים מפרידים בין אלמנטים בפיד, אווטארים קטנים, מטא-דאטה מושתק, ועינו של הקורא מאומנת להתמקד בקריאה לפעולה הכתומה, בלוגו הכתום, בקישור "הירשם" הכתום ובכפתור הכתום "צור". המשטחים נשמרים שטוחים ולא מוגבלים - ללא צללי כרטיסים, ללא אלמנטים של פאנל כרום - מה שמאפשר לטיפוגרפיה (אלמנט ממשק משתמש כרום קומפקטי בשילוב עם גופן כותרת מותאם אישית של serif) לשאת את עיקר המשקל העריכתי. הסגנון הייחודי הוא אלמנטים כרום מאופקים ונגיעות צבעוניות תוססות: אפליקציית קריאה שמרגישה כמו כלי פרסום.
פריסת שולחן עבודה בת שלוש עמודות: סרגל צד שמאלי קבוע (כ-200 פיקסלים, ניווט עם סמלים ותוויות, סרגל דביק), פיד מרכזי (רוחב מקסימלי כ-600 פיקסלים, רשימת פוסטים נגללת אנכית) וסרגל צד ימני קבוע (כ-300 פיקסלים, חיפוש + המלצות + הרשמה). הפיד המרכזי הוא הליבה העריכתית - ללא כרטיסים, רק פוסטים מוערמים זה על גבי זה עם חוצצים דקים ורווחים של 32 פיקסלים בין הסעיפים. הבאנר הראשי ממוקם בראש הפיד ככרטיס יחיד ברוחב מלא. סרגל הצד השמאלי מכיל את לוגו המותג (שלט כתום עם קווים שמעליהם), שישה פריטי ניווט וכפתור "צור" כתום ברוחב מלא בתחתית. סרגל הצד הימני מכיל שדה חיפוש, כרטיס הרשמה ורשימת "הבא בתור" לקריאה. הניווט מינימלי - ללא סרגל עליון, ללא פירורי לחם; סרגל הצד הוא הניווט. צפיפות התוכן גבוהה: פוסטים משתמשים במטא-דאטה של 12-13 פיקסלים וטקסט גוף של 15-19 פיקסלים, מה שיוצר קצב דמוי עיתון ולא תחושה של רשת כרטיסים של שוק.
תמונות הן תוכן שנוצר על ידי משתמשים (אווטארים של מחברים, תמונות ממוזערות של פוסטים) - Substack אינו מספק תמונות דקורטיביות משלו. הכרטיס הראשי משתמש בגרדיאנט טורקיז-ירוק עם אלמנטים להמחשה מופשטים (צורות גיאומטריות, חפצים מסוגננים כמו עטים ופתקים) כרקע. תמונות ממוזערות של פוסטים בסרגל הצד הימני הן קטנות (64 פיקסלים), תחומות ברדיוס של 8 פיקסלים, ומתפקדות כתצוגה מקדימה של רשימת הקריאה. השפה החזותית הכוללת מבוססת טקסט: הממשק הוא בד קריאה, ותמונות משמשות כעוגנים חזותיים קטנים במקום ליצור אווירה.
לוּחַ הַצְבָעִים
מותג
- Signal Orange
#ff6719— כתום משמש כצבע משני לפרטים דקורטיביים ולהדגשת רמזים לא נדירים. אין להשתמש בו כצבע העיקרי לקריאות לפעולה.
נֵטרָלִי
- Ink
#363737— גוף הטקסט - הטקסט הראשי, כותרות, כותרות פוסטים, חותמות זמן ושמות מחברים; צבע חם, כמעט שחור, במקום #000 טהור לקריאה קלה יותר. - Paper
#ffffff— בד הציור של הדף, משטחי הכרטיסים, שדות הקלט ורקע הניווט הם המשטחים הדומיננטיים התופסים את הרוב המכריע של הממשק. - Charcoal
#232525— מצב ריחוף עבור טקסט נוסף וקישורים עם רמות בחירה גבוהות; עמוק יותר ממצב דיו עבור בלוקי קוד ובלוקי בחירה. - Stone
#777777— צבע ניטרלי נתמך עבור רכיבי ממשק משתמש משניים, מחיצות ותוויות מושתקות. אין להשתמש בו כצבע הראשי עבור קריאות לפעולה. - Ash
#b6b6b6— קווי גבול דקים, קווי מתאר של כפתורים, קווי מתאר של סמלים, גבולות על פקדים מושבתים. - Mist
#c8c8c8— קווי חלוקה, רקע דיסקרטי לאייקונים, מילוי תאים ריקים בצורת שלד.
טיפוגרפיה
מ-12 עד 32 פיקסלים · 5 שלבים
- system-ui — תַחֲלִיף: -apple-system · קווי מתאר 400, 500, 600 · הגופן העיקרי עבור ממשק המשתמש וגוף הטקסט משמש לתוויות ניווט, כפתורים, טקסט הודעה, מטא-נתונים, שדות קלט וכל רכיבי הממשק. גדלים קומפקטיים של 12-13 פיקסלים עבור מטא-נתונים ו-15-19 פיקסלים עבור גוף הטקסט יוצרים תחושה של פיד חדשות צפוף. המשקל הוא 400 עבור גוף הטקסט, 500 עבור רכיבי ניווט ותוויות כפתורים, ו-600 עבור כותרות הודעות וכותרות סעיפים מודגשות.
- Cahuenga — תַחֲלִיף: Charter · קווי מתאר 500 · גופן סריף דקורטיבי ייחודי לכותרות ברמת המוצר (כותרות צד, כותרות כרטיסי רישום, טקסט ראשי). משקלו הבינוני וגובה השורות הקל שלו מעניקים לו מראה מכובד מבלי להרגיש מגושם; זהו הגופן היחיד שמלבד הצבע הכתום, מסמן את זהותה של Substack.
- Spectral — תַחֲלִיף: Charter · קווי מתאר 400 · גופן serif לפוסטים ארוכים - משמש בחדרי קריאה ובתוכן חדשותי כדי לשפר את הקריאות של חומרי מערכת. ריווח שורות מעט צר יותר (1.20) מבטיח קריאת פסקאות נוחה תוך שמירה על הקומפקטיות האופיינית לחדרי חדשות.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | צָפוּף |
| שלב בסיסי | 8px |
| רדיוס הכפתור | 9999px |
| רדיוס הכרטיס | 12px |
| צללים | אין גבולות במקום צללים |
| בין סעיפים | 32px |
| רוחב העמוד | 1200px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Substack ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- ElevenLabs — חיבור מצולם בגווני קרם חמים עם כותרות עדינות. מחברת בסגנון באוהאוס - נייר בצבע קליפת ביצה, דיו שחור, וגימור סגול וכתום יחיד לתצוגת מוצרים.
- Awesomic — רשת אבץ עריכתית עם סימני פיסוק כתומים המזכירים קונפטי
- Monad — כתב עת טכני עריכה על קלף חם
- Dub — לוח הבקרה של נייר האורז המט של לינק
- Seline Analytics — שולחן אנליטי שקט על נייר חם
- Notion — מחברת נייר חמה בשמש הצהריים
- Anthropic — כתב עת מדעי על קלף חם - משטחים בצבע שנהב רגועים, כותרות עריכה מסומנות, והדגשת חרס יחידה המופיעה רק כאשר נדרשת פעולה.
- Calendly — דיו כחול כהה על שיש קר
- Augen Pro — המצגת הלבנה של אפל מציגה גוון כחול חשמלי קליני, חסר משקל וחסר גוון כמבטא יחיד בחלל מונוכרום.
- Antimetal — כרוניקה מערכתית על נייר בצבע קרם - בוקר שקט בכתב עת מדעי, שבו איפוק משדר ביטחון וסריפים עושים את העבודה הקשה
- Perk — ליים חשמלי על נייר אפייה חם
- Ditto — סדנה שטופת שמש ליצירת דוגמיות פרחי בר. משטחים חמים בצבע קרם, צבע בסיס צהוב עז, דיו כחול כהה עמוק, צורות צבע אורגניות פורחות מאחורי היצירה.