איך מעצבים אתר?

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

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

חלק 1 מתוך 2: עיצוב אתר האינטרנט שלך

1
קבע אם ברצונך להשתמש ביוצר אתרים. אתרים שנוצרו מאפס דורשים הבנה מפורטת למדי של קידוד HTML, אך ניתן ליצור אתר בקלות באמצעות שירות אירוח בחינם כמו Weebly, Wix, WordPress או Google Sites. יוצרי אתרים נוטים להיות הרבה יותר קלים לשימוש של מעצבים ראשונים מאשר HTML.
- אם תחליט לקודד אתר משלך, תצטרך ללמוד קידוד HTML ו- CSS.
- אם השקעת הזמן והאנרגיה ליצירת אתר האינטרנט שלך לא נשמעת מושכת, תוכל גם לשכור מעצב אתרים שייצור את האתר עבורך. מעצבים עצמאיים יכולים לעלות בין 22 € לשעה ויותר מ 75 € לשעה.
2
מפה את האתר שלך. לפני שאתה אפילו פותח יוצר אתרים, עליך לדעת בערך כמה עמודים אתה רוצה שיהיה לאתר שלך, מה התוכן בכל אחד מאותם עמודים צריך להיות, והפריסה הכללית של דפים חשובים כמו דף הבית ו"אודות " עמוד.
- ייתכן שיהיה קל יותר לדמיין את דפי האתר שלך אם אתה מצייר תמונות גסות של כל אחד מהם ולא רק לקבוע איזה תוכן צריך להופיע.
3
השתמש בעיצוב אינטואיטיבי. אמנם יש מה לומר על רעיונות טריים, אך העיצוב הבסיסי של האתר שלך צריך לפעול בהתאם להנחיות שנקבעו כדלקמן:
- אפשרויות הניווט (למשל, כרטיסיות לדפים שונים) צריכות להיות בראש הדף.
- אם אתה משתמש בסמל תפריט (☰), זה צריך להיות בפינה השמאלית העליונה של הדף.
- אם אתה משתמש בסרגל חיפוש, הוא צריך להיות קרוב לצד הימני העליון של הדף.
- קישורים מועילים (למשל, קישורים לדף "אודות" או לדף "צור קשר") צריכים להופיע בתחתית כל עמוד.
4
היה עקבי. לא משנה מה גופן הטקסט, לוח הצבעים, נושא התמונה ואפשרויות העיצוב שתבחרו, וודאו כי אתם משתמשים באותה החלטה בכל אתר האינטרנט שלכם. זה יכול להיות צורם להפליא לראות גופן או ערכת צבעים אחת המשמשים לדף "אודות" כאשר נעשה שימוש אחר לגמרי בעמוד הבית.
- לדוגמה, אם אתה משתמש אך ורק בצבעים מגניבים לדף הבית של האתר שלך, אל תיישם צבעים עזים ורמים בעמוד הבא.
- זכור כי שימוש בצבעים חזקים או מתנגשים, במיוחד כאשר הצבעים מוצגים באופן דינמי (למשל נע), יכול לעורר אפילפסיה אצל מספר קטן של משתמשי רשת. אם תחליט להשתמש בצבעים כאלה באתר שלך, הקפד להוסיף אזהרת אפילפסיה לפני כל הדפים הרלוונטיים.
אם שיטת יצירת האתר תומכת בהוספת סרגל חיפוש לאתר שלך, מומלץ מאוד לעשות זאת.
5
הוסף אפשרויות ניווט. הצבת קישורים ישירים לדפים חשובים באתרך בראש דף הבית תסייע להפנות מבקרים בפעם הראשונה לתוכן החשוב. רוב יוצרי האתרים מוסיפים קישורים אלה כברירת מחדל.
- חשוב לוודא שכל עמוד באתר שלך נגיש על ידי לחיצה על האפשרויות באתר שלך במקום להיות נגיש רק דרך כתובת הדף.
6
השתמש בצבעים המשלימים זה את זה. כמו כל סוג אחר של עיצוב, עיצוב אתרים מסתמך על שילובי צבעים נעימים מבחינה ויזואלית; מסיבה זו, בחירת צבעי נושא המשתלבים זה מכריע.
- שחור, לבן ואפור הוא שילוב טוב אם אינך יודע מאיפה להתחיל.
7
שקול להשתמש בעיצוב מינימליסטי. מינימליזם מעודד צבעים מגניבים, גרפיקה פשוטה, דפי טקסט בשחור-לבן וכמה שפחות קישוטים. מכיוון שמינימליזם דורש מעט אלמנטים מהודרים, זו דרך קלה לגרום לאתר שלך להראות מקצועי ומושך מבלי לדרוש עבודה רבה.
- ליוצרי אתרים רבים יהיה נושא "מינימליסטי" שתוכלו לבחור בעת הקמת האתר שלכם.
- חלופה למינימליזם היא "ברוטליזם", המשתמש בקווים מחמירים יותר, בצבעים עזים, בטקסט מודגש ובדימויים מינימליים. לברוטליזם יש פחות מאלה מאשר למינימליזם, אך בהתאם לתוכן האתר שלך, הוא עשוי להתאים יותר לצרכי העיצוב שלך.
8
עשו בחירות ייחודיות. קווים ישרים ואלמנטים ברשת נעולים רשת הם הימורים בטוחים, אך קבלת כמה החלטות סגנוניות ייחודיות גם יעניקו אישיות לאתר שלך וגם יעזרו לאתר שלך להתבלט.
- אל תחשוש לטרנדים על ידי הצבת אלמנטים באתר בצורה לא סימטרית או שימוש באלמנטים חופפים ליצירת מראה שכבות.
- אמנם פינות אלגנטיות וחדות ואלמנטים מרובעים (המכונים גם מצגת "מבוססת קלפים") הם פחות נוחים מאשר אלמנטים מעוגלים ורכים.

