
Glossier
צילומי שמש - נייר לבן, דיו שחור, נגיעה צהובה בוהקת אחת
Glossier מתפקד כמו מגזין יופי דיגיטלי: בד קנבס כמעט מונוכרום של לבן ושחור, מנוקד במבטא צהוב יחיד ותוסס המשמש גם כלוגו של המותג וגם כקריאה לפעולה היחידה. המערכת מאופקת מבחינה עריכתית - כותרות Apercu גדולות מדי, שטח טקסט נרחב, צילומי לייפסטייל בעמוד שלם הנושאים את עיקר המשקל הרגשי - ותועלתנית בביצוע: כרטיסי מוצר שטוחים, גבולות דקים וחוסר מוחלט בקישוטים. צהוב אינו צבע משני למותג; הוא המותג, בשימוש חסכוני, כך שכל הופעה מרגישה כמו הבזק של מצלמה. כל השאר נועד לדעוך אל הרקע: צבעים ניטרליים הם אפורים חמים עם תת גוון סומק עדין, הגבולות עדינים והכתב צפוף ודחוס. התוצאה היא חנות שמרגישה בטוחה, מאופקת ומודרנית ללא פשרות.
הדף מציג סדרה אנכית של מדורים במסך מלא, כל אחד מהם מעוצב כפריסת עריכה עצמאית. המדור הראשי הוא תמונה ברוחב מלא עם שכבת-על לבנה צפה (למעלה משמאל) ולוגו צהוב ענק התופס את כל תחתית הדף. מתחת למדור הראשי, מדורים מתחלפים בין תמונות במסך מלא לרשתות של כרטיסים בודדים. חלוקת הקטגוריות (טיפוח עור/איפור) לשתי עמודות עם יחס שווה של תמונות (50/50) מתרחשת ללא גבול גלוי - רק קו המחבר את התמונות מפריד ביניהן. קטלוג המוצרים משתמש ברשת בת ארבע עמודות של כרטיסים מרובעים על בד קנבס #f7f7f7. הניווט הוא סרגל עליון מינימליסטי עם פס פרסום משני מעליו. הפערים בין המדורים גדולים למדי (64 פיקסלים), אך המעברים בין המדורים חלקים - ללא חוצצים או צבעי רקע מתחלפים, למעט כותרת תחתונה חמה. הקצב הכללי הוא: צילום, טקסט, צילום, רשת, צילום - כמו דפדוף במגזין אופנה.
צילום הוא השפה החזותית הדומיננטית. כל אזור הצפייה מלא בתמונות לייף סטייל ופורטרטים - תאורת שעת הזהב החמה, תקריבים רכים של עור, ידיים אוחזות בבקבוקי מוצרים על רקע סנוור של שמש. פלטת הצבעים בתמונות חמה ולא רוויה: שמי אפרסק, גווני עור טרקוטה, כחול אוקיינוס עמוק. תמונות תמיד תופסות את כל שטח הדף, ללא פינות מעוגלות, מסגרות או שכבות, למעט כרטיסי טקסט לבנים או הלוגו הצהוב. תמונות מוצר בכרטיסי קטלוג מצולמות על רקע לבן טהור וחלק עם תאורה שטוחה ואחידה. יחס התמונה לטקסט הוא כ-70/30 - התמונות מעבירות רגש, הטקסט, פונקציונליות. אין איורים, אין גרפיקה מופשטת, אין הדמיות תלת-ממדיות.
לוּחַ הַצְבָעִים
מותג
- Glossier Yellow
#fff116— צהוב משמש כצבע משני לפרטים דקורטיביים ולהדגשת שאילתות חיפוש פחות נפוצות. אין להשתמש בו כצבע העיקרי לקריאה לפעולה.
נֵטרָלִי
- Ink
#000000— גוף הטקסט, קישורי ניווט, טקסט ראשי, טקסט כותרת תחתונה, קווי מתאר של סמלים, גבולות דקים; צבע טיפוגרפי ומבני דומיננטי. - Paper
#ffffff— משטחי כרטיסי מוצר, אזורי מילוי, פאנלים מורמים; רמת המשטח הבהירה ביותר בערימה. - Fog
#f7f7f7— בד ציור של הדף, רקעים של מקטעים, מעברים בין תמונות בדף; משטח הבסיס עליו ממוקם האתר כולו. - Blush
#faf2f4— רקע כותרת תחתונה, מחיצות רכות וחמות של העמודים; גוון ורדרד-לבן עדין מוסיף חמימות לתחתית העמודים. - Mist
#f0f0f0— משטח תומך קליל ליצירת רקע דיסקרטי ולהפרדת מקטעים. אין להשתמש בו כצבע העיקרי עבור הקריאה לפעולה. - Ash
#e8e8e8— גבולות שדות קלט, רקעי סמלים, קווי הפרדה דקים; צבע גבול מבני עבור כרטיסים ואלמנטים של טופס.
טיפוגרפיה
מ-12 עד 32 פיקסלים · 5 שלבים
- Apercu — תַחֲלִיף: Inter · קווי מתאר 400, 500, 700 · הגופן העיקרי משמש בכל ממשק המשתמש - גוף הטקסט ברזולוציה של 16 פיקסלים/400, ניווט וכתוביות ברזולוציה של 12-14 פיקסלים/500, כותרות משנה ברזולוציה של 20 פיקסלים/500 וכותרות מאמרים ברזולוציה של 32 פיקסלים/700. העיצוב הגיאומטרי וההומניסטי של Apercu מעניק למותג סגנון מודרני ודחוס; ריווח האותיות הכמעט אפסי (0.002-0.003 אלפא) הופך את הגופן לקומפקטי ומגזיני, ולא אוורירי או ידידותי. משקל הגופן של 700 שמור לאלמנטים של תצוגה במאמרי מערכת, ולא לאלמנטים של ממשק משתמש.
- Apercu Mono — תַחֲלִיף: JetBrains Mono or IBM Plex Mono · קווי מתאר 400 · טיפוגרפיה מיקרו-תועלתנית עבור מטא-נתונים של הזמנות, מספרי מעקב ותוויות ליד הקוד; הגרסה המונוספייסדת יוצרת מרקם טכני כנגד טיפוס גוף פרופורציונלי.
- GTStandard-M — תַחֲלִיף: Inter · קווי מתאר 400 · GTStandard-M - נמצא בנתונים שחולצו אך לא מתואר על ידי הבינה המלאכותית.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | מְמוּצָע |
| שלב בסיסי | 8px |
| רדיוס הכפתור | 0px |
| רדיוס הכרטיס | 0px |
| צללים | אין גבולות במקום צללים |
| בין סעיפים | 64px |
| רוחב העמוד | 1440px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Glossier ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Lightship — דיאורמה קולנועית של כביש פתוח. קירות גלריה בצבע קרם חם מעוטרים בתצלומי נוף גדולים המותקנים במרווחים קצרים, גופן שחור דק בקושי נראה על המסגרות, ונגיעת גוון כתום בוהק אחת שובר את המונוכרומטיקה כמו מדורה באחו.
- Faire ES — קטלוג סיטונאי של קרם חם
- Adanola — לוקבוק עריכה על נייר לבן. צילומי אופנה שבהם טיפוגרפיה וצילום נושמים על משטחים לבנים נקיים, עם דיו שחור כגופן וגופן סאנס-סריף עדין (Favorit), המשקף את הסגנון הכללי של המותג.
- Oura Ring — סדנת הכנת שיבולת שועל נעימה, שטופה באור יום רך
- Stykka — סדנה סקנדינבית באור לבן – אולם תצוגה שקט ומעוצב בעבודת יד שבו הקול היחיד הוא הצילום
- DJI — קנבס שחור בגוון תעופה וחלל עם גוון כחול חשמלי יחיד
- Altitude Beverages — כתיבת מגזין מונוכרום. דמיינו כתיבת מגזין אופנה נטולת כל צבע מלבד התמונות הנוספות - הטקסט והשטח הלבן מספרים את כל הסיפור.
- AATHER — כף יד פתוחה, להבה אחת - יוקרה שקטה הכלולה בדממה
- Cowboy — גלריית אופניים בלגית בסגנון פורצלן לבן כשלג. אולם תצוגה שבו משטחים מטים, גופנים גדולים בחומרי עריכה והיעדר כמעט לחלוטין של קישוט מושכים את העין לאופניים ולתכולתם.
- Refero — פריסת עריכה על שיש לבן - דף מוצר שנוצר על ידי טיפוגרף, כאשר הכותרת הסריף היא כרטיס הביקור של המותג, וכל השאר דיסקרטי
- Face Formula — דיוקן עריכה סקנדינבי. כתבה רגועה בסגנון מגזין, שבה מבטה של הדוגמנית והכותרת, שנכתבו בגופן סריף דחוס, מדברים בעד עצמם על רקע קריר וערפילי.
- Shupatto — ויטרינת מוזיאון על שיש לבן