Spotify
חדר בקרה של ג'וקבוקס לילי
ממשק האינטרנט של ספוטיפיי הוא מרכז בקרת מדיה צפוף וכהה: בד ציור כמעט שחור מעוטר בעטיפת אלבומים תוססת, נגיעה ירוקה יחידה ובקרות בצורת גלולה. הטיפוגרפיה קומפקטית ותועלתנית - גופן גיאומטרי סאנס-סריף מעוצב בהתאמה אישית בגודל קטן, המאפשר לעטיפת האלבום ולתמונות האמן לעשות את עיקר העבודה החזותית. הפריסה היא מעטפת קבועה בת שתי עמודות (סרגל צד + הזנה ראשית) עם רשת של עטיפת אלבומים מרובעת ואווטארים עגולים, היוצרים חילופי קצב של סוגים גיאומטריים. הממשק נמנע משינויים חדים בגובה, ומסתמך על הבחנות שטח עדינות (כרטיסי #121212 על בד ציור #000000) ובנר גדול אחד עם גרדיאנט לאנרגיה. התוצאה היא תחושה של תא די ג'יי: צפוף במידע, חשוך מבחינה אקוסטית ומוכן לנגינה במבט חטוף.
פריסה קבועה בת שתי עמודות כוללת סרגל צד שמאלי ("הספרייה שלך") ואזור תוכן ראשי רספונסיבי. הסרגל העליון הוא סרגל שחור ברוחב מלא עם חיפוש משמאל ופעולות חשבון מימין. התוכן הראשי גולל אנכית, עם קרוסלות אופקיות של כרטיסים - שירים פופולריים ברשת מרובעת בת 5 עמודות, אמנים פופולריים ברשת מעגלית בת 5 עמודות, ואלבומים/סינגלים פופולריים ממשיכים דפוס זה. המרווח בין הסעיפים הוא קומפקטי (32 ס"מ). באנר המודעה התחתון מעוגן בתחתית חלון התצוגה. הניווט מנוהל אך ורק דרך הסרגל העליון וסרגל הצד - ללא תפריטי ענק או פירורי לחם. הקצב מתחלף: כרטיסים מרובעים → כרטיסים עגולים → כרטיסים מרובעים, ויוצר ניגוד גיאומטרי בין הסעיפים.
עטיפות אלבומים ותמונות אמנים הן התוכן הוויזואלי העיקרי. העטיפות מוצגות כקטעים מרובעים צפופים (יחס גובה-רוחב של 1:1) עם רדיוס של 6 פיקסלים - חדים מספיק כדי להיראות עריכתיים אך רכים מספיק כדי להיות עכשוויים. תמונות אמנים הן קטעים עגולים, המדגישים את הפנים כמזהה. הממשק הראשי נקי מתמונות דקורטיביות, תמונות לייף סטייל או גרפיקה מופשטת. האלמנט הוויזואלי היחיד שאינו צילומי הוא באנר גרדיאנט סגול-כחול בתחתית, המשמש כאלמנט היחיד של צבע המותג. האייקונים מינימליסטיים, מונולינאריים, לבנים על רקע כהה - קטנים ופונקציונליים, לעולם לא דקורטיביים.
לוּחַ הַצְבָעִים
מותג
- Spotify Green
#1ed760— ירוק משמש כצבע משני לפרטים דקורטיביים ולהדגשת שאילתות חיפוש נפוצות פחות. אין להשתמש בו כצבע העיקרי לקריאות לפעולה.
נֵטרָלִי
- Pure White
#ffffff— משטח תומך קליל ליצירת רקע דיסקרטי ולהפרדת מקטעים. אין להשתמש בו כצבע העיקרי עבור הקריאה לפעולה. - Signal Red
#b85850— אדום משמש כתוספת תומכת לפרטים דקורטיביים ולהדגשת צבעים לא שגרתיים. השתמשו בו כתוספת תומכת, לא כצבע סטטוס. - Void Black
#000000— בד ציור של דף, רקע ניווט עליון, שכבת פני השטח העמוקה ביותר - Carbon
#121212— משטחי קרטון, פאנלים צדדיים, שכבת משטח משנית מעל בד קנבס - Graphite
#1f1f1f— משטח מוגבה - מצבי ריחוף, שדות קלט, רכיבי ניווט נבחרים. - Smoke
#292929— רקע ניווט פעיל, אפקט תאורה אחורית קל.
טיפוגרפיה
מ-11 עד 24 פיקסלים · 4 שלבים
- SpotifyMixUI — תַחֲלִיף: Inter · קווי מתאר 400, 600, 700 · גוף הטקסט, ניווט, כפתורים, מטא-דאטה, כיתובים קטנים - עיצוב קומפקטי ועשיר במידע שנועד להיות עדין, המאפשר לאלמנטים האמנותיים לשלוט.
- SpotifyMixUITitle — תַחֲלִיף: Inter weight 700 · קווי מתאר 700 · כותרות סעיפים ("שירים פופולריים", "אמנים פופולריים") - גופן בגודל בינוני ובולט גורם לכותרות לבלוט מבלי להעמיס על רשת הכרטיס.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | צָפוּף |
| שלב בסיסי | 8-12px |
| רדיוס הכפתור | 9999px |
| רדיוס הכרטיס | 6px |
| צללים | מִינִימָלִי |
| בין סעיפים | 32-48px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Spotify ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Resend — קטיפה שחורה עם צבע ניאון סגול
- Neon — חדר שרתים לאחר רדת החשיכה. חושך טהור, שבו האור היחיד מגיע מנתונים ומאינטראקציות של משתמשים.
- Discord — עולם המשחק מוסתר מאחורי חלון צ'אט קופץ - כל מדור הוא סביבה עצמאית עם תאורה ודמויות משלו.
- Idle Finance — רחבת המסחר הניאון של טרמינלי הים העמוק היא טרמינל ימי אפל שבו אור כחול בודד חודר את האפלה.
- Midjourney — מסוף ביולומינסנטי במעמקי האוקיינוס. עולם עמוק בים שבו אינטליגנציה יוצרת את עצמה ויזואלית בזרמי ASCII, ובקרות מופיעות כדפוסים זוהרים קלושות.
- Netflix — מדף דיגיטלי אינסופי. חוויה קולנועית שבה מוצגת ספרייה אינסופית של תוכן על רקע תיאטרלי שחור לחלוטין.
- Wope — וופ הוא ממשק אופק סגול. דמיינו שולחן תצפית כהה עם אור סגול שמקרין מתחת לזכוכית.
- basement — מכונת דפוס ריקה בשעה 3 לפנות בוקר – גופנים ענקיים ודחוסים מתפרסים על פני האפלה המוחלטת, נצנוץ בודד של אור כתום על סרגל הניווט, כל השאר לבן או אפור רפאים.
- Ori — חדר השרתים בחצות הוא ריק שחור, אור לבן, מתג אחד דולק.
- Amaterasu — מקדש טורקיז שמימי
- Stink Studios — אולפן סרטים בחצות - המקרן מזמזם, החדר חשוך, רק הסרט מואר
- Obsidian — מאגר של ידע גבישי. מרחב דיגיטלי צלול ורב-גוני שנועד לבהירות ומיקוד, עם ורידים סגולים זוהרים של אינטראקציה.