המדריך המלא לעיצוב אתרים (2022)

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

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

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

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

לוח עניינים:

  1. מה המטרות האישיות והעסקיות שלשמן אתם בונים את האתר?
  2. לכל עסק יש נישה, ובכל נישה יש תחרות. מה היא עושה?
  3. אפיון האתר שלכם ( מה זה?)
  4. מיתוג – להפוך את האתר לשלכם
  5. המרכיבים השונים שנכנסים לעיצוב
  6. התאמה לנייד
  7. הנעות לפעולה

מה המטרות האישיות והעסקיות מהאתר?

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

מחקר תחרות

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

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

אפיון אתר

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

  • הבנה מעמיקה של העסק שלנו
  • הפתרונות שאנחנו נותנים ללקוח
  • מי משתמש הקצה שיבלה באתר שלנו.
  • מחקר התחרות (מפורט למעלה)

ניתוח העסק שלנו

אנחנו עונים על השאלות הבאות –

  • מה השירות שאנחנו מציעים?
  • באיזה דרכים ניתן לחפש אותו ( גוגל, פה לאוזן, רשתות חברתיות)
  • איך היינו רוצים לציג על השירותים שלנו

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

ניתוח קהל היעד

כשאנו מנתחים את קהל היעד חשוב לעבוד לפי המסמך הבא –

מיתוג – להפוך את האתר לשלך

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

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

– צבעים

צבעים מעוררים רגשות, בין אם במודע או שלא, כל צבע מיוחס אצלנו למשמעות מסויימת גם אם לא בחרנו בכך, כמו שתוכלו לראות בסרטון הבא – https://www.youtube.com/watch?v=mC8ol2-V7Ck
לכל צבע יש משמעות

לאלו מאיתנו שרוצים לשלב בין צבעים ומחפשים את הדרך הנוחה ביותר לעשות כך יכולים להיכנס
לאתר – https://uigradients.com/#50ShadesofGrey
האתר מציג מגוון של גראדיאנטים (שילובי צבעים) יפייפים ומאוד נוח לשימוש.
למי שרוצה להעשיר את הידע ולהבין לעומק את משמעות בחירת צבעים מוזמן להכינס ללינקים הבאים
https://material.io/design/color/the-color-system.html
https://www.empower-yourself-with-color-psychology.com/
שם תמצאו יד  רב (באנגלית) על כל עולם הצבעים, הרגשות שהם מסתירים ואיך משתמשים בהם נכון בעיצוב אתרים.

– טיפוגרפיה

בדומה לבחירת צבע גם הפונט בו אנחנו משתמשים מעורר רגשות כלפי העיצוב שלנו. הפסיכולוגיה מאחורי פונטים היא עוצמתית מאוד ומשפיעה בצורה משמעותית איך המשתמש יתייחס לתוכן באתר. צירפנו לכם סרטון ידידותי וקצר שמסביר בצורה נהדרת על עולם הפונטים –https://www.youtube.com/watch?v=sByzHoiYFX0&t=2s
ישנם מאגרי פונטים גדולים מאוד באינרטנט, גוגל פונטים (חינמי) (https://fonts.google.com/ ) אדובי פונטס (בתשלום) (https://fonts.adobe.com/) ועוד המון מאגרים אחרים כמו http://freefonts.co.il/ , אם לא מצאתם את הפונט הרצוי חפשו בגוגל והיזהרו משימוש לא חוקי בפונטים, לכל פונט במאגרים השונים יש הסבר מפורט על איך, כמה ובאיזה צורה ניתן להשתמש בו.

– תמונות

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

אמנם ישנם מצבים שאין ביכולתנו ליצור את התוכן הנדרש ולכן נהיעזר במאגרי תמונות, כמה ממאגרי התמונות החינמים הטובים והגדולים באינטרנט הינם, פיקסלס  https://stocksnap.io/ סטוקסנאפ  https://www.pexels.com/  ואנספלאש https://unsplash.com/ . חשוב לבחור תמונות בפינצטה, תמונות לא באיכות גבוהה, כאלה שנראות לא מקוריות או לא מתכתבות עם מיתוג העסק רק יפגעו באתר ובעיצוב שלו.

אם לא מצאתם תמונות לשביעות רצונכם במאגרים החינמיים תמיד יש גם כאלה בתשלום. אדובי תמונות (https://stock.adobe.com/il/) מוות למאגרים (https://deathtothestockphoto.com/ ) וכמובן שבחיפוש מהיר בגוגל תמצאו עוד מגוון של אופציות יקרות יותר או פחות, שיעזרו לכם לבנות את אתר שחלמתם עליו.

– היררכיה

היררכיה היא מרכיב חשוב בהעברת המשתמש חווית שימוש נכונה וצריך להתייחס אליה מאוד ברצינות כשאנחנו ניגשים לבניית האתר שלנו. היררכיה עיצובית בראש ובראשונה צריכה למשוך את הקורא לאחר מכן לעורר אצלו תגובה כלשהי ורק אז להעביר את המסר, כמו שמפורט בסרטון הבא – https://www.youtube.com/watch?v=dGYCn9qYjUQ

אין ספק ששלחיטה בהיררכיה לא פשוטה בכלל, אבל כמו כל דבר ישנם כלים שיעזרו לנו להתמודד בתחילת דרכנו בעיצוב האתר להיררכיה נכונה, כמו באתר טייפסקייל https://type-scale.com/ , להבנת היררכית כותרות בצורה קלילה. 

בניית אתר לנייד – התאמה לנייד

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

ישנן הרבה שיטות לבניית אתר רספונסיבי, לא נפרט עליהן כאן, אנחנו נתמקד בעקרונות המנחים ליצירת האתר רסונסיבי לנייד, לטאבלט או לכל מכשיר אחר שיבחר המשתמש שלנו לגלוש. הסרטונים הבאים https://www.youtube.com/watch?v=zF6VSky4SIc https://www.youtube.com/watch?v=6Yh8y0pVfQc יעזרו לכם להבין את הנושא בצורה מהירה, אך כמובן שנסיון בתוכנה בה אתם מעצבים את האתר תיתן לכם את השליטה שלה אתם זקוקים כדי לייצר את ההתאמה המיוחלת.

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

הנעות לפעולה – Call to action

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

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

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

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

Share on whatsapp
Share on telegram
Share on twitter
Share on facebook
Share on linkedin
נגישות