משפחת עיצוב

Atelier

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

Atelier

warm and handcrafted

דף שלם בAtelier

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

הכי מתאים עבור

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

איך זה נראה

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

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

01 · טיפוגרפיה

הקול של Atelier.

כותרת ראשית · Fraunces

נעשה מתוך כוונה.

כותרת משנה ראשית · Inter

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

כותרת מקטע · Fraunces

כותרת מקטע ברמה השנייה

כותרת משנה של מקטע · Inter

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

כותרת כרטיס · Fraunces

כותרת כרטיס ברמה השלישית

גוף הטקסט · Inter

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

כיתוב

טקסט תומך קטן יותר, למידע נלווה ולהערות קצרות.

מידע נלווה · JetBrains Mono

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 · פלטה

הצבעים בפועל.

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

Backgroundcolor-mix(in srgb, rgb(244 63 94) 10%, white)
Surfacecolor-mix(in srgb, rgb(244 63 94) 4%, white)
Bordercolor-mix(in srgb, rgb(225 29 72) 12%, white)
Inkrgb(28,25,23)
Brandrgb(244 63 94)
Brand · strongrgb(251 113 133)
Accentrgb(225 29 72)
On brandrgb(15 23 42)

03 · רכיבי ממשק

אבני הבניין.

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

כפתורים

תגיות

רגילמודגשמתארכהה

תוויות

רגילמודגשמתארכהה

סטטוס

ניטרליהצלחהאזהרהסכנהמידע

רכיבי סינון

מיכלי סמלים

קטן
בינוני
גדול

שדות

04 · סוגי כרטיסים

איך התוכן יושב.

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

יכולת

עיצוב עם אופי משלו

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

טיפוגרפיהצבע

מחיר

מומלץ

מסלול לדוגמה

$20/ חודש

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

פרופיל

שם לדוגמהתפקיד לדוגמה

שורה קצרה על האדם: במה הוא עוסק ומתי הוא זמין.

זמיןבמשרה חלקית

נתון

128

מספר עם תווית קצרהנתון לדוגמה

המלצה

״כאן יושב ציטוט קצר של לקוח.״
לקוח לדוגמהחברה לדוגמה

05 · תנועה

איך זה זז.

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

כרטיס · ריחוף

עולה בריחוף והקו מתהדק

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

כפתור · מיקוד

עברו לכפתור שלמטה במקש Tab. טבעת המיקוד משתמשת בצבע המותג.

הפרטים

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

אופי

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

טיפוגרפיה

Fraunces · Inter · JetBrains Mono

פלטת ברירת מחדל: ורוד ורד. עוד 5 פלטות מומלצות למטה.

פחות מתאים עבור

  • לוחות נתונים ונתונים
  • תיעוד טכני
  • דפי השקה רועשים

במה הוא שונה מהאחרים

גם Editorial חם, אבל שקט וישר יותר. Cinematic משתמש באותו סוג כותרות על דף כמעט שחור.

פריסות מקטעים

כמה מפריסות המקטעים.

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

באנר

התוכן מתערם מעל פס תמונות רחב.

עמודה צדדית

עמודת טקסט לצד עמודת מדיה.

פסים

פסים אופקיים מתחלפים של טקסט ומדיה.

מודול ראשי

מודול מוביל שעוגן רשת תומכת.

בשביל מי האתר?

חינם ל־14 יום. בלי כרטיס. שום דבר לא מתפרסם עד שתאשרו.