חלק 2 מתוך 2: מקסימום ביצועי אתרים

1
נצל את אפשרויות האופטימיזציה לנייד. דפדפנים ניידים מהווים יותר תעבורת רשת מאשר דפדפני שולחן העבודה, כלומר כמות תשומת הלב שאתה מקדיש לגרסת המובייל של האתר שלך צריכה להיות לפחות שווה להתפתחות אתר שולחן העבודה שלך. מרבית שירותי יוצרי האתרים יוצרים אוטומטית גרסה ניידת של האתר שלך, אך תרצה לזכור את המידע הבא עבור האתר הנייד שלך:
- ודא שלחצנים (למשל, קישורי אתר) גדולים ונוחים להקשה.
- הימנע מהטמעת תכונות שלא ניתנות לצפייה בנייד (למשל, Flash, Java וכו ').
- שקול להכין אפליקציה לנייד לאתר שלך.
2
הימנע משימוש ביותר מדי תמונות בעמוד. הדפדפנים השולחניים והניידים יכולים להתאמץ לטעון דפים המציגים מספר רב של תמונות או סרטונים. תמונות אמנם חשובות בעיצוב אתרים, אך שימוש ביותר מכמה תמונות בעמוד עלול לגרום לזמני טעינה ארוכים שלא לצורך, מה שימנע מאנשים לבקר בדפים או הדפים המדוברים.
- באופן כללי, אתה רוצה שדפי האתר שלך יטענו תוך פחות מארבע שניות.
הכינו כמה דוגמאות מושכות לעין לאתרים לשיתוף עם לקוחות פוטנציאליים, והשתמשו בנושאים ופרסומות מתאימים של SEO
3

הוסף דף "איש קשר". תבחין כי כמעט בכל האתרים הוקמים יש דף "צור קשר" המכיל פרטי קשר (למשל, מספר טלפון וכתובת דוא"ל); בחלק מהאתרים יש אפילו טופס שאלה מובנה בדף זה. הוספת עמוד "צור קשר" תעניק לצופי האתר קו תקשורת ישיר אליך ובכך תוסיף פתרון לתסכולים פוטנציאליים.
4
צור דף 404 מותאם אישית. כאשר מישהו מבקר בדף ספציפי באתר שלך אשר לא הוגדר או שאינו קיים, יופיע דף אינטרנט "שגיאה 404". לרוב הדפדפנים יש דף 404 המוגדר כברירת מחדל, אך ייתכן שתוכל להתאים אישית את הדף שלך מתוך הגדרות יוצר האתר שלך; אם כן, וודא שאתה כולל את הפרטים הבאים:
- הודעת שגיאה קלילה (למשל, "מזל טוב - מצאת את דף השגיאה שלנו!")
- קישור חזרה לדף הבית של האתר
- רשימה של קישורים נפוצים
- תמונה או לוגו לאתר שלך
5
השתמש במידת האפשר בשורת חיפוש. אם שיטת יצירת האתר תומכת בהוספת סרגל חיפוש לאתר שלך, מומלץ מאוד לעשות זאת. זה יבטיח שמשתמשים יוכלו לנווט במהירות לדף או פריט ספציפי מבלי שיהיה עליהם ללחוץ על אפשרויות הניווט שלך.
- סרגלי חיפוש שימושיים גם כאשר הקהל שלך רוצה לחפש מונח כללי ללא שימוש בניסיון וטעייה.
6
השקיע את מירב הזמן בדף הבית שלך. כאשר מישהו מגיע לדף הבית של האתר שלך, עליו לקבל את תמצית נושא האתר שלך באופן מיידי; בנוסף לכך, כל האלמנטים של דף הבית צריכים להיטען במהירות, כולל אפשרויות ניווט ותמונות כלשהן. דף הבית שלך צריך לכלול את ההיבטים הבאים:
- קריאה לפעולה (למשל לחצן לחיצה או טופס למילוי)
- סרגל כלים או תפריט ניווט
- גרפיקה מזמינה (למשל, תמונה סולידית אחת, סרטון או קבוצה קטנה של תמונות עם טקסט נלווה)
- מילות מפתח הנוגעות לשירות האתר שלך, לנושא או למיקוד
7
בדוק את האתר שלך במספר דפדפנים במספר פלטפורמות. זה חשוב מאוד, מכיוון שדפדפנים שונים עשויים להתמודד עם היבטים באתר שלך באופן שונה. לפני שתתחיל לקדם את האתר שלך, נסה לבקר ולהשתמש באתר שלך בדפדפנים הבאים בפלטפורמות Windows, Mac, iPhone ו- Android:
- גוגל כרום
- פיירפוקס
- Safari (iPhone ו- Mac בלבד)
- Microsoft Edge ו- Internet Explorer (Windows בלבד)
- הדפדפן המובנה בכמה טלפוני אנדרואיד שונים (למשל, סמסונג גלקסי, גוגל נקסוס וכו ')
8

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

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

טיפים

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

אזהרות

רוב יוצרי האתרים הם בחינם; עם זאת, אם ברצונך להשתמש בדומיין משלך (למשל, "www.yourname.com" במקום "www.yourname.wordpress.com"), תצטרך לשלם אגרה חודשית או שנתית.
הימנע מגניבת רוח ושמור על כל חוקי זכויות היוצרים: אל תוסיף תמונות אקראיות מהאינטרנט, או אפילו אלמנטים מבניים, ללא אישור.

קרא גם: איך לפרסם שרשור בפורום?

איך מעצבים אתר?

צעדים

חלק 1 מתוך 2: עיצוב אתר האינטרנט שלך

חלק 2 מתוך 2: מקסימום ביצועי אתרים

טיפים

אזהרות

שאלות ותשובות

תגובות (3)

קרא גם: