דוגמאות של עיצוב האתר

תוכן עניינים:

דוגמאות של עיצוב האתר
דוגמאות של עיצוב האתר
Anonim

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

אפקט משיכה

מסכים, לכולם יש קבוצה של אתרים מסוימים שמבקרים בהם יום אחר יום. אני בטוח שרוב המסומנים הם אתרים מועדפים עם סרטים, ספרים, חדשות, משחקים וכו'. מדוע לאחר שמצאנו אתר אחד, אנחנו לא מנסים למצוא אתר דומה אחר, שאולי אפילו טוב יותר? התשובה פשוטה! האתרים שאנו מסמנים נוחים לשימוש – לאתרים כאלה יש לרוב סידור נוח של אלמנטים, קטגוריות ועיצוב נעים שלא מרגיז את העין. זהו "אפקט המשיכה", ביקור באתר מעוצב כהלכה פעם אחת - עזיבתולא רוצה יותר.

בוא נסתכל על הדוגמה של פלטפורמת המסחר שני אתרים:

אתרים לדוגמה
אתרים לדוגמה

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

תפיסת צבע

הכלל העיקרי בבחירת צבעים הוא לא להגזים. לפעמים אפילו שניים או שלושה צבעים שנבחרו נכון הם די והותר, דוגמה חיה לכך היא האתר fb.ru. מעצבי אתרים רבים משתמשים בטבלה של צבעים "בטוחים" כדי לעצב את אתר ה-html שלהם.

טבלה של צבעים בטוחים
טבלה של צבעים בטוחים

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

תאימות צבע

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

שילוב צבעים משלים
שילוב צבעים משלים

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

טריאדה - שילוב של 3 צבעים
טריאדה - שילוב של 3 צבעים

ויש הרבה עיגולים כאלה, אתה יכול לאסוף עוד צבעים תואמים. לדוגמה, ארבע.

Tetrad - שילוב של ארבעה צבעים
Tetrad - שילוב של ארבעה צבעים

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

מבנה האתר הפנימי

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

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

הטעות הכי גדולה

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

ניווט לא טוב באתר
ניווט לא טוב באתר

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

טופס הרשמה

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

טופס הרשמה שגוי
טופס הרשמה שגוי

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

טופס רישום נכון
טופס רישום נכון

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

תבניות אתר

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

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

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

חלק אחרון

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

מוּמלָץ: