הנחיות עיצוב מיתוג

מאי 5, 2024 | 5 דקות קריאה

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

תפיסה כללית

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

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

עבור אלה שיש להם ידע מסוים ב-HTML ו-CSS, קיימת גם אפשרות להתאים אישית את החוויה על ידי הוספת קוד CSS ו-HTML מותאם אישית.

צבעים

Eventact משתמשת בשתי ערכות צבעים בכל פרויקט: "ערכת הצבעים הראשית" ו"ערכת הצבעים החלופית."

"ערכת הצבעים הראשית" משמשת לאזור התוכן הראשי בו מוצג המידע.

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

ערכת הצבעים כוללת:

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

נגישות צבעים : יש להבטיח שצבעי הטקסט והרקע מספקים ניגודיות מספקת לקריאות. המערכת בודקת זאת ותתריע אם הניגודיות אינה מספקת. יש לשאוף ליחס ניגודיות מינימלי של 4.5:1, כפי שמומלץ על ידי WCAG 2.2.

שימוש בצבעים בטפסים

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

שימוש בצבעים באתרי אינטרנט

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

שימוש בצבעים בלוח הזמנים

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

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

שימוש בצבעים באפליקציית האירוע

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

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

גופנים

Eventact מאפשרת למשתמשים לציין את הגופן להצגת טקסט ותומכת בשלושה סוגים עיקריים של גופנים:

• גופני Web Safe סטנדרטיים - אלה הם גופנים שמותקנים מראש על רוב מחשבי המשתמשים ונתמכים על ידי רוב דפדפני האינטרנט. בשל המגוון המוגבל ואפשרויות ההתאמה האישית, הם נמצאים בשימוש נדיר באתרי אינטרנט מודרניים.
• גופני Google - זוהי ספריה עצומה של גופנים המאוחסנת על ידי Google ונמצאת בשימוש נרחב באתרי אינטרנט בזכות האיכות, הרישוי החינמי וקלות היישום שלהם.
• גופנים מותאמים אישית - אלה הם גופנים שמקורם בספקים שונים או שנוצרו במיוחד עבור מותג. הם מופצים בפורמטי קבצים כמו OTF, WOFF ו-TrueType ולעתים קרובות דורשים רישיון לשימוש באתרי אינטרנט.

שימוש בגופני Google

ניתן לבחור גופן Google על ידי הזנת שם הגופן בשדה המיועד. לדוגמה, ניתן להשתמש ב-"Roboto", "Open Sans" או "Montserrat".

בנוסף לבחירת שם הגופן, ניתן לציין את משקל הגופן על ידי הוספת נקודתיים (:) ואחריהן המשקל הרצוי. משקל הגופן קובע את עובי הגופן. משקלים נפוצים כוללים 300 (דק), 400 (רגיל) ו-700 (מודגש).

לדוגמה, ניתן להשתמש ב-"Raleway:700" לכותרות ו-"Roboto:400" לטקסט רגיל.

שימוש בגופנים מותאמים אישית

Eventact תומכת בגופני OTF, WOFF ו-TrueType.

כדי להשתמש בקובץ גופן מותאם אישית, יש צורך בכתובת URL לקובץ הגופן

לדוגמה: לדוגמה https://fonts.cdnfonts.com/s/39664/GoodVibrationsRegular-7D6P.woff .

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

איך להשיג URL לקובץ הגופן:

• פתיחת האתר - נווטו לאתר הרצוי בדפדפן שלכם.
• הפעלת כלי פיתוח - לחצו F12 או לחצו קליק ימני על העמוד ובחרו "בדיקה".
• איתור לשונית הגופנים - עברו ללשונית הגופנים בכלי הפיתוח.
• טעינה מחדש של העמוד - רעננו את העמוד כדי לעדכן את מידע הגופן.
• העתקת URL הגופן - לחצו קליק ימני על הגופן הרצוי ברשימה. בחרו "העתק כתובת קישור".
• הדבקת ה-URL - הדביקו את ה-URL שהועתק בשדה המיועד ב-Eventact.

תמונות

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

אתר אינטרנט

תמונת כותרת

• מימדים מומלצים: 1200px x 250px
• יחס רוחב-גובה מומלץ: 4.8
• סוג קובץ: JPG אוPNG
• גודל קובץ מומלץ: עד 500KB

תמונת כותרת למסכים קטנים (נייד)

• מימדים מומלצים: 600px x 125px
• יחס רוחב-גובה מומלץ: 4.8
• סוג קובץ: JPG אוPNG
• גודל קובץ מומלץ: עד 100KB

תמונת כותרת תחתונה

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

• מימדים מומלצים: 1200px x 250px
• סוג קובץ: JPG אוPNG
• גודל קובץ מומלץ: עד 500KB

תמונת רקע

תמונת הרקע היא רקע הדף עבור טפסים ואפליקציית האירוע.

• מימדים מומלצים: 1920px x 1280px
• סוג קובץ: JPG אוPNG
• גודל קובץ מקסימלי: 1MB

כותרת אפליקציה

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

• הרוחב המינימלי: 1000px
• גובה: 60px
• סוג קובץ: JPG אוPNG
• גודל קובץ: עד 400KB

כפתורי אפליקציית אירוע

• כפתור חד-משבצתי: 300px x 300px
• כפתור כפול: 616px x 300px
• כפתור משולש: 938px x 300px
• סוג קובץ: JPG אוPNG
• גודל קובץ: עד 400KB

תמונת רקע לשיתוף כרטיס ברשתות חברתיות

• מימדים: 1200px x 600px
• סוג קובץ: JPG אוPNG
• גודל קובץ: עד 100KB

תמונת תצוגה מקדימה לשיתוף כרטיס ברשתות חברתיות

• מימדים: 1200px x 630px
• סוג קובץ: JPG אוPNG
• גודל קובץ: עד 100KB

תמונות אחרות

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

עבור תמונות כלליות באתר, כאשר לא נדרש גודל ספציפי, המימדים המומלצים הם גובה של 960px, רוחב של 640px וגודל קובץ של עד 1 MB.

סיכום

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

לסיוע נוסף, התייעצו עם צוות התמיכה שלנו או בקרו בבלוג שלנו.