WikiHow זה מלמד אותך כיצד לעצב אתר שנראה מקצועי ומתפקד היטב. בעוד שעיקר העיצוב של האתר שלך תלוי בך בסופו של דבר, ישנם כמה דברים קריטיים שיש לעשות ולהימנע מהם בעת יצירת אתר.
צעדים
חלק 1 מתוך 2: כיצד לעצב את האתר שלך
שלב 1. קבע אם ברצונך להשתמש ביוצר אתרים
אתרים שנוצרו מאפס דורשים הבנה די מפורטת של קידוד HTML, אך ניתן ליצור אתר בקלות באמצעות שירות אירוח בחינם כמו Weebly, Wix, WordPress או Google Sites. יוצרי אתרים נוטים להיות הרבה יותר קלים עבור מעצבים ראשונים לשימוש מאשר HTML.
- אם תחליט לקודד אתר משלך, יהיה עליך ללמוד קידוד HTML ו- CSS.
- אם השקעת הזמן והאנרגיה ליצירת האתר שלך לא נשמעת מושכת, תוכל גם לשכור מעצב אתרים שיצור עבורך את האתר שלך. מעצבים עצמאים יכולים לעלות בכל מקום בין 30 $ לשעה והרבה יותר מ -100 $ לשעה.
שלב 2. מפה את האתר שלך
עוד לפני שאתה פותח יוצר אתרים, עליך לדעת בערך כמה דפים אתה רוצה שיהיה לאתר שלך, מה צריך להיות התוכן בכל אחד מהדפים האלה והפריסה הכללית של דפים חשובים כגון דף הבית וה"אודות " עמוד.
ייתכן שיהיה קל יותר לדמיין את דפי אתר האינטרנט שלך אם אתה מצייר תמונות גסות של כל אחד מהם במקום רק לקבוע איזה תוכן צריך להופיע
שלב 3. השתמש בעיצוב אינטואיטיבי
אמנם יש מה לומר על רעיונות טריים, אך העיצוב הבסיסי של אתר האינטרנט שלך צריך לעקוב אחר הנחיות מבוססות כגון:
- אפשרויות הניווט (למשל כרטיסיות לדפים שונים) צריכות להיות בראש הדף.
- אם אתה משתמש בסמל תפריט (☰), הוא אמור להיות בפינה השמאלית העליונה של הדף.
- אם אתה משתמש בסרגל חיפוש, הוא צריך להיות ליד הצד הימני העליון של הדף.
- קישורים מועילים (למשל, קישורים לדף "אודות" או לדף "צור קשר") צריכים להופיע בתחתית כל דף.
שלב 4. היו עקביים
לא משנה מה גופן הטקסט, לוח הצבעים, עיצוב התמונה ואפשרויות העיצוב שתבחר, וודא שאתה משתמש באותה החלטה בכל אתר האינטרנט שלך. זה יכול להיות מטריד להפליא לראות גופן או ערכת צבעים אחת המשמשים את דף "אודות" כאשר נעשה שימוש בדף אחר לגמרי עבור דף הבית.
- לדוגמה, אם אתה משתמש אך ורק בצבעים בגוון קריר לדף הבית של האתר שלך, אל תיישם צבעים עזים וחזקים בעמוד הבא.
- זכור כי שימוש בצבעים חזקים או מתנגשים, במיוחד כאשר הצבעים מוצגים באופן דינאמי (למשל, נע), יכולים לעורר אפילפסיה במספר קטן של משתמשי אינטרנט. אם תחליט להשתמש בצבעים כאלה באתר שלך, הקפד להוסיף אזהרת אפילפסיה לפני כל דפים רלוונטיים.
שלב 5. הוסף אפשרויות ניווט
הצבת קישורים ישירים לדפים חשובים באתר שלך בראש דף הבית תעזור להפנות מבקרים ראשונים לתוכן החשוב. רוב יוצרי האתרים מוסיפים קישורים אלה כברירת מחדל.
חשוב לוודא שכל דף באתר שלך נגיש על ידי לחיצה על האפשרויות באתר שלך במקום להיות נגיש רק באמצעות כתובת הדף
שלב 6. השתמש בצבעים המשלימים זה את זה
כמו כל סוג אחר של עיצוב, גם עיצוב אתרים מסתמך על שילובי צבעים נעימים מבחינה ויזואלית; בגלל זה, בחירת צבעי נושא המתאימים זה לזה היא חיונית.
שחור, לבן ואפור הוא שילוב טוב אם אתה לא יודע מאיפה להתחיל
שלב 7. שקול להשתמש בעיצוב מינימליסטי
המינימליזם מעודד צבעים בגוון קריר, גרפיקה פשוטה, דפי טקסט בשחור-לבן ופחות מעט קישוט. מכיוון שמינימליזם דורש מעט אלמנטים מהודרים, זו דרך קלה לגרום לאתר שלך להיראות מקצועי ומושך מבלי לדרוש הרבה עבודה.
- ליוצרי אתרים רבים יהיה נושא "מינימליסטי" שתוכל לבחור בעת הקמת האתר שלך.
- אלטרנטיבה למינימליזם היא "ברוטליזם", שמשתמש בקווים חריפים יותר, בצבעים עזים, טקסט מודגש ותמונות מינימליות. לברוטאליזם יש פחות מעקב מאשר למינימליזם, אך בהתאם לתוכן האתר שלך, הוא עשוי להתאים יותר לצרכי העיצוב שלך.
שלב 8. עשה בחירות ייחודיות
קווים ישרים ורכיבי אינטרנט נעולים ברשת הימורים בטוחים, אך קבלת כמה החלטות סגנוניות ייחודיות הן יעניקו לאתר שלך אישיות ויעזרו לאתר שלך להתבלט.
- אל תפחדו לצבור טרנדים על ידי הצבת רכיבי אתר באופן א -סימטרי או שימוש באלמנטים חופפים ליצירת מראה מרובד.
- בעוד שפינות אלגנטיות וחדות ואלמנטים מרובעים (המכונים גם מצגת "מבוססת כרטיס") פחות נוחים מאלמנטים מעוגלים ורכים.
חלק 2 מתוך 2: כיצד למקסם את ביצועי האתר
שלב 1. נצל את אפשרויות האופטימיזציה לנייד
דפדפנים ניידים מהווים יותר תעבורה באינטרנט מאשר דפדפנים שולחניים, כלומר כמות תשומת הלב שאתה משלם לגרסת האתר שלך לנייד צריכה לפחות להיות שווה לפיתוח אתר שולחן העבודה שלך. רוב שירותי יוצרי האתרים יוצרים אוטומטית גרסה לנייד של האתר שלך, אך עליך לזכור את המידע הבא עבור אתר הנייד שלך:
- ודא שכפתורים (למשל, קישורי אתרים) גדולים וקלים להקשה.
- הימנע מיישום תכונות שאינן ניתנות לצפייה בנייד (למשל, Flash, Java וכו ').
- שקול ליצור אפליקציה לנייד לאתר שלך.
שלב 2. הימנע משימוש בתצלומים רבים מדי לדף
דפדפנים שולחניים וניידים יכולים להיאבק בטעינת דפים המציגים מספר רב של תמונות או סרטונים. בעוד שתמונות חשובות בעיצוב אתרים, שימוש ביותר מכמה דפים יכול לגרום לזמני טעינה ארוכים שלא לצורך, מה שימנע מאנשים לבקר בדפים המדוברים.
באופן כללי, אתה רוצה שדפי האתר שלך ייטענו תוך פחות מארבע שניות
שלב 3. הוסף דף "איש קשר"
תבחין כי כמעט כל האתרים שהוקמו כוללים דף "צור קשר" ובו פרטי יצירת קשר (למשל מספר טלפון וכתובת דוא"ל); בחלק מהאתרים יש אפילו טופס שאלה מובנה בדף זה. הוספת דף "צור קשר" תעניק לצופי האתר קו תקשורת ישיר אליכם, ובכך תוסיף פתרון לתסכולים פוטנציאליים.
שלב 4. צור דף 404 מותאם אישית
כאשר מישהו מבקר בדף ספציפי באתר שלך אשר לא הוקם או שאינו קיים, יופיע דף אינטרנט "שגיאת 404". לרוב הדפדפנים יש דף ברירת מחדל של 404, אך ייתכן שתוכל להתאים אישית את שלך מתוך ההגדרות של יוצר האתר שלך; אם כן, הקפד לכלול את הפרטים הבאים:
- הודעת שגיאה קלילה (למשל, "מזל טוב - מצאת את דף השגיאות שלנו!")
- קישור חזרה לדף הבית של האתר
- רשימה של קישורים נפוצים
- תמונה או לוגו לאתר שלך
שלב 5. השתמש בסרגל חיפוש במידת האפשר
אם שיטת יצירת האתר שלך תומכת בהוספת סרגל חיפוש לאתר שלך, מומלץ בחום לעשות זאת. זה יבטיח שמשתמשים יכולים לנווט במהירות לדף או פריט ספציפי מבלי שתצטרכו ללחוץ על אפשרויות הניווט שלכם.
קווי חיפוש שימושיים גם כאשר הקהל שלך רוצה לחפש מונח כללי מבלי להשתמש בניסוי וטעייה
שלב 6. השקיע את הזמן הרב ביותר בדף הבית שלך
כאשר מישהו מגיע לדף הבית של האתר שלך, הוא אמור לקבל את תמצית נושא האתר שלך באופן מיידי; בנוסף לכך, כל האלמנטים של דף הבית צריכים להיטען במהירות, כולל אפשרויות ניווט וכל תמונות. דף הבית שלך צריך לכלול את ההיבטים הבאים:
- קריאה לפעולה (למשל, כפתור ללחיצה או טופס למילוי)
- סרגל כלים או תפריט ניווט
- גרפיקה מזמינה (למשל, תמונה אחת מוצקה, סרטון או קבוצה קטנה של תמונות עם טקסט נלווה)
- מילות מפתח הנוגעות לשירות האתר שלך, הנושא או המיקוד שלו
שלב 7. בדוק את האתר שלך במספר דפדפנים במספר פלטפורמות
זה חשוב להפליא, מכיוון שדפדפנים שונים עשויים להתמודד עם היבטים של האתר שלך באופן שונה. לפני שתתחיל לקדם את האתר שלך, נסה לבקר באתר שלך ולהשתמש בו בדפדפנים הבאים בפלטפורמות Windows, Mac, iPhone ו- Android:
- גוגל כרום
- פיירפוקס
- ספארי (אייפון ומאק בלבד)
- Microsoft Edge ו- Internet Explorer (Windows בלבד)
- הדפדפן המובנה במספר טלפונים שונים של Android (למשל, Samsung Galaxy, Google Nexus וכו ')
שלב 8. המשך עדכון האתר שלך ככל שהוא מזדקן
טרנדים עיצוביים, קישורים, תמונות, מושגים ומילות מפתח כולם משתנים עם הזמן, כך שתצטרך להמשיך לבצע שינויים באתר שלך כדי להישאר מעודכן. זה יחייב אותך לבדוק את ביצועי האתר שלך לצד אתרים דומים אחרים לפחות אחת לשלושה חודשים (רצוי בתדירות גבוהה יותר).
עזרה בסיסית ב- HTML
דוגמא לדף אינטרנט עם HTML
תמיכה ב- wikiHow ו לפתוח את כל הדגימות.
גיליון לרמות HTML
תמיכה ב- wikiHow ו לפתוח את כל הדגימות.
דוגמא לדף אינטרנט פשוט
תמיכה ב- wikiHow ו לפתוח את כל הדגימות.
טיפים
- נגישות אתרים היא היבט חשוב נוסף בפיתוח אתרים. זה כולל דברים כמו כיתובים לקהלים לקויי שמיעה, תיאורי שמע למבקרים עיוורים ואזהרות רגישות לאור האתר שלך אם אתה משתמש באפקטים שעלולים לגרום להתקפים.
- לרוב יוצרי האתרים יש קבוצה של תבניות בהן תוכל להשתמש כדי לבסס את פריסת האתר ואת עיצובו לפני הוספת האלמנטים המועדפים עליך.
אזהרות
- רוב יוצרי האתרים הינם בחינם; עם זאת, אם אתה רוצה להשתמש בדומיין שלך (למשל, "www.yourname.com" במקום "www.yourname.wordpress.com"), תצטרך לשלם תשלום חודשי או שנתי.
- הימנעו מגניבה ושמרו על כל חוקי זכויות היוצרים: אל תוסיפו תמונות אקראיות מהאינטרנט, או אפילו מרכיבים מבניים, ללא אישור.
