חשיבות אפיון אתרים
Wireframe כלי אפיון אתרים
אפיון אתרים – עשה זאת בעצמך
מה זה אפיון אתר אינטרנט?
תהליך הפיתוח של אתרים ואפליקציות מתחיל באפיון אתר או אפליקציה או בשמו המלא אפיון חוויית משתמש (UX).
האפיון הוא שלב מאוד חשוב, שבו בעצם מונחים היסודות לחוויית השימוש של הלקוח באתר. באפיון נקבעים הקווים המנחים לאיך ייראה האתר, מה תהיה היררכיית התוכן בו, באילו יישומים נשתמש באתר, איזו חוויה יעבור המשתמש ועוד. האפיון בעצם יוצר את זהות האתר והוא גם מהווה את הבסיס לשלבים הבאים בפיתוח האתר – עיצוב, תכנות, SEO ועוד. אפשר להסתכל על מאפיין אתרים כעל מתווך, שבעזרת הכישורים שלו יודע למקסם את הקשר בין בעל האתר לבין המשתמשים באתר, או אם תרצו בין הקונה למוכר.
אז אם פתאום עלה רעיון לאתר דיגיטלי, המטרה והצורך ברורים, אך התמונה העיצובית עדיין לא ברורה. כמובן שניתן להכין רשימת דרישות בכתב, בה תוכלו להסביר למעצב מה רצונכם. אך, ידוע שמילים נוטות לפרשנויות שונות ואין ערובה לכך שהרעיון שהיה בראשכם יהיה באתר. לשם זה קיים שלב האפיון שאחד משלביו הוא התכנון הויזואלי או במילים אחרות – wireframes . המאפיין הופך מילים לקווים וצורות ויוצר תבנית או שלד עליו יוכל להקים את האתר.
אפיון אתרים – למה זה חשוב?
כמו שאמרנו בתחילת המאמר – עבודת האפיון היא האבן הראשונה שנניח בעבודה על תכנון אתר, היא הבסיס, וככל שהבסיס הזה יהיה יציב יותר, כך האתר יהיה נוח ומותאם יותר לגולשים שבו. אפיון שנעשה בצורה מקיפה ומקצועית תורם לקבלת החלטות חשובות כמו: עיצוב האתר, התוכן והסגנון של המידע שעולה לאתר, קביעת קהל היעד והפנייה אליו.
אפיון אתרים הוא גם תורם מאוד לחוויית משתמש חיובית ויעילה, להגדלת כמות ההמרות באתר, לירידה באחוזי הנטישה ועוד. ככל שהמאפיין מבין את הכוונות השיווקיות של בעל העסק, כך אפיון האתר יהיה כזה שימקסם את הפוטנציאל השיווקי אל מול הלקוחות, ובכך גם יגדיל את הרווחיות.
אפרופו חווית משתמש חיובית, הנה מאמר שמדבר על 8 דרכים לשיפור חווית משתמש.
7 שלבים בדרך לביצוע אפיון אתרים
תהליך אפיון אתר כולל שלבים רבים אך אלה העיקריים:
[table id=3 /]
בסרטון: 9 רעיונות וטרנדים לפני התחלת אפיון אתר
מה זה wireframe?
תמיד רציתם לצאת מהמסגרת? זה הזמן לאמץ את ה-wireframe. השיטה היא אחת מהכלים החשובים ביותר בזמן ניסוח מסמך אפיון אתר עבור מפתחי אתרים. בעזרת כמה שלבים פשוטים נוכל ליצור את ה-wireframe שיעשה לנו סדר בין דמיון לתוצאות בפועל.
שלד האתר מסגרות החוט (wireframe) הן אוסף של מצייני מקום המציגים כיצד יראה האתר העתידי. כל צורה ממחישה אלמנט עיצובי אחר בדף- תמונה, לוגו, תפריט, כפתורים וכו’. בעזרת הטכניקה נוכל ליצור מודל המהווה באופן בסיסי את מבנה האתר. לרוב, ה-wireframe יעשה על ידי גרפיקאי.
יצירת ה-wireframe
אחד היתרונות המרכזיים של השיטה הוא הקלות בהורדה או הוספה של אלמנטים שונים. השלב מקל על נותן ודורש השירות. קיימות מספר פלטפורמות ליצירת ה-wireframe- מדף ועיפרון דרך תוכנות דוגמת adobe xd, figma ו- sketch. בסוף, הרעיון דומה, אין זה משנה באיזו שיטה עובדים ‘המיושנת’ או ‘החדשנית והמגניבה’.
גילוי נאות, ההמלצה שלנו היא לעבוד עם figma
עקרונות ליצירת ה-wireframe בדרך לביצוע אפיון אתר:
- בשלד האתר אנו מתמקדים אך ורק במבנה ובפריסה ללא כל פרט צבעוני או עיצובי.
- בזמן יצירת השלד, יש לחשוב ולכתוב על דף באילו כלים תעזרו על מנת ליצור חלק זה באתר.
- יש לאמוד את הגדלים של כל אזור בשלד האתר.
10 הדיברות של אפיון אתרים – עשה זאת בעצמך:
אז אחרי שהבנו שאפיון אתר הוא שלב מאוד קריטי בבניית האתר (או האפליקציה), הגיע הזמן להבין איך עושים זאת בפועל. מעוניינים לאפיין אתר בעצמכם? הנה 10 שלבים שיעזרו לכם לעשות זאת נכון:
שלב ראשון – בואו נכיר
שלב שני – חזון ומטרות
שלב שלישי – מי המתחרים שלנו
שלב רביעי – מי קהל היעד
שלב חמישי – סוג האתר
שלב שישי – מבנה האתר
שלב שביעי – עדכון האתר
שלב שמיני – UX/UI
שלב תשיעי – תוספות לאתר
שלב עשירי – הגדרת תקציב ולו”ז
שלב ראשון – בואו נכיר
בין אם אתה מאפיינים בעצמכם את האתר ובין אם אתם נעזרים בחברה חיצונית, חשוב שתבצעו את השלב הבסיסי ביותר והוא לתאר מי אתם ומה החברה שלכם. בתיאור צריכים להיכנס פרטים כמו: שם החברה, במה היא עוסקת, למי היא פונה, למה היא הוקמה, מי הקים אותה וכו’.
שלב שני – חזון ומטרות
מה חזון החברה שלנו, למה בכלל היא הוקמה, מה ראו בעיני רוחם מייסדי החברה, לאן הם שאפו להגיע. חשוב להגדיר גם מטרות לחברה, שלעתים נגזרות מהחזון ולעתים לא, וכן להגדיר מטרות ספציפיות שאנחנו רוצים להשיג באמצעות כינון אתר לחברה.
שלב שלישי – מי המתחרים שלנו
חשוב שנדע באיזה שדה אנו פועלים, מהי הסביבה העסקית שלנו, מה מאפיין את הענף שלנו, מי המתחרים, במה הם טובים ובמה פחות, מה הבידול שאנחנו מציעים לעומת המתחרים, במה אנחנו טובים יותר וכדומה.
שלב רביעי – מי קהל היעד
בשלב זה עלינו ליצור כמה פרופילים של משתמשים שאותם אנחנו מגדירים כקהלי יעד לאתר שלנו. כל פרופיל צריך להיות מאוד מפורט – מי המשתמש, מה מינו, איפה הוא גר, מה מאפיין אותו, מה התחביבים שלו, מה המצב המשפחתי שלו וכו’. ככל שנכיר טוב יותר את המשתמשים שלנו נוכל לספק להם חוויית משתמש טובה יותר.
שלב חמישי – סוג האתר
לאחר שאספנו פרטים וכבר יש לנו מושג איך ייראה האתר, הגיע הזמן להחליט על סוג האתר שהכי תואם את הצרכים שלנו. יש, כמובן, יתרונות וחסרונות לכל סוג אתר שנבחר, הנה כמה סוגי אתרים לדוגמא:
- בניית חנות וירטואלית (E-Commerce)
- בניית דף נחיתה
- בניית אתר בלוג
- בניית דף אישי המציג איש מקצוע
- בניית קטלוג / תיק עבודות
- יישום רשת (אפליקציית WEB)
שלב שישי – מבנה האתר
חלק חשוב ביצירת חוויית משתמש טובה היא בניית ההיררכיה באתר. בשלב זה תצטרכו לקבל החלטות בנוגע לדפים המובילים, לכמות הדפים באתר, לקישורים הפנימיים, לנראות תוכן העניינים וכו’. מומלץ שלא להעמיס בפרטים, הן מבחינת הטקסט והן מבחינה ויזואלית. אפשר להיעזר גם בתבניות מוכנות שניתן למצוא באתרים כמו פינטרסט, וורדפרס, שופיפיי ועוד. לא יודעים איזו פלטפורמה לבחור?
הנה מאמר עם טבלה מפורטת עם היתרונות והחסרונות של וורדפרס ושופיפיי
שלב שביעי – עדכון האתר
ככל שיש לכם אתר שדורש יותר עדכונים שוטפים, חשוב לתת לזה דגש כבר בשלב אפיון האתר, וליצור ממשק עדכון נוח ופשוט.
שלב שמיני – UX/UI
כאמור, יצירת חוויית משתמש חיובית היא כמעט תמיד ערובה להצלחת האתר, ולכן בשלב זה אנחנו צריכים להיכנס לראש של המשתמשים שלנו, ולנסות לחשוב ולפעול במקומם. זה השלב שבו תידרשו להכין תרחישי שימוש, לאפיין את המסכים ולהכין מסמך אפיון אתר כולל. בשלב זה חשוב להגדיר היררכיה – מה קריטי שייכנס לאתר, מה חשוב שיהיה באתר ומה רק כדאי שייכנס.
שלב תשיעי – תוספות לאתר
בתהליך אפיון האתר אנחנו צריכים לקחת בחשבון גם דברים נוספים שיש לתת עליהם את הדעת, כמו התאמה לקידום אתרים SEO, נגישות האתר, בטיחות, אחסון, מהירות ועוד.
שלב עשירי – הגדרת תקציב ולו”ז
זהו, הכל מוכן לבניית האתר, עכשיו רק צריך להגדיר לחברה שבונה לכם את האתר את התקציב שתוכלו להשקיע בכך ואת לוח הזמנים שעומד לרשותם. הפרמטרים האלה ישפיעו על החלטות כמו, בניית אתרים בוורדפרס, שופיפיי או פלטפורמה אחרת, עבודה בתבניות או עפ”י עיצוב ייחודי ועוד.
הפכו את השלד לעיצוב האמיתי של האתר
עכשיו זה הזמן לשלב הבא בדרך מהדמיון למציאות. זה הזמן להעניק חיים- להפוך את השלד לאתר.
- החלפת מצייני המיקום התמונה עם תמונות ואיורים רלוונטים.
- טקסט וגופן- התאמת הגופן וגודל הטקסט לפי הקו העיצובי.
- בחירת פלטת הצבעים לאתר.
- התאמת את המרווחים, השוליים, הגובה והרוחב המינימלי על מנת ליצור סימטריה.
אפיון אתרים & Wireframe – לסיכום
לסיכום, ה-wireframe הוא חלק ניכר בשלב של אפיון אתר. עושה סדר בין דמיון למציאות, מתאם ציפיות בין לקוח ונותן שירות ומאפשר הוספה והורדה של אלמנטים עד הגעה לזרימה העיצובית הרצויה. שימוש נכון במתודה היכולה לחסוך כאב ראש מיותר.
מחפשים חברה מקצועית עם ניסיון עשיר באפיון, בניה ועיצוב אתרים?
השאירו לנו פרטים בטופס המצורף למטה ונשמח לעמוד לשירותכם לכל שאלה, ייעוץ או הכוונה!
