הנחיות עיצוב למעצב אתר אינטרנט / דף נחיתה

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

יצירת עיצוב לאינטרנט הינה אתגר המצריך פעולת מלאכת מחשבת.
ריכזנו עבור מעצבים רשימת הנחיות ונקודות למחשבה, כדי להקל על התהליך.
קובץ עיצוב 
  • את העיצוב יש לספק כקובץ PSD כשהוא מחולק לשכבות.
  • יש לספק תמונת JPG עבור כל קובץ עיצוב או מצבים שונים של אלמנטים על מנת שמטמיע העיצוב יוכל לראות את כל המצבים ללא צורך בהסתרה והצגת שכבות בקובץ העיצוב.
  • במידה וישנם עיצובים לדפים שונים, יש לספק קובץ שונה עבור כל דף.
  • עבור כל פונט הקיים בעיצוב יש לספק 2 קבצים. אחד בפורמט TTF ואחד בפורמט EOT. (כלי המרת פונטים אונליין ניתן לשימוש כאן) או לחילופין, מומלץ להשתמש בפונטים של גוגל (בחינם), הניתנים לצפייה והורדה בקישור הבא.
  • יש לשמור על ערכי פיקסלים שלמים, גם עבור מידות אלמנטים וגם עבור מידות פונטים. למשל, 21px, ולא 21.342px.
  • יש להשאיר את הטקסטים כשכבות טקסט (על מנת שניתן יהיה לחלץ מהן את הגדרות עיצוב הטקסט).

אייקונים
  • ישנן ספריות של אייקונים הניתנים להטמעה באופן המאפשר שינוי גדלים וצבעים בקלות. לדוגמא: Thenounproject
  • במידה ונעשה שימוש באייקונים, יש לספק קבצי PNG או SVG.
  • במידה ונעשה שימוש ב-PNG: עבור כל קבוצת אייקונים קובץ המכיל את כל האייקונים, בכל המצבים הדרושים, על רקע שקוף, כך שכל איקון נמצא בתוך ריבוע בגודל זהה לאחרים, ממורכז אופקית ואנכית, ובפרופורציה זהה. קובץ זה נקרא "CSS ספרייט" להסבר נוסף לחץ כאן.
  • במידה ונעשה שימוש ב-SVG: יש להעביר כל אייקון בקובץ נפרד, שאינו נעול לשינוי גודל. חשוב מאוד לשמור על פרופורציות זההות. בכך ניתן יהיה להטמיע את האייקונים בגדלים וצבעים שונים בקלות.

Kala CRM - עיצוב ריספונסיבי ל דף נחיתה או אתר אינטרנט
מידות - עיצוב מותאם / רספונסיבי
  • דוגמאות לחלוקה הנפוצה:
    • מובייל/טלפונים (320 עד 480 פיקסלים)
    • טאבלט (481 עד 767 פיקסלים)
    • דסקטופ/מסך מחשב ביתי צר. (768 עד 991 פיקסלים)
    • דסקטופ/מסך מחשב ביתי בינוני. (992 עד 1199 פיקסלים)
    • דסקטופ/מסך מחשב ביתי רחב. (1200 פיקסלים ומעלה)
     
  • ניתן להטמיע את העיצוב ברוחב משתנה לפי רוחב המסך, למשל %80, או לחילופין לכל רוחב המסך.
  • מומלץ לשמור על קו עיצוב דומה יחסית בין גדלי המסך השונים באמצעות שינויים בעימוד התכנים וגדלי הפונטים. יש גם אפשרות לייצר עיצובים שונים לגמרי עבור גדלים שונים, אך דבר זה מאריך את הטמעת העיצוב.
  • ניתן להסתיר / להציג אלמנטים מסויימים רק בגדלי מסך שונים, אך כל הבדל מהותי בין הגדלים השונים מצריך יותר עבודה של הטמעה ותחזוקה מסובכת יותר בעדכונים עתידיים.
  • את קבצי העיצוב והתמונות למסכים קטנים יש לספק ברוחב של לפחות 768 פיקסלים (למרות שהתצוגה שלהם תהיה קטנה יותר), על מנת שתמונות המוצגות באופן רספונסיבי (נמתחות לפי רוחב המסך), תוצגנה באופן איכותי בכל מסך.
  • עבור כל עיצוב של דף, רשמו לאיזה רוחב מסך הוא משמש.

יש לצרף ביחד עם העיצוב "מסמך הנחיות לקובץ עיצוב" אשר כולל:
  • מידות (אורך ורוחב) של אלמנטים עיצוביים (בפיקסלים או אחוזים).
  • צבעים בהם נעשה שימוש. עבור כל צבע יש לרשום את הקוד שלו (HEX / RGB / RGBA). מומלץ לרשום באיזה צבע יש להשתמש עבור כל אלמנט.
  • תכנים הנמצאים בעיצוב באופן המאפשר העתקה והדבקה.
  • פונטים בהם נעשה שימוש. באיזה פונט יש להשתמש עבור כל טקסט, באיזה גודל (בפיקסלים) ואילו תכונות עיצוביות נוספות יש להכיל עליו, כגון: הצללה, הדגשה, גובה שורה, מרווח בין מילים / אותיות. 
ממה להמנע?
  • לא להשתמש בכמות גדולה של פונטים. רצוי בדרך כלל לא יותר מגג 2-3 פונטים שונים.

עוד מתוך ניהול דפים / מוצרים באתר

הוספת דף / מוצר חדש באתר

בתפריט הראשי נעמוד על "דפים" לפתיחת תת-תפריט, שם ניתן ללחוץ על "הוספת דף"...

הגדרת תגיות META (כותרת / מילות מפתח / תאור ועוד)

ניתן להגדיר תגיות META לדפים / מוצרים באתר שישפיעו על הצגת הדף במנועי חיפוש ובתוצאות החיפוש באתר....

הוספת תמונה באמצעות עורך התוכן של הדף

בעורך התוכן נעמוד בנקודה בה נרצה להוסיף את התמונה להוספת תמונה נלחץ על הכפתור "תמונה"...

הוספת קישור (טקסט לחיץ) שמעביר לדף אחר / טלפון / וואטסאפ / אימייל

במקומות בהם ניתן לערוך תוכן באמצעות העורך (למשל עריכת תוכן דף / תבניות אימייל ועוד), ניתן ליצור...

הטמעת סרטון מ- YouTube

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

הטמעת קטעי קוד וסקריפטים בדפים

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

הטמעת פיקסלים בטופס

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

הוספת כפתור לחיץ שמציג איזור בדף

דוגמא לכפתור שמציג/מסתיר איזור מסויים: <button type="button" class="btn btn-sm...