fbpx
סגירה

עיצוב אתרים – מדריך מפורט עם יסודות בסיסיים

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

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

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

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

תוכן עניינים

עיצוב אתרים בכללי – זה החלק הכי מאתגר וכיף בו זמנית

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

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

אז מה זה בעצם אתר יפה?

יפה ונקי לעין

בעל חווית משתמש

מביא לקוחות חוזרים

משהו שצריך לציין

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

קריטריונים לעיצוב אתרים

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

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



שילוב נכון של צבעים, גופנים, תמונות וסרטונים

הצבעים שנבחר בעיצוב אתר

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

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


בסוף חשוב גם להבין לאיזו מכניקה שייך צבע מסוים. מהנקודה הפשוטה ביותר שמשתמשים מקשרים כפתור ירוק כמו “יכול/לבצע” וכפתור אדום כמו ״אזהרה/לשים לב״, כלומר לביצוע פעולה (שליחת הודעה, הפעלת אפליקציה , רכישה באתר, מעבר לדף אחר וכדומה), וכפתור אדום עם “לא יכול”-לבטל פעולה, לשים לב (לעצור בקשה, סגירת חלון וכדומה), אך הסבר זה הוא פחות מדויק מכוון פלטת הצבעים באתרים ניתנת לשינוי על פי הרצון והצורך שלכם.

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

משחק בין הגופנים

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

אם נתייחס לאופן הגדלים ומשקל הגופן, מומלץ מאוד שגדלי הכותרות יהיו שווים בהתאם לסוג הכותרת ( H1,H2,H3,H4 וכו׳) וכל סוג כותרת תקבל גודל אחיד.
טקסטים ופסקאות באתר חשוב ומומלץ שיהיו בגודל אחיד וברור לאורך כל האתר (לרוב בין 16px – 18px שזה גדלים סטנדרטים).
כמובן שניתן להדגיש ולהגדיל בקצת קטעי טקסט ספציפיים בכדי לייצר התייחסות יותר ברורה.

תמונות וסרטונים

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

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

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

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



מהם גורמים המשפיעים על חוויית המשתמש באתר?

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

  • 48% מהאנשים ציינו את עיצוב האתר כגורם מספר אחד בהחלטה אם לסמוך על עסק.
  • 2/3 מהאנשים מעדיפים לקרוא מאמר מעוצב להפליא מאשר טקסט פשוט.
  • 38% מהאנשים יפסיקו לחקור את האתר אם התוכן נראה להם לא אטרקטיבי.

אם אתם בעלים של אתר אינטרנט יש לכם 10 שניות בממוצע להעביר מ