Shop
קבוצת כוכבים מסחרית צפה על שיש לבן
החנות המקוונת פועלת על מודל "בד לבן", כאשר המוצרים מוצגים ככרטיסי תמונה גדולים ומעוקלים בכבדות ולא כרשתות של תמונות ממוזערות. הממשק כולו חלק להפליא: רדיוסים של 20-28 פיקסלים לכל אורכו, פקדים בצורת גלולה, וגוף GT Standard קומפקטי של 16 פיקסלים עם מעקב שלילי הדוק שהופך את הטקסט לחד ומודגש. הדגשה המודגשת היחידה של המערכת היא סגול עז (#5433eb), המופיע בלוגו, בשדה תוצאות החיפוש המעגלי וכצל כהה על אותו כפתור. שאר פלטת הצבעים היא ניטרלית חמה: משטחים לבנים, בד אפור קריר ועדין, גבולות עדינים וטקסט כמעט שחור. הצפיפות נשארת קומפקטית עם מרזבים של 12 פיקסלים, אך פסי הגיבור והקטגוריה נושמים הודות לקצב אנכי נדיב של 64-80 פיקסלים, מה שגורם לחוויית המסחר להרגיש יותר כמו גלישה מאשר קטלוג.
הרוחב המרבי הוא 1200 פיקסלים, ממורכז על בד קנבס שקוף #f2f4f5, עם סרגל צד קבוע ברוחב 64 פיקסלים בצד שמאל המכיל רק סמלי ניווט. האלמנט הראשי הוא פס ברוחב מלא, עם כרטיסי מוצרים הממוקמים מעל לוגו סגול של "חנות" במרכז, וסרגל חיפוש בצורת גלולה ישירות מתחתיו. גלולות הקטגוריות מסודרות בשורה אחת במרכז מתחת לסרגל החיפוש. מדורי התוכן (נשים, גברים, יופי, בית, תינוקות וילדים) מופיעים כרצועות ייעודיות, כל אחת מכילה רשת בת 4 עמודות עם תמונות מוצרים או קומפוזיציה בת 2 עמודות של "אלמנט ראשי ורשת". הקצב האנכי נדיב: 64-80 פיקסלים בין מדורים ראשיים. הכותרת התחתונה היא פס כהה בתחתית העמוד עם קבוצות קישורים בצורת עמודות. חיצי קרוסלה בצד ימין של לוחות המוצרים האופקיים מציינים תוכן הניתן לגלילה ללא נקודות דפדוף.
צילום הוא האלמנט החזותי הדומיננטי: תמונות מוצר במסך מלא על רקע לבן, תמונות חתוכות ביחס של 1:1, ותמונות לייף סטייל עם גוונים אדמתיים חמים (בז', טרקוטה, מרווה, שנהב). לתמונות מוצרים יש צבע משלהן - ממשק המשתמש נשאר אכרומטי, מה שמאפשר לגווני המוצר לספק גיוון חזותי. לוגואי מותג מופיעים כטקסט חופף על תמונות ראשיות כהות או בהירות, ולא כסמלים בודדים. בקומפוזיציה הראשית, כרטיסי מוצר ממוקמים כקבוצת כוכבים צפה, חופפת מעט, מעל סימן המילה. הסמלים מינימליסטיים ומונוכרומטיים (קווי מתאר שחורים), למעט סמלי קטגוריות, המשתמשים בצבע מותג יחיד. אין איורים, אפקטים תלת-ממדיים או מעברים בתמונות המוצר.
לוּחַ הַצְבָעִים
מותג
- Shop Violet
#5433eb— כפתור השליחה, סימן הטקסט המקווקו ולוגו המותג הם האלמנטים היחידים שמדגישים את הפעולה והאינדיבידואליות על הרקע הלבן. - Violet Wash
#c0b5f3— הילה שקופה מאחורי כפתור השליחה הסגול ששומרת על זוהרה מבלי לשנות את גוון הצבע.
נֵטרָלִי
- Canvas Mist
#f2f4f5— רקע הדף וטיפול פני שטח נוסף מאחורי כרטיסים מורמים. - Pure White
#ffffff— המשטח העיקרי לכרטיסים, שדות קלט, שלטים צפים וכפתורים בצורת גלולה. - Ink Black
#000000— טקסט עיקרי, כותרות, סמלים, סמלי ניווט וכרטיסי מוצר במצב כהה. - Faint Border
#ebebeb— קווי הפרדה דקים על גבי כרטיסים, קווי מתאר של שדות קלט ומסגרות כפתורים בצורת גלולה. - Muted Gray
#787574— טקסט משני, תוויות ניווט, קווי מתאר של סמלים כאשר לא פעילים - Cool Stone
#cccccc— מצייני מיקום, מצבים מושבתים ורקעים של סמלים לא פעילים
טיפוגרפיה
מ-11 עד 16 פיקסלים · 4 שלבים
- GT Standard — תַחֲלִיף: Inter · קווי מתאר 400 · הגופן העיקרי בכל הגדלים - הן לגוף הטקסט והן לכותרות. GTStandard-MRegular בגודל 16px/-0.031em הוא הגופן העיקרי לגוף הטקסט, כפתורים ותוויות. GTStandard-MSemibold בגודל 20px/-0.05em משמש למספר כותרות גדולות; GTStandard-MMedium בגודל 11–12px משמש לכיתובים קטנים. כל וריאנט גופן מוצג עם משקל אופטי של 400 - היררכיית גופנים מושגת באמצעות מעברי צבע עדינים וריווח אותיות שלילי צפוף, ולא ניגודיות מודגשת. זהו סגנון חתימה: Shop לא צועקת עם גופנים מודגשים, אלא מעצבת את הטקסט באמצעות ריווח אותיות.
- Shopify Sans — תַחֲלִיף: Inter · קווי מתאר 400, 700 · שמור להודעות ברמת המערכת כגון באנרים לטעינת אפליקציות וטקסט הסכמה לקובצי Cookie.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | מְמוּצָע |
| שלב בסיסי | 12px |
| רדיוס הכפתור | 9999px |
| רדיוס הכרטיס | 28px |
| צללים | צללים רכים |
| בין סעיפים | 64px |
| רוחב העמוד | 1200px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Shop ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Cursor — סדנת קלף נעימה, מוארת בגחלים בוערות
- Slush — יקום מתנפח של מדבקות על נייר פסטל
- MindMarket — ספר אגדות נעים על נייר בצבע קרם - בד עריכה ידידותי שבו כותרות גדולות של אינטר ודמויות נייר גזורות מתקיימות יחד על משטח שטוף שמש ורך כמדבקה.
- Airbnb — קיר גלריה לבן ושקט עם סימניה אדומה אלמוגית אחת
- Superr — מחברת בית ספר חמה באור אחר הצהריים הרך. דף בצבע קרם, טוש כתום ללא מכסה, וערימת מדבקות שם למינציה שמחכות להתקלף.
- Apple (España) — גלריית המוזיאון, באור יום רך, היא חלל לבן יחיד, שובה לב וחסר משקל, כאשר כל תערוכה מוארת בזרקור על קיר כהה קלות.
- Lamborghini — צבע מרכב שחור באולם התצוגה, מתחת לזרקורים - מכונית צהובה אחת
- Amplemarket — מקום עבודה שטוף שמש זרוע קונפטי
- Getharvest — שולחן כתיבה בשעת הזהב – קנבס קרם חם, גלויות לבנות תלויות על הבד, ולהבה כתומה בוהקת אחת
- Agence Foudre — עמוד השער של המגזין הוא בצבע ורוד רך המזכיר שפתון.
- Drive Capital — פוסטר רטרו לטיול בכביש על נייר חם
- Apple (España) — ויטרינת גלריה לבנה