מתחילים פרויקט מתחילים
מקרי בוחןתבנית מקרה · Traditional
עמוד הזן Mamba 8 של Traditional: השם באותיות סגולות על זהב, עם שלוש צנצנות ומכסה מרחף לפניו
Traditionalמותג תפרחות · אתר קונספט
עמוד הקולקציה של Traditional, מדף הצנצנות: שמונה אריחים עם צנצנות Gelato, OG, Lollipops, Mamba 24, Cookies & Cream, Black Diamonds, Suga' Pie ו-Root Beer Float
הקולקציות מציגות את המבחר דרך האריזות הקיימות של המותג.

שירותים

  • עיצוב אתר
  • עיצוב UX/UI
  • פיתוח פרונטאנד

כלים

  • בדיקת אתר
  • ניתוח מבחר
  • מחקר מותג
  • ניתוח מקורות השראה
  • בחינת כללי הפרסום
  • תרחישי משתמש
  • ארכיטקטורת מידע

מערך טכנולוגי

  • React
  • React Router
  • TypeScript
  • Vite
  • MapLibre GL
  • View Transitions API
  • משתני CSS

Traditional

קונספט אתר ביוזמה עצמית ל-Traditional, מותג קנאביס מלוס אנג'לס. תרגמנו את אופי האריזות לעמודי זנים מלאי הבעה, הנתמכים בקטלוג ברור, פורמטים של מוצרים ומאתר חנויות.

העברת אופי האריזה לרשת

האריזות של Traditional נותנות לכל זן צבעים ואיורים משלו. רצינו לשמר את הייחוד הזה באתר שמנגיש גם מבחר מגוון: מהו הזן, באילו פורמטים הוא מגיע והיכן למצוא את המותג.

התרומה שלנו

פיתחנו את קונספט האתר, ארכיטקטורת המידע, העיצוב החזותי והפרונטאנד. האריזות והתמונות הקיימות של המותג היו חומר הגלם לקומפוזיציות העמודים, לטיפוגרפיה, למערכת הצבעים ולאינטראקציות שלנו.

נתנו לאתר שני מצבים משלימים: עמודים מלאי הבעה לגילוי זן וקטלוג שקט יותר להשוואת המבחר. מבנה עמוד משותף מאפשר לכל זן לשמור על זהותו ולהישאר חלק מאתר אחד.

מערכת אחת, ביטויים שונים

כל זן משלב את תמונת האריזה, הפלטה והתוכן שלו עם מבנה עמוד לשימוש חוזר. קולקציות, פורמטים ומידע על חנויות מחברים את הסיפור החזותי למסלול מעשי במבחר.

עמוד הזן Mamba 24: השם באותיות זהב בהיר עם מרקם קשקשי נחש על רקע סגול, הצנצנת הסגולה לפניו וחופפת לאותיות
Mamba 24: צבע, כיתוב וקומפוזיציה ממשיכים את השפה החזותית של האריזה.
שישה עמודי זנים המבוססים על פריסה אחת, כל אחד עם תמונת אריזה ופלטת צבעים משלו: Caicos, Milks, Gelato, Blue Donut, Strawberry Milkshake ו-Space OG
שישה עמודי זנים מראים כיצד קומפוזיציה אחת מתאימה לזהויות שונות.

תנו לכל זן לשמור על אופיו.

התייחסנו לפתיחה של כל עמוד זן כאל כרזה. האריזה חופפת לשם המוגדל, והצבעים והפרטים הגרפיים שלה נמשכים לרקע ולטיפוגרפיה.

Mamba 24 משלב רקע סגול עם כיתוב זהב בעל מרקם. זנים אחרים משתמשים באותה קומפוזיציה עם פלטות ותמונות אריזה משלהם. בנינו את הגיוון בתוך מערכת העמודים, כך שהוספת זן אינה מחייבת עיצוב פריסה נוספת.

קטלוג מוצרים בסינון סדרת Traditional ו-Indica: מסננים עם מספרי תוצאות, רשימת שבעה זנים, OG נבחר עם המקור הגנטי, הארומה, הטעם והפורמטים שלו וצנצנת צהובה בגלריה
המבחר המסונן, הזן שנבחר והפורמטים שלו נשארים גלויים יחד.

תנו להשוואה סביבה רגועה יותר.

מבקר שמשווה בין כמה זנים צריך מידע יציב ופקדים ברורים. הצבנו את הקטלוג על רקע ניטרלי, עם מסננים לפי סדרה, סוג וטעם ופרטי הזן שנבחר לצד הרשימה.

מספרי התוצאות במסננים מציגים את האפשרויות הזמינות. במחשב, הפאנל שומר על גובהו כשהבחירה משתנה, ומצב הסינון נשמר בכתובת כדי לאפשר שיתוף של תצוגה מסוימת.

מסך הפורמטים של Milks על רקע אדום: שלושה כרטיסים לצנצנת, Minis ופרה-רול, כל אחד עם האריזה והגודל שלו
Milks: צנצנת, Minis ופרה-רול כפורמטים של אותו זן.

שמרו על קשר בין הזן לפורמטים שלו.

אותו זן יכול להגיע בצנצנת, ב-Minis או בפרה-רול. השארנו את האפשרויות האלה בתוך עמוד הזן ונתנו לכל פורמט תמונת אריזה וגדלים משלו.

כך הקשר ברור לפני שהמבקר עובר לקישור חיצוני לחנות. זהות הזן נשמרת; הפורמט משתנה.

עמוד הזן Milks בטלפון: כיתוב בצבע שמנת על רקע אדום כהה, עם שלוש צנצנות אדומות החופפות לשם
Milks: כרזה
מסך הפורמטים של Milks בטלפון: צנצנת, Minis ופרה-רול מסודרים ככרטיסים על רקע אדום, כל אחד עם האריזה, הגודל וכפתור קנייה ב-Weedmaps
Milks: פורמטים

שמרו על הזהות החזותית במסך קטן יותר.

התאמנו את הכרזה לקומפוזיציה ניידת בגובה מלא, תוך שמירה על שם הזן, האריזה והצבע יחד. כרזת Milks מובילה לפורמטים של אותו זן.

בהמשך, כרטיסי הפורמטים נערמים בטור אחד, עם גדלים והפעולה הבאה בכל כרטיס. הפריסה הניידת משמרת את הפתיחה מלאת ההבעה ואת הרצף המעשי שאחריה.

חלון «מצאו לידכם» מעל עמוד מטושטש בגוון טורקיז: מפת לוס אנג'לס עם ארבעה סימוני חנויות וקרדיט OpenStreetMap, וכרטיס לכל חנות מתחתיה
מפה אחת מחברת את ארבעת המיקומים עם הוראות הגעה ועמודי חנויות חיצוניים.

חברו את הגילוי למקום.

מאתר החנויות זמין מכותרת כל עמוד. איחדנו ארבעה מיקומים בלוס אנג'לס במפה אחת, עם כתובות, הוראות הגעה וקישורים לעמודי Weedmaps שלהם.

תפקיד הקונספט הוא להציג את המבחר ולעזור לאנשים למצוא חנות. פעולות מוצר ומיקום מובילות ל-Weedmaps; באתר עצמו אין תשלום.

קונספט אתר מלא הבנוי סביב המבחר.

הקונספט הפעיל מחבר סיפורי זנים נפרדים, קטלוג עם סינון, בחירת פורמטים ומיקומי חנויות במערכת חזותית אחת, מותאמת למחשב ולטלפון.

מקרים נוספים

HE