מדריך אפיון עיצוב ובניית אתר
קטגוריה: מדריכים
דוגמאות עבודה
חדש! האזינו לכתבה
Your browser doesn’t support HTML5 audio
”When you design to everyone, you design to no one”
Aarron Walterמעודכן ל- 2021
חוויה זו נוצרת בתודעת הפרט והקהילה כתוצאה ממגע יומיומי בלתי פוסק שמנהל הארגון עם קהל היעד שלו בכל ערוצי התקשורת תוך שמירה על דיאלוג ונראות עקבית.
חוויה ראשונה (רושם ראשוני). דבר שקשה מאוד לתקן או לשנות, לכן מאד חשוב ליצר חוויה איכותית כבר מהמפגש הראשון בין הלקוח ולחברה או למוצר.
הגולשים מטבעם מחפשים, בודקים, רואים לעיניהם אלטרנטיבות. האתר שלכם צריך להיות מבודל ולא להיראות כתלבושת אחידה.
מנקודת מוצא זו אפשר להתחיל, המטרה שלנו היא ליצור נאמנות בקרב קהל הגולשים שלנו.
שילוב של עיצוב רגשי, Emotional Design, בדגש על לתת תחושה של אנושיות, תחושה שהצד השני הוא לא מחשב או מכונה אלא אדם שמנהל אתנו דו שיח.
חיזוק הזיקה בין הגולש למותג באמצעות חוויות ומחוות הן בתחילת התהליך והן בסופם.
תהליך אפיון אתרים דומה לעבודתו של אדריכל ותכנון השלד של בניין.
הצלחה של תהליך עיצוב ובניית אתר נמדדת בשילוב בין אפיון מדויק, עיצוב ואסתטיקה וחווית משתמש.
איך נראה תהליך עיצוב ובניית אתר?
ישנם מספר שלבים בתהליך עיצוב ופיתוח אתרי האינטרנט. מאיסוף מידע ראשוני, דרך הקמת האתר שלך בהתאמה אישית, הרבה מתרחש לפני ההשקה הגדולה.התהליך המדויק אמנם משתנה מעט בין הפרויקטים, אך היסודות נשארים זהים.מהם 10 השלבים הראשיים בתהליך אפיון ובניית אתרים לעסקים:
- שלב האסטרטגיה: הכרות עם המותג,מחקר ואסטרטגיה, איסוף מידע
- שלב אפיון ועיצוב חווית המשתמש UX/UI : תכנון ארכיטקטורת האתר, מפת האתר, דף בית, מבנה האתר
- סוג האתר ואפיון טכנולוגי
- הכנת אב טיפוס לאתר Wireframe
- עיצוב האתר בהתאמה אישית
- בנייה ותכנות האתר, בקרת איכות QA
- תוכן שיווקי לאתר
- אפיון שיווקי והכנת התשתית לשיווק האתר
- עולים לאוויר: השקה מוצלחת, קידום ושיווק
- אופטימיזציה לאתר ותחזוקה שוטפת
1- שלב האסטרטגיה: הכרות עם המותג, מחקר ואסטרטגיה, איסוף מידע
דברים רבים צריכים להילקח בחשבון בעת תכנון ועיצוב המראה והתחושה של האתר שלך, לכן תחילה נשאל המון שאלות שיעזרו לך להבין היטב את העסק שלך ואת הצרכים שלך באתר אינטרנט.תהליך אפיון אתר צריך לכלול את המטרות והיעדים העסקיים של העסק.
להלן חלק מהשאלות והמחקר המקדים:
היכרות עם המותג
נכיר את המותג שלכם, אתם האנשים העומדים מאחוריו, מה החזון ומהי המטרה המרכזית לשמה התכנסנו. נבין מהו המוצר או השירות העיקריים שלכם? מי הוא הקהל העיקרי שלכם? וכמובן מהי משאלת הלב שלכם כבעלי עסק? איך הייתם רוצים לראות את האתר שלכם?היעזרו בספר המותג ובקשו את ה- Style Guide.מה מטרת האתר?
הבנת הצורך, מה מטרת האתר? האם אתה רוצה לספק מידע, לקדם שירות, למכור מוצר וכו'?אני אגדיר את מטרת האתר מנקודת המבט של העסק: ״להפוך מבקרים לקונים פוטנציאליים״.
הדרך לעשות זאת, היא באמצעות אתר מעוצב בהתאמה אישית שיבליט את הייחודיות של העסק.
דוגמאות למטרות הן:
- מטרת האתר להביא פניות (לידים) לאנשי המכירות
- מטרת האתר לספק שירות לקוחות ולהוריד את העומס על המענה הטלפוני
- מטרת האתר להגדיל מכירות למוצרים
- מטרת האתר לאפשר במה לביטוי רעיונות
- מטרת האתר לגייס תרומות
- מטרת האתר לגייס עובדים
הגדרת יעדים לאתר
מה אנחנו רוצים שהאתר יעזור לנו להשיג מבחינה שיווקית?יעדים מוגדרים ביחס למטרות האתר. יעדים הם נתונים מוגדרים על פי פרק זמן, שעל פיהם נמדדת הצלחת האתר. ככל שנגדיר בצורה מדויקת את המטרות והיעדים שלנו, כך נוכל להיות במעקב יותר יעיל אחר התוצאות העסקיות של האתר שלנו.
דוגמאות ליעדים הן:
- יעד האתר שלנו בחצי שנה הראשונה הוא להשיג 300 פניות לנציגי המכירות שלנו
- יעד אתר האינטרנט שלי הוא להגיע אל 2000 גולשים בשנה הראשונה
- יעד אתר האינטרנט שלנו הוא להגדיל את מכירות המוצרים בשנה הראשונה ב- 20%
- הגדלת רשימת התפוצה ב-20%
- 50% גולשים חוזרים
- 20% יותר עסקאות סגורות
קהל יעד- פרסונות שיווקיות
את מי האתר נועד לשרת? האם יש קבוצה ספציפית של אנשים שתעזור לך להגיע ליעדים שלך? מי הלקוח האידיאלי? נסו לתאר מספר פרסונות שיווקיות (פרסונה היא זהות פיקטיבית המשקפת את אחת מקבוצות המשתמשים עבור מי שאתה מעצב קרא עוד).הגדרת קהל היעד תעזור לכם גם לגבי סגנון עיצובי לאתר.
האם מדובר בגולשים שמכירים את המותג?
האם מדובר בלקוחות החברה, בלקוחות חדשים?
לכל אחת מקהלי היעד צריכה להיות התייחסות שונה.
טיפ! את מרבית המידע תוכלו ללמוד מהלקוחות הטובים שלכם.
מחקר שוק
מחקר שוק וניתוח מתחרים הכרחי להצלחת האתר מפני שהוא מאפשר לכם למצוא את הייחוד שלכם ולהבליט את היתרונות בפני הגולשים.אספו נתונים מהמידע הקיים בעסק. ניתוח אתרים ומחקר מתחרים באמצעות כלים.
מחקר שוק נועד לענות על מספר שאלות:
- מהו היקף וגודל השוק?
- מי הם המתחרים ומה היתרונות והחסרונות שלהם?
- מחקר מילות מפתח ומחקר מתחרים באמצעות כלי מחקר.
- הבידול של העסק?
- מיהם השותפים פוטנציאלים?
- הכרות עם חומרי המיתוג והמסרים המרכזיים
- האם יש דרכי רווח שלא חשבנו עליהן בתכנון האתר
2- שלב אפיון ועיצוב חווית המשתמש UX/UI
תכנון ארכיטקטורת האתר, מפת האתר, דף בית, מבנה האתר UX/UIלאחר שאספנו את כל המידע נתכנן את מבנה האתר נכין מסמך אפיון ונגדיר את תכולת האתר.
נבנה את מפת האתר (אפשר בקובץ אקסל) נחלק את התכנים לקטגוריות ונקבע את תכולת האתר / ארכיטקטורת המידע של האתר (אפשר בקובץ וורד לדוגמא).
נדאג שהזרימה בתוך האתר תהיה אינטואיטיבית ואנושית ככל הניתן ותאפשר לגולשים חוויה נוחה וזורמת, כך שיוכלו למצוא בזריזות את מה שהם מחפשים ויישארו עם טעם כל כך טוב, כך שהם ישמחו לשוב ולבקר באתר שלכם במועד אחר.
חווית משתמש UX מפגש בין הצרכים של הגולש והמטרות העסקיות של האתר.
חשיבה מדויקת מבוססת על תהליכי אפיון מקצועיים ומחקרים ויש לה השלכה רבה על הצלחת הפרויקט ובניית האתר ולהשגת המטרות הבאות?
- הבנת המטרות העסקיות שהאתר נועד לשרת
- גידול משמעותי בזמן הגלישה הממוצע באתר
- גידול בהיקף עמודי האתר אליהם נחשף הגולש
- הגדלת היקף הפעולות אותם מבצע הגולש
- גידול בכמות הלידים או המכירות
- השפעה על הקידום האורגני בגוגל
זכרו! אתר לא מתוכנן היטב יגרום לגולש לנטוש מהר ולא לחזור אליו.
מחקרים מעידים על כך שכל גולש/ת המבקר באתר מסוים בפעם הראשונה בחייו, מקדיש בין 3 ל-7 שניות בלבד לצרכי קבלת החלטה מודעת האם להמשיך בפעולת גלישה באתר או לנטוש אותו ולעבור לאתר אחר.
איך נראה מסמך אפיון אתרים?
כל מסמך אפיון אתרים הוא שונה ותלוי בפרויקט הספציפי אך העיקרון נשמר.- הבנת הצורך ומטרת האתר
- הבנת הסיפור, החזון והמסר והבידול
- הכרת המיתוג של העסק
- ניתוח השוק והמתחרים
- אפיון קהל היעד באמצעות (פרסונה שיווקית)
3- סוג האתר ואפיון טכנולוגי
בהתאם למסמך האפיון נקבע על איזה מערכת יבנה האתר, קוד פתוח או סגור. בנוסף ברשת קיימים סוגים רבים של אתרים, לכל אחד היתרונות שלו. איך בוחרים את סוג האתר המתאים ביותר לעסק?סוגי האתרים השונים הקיימים ברשת האינטרנט:
אתרי תדמית - אתרי תדמית המציגים תוכן תדמיתי מרשים ומידע שיווקי על העסק, תחומי התמחות ושירותים. אתרי תדמית נבנים בדרך כלל במטרה ליצור נוכחות ברשת, לשמר קשרים עם לקוחות ולמשוך לקוחות חדשים.אתר מיניסייט - כשמו כן הוא, מיני אתר המכל בדרך כלל עד 5 דפים. לרוב ישמש קמפיין פרסומי לנושא או מוצר מסויים. ממוקד במסרים ומאפשר חיזוק והרחבה של הקמפיין.
מיניסייט הוא יצור כלאיים בין דף נחיתה לאתר.רמת העיצוב והגימור של מיניסייט תהייה בדרך כלל טובה מאוד.
דף נחיתה - כלי המיועד להמרות מקמפיין פרסום, כלומר, להפוך מתעניין ללקוח.דף הנחיתה מיועד להוביל את הלקוח במורד המשפך השיווקי בדרך ליעד שקבענו.
לרוב דף הנחיתה יכיל צור קשר וטלפון ייעודי הניתן למדידה וללא הסחות דעת מיותרות וקישורים חיצוניים.
אתרים קטלוגים - אתר קטלוגי הוא אתר שיווקי המהווה את עיקר הנוכחות של העסק באינטרנט. משלב תוכן תדמיתי מידע על העסק וקטלוג מוצרים. לרוב משמש עסקים B2B.
האתר מציג את מוצרי החברה בחלוקה מסודרת לקטגוריות ותתי קטגוריות, ולעיתים עם אפשרות לאיסוף הזמנה למייל.
אתרי חנות וירטואלית מקוונת, מסחר אלקטרוני - חנות וירטואלית (או אתר מסחר אלקטרוני) היא אתר מכירות המאפשר מכירה וקנייה מקוונת של מוצרים ללא צורך בחנות פיסית. האתר מחובר למערכת סליקה מקוונת של כרטיסי אשראי.
4- הכנת אב טיפוס לאתר Wireframe
אב טיפוס ( Prototype / Wierframe) אינו עוסק בעיצוב האתר, אלא מתמקד בפונקציונאליות.יתרונות עיקריים בבניית אב טיפוס לאתר:
- שימוש באב טיפוס לאתר חוסך זמן ועלויות
- עוזר למעצב להבין את המשימה ולהתרכז בעיצוב ובחוויית המותג
- עוזר לתאם ציפיות מול הלקוח
- מאפשר לצוות הפיתוח להבין את הפונקציונאליות
5- עיצוב האתר בהתאמה אישית
עיצוב אתרים, בשלב הזה אנו קובעים את המראה והתחושה של האתר. לכל לקוח יש טביעת אצבע ייחודית, חשוב לשים לב לבידול, להתאים את האתר לטון והסטייל המתאים, כיצד תרצה להיתפס בעיני הלקוחות שלך?ככל שהעיצוב יהיה איכותי ושונה כך גם הבידול שלך.
האתר צריך להיות מותאם אישית ולא תבנית ותלבושת אחידה.
איך אנו עושים זאת?
עיצוב אתר מותאם אישית, פיתוח אסטרטגיה קריאטיבית, בחירת השפה העיצובית והצבעוניות של האתר.
6- בנייה ותכנות האתר ובקרת איכות
בשלב הזה אנו מחברים את כל האלמנטים הגרפיים ומשתמשים בהם ליצירת אתר אינטרנט פונקציונלי הכולל את כל המודולים על פי האפיון.התאמת מערכת הניהול על פי צרכי הלקוח
העלאת תוכן לאתר
בדיקות איכות QA , בדיקת הטפסים, הכפתורים, תמיכה בדפדפנים ובמכשירים השונים, נראות במובייל ועוד.
הדברים הכי חשובים שכדאי לבדוק
- מהירות האתר
- עיצוב מושך, מבדל
- נוחות למשתמש
- הנעה לפעולה
- התאמה למובייל
7- תוכן שיווקי לאתר
איזה סוג מידע יחפש קהל היעד באתר שלך? האם הם מחפשים מידע ספציפי, מוצר או שירות מסוים וכו?תכננו אסטרטגיית תוכן, כתבו תוכן אפקטיבי משכנע המותאם לקהל היעד העיקרי המטרה לגרום לו להיכנס לאתר שלך.
סוגי תוכן:
תוכן טקסטואלי שיווקי מניע לפעולה, רצוי להשתמש בשירותי קופירייטינג.
תוכן ויזואלי יכלול תמונות איכותיות, אינפוגרפיקות, וידאו.
8- אפיון שיווקי והכנת תשתית לשיווק האתר
בשלב זה אנו עושים בדיקות מקיפות על האתר, הכוללות: בדיקות מהירות, בדיקות תקינות קוד לפי התקן העולמי, חיבור למערכות Google Analytics ו- Google Webmaster.פעולות אלה יכינו את אתרכם לקידום אורגני ועבור קידום אתרים ממומן בכלל הרשתות.
כמו כן נחבר לאתר את כל הנכסים הדיגיטליים: פייסבוק, לינקדאין, גוגל העסק שלי.
9- עולים לאוויר: השקה מוצלחת, קידום ושיווק
התנעת האתר, עכשיו כשכמעט הכול כבר מוכן, הגיע הזמן להעלות את האתר לאוויר ולפרסם את האתר שלנו ולעזור לגוגל לאנדקס את עמודיו באמצעות פעולות שיווקיות.- ניזלטר ללקוחות
- פרסום ממומן בגוגל
- פרסום והעלאת פוסטים ברשתות החברתיות
- נפרסם באינדקסים רלוונטיים
- ננסה להשיג קישורים נכנסים לאתר
- נפרסם מאמרים ונעדכן תכנים באופן תדיר
- נבצע אופטימיזציה לתוכן ( ראה מדריך קידום אתרים )
10- אופטימיזציה ותחזוקה שוטפת
לאחר שהאתר עלה לאוויר והושק, העבודה לא בהכרח הסתיימה. אתרים דורשים תחזוקה, עדכון ושיפורים לאורך זמן. אחת הדרכים להביא מבקרים חוזרים לאתר שלך היא להציע תוכן מעודכן שיעלה לאתר באופן תדיר על פי אסטרטגיית תוכן שתקבע מראש.
עדכוני קוד ברמת האבטחה, התאמות לגרסאות דפדפנים חדשים, אופטימיזציה שוטפת לאתר. ביצוע שינויים באתר על פי צורך.
מקובל להשתמש בשירות על ידי גורם מקצועי על בסיס בנק שעות.