תוֹכֶן

• לדרוך
• שיטה 1 מתוך 2: שלושת הכללים הבסיסיים
• שיטה 2 מתוך 2: הנחיות
• טיפים
• אזהרות

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

לדרוך

שיטה 1 מתוך 2: שלושת הכללים הבסיסיים

1. חוק מספר 1:הקשיבו ללקוח שלכם. יתכן שאתה מעצב "האתר הגדול בעולם אי פעם בתולדות היקום ומעבר לו", עם שחורים עשירים, גופנים מעודנים וצבעים בהירים ואמנותיים לאתר שצועק "חקור אותי עכשיו!" לרוע המזל הלקוח שלך רצה שורת תפריטים כתומה עם אותיות ורודות בהירות וכתומות. פוטרת, והאתר הטוב ביותר שלך אי פעם - שהלקוח זכאי לו - נמצא איפשהו בדיסק הגיבוי שלו, מבלי שמישהו יראה אותו שוב.
   • למד את הזהות הארגונית של הלקוח שלך. בקש מהלקוח להראות לך כמה אתרים שהם אוהבים. לא רק שזה ייתן לך מושג מה הם אוהבים, זה גם ייתן לך כמה רעיונות עיצוב שאולי לא חשבת עליהם.
   • אם חשבתם שאנחנו צוחקים על האתר הכתום והוורוד, שקלו את האתר המגניב והמתוחכם הזה:
2. כלל מס '2:דע את הקהל שלך ומה הוא מחפש והתאם את העיצוב שלך בהתאם. הסיבה שלאנשים יש אתרים היא מכיוון שהם רוצים שאנשים אחרים יראו אותם. זה יכול להיות אינפורמטיבי, או מסחרי, או לבדר קהל יעד ספציפי. התפקיד שלך כמעצב הוא לדעת למי אתה מתכנן, ולהשאיר אותם על הדף כשהם נוחתים שם.
   • אתה עשוי לחשוב, "אם זה נראה טוב, הם יישארו." אך זה לא בהכרח חייב להיות המקרה. קחו לדוגמא נדל"ן. הנה אתר עם עיצוב נקי וכיפי. יש לו הרבה שטח לבן המעניק מראה פתוח, צבעים בהירים ופורמט מסך רחב מודרני עם קישורים במקום בולט:
   • עיין כעת בגישה זו למכירת נדל"ן באותו אזור: צבעים עמוסים ועמוסים מאוד, עמומים ומכוסים בפרסום.
   • נחשו איזה מהם עובד טוב יותר עבור מי שמחפש בית? נכון, זה שבו בתים! כשאנשים מחפשים "בתים למכירה בסנטה מוניקה", לא אכפת להם איך נראה אתר. הם לא רוצים לקרוא על סוכן הנדל"ן או לראות תמונות יפות של העיר. הם רוצים לראות בתים.
