Shopify
חממת חצות - סימני מסחר פורחים על רקע טורקיז עמוק, מוארים בניצוץ בודד של נענע
מערכת העיצוב של Shopify היא סדנת חצות למסחר: בד קנבס כמעט שחור בגוון ירוק טורקיז עמוק, גופן רחב ובטוח בגוון סאנס-סריף, וגוון מנטה תוסס יחיד שמפעיל רגעים אינטראקטיביים. הממשק דומה לחדר חושך, שבו מוצרים ומותגים הם מקור האור - תמונות וחנויות זוהרות על משטחים כמעט שחורים, בעוד אלמנטים כרום נסוגים. הרכיבים גיאומטריים אך רכים: כרטיסים ברדיוס של 12 פיקסלים עם גבולות דקים, כפתורים בצורת גלולה וגופן במשקל 330 שלוחש קנה מידה במקום צעקות. סימן פיסוק כרומטי יחיד (#36f4a4) משמש במשורה על קישורים, תגיות ומצבי מיקוד, תוך שמירה על צבע לרגעים פונקציונליים כדי להבטיח שסיפורי סוחרים יישארו נקודת המוקד החזותית.
הרוחב המרבי הוא כ-1280 פיקסלים, ממורכז, עם בלוקי פתיחה ברוחב מלא המשתרעים מעבר למכל התמונה. קצב העמוד מתחלף: (1) עמוד פתיחה כהה ברוחב מלא עם כותרת וכפתורי קריאה לפעולה, (2) מקטעים כהים נוחים עם בלוקי טקסט ותמונה ברוחב מרבי ב-2 עמודות או רשתות תמונות ב-3 עמודות, (3) פאנלים אינטראקטיביים לתצוגה (כרטיס מוצר, מחשבון משלוח, מפת עולם) המוצגים ככרטיסים מורמים על בד ציור עמוק יותר. הניווט הוא סרגל עליון קבוע עם הלוגו + 3 רכיבי ניווט + קישורים משניים + כפתור הקריאה לפעולה הראשי, כולם מיושרים ימינה. הקצב האנכי משתמש בפערים של 80 פיקסלים בין מקטעים עם מעבר חלק - ללא מחיצות בין מקטעים כהים, רק שינוי בגוון פני השטח.
העיצוב הוויזואלי מתמקד בעיקר בקמעונאי: תמונות מוצר בגודל מלא ותמונות מאירועי מותג נושאות את עיקר המשקל הוויזואלי, לרוב בצורת רקעים גדולים עם טקסט לבן מעליהם. התמונות חתוכות בקפידה, בעלות ניגודיות גבוהה וחגיגיות באופיין (צלצול פעמון נאסד"ק, ברכות קבוצתיות, תקריבים של מוצרים ביד). הרקע הכהה יוצר את הרושם שתמונות אלו מוארות על ידי זרקורים. האיורים מינימליסטיים - עבודת ההסבר העיקרית מתבצעת על ידי תמונות מוצר מוטמעות וצילומי מסך של חנויות. האייקונים הם מונוכרום, עם רוחב קו של 1.5-2 פיקסלים, בדרך כלל לבן או #36f4a4 עבור מצבים פעילים.
לוּחַ הַצְבָעִים
מותג
- Shopify Mint
#36f4a4— מחווני ניווט פעילים, טבעות מיקוד, הדגשות תגיות והדגשות ריחוף על קישורים הם הניצוץ הכרומטי היחיד שיוצר תחושה של אינטראקטיביות מופעלת על רקע כהה.
נֵטרָלִי
- Midnight Forest
#02090a— בד ציור של עמוד, תמונות רקע של כותרת עליונה, תמונות רקע של מקטע - Deep Lichen
#061a1c— משטחי כרטיסים עיקריים, פאנלים מורמים, בלוקי תוכן. - Shaded Fern
#072720— לוח ניווט, קלפים נוספים, הרמה כמעט ולא מורגשת של הלוח. - Spruce Border
#1e2c31— גבולות דקים לכרטיסים, קווי הפרדה, קווי מתאר של שדות קלט. - Abyss Indigo
#000a1e— משטח נוסף להטמעת מוצרים/הדגמות, פאנלים עם תיאורי פונקציות. - Pure White
#ffffff— טקסט עיקרי, מילוי כפתורים, כותרת, לוגואים.
טיפוגרפיה
מ-12 עד 70 פיקסלים · 8 שלבים
- Neue Haas Grotesk — תַחֲלִיף: Inter · קווי מתאר 330, 400, 500, 550, 600 · מערכת הטיפוגרפית המרכזית היא כותרות עם משקל גופן של 70-96 פיקסלים (330-400) שהן עדינות ולא רועשות; גוף הטקסט עם משקל גופן של 16-18 פיקסלים (400-500); וניווט וממשק משתמש עם משקל גופן של 14-16 פיקסלים (500-550). משקל הגופן הקל במיוחד של 330 בגדלי מסך גדולים הוא מאפיין ייחודי: הוא משדר ביטחון באמצעות איפוק ולא נפח.
- Inter Variable — תַחֲלִיף: Inter · קווי מתאר 400, 420, 450, 550 · סוג גופן משני המשמש באלמנטים של ממשק ניווט, הערות קטנות, פקדי טאבים ומיקרו-טקסט בתחתית העמוד. האותיות הקטנות הגדולות מעט יותר והריווח הסטנדרטי יותר בין האותיות הופכים אותו לקריא יותר בגדלים קומפקטיים. הוא מתאים גם למצבים שבהם גופן במשקל 420 ממלא את הפער בין גופן רגיל לגופן בגודל בינוני.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | מְמוּצָע |
| שלב בסיסי | 12px |
| רדיוס הכפתור | 9999px |
| רדיוס הכרטיס | 12px |
| צללים | אין גבולות במקום צללים |
| בין סעיפים | 80px |
| רוחב העמוד | 1280px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Shopify ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Retool — סדנת אובסידיאן חמימה - משטח לכלי עבודה מדויקים, מואר בגחלים בוערות, שבו הכל נוצר
- Elektron — לוח הבקרה של הציוד בחצות הוא בד ציור כמעט שחור, שבו תמונות המוצר זורחות בעוד שהממשק נותר כמעט בלתי נראה.
- REKKI — לוח בקרת הטיסה במעבדת הצילום
- OFFFICE : — גלריית נואר עטופה בגופן מונוליטי
- Clyde — אולם התצוגה, עם זרקור יחיד, הוא גלריה כמעט חשוכה שבה הצבע היחיד בחדר הוא כדור גרדיאנט חם.
- Channel Studio — מעבדת צילום בסטודיו עם אהיל אחד בצבע אלמוג
- Electronic Materials Office — גחל לוהט בגלריה מעוטרת בפחם
- ORYZO AI — חיבור מצולם על חדר חושך. חפץ בודד מרחף בחושך החמים, גופן קרם הוא הקישוט היחיד.
- Factory — מסוף "חדר המלחמה" בחצות. ה"מפעל" הוא לוח בקרה שחור בוהק שבו נוחת כרטיס לבן יחיד כמו משגר מואר בפנס - האובייקט היחיד בחדר הוא העבודה עצמה.
- Hungry Tiger — גרפיטי בצבעי כורכום על קיר הטנדור. פלטת צבעים אחידה של זהב וחום חלוד, עם גופן כה גדול עד שנראה יותר כמו שלט של שוק תבלינים מאשר אתר אינטרנט.
- Bibliothèque — גלריה שחורה בצורת קובייה תחת זרקור – צלחת מוארת בודדה באולם עצום וחשוך
- Apple (España) — תיאטרון שחור עם גופי תאורה