עיצוב אתר יוקרתי: איפוק, טיפוגרפיה, צילום ומהירות, והטעויות שגורמות לאתר להיראות זול
מה הופך אתר ליוקרתי: איפוק, טיפוגרפיה, מרווח, צילום, תנועה איטית ופחות מילים. מה נראה זול, טיפוגרפיה בעברית, מה בתי יוקרה עושים, ורשימת בדיקה.
מתוך המדריך: מדריך לבניית אתר לעסק: איך בונים אתר, שלב אחרי שלב
אתר יוקרתי נראה יוקרתי בגלל מה שאין בו: פחות מילים, פחות צבעים, פחות אלמנטים בכל מסך. מה שנשאר הוא צילום ברמה גבוהה, טיפוגרפיה מדויקת עם הרבה מרווח, תנועה איטית שיש לה סיבה, ושמות ועובדות במקום סיסמאות. והוא נטען מהר, גם עם תמונות גדולות. מה שהורס את התחושה מהר יותר מכל דבר אחר הוא סימנים של מבצע: פופ־אפים, באנרים של הנחה, ספירה לאחור ותמונות סטוק.
המאמר עוסק בעיצוב: מה רואים ומה מרגישים. אם האתר מוכר, את הצד המסחרי של חנות יוקרה, מתשלום ועד משלוח ואריזה, פירטנו במדריך לחנות אונליין יוקרתית.
מה הופך אתר ליוקרתי
איפוק
כל מסך עושה דבר אחד. תמונה אחת גדולה, שורת טקסט אחת, קישור אחד. בית יוקרה לא צריך להוכיח שיש לו הרבה; הוא בוחר. באתר, בחירה נראית כמו מעט פריטים בכל מסך ומרווח גדול סביבם.
טיפוגרפיה
גופן אחד או שניים לכל היותר, במשקלים מעטים. כותרות גדולות ודקות, טקסט רץ קטן ונוח לקריאה, ומרווח שורות נדיב. תוויות קטנות באותיות גדולות וברווח בין האותיות (באנגלית) משמשות לניווט ולקטגוריות, לא לגוף הטקסט. הדיוק כאן הוא הכול: אותו גודל לאותו תפקיד בכל עמוד.
מרווח
שוליים רחבים ורווחים גדולים בין פרקים הם לא בזבוז מקום. הם מה שנותן לכל פריט משקל. אתר צפוף נראה כמו קטלוג; אתר מרווח נראה כמו גלריה.
צילום
הצילום הוא רוב העבודה. מוצר בתאורה אחת עקבית, רקע אחד, ופרטים שרואים בהגדלה: חומר, תפר, ליטוש. תמונות אנשים עם המוצר, בשימוש, ולא רק מוצר מבודד. כשאין צילום ברמה הזאת, עדיף לדחות את ההשקה מאשר להשיק עם תמונות בינוניות. על הפקת צילומי מוצר, כולל ב־AI, כתבנו במדריך לצילום מוצרים ב־AI.
תנועה איטית ומכוונת
וידאו שקט ברקע, תמונה שנכנסת ברכות כשגוללים אליה, מעבר רך בין עמודים. תנועה ביוקרה איטית יותר מהרגיל, ותמיד משרתת משהו: להראות את החומר, את הזוהר של אבן, את החדר. אנימציות שקופצות, מסתובבות או מגיבות לכל תזוזה של העכבר עושות את ההפך. וצריך לכבד את מי שביקש מהמערכת פחות תנועה.
פחות מילים, יותר עובדות
שם המוצר, החומר, המידה, המקור, המחיר. "טבעת זהב 18 קראט, יהלום אובלי של 1.5 קראט, נעשתה בסדנה שלנו" אומרת יותר מכל פסקה על אלגנטיות נצחית. בתי יוקרה כותבים בשפה פשוטה, עם שמות אמיתיים: של הקולקציה, של הסדנה, של האבן. בלי סיסמאות, בלי ביקורות מומצאות, בלי סופרלטיבים.
מהירות למרות תמונות גדולות
אתר יוקרתי שנטען לאט מרגיש כמו חנות שהדלת שלה תקועה. תמונות בפורמטים מודרניים כמו WebP או AVIF, בגודל המתאים למסך, טעינה עצלה למה שמתחת לקפל, ווידאו דחוס בלי קול. Google מגדירה את הCore Web Vitals: התוכן הגדול בעמוד צריך להיטען תוך 2.5 שניות לכל היותר, והעמוד לא צריך לקפוץ בזמן הטעינה. זה אפשרי גם עם תמונה על כל המסך, אם בונים את זה כך מההתחלה.
מה גורם לאתר להיראות זול
| מה | למה זה נראה זול | מה עושים במקום |
|---|---|---|
| תמונות סטוק | הלקוח ראה אותן כבר, ואין בהן את המוצר שלכם | צילום של המוצר והמקום, או הדמיה מבוססת על המוצר האמיתי |
| גרדיאנט זהב, ברק ומרקמי שיש | חיקוי של חומר יקר במקום החומר עצמו | צבע אחד שקט; את החומר מראה הצילום |
| פופ־אפ בכניסה | מפריע לפני שהמבקר ראה משהו | הרשמה לדיוור בסוף העמוד או אחרי רכישה |
| באנר הנחה וספירה לאחור | אומר שהמחיר המלא לא שווה את המוצר | מחיר אחד, ברור, בלי מבצע קבוע |
| שלושה גופנים ויותר | אין היררכיה, והעין לא יודעת איפה לנוח | גופן אחד או שניים, משקלים מעטים |
| מלל ארוך בכל מסך | נראה כמו מכירה בכוח | משפט אחד, והפרטים בעמוד המוצר |
| צ׳אט קופץ, תגיות "נמכר!", אייקונים צבעוניים | רעש של חנות המונית | שירות לקוחות זמין אבל שקט, בקישור קבוע |
| אנימציה מהירה בכל מקום | מסיחה מהמוצר | תנועה במקום אחד או שניים, לאט |
טיפוגרפיה יוקרתית בעברית
רוב הדוגמאות של אתרי יוקרה הן באנגלית, והרבה ממה שעובד בהן לא עובר לעברית כמו שהוא. אלה הנקודות שדורשות החלטה נפרדת:
- אין אותיות גדולות. התוויות הקטנות באותיות גדולות עם ריווח, שמזוהות עם יוקרה באנגלית, אין להן מקבילה ישירה. בעברית ההיררכיה נבנית מגודל, ממשקל וממרווח, וריווח אותיות גדול מדי מפרק מילים.
- התאמה בין הגופן העברי ללטיני. שם מותג באנגלית ליד טקסט בעברית צריך להיראות כמו אותה משפחה: אותו משקל חזותי, אותו גובה נראה ואותה אופטיקה. לגופן סריף לטיני אין תמיד בן זוג עברי טוב, ולכן בוחרים את הזוג יחד.
- פחות משקלים ופחות גופנים לבחירה. מבחר גופני התצוגה בעברית קטן יותר. כדאי לבדוק מראש שיש לגופן את המשקלים הנדרשים, רישיון לרשת, ותמיכה בגרש ובגרשיים (׳ ״) ולא רק בגרש של מקלדת.
- אין נטוי אמיתי. הטיה מלאכותית של אותיות עבריות נראית כמו תקלה. להדגשה משתמשים במשקל או בגודל.
- כיווניות מעורבת. מספרים, מחירים, שמות באנגלית וסימני פיסוק בתוך משפט עברי יכולים להתהפך. בודקים כל שורה כזאת בדפדפן, לא רק בקובץ העיצוב.
- חצים ואייקונים. "הבא" מצביע שמאלה בעברית. גלריות, מחוונים וקישורים עם חץ צריכים גרסה מראה.
- גובה שורה. אותיות עבריות נראות קטנות יותר מלטיניות באותו גודל, ולכן לעתים צריך טקסט עברי גדול במעט כדי שהשורות ייראו שוות.
אתר בשתי שפות הוא עבודה על שתי גרסאות, לא על תרגום; פירטנו במדריך לאתר דו־לשוני.
מה בתי יוקרה עושים באתרים שלהם
באתרים של בתים כמו Tiffany, Cartier, Hermès ורשת המלונות Aman חוזרים כמה דפוסים, כל אחד בסגנון שלו:
- תמונה אחת שולטת במסך. בעמוד הבית, מוצר או מקום אחד בגודל מלא, ומעט מאוד טקסט עליו.
- שמות במקום תיאורים. שם הקולקציה, שם הדגם, שם המלון והמקום. התיאור קצר ועובדתי: חומר, אבן, מידה, מיקום.
- ניווט קצר. מספר קטגוריות קטן, בשפה פשוטה. בלי תפריט עמוס בעשרות קישורים בשורה הראשונה.
- שירות אישי מוצג כשירות. קביעת פגישה בבוטיק, חריטה, התאמת מידה, אריזה. הם מופיעים כחלק מהמותג ולא כתוספת מסחרית.
- אין סימני מבצע קבועים. לא באנרים של הנחות ולא ספירה לאחור בעמוד הבית.
- עקביות. אותה פלטה, אותם גופנים ואותה תאורה בצילום לאורך כל האתר, מהעמוד הראשון ועד המייל שאחרי הרכישה.
כדאי ללמוד מהמבנה ומהקצב שלהם, לא להעתיק את הסגנון. המותג שלכם צריך להיראות כמו עצמו.
עמוד מוצר יוקרתי
בחנות, עמוד המוצר הוא המקום שבו כל העקרונות נפגשים: גלריה גדולה עם הגדלה, שם, מחיר, חומרים ומידות בשפה פשוטה, מידע על משלוח, החזרה ואריזה לפני הכפתור, ואפשרות לשאול שאלה בכתב. מה צריך להיות בו ובאיזה סדר פירטנו במאמר על עמוד מוצר שמוכר.
רשימת בדיקה לאתר יוקרתי
- בכל מסך יש דבר אחד מרכזי, ומרווח סביבו.
- גופן אחד או שניים, עם תפקיד קבוע לכל גודל.
- כל התמונות מאותה הפקה או באותה שפה צילומית; אין סטוק.
- הטקסטים קצרים, עם שמות ועובדות, בלי סיסמאות ובלי ביקורות שלא נכתבו על ידי לקוחות אמיתיים.
- אין פופ־אפ בכניסה, אין באנר הנחה, אין ספירה לאחור.
- התנועה איטית, במקומות מעטים, ומכבדת הגדרה של פחות תנועה.
- העמוד נטען מהר בטלפון, והתמונות לא מזיזות את התוכן בזמן הטעינה.
- הניגודיות מספיקה לקריאה: לפי WCAG, לפחות 4.5:1 לטקסט רגיל ו־3:1 לטקסט גדול. טקסט אפור בהיר ודק על לבן הוא הטעות הנפוצה בעיצוב שקט.
- בעברית: זוג גופנים עברי־לטיני מתאים, גרשיים נכונים, חצים הפוכים, ושורות עם מספרים ואנגלית שנבדקו בדפדפן.
- האתר עומד בתקן הנגישות 5568, שנבנה בקוד ולא בתוסף.
- שירות, משלוח, החזרות ואריזה כתובים בבירור ובמקום קבוע.
כמה עולה אתר יוקרתי
המחיר נקבע כמו בכל אתר, לפי מספר התבניות, השפות והחיבורים, אבל באתר יוקרה שני סעיפים גדלים: הצילום או הפקת התמונות, והעבודה על פרטים, מתנועה ועד טיפוגרפיה בשתי שפות. את טווחי המחיר לפי סוג אתר פירטנו במאמר על עלות בניית אתר.
דוגמאות מהסטודיו
חנות התכשיטים OVELLE, בתמונה בראש העמוד, בנויה על העקרונות האלה: פלטה שחור־לבן, תמונה אחת בכל מסך, שמות קולקציות ועובדות על החומר. הדירות המרוהטות של ALBA מראות איך נדל״ן יוקרה מוצג בהדמיות תלת־ממד שקטות ולא בהבטחות, ופלטפורמת SKYLARK מראה שגם מערכת הזמנה של טיסות פרטיות יכולה להיות מאופקת ועניינית. אלה קונספטים שבנינו עם עסקים בדויים.
עיצוב אתרי יוקרה ב־Libra
אנחנו מעצבים ובונים אתרים וחנויות למותגי יוקרה, בעברית ובאנגלית, כולל הטקסטים, הפקת התמונות, הטיפוגרפיה בשתי השפות והנגישות. את העבודה פירטנו בעמוד אתרים, דפי נחיתה וחנויות. אם אתם מתכננים אתר למותג יוקרה, שלחו בריף עם המוצרים, מה כבר צולם ומה האתר צריך לעשות. נחזור במייל עם כיוון, מחיר בכתב ותאריך.
לא נמצא מונח כזה.
שאלות נפוצות
מה הופך אתר ליוקרתי?
איפוק: פחות מילים, פחות צבעים ודבר אחד בכל מסך. צילום ברמה גבוהה, טיפוגרפיה מדויקת עם מרווח, תנועה איטית ושמות ועובדות במקום סיסמאות. והאתר נטען מהר גם עם תמונות גדולות.
מה גורם לאתר להיראות זול?
תמונות סטוק, גרדיאנטים בזהב, פופ־אפים, באנרים של הנחה וספירה לאחור, יותר משני גופנים, מלל ארוך בכל מסך ואנימציות מהירות בכל מקום.
איך עושים טיפוגרפיה יוקרתית בעברית?
בונים היררכיה מגודל, משקל ומרווח, כי אין בעברית אותיות גדולות. בוחרים יחד זוג גופנים עברי ולטיני שנראים כמו משפחה אחת, לא משתמשים בנטוי מלאכותי, ובודקים בדפדפן שורות עם מספרים ואנגלית.
האם אתר יוקרתי יכול להיות מהיר עם תמונות גדולות?
כן, אם בונים אותו כך: פורמטים כמו WebP או AVIF, גודל תמונה לפי מסך, טעינה עצלה ווידאו דחוס. Google ממליצה שהתוכן הגדול בעמוד ייטען תוך 2.5 שניות לכל היותר.
האם אתר יוקרתי צריך לעמוד בתקן נגישות?
כן. אתר שנותן שירות לציבור בישראל נדרש לעמוד בתקן 5568 ברמה AA. בעיצוב שקט צריך לשים לב במיוחד לניגודיות של טקסט אפור בהיר ולכפתורים בלי תווית.
מה אפשר ללמוד מאתרים של בתי יוקרה?
את המבנה והקצב: תמונה אחת שולטת בכל מסך, שמות במקום תיאורים, ניווט קצר, שירות אישי שמוצג כחלק מהמותג, ואין סימני מבצע קבועים. את הסגנון עצמו לא מעתיקים.
להתחיל
רוצים את זה לעסק שלכם?
שלחו בריף קצר: שלוש שאלות חובה, והשאר רק אם בא לכם. חוזרים במייל עם כיוון, מחיר ותאריך כתובים.