3. כלל מס '3:תקשיב לעצמך. אתה מבין מה הלקוח רוצה ואתה יודע מה השוק שלך מחפש. עכשיו סוף סוף הגיע הזמן לשים לב אליך, המעצב!
   • בנה תבנית בתוכנת הגרפיקה שבחרת. הפוך את האלמנטים של הדף שלך לשכבות שונות (כך שתוכל לשנות דברים אחר כך מבלי להרוס את כל התבנית). אלמנטים אלה יכולים להיות:
     • כּוֹתֶרֶת. זהו אלמנט זהה בכל עמוד באתר שלך. הכותרת מורכבת מהכותרת והלוגו של האתר, כמו גם מקישורים לחלקים האחרים של האתר (למשל אודות, איש קשר וכו '). מבחינה ויזואלית ומעשית זה יקשור את הכל ביחד. מקובל לקשר את הכפתור הראשון בשורת התפריטים לדף הבית.
     • לדוגמה, בואו נסתכל על אפל:
     • כמו ברוב הדברים של אפל, לדף הבית שלהם עיצוב נקי מאוד ופשוט. שימו לב לשורת התפריטים למעלה, עם נושאים לוגיים לכל כפתור, בתוספת שדה חיפוש - תמיד רעיון טוב אם האתר שלכם תומך בכך. עכשיו בואו נסתכל על דף נחיתה של אחד הכפתורים, האייפד, כדי לראות כמה אלמנטים:
     • שורת התפריטים משתנה רק על ידי הכהיית כפתור האייפד.
     • נושא דף הנחיתה מוצג באותיות שחורות גדולות.
     • תפריט משנה חדש יופיע כדי שתוכלו ללמוד עוד על המוצר. אם תלחץ על אחד מהכפתורים הללו, תראה שכל עמוד מציע תוכן חדש בהתאם לנושא, אך יהיה זהה בפריסה ובעיצוב.
     • לעיתים קרובות, לכל נושא עיקרי בשורת התפריטים יהיו כותרות משנה שונות שתוכלו למלא. במקום ליצור שורת תפריטים שניה, תוכלו להשתמש בתפריטים קופצים כמו דוגמה זו מ- Musicians Friend:
     • סרגל צדדי. זה יופיע בדפים רבים באתר שלך, אך לא בהכרח בכולם - ההקשר קובע. עם זאת, זהו אלמנט חשוב מאוד ועליו להיות מתוכנן בקפידה כך שהוא יהיה אינטואיטיבי ולא עמוס מדי. בניגוד לשורת התפריטים, התוכן של סרגל הצד יכול להיות דינמי מאוד. בדוק את שני הסרגליים הצדדיים של משווק הנדל"ן Trulia הראשון הוא עבור קונים:
       
       

שיטה 2 מתוך 2: הנחיות

1. תכנן ממשק משתמש טוב. מקם את האלמנטים השונים באתר כגון הכותרת, הסרגל הצדדי, הלוגו, התמונות והטקסט באותו מקום בכל עמוד כדי להפוך את האתר שלך לניווט ואינטואיטיבי.
   • שמור את אותה כותרת בראש כל עמוד. בין אם תוכן האתר שלך מאפשר הרבה אלמנטים חוזרים ובין אם לאו, ודא שהחלק העליון של כל עמוד זהה או לא.
   • השתמש בהיגיון בעיצוב שלך. יש לסדר את האלמנטים בעמוד יחיד לפי חשיבות או נושא; גם הדפים השונים באתר צריכים להיות.
2. צור סגנון עקבי. כאשר הפריסה אמורה לתת לאתר עקביות מבנית, הסגנון אמור לספק הרמוניה נושאית.
   • היצמד לשניים-שלושה צבעים עיקריים וודא שהם משתלבים היטב ביחד.
   • הימנע משימוש בסגנונות וגדלים רבים מדי. אם ברצונך להחליף כמה, השתמש בהם באותה צורה בכל עמוד.
   • השתמש בגיליונות סגנון מדורגים (CSS) לשמירה על סגנון אחיד ולהקל על שינוי אלמנטים באתר שלם מבלי לעבור לכל עמוד בנפרד.
3. מקסם את הקריאות. כדי להקל על קריאת הטקסט שלך, אתה יכול לפצל אותו לחלקים קטנים יותר.
   • השתמש בכתוביות ובמרווח מתאים כדי להפריד בין כל החלקים.
   • השתמש באותיות מודגשות או בגדלים שונים כדי להראות את ההיררכיה והחשיבות של הנושאים.
   • שים לב לאופן שבו אתה מתייחס לטקסט. אל תהפוך את הגופן לקטן מדי והגדיל את ריווח השורות כדי להקל על קריאת גושי הטקסט הגדולים. טלאים גדולים של טקסט קשים יותר לקריאה; לפרק את זה לפסקאות קטנות יותר.
4. הפוך את האתר שלך לקריא באופן אוניברסלי. השתמש ב- HTML רגיל והימנע מתגיות, תכונות ותוספים שזמינים רק למותג או גרסה אחת של דפדפן.
   • בעוד שרוב הדפדפנים והמחשבים המודרניים יכולים להתמודד עם תמונות מורכבות, הכל ייראה חלק יותר אם אתה מתכווץ ומייעל את התמונות שלך באינטרנט. שקלו את חשיבות האיכות מול חשיבות המהירות.
5. בדוק את האתר שלך. תוודא ש כל קישור עובד כפי שהיית מצפה, ותמונות מופיעות כהלכה.
   • ייתכן שתרצה לארגן בדיקות משתמשים על ידי כך שחברי קהל היעד שלך יבדקו את בהירות וקלות השימוש בעיצוב שלך ויספקו משוב על האתר שלך.
6. פרסם את האתר שלך. קנה שם דומיין אם עדיין לא עשית זאת. בדקו מעת לעת האם הקישורים עדיין פועלים והאזינו להצעות שהמבקרים שולחים אליכם בדוא"ל.

טיפים

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

אזהרות

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