עיצוב אתרים הוא תהליך התכנון, יצירת קונספט וסידור תוכן אונליין. בימינו, עיצוב אתרים הוא מעבר לאסתטיקה ולפונקציונאליות הכללית של האתר. עיצוב אתרים כולל גם אפליקציות, שימוש בתוכנות, רספונסיביות וחווית משתמש.
לעיצוב יש השפעה עצומה על קידום של אתרים בתוצאות החיפוש בגוגל ולכן כדי ללמוד כיצד לעצב אתרים בצורה נכונה ויעילה, ולראות תוצאות אמיתיות, כדאי ללמוד זאת בקורס עיצוב גרפי מקצועי.
בכתבה זו אביא כמה תובנות שיעזרו לכם ליצור אתר, שלא רק נראה טוב, אלא גם מתפקד טוב ומאפשר דירוג גבוהה בתוצאות החיפוש.
מציאת השראה:
מעצבי אתרים מחפשים השראה בכל מקום. יש מגוון רחב של אתרים מהם אפשר לקבל השראה ולעורר את היצירתיות שלכם. לדוגמה אתר Pinterest.
בחירת כלי לעיצוב אתרים:
ישנן שתי דרכים עיקריות לעיצוב אתרים: שימוש בתוכנה בדסקטופ או להשתמש בבונה אתרים בו ניתן לעצב.
עיצוב אתר עם תוכנה בדסקטופ (כגון פוטושופ, אינדיזיין, אילוסטרייטור) בדרך כלל דורש מהמעצב לשלוח את העיצוב למתכנת שימיר את העיצוב לקוד.
עיצוב אתר עם בונה אתרים (כגון וויקס, וורדפרס) כרוך בשימוש בתבניות ואפשרויות עיצוב יחסית מוגבלות, אבל אם אתם לא רוצים להתעסק עם קוד זהו פתרון מצויין.
אלמנטים לעיצוב אתרים:
כשמעצבים אתר חשוב לקחת בחשבון גם את נראות האתר וגם את הפונקציונליות שלו. שילוב בין השניים ימקסם את היעילות והתפקוד של האתר.
מבחינת יעילות, ניתן לכלול אלמנטים שיסייעו בניווט באתר, שימוש נכון בגרפיקה ותמונות, טקסט איכותי וממוקם כראוי ופלטת צבעים.
מבחינת ביצועים, הכוונה למהירות האתר, דירוג, אפשרויות חיפוש וסינון, והאפשרות "ללכוד" את הקהל שלכם.
אלמנטים וויזואליים:
ישנם כמה אלמנטים שיעזרו לכם לוודא שכל החלקים באתר עובדים היטב יחדיו:
- תוכן וטקסטים- נראות האתר וטקסטים הולכים יד ביד. חשוב שכותבי התוכן והמעצבים יעבדו ביחד במטרה ליצור עיצוב אחיד עם אלמנטים מאוזנים. השתמשו בבלוקים של טקסט על מנת להחמיא לגרפיקה ולתמונות.
- פונטים- בחרו בפונט שיחמיא לעיצוב הכולל של האתר. מומלץ שהפונטים יהיו בקו אחיד עם פלטת הצבעים שלכם, הגרפיקה, התמונות ויחזקו את הטון הכללי של האתר. כלים כמו קנבה למשל יכולים לעזור לכם למצוא שילוב טוב של פונטים.
- צבעים- צבע הוא אחד מהאלמנטים החשובים ביותר שצריך לקחת בחשבון כשמעצבים אתר. ישנן הרבה תפיסות מוטעות על "הפסיכולוגיה של הצבעים", ויותר חשוב לבחור בצבעים שיחמיאו לעיצוב הכללי של האתר. ישרו קו בין פלטת הצבעים שלכם לבין המותג והמסר שאתם רוצים להעביר כדי לשכנע את הקהל שלכם.
- פריסה- יש חשיבות רבה לאיך שתחליטו לסדר את התוכן שלכם, אין חוקים מסוימים שחייבים לעקוב אחריהם כשבוחרים את הפריסה של האתר, אבל יש כמה עקרונות שמומלץ לשים לב אליהם. וודאו שאתם שוקלים את הצרכים של קהל היעד שלכם, הימנעו משימוש ביותר מדי גירויים בפריסה שעשויים להסיח את דעת הגולש ולהסיט אותו מהמסר שאתם רוצים להעביר.
- צורות- שילוב צבעים וצורות יכול לעזור לכוון את תשומת הלב של מבקרי האתר שלכם ולתרום לזרימה הכללית באתר שלכם.
- מרווחים- רווח הוא אלמנט מרכזי ליצירת אתר נוח לניווט. כל אלמנט בעיצוב שלכם יכלול רווח בדרך כזו או אחרת. שימוש נכון ברווח הוא חיוני ליצירת עיצוב שמאזן באופן מושלם טקסט, תמונות וגרפיקה.
- תמונות ואייקונים- עיצובים מוצלחים יכולים להעביר המון מידע בשניות בודדות, זאת באמצעות שימוש בתמונות ואייקונים חזקים. בחרו בתמונות ואייקונים שיתמכו במסר שאתם מנסים להעביר.
- וידאו- שילוב סרטונים בתוך עיצוב אתר התחיל להיות מאוד פופולארי בקרב מעצבי אתרים.
כשמשתמשים בו כראוי, הוידאו יכול לתרום להעברת המסר שלכם לגולש ולשפר את חווית המשתמש. בנוסף בוידאו ניתן להעביר מסר שלא ניתן להעביר היטב דרך טקסט או תמונות.
זכרו שעין האנושית יכולה ברגע לזהות דפוסים ותנועה. לכן חשוב שתוודאו שהוידאו שלכם לא מסיח מאלמנטים חשובים אחרים.
אלמנטים פונקציונאליים:
אלמנטים אלו חיוניים והכרחיים לחווית משתמש טובה ולהגיע לדירוגים גבוהים בתוצאות החיפוש.
- ניווט- האחד האלמנטים המרכזיים שקובע האם האתר שלכם מתפקד כראוי. הניווט משרת כמה מטרות: הוא עוזר לגולשים חדשים לגלות מה יש לאתר שלכם להציע, נותן גישה נוחה וקלה לעמודים באתר למשתמשים חוזרים, ומשפר את החוויה הכללית של כל משתמש.
- אינטראקציית משתמש- למשתמשים יש הרבה דרכים ליצור אינטראקציה עם האתר שלכם, תלוי במכשיר ממנו הם גולשים (גלילה, הקלקה, הקלדה…). אתר שמעוצב היטב יתן מענה לכל סוגי המכשירים ודרכי האינטראקציה.
- אנימציות- אנימציות יעזרו לתפוס את תשומת הלב של הגולש ולגרום לו לבצע אינטראקציות באתר.
- מהירות- אף אחד לא אוהב אתר איטי. אם גולש יצטרך לחכות יותר מכמה שניות כדי שעמוד באתר יטען, רוב הסיכויים שהוא יעזוב את האתר ולא יחזור אליו. לא משנה כמה טוב יראה האתר, אם הוא לא מהיר, הוא ידורג נמוך בתוצאות החיפוש.
- מבנה אתר- מבנה האתר משחק תפקיד חשוב גם בחווית משתמש וגם באופטימיזציה למנועי חיפוש. אם גולש מאבד את הדרך בעת ניווט באתר שלכם, ככל הנראה שגם העכבישים של גוגל יאבדו אותה.
- התאמה לדפדפנים ולמכשירים שונים- עיצוב טוב הוא עיצוב רספונסיבי, כזה שמתאים את עצמו לכל מכשיר או דפדפן מהם נכנסים הגולשים לאתר.
סוגי עיצוב אתרים: מותאם VS. רספונסיבי
אתרים מותאמים:
אתרים מותאמים משתמשים בשתי גרסאות או יותר לאתר, שכל גרסה בנויה בהתאם לגודל מסך מסויים. אתרים מותאמים מתחלקים ל2:
- התאמה מבוססת סוג מכשיר- האתר מזהה מאיזה מכשיר המשתמש גולש ומציג לו את האתר המתאים לגודל המסך של המשתמש.
- התאמה מבוססת סוג דפדפן- האתר מזהה מאיזה דפדפן המשתמש גולש ומציג לו את האתר המתאים לרוחב הדפדפן ממנו המשתמש גולש.
אתרים רספונסיביים:
עיצוב רספונסיבי משתמש במבנה גריד גמיש המבוסס על האחוזים שכל אלמנט תופס בתבנית שלו: אם ההדר למשל תופס 25% מהתבנית, האלמנט ישאר בגודל 25% לא משנה לאיזה גודל משתנה המסך. כלומר, אתרים רספונסיביים משתנים ביחד עם גודל המסך של המשתמש.
לסיכום, ריכזתי לכם בקצרה את הנקודות החשובות ביותר שיש לקחת מהכתבה הזאת:
- המשתמש תמיד ראשון: חווית המשתמש צריכה להיות השיקול המרכזי בעת עיצוב אתר, מאחר והגולשים הם אלו שיחליטו האם שווה לבקר באתר שלכם או לא.
- בחרו את בונה האתרים המתאים לצרכים שלכם: קחו בחשבון את הפונקציות המרכזיות הנחוצות באתר.
- איזון האלמנטים הוויזואליים: חשוב לשמור על איזון בין הטקסט, הגרפיקה, המדיה ופלטת הצבעים, על מנת למנוע גירויים מיותרים ומסיחי דעת עבור הגולשים אשר יסיטו את תשומת הלב שלהם מהמסר שאתם מנסים להעביר.
