האם מגמות לעיצוב אתרים של שנות ה- 2010 כאן כדי להישאר?

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


מגמות לעיצוב אתרים לשנת 2018

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

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

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

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

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

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

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

מגמות לעיצוב אתרים

עיצוב הזמנים: מגמות לעיצוב אתרים 2014

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

עיצוב רספונסיבי

  • פירושו של עיצוב רספונסיבי פירושו של אתר מתאים באופן אוטומטי לגודל המסך עליו הוא צופה.
    • זה קריטי לעיצוב אתרים כאשר אנשים מתרחקים ממסך מחשב מסורתי.
      • 90% מהמבוגרים האמריקנים מחזיקים כעת טלפון סלולרי
      • 58% מהמבוגרים האמריקנים מחזיקים כיום בסמארטפונים
        • 60% מבעלי הטלפונים הסלולריים משתמשים בטלפון שלהם כדי להתחבר לאינטרנט
      • 42% מהמבוגרים האמריקנים מחזיקים כיום בטבליות
  • עיצוב אתרים מגיב כרוך בשימוש בתערובת של גמישות:
    • פריסות
      • הכל גודל לפי פרופורציות, ולא פיקסלים.
    • תמונות
      • הכל גודל לפי יחס, ולא פיקסלים.
    • שאילתות CSS
  • דוגמאות לעיצוב מגיב כוללות:
    • com
    • com
    • com
  • צור תבניות מגיב משלך או רכוש מסגרת תגובה קיימת.
    • דוגמאות מכילות:
      • קארמה
      • אבדה
      • התפשט
  • יתרונות:
    • פחות תחזוקה: אתר אחד, במקום אתרים מרובים לעיצוב ותחזוקה.
    • אופטימיזציה טובה יותר למנועי חיפוש (SEO): אתר אחד פירושו קבוצה אחת של כתובות אתרים, מה שהופך את ה- SEO לניהול יותר.
    • אין צורך לדאוג אם האתר שלך יהיה תואם עם עשרות המכשירים החדשים אשר פוגעים בשוק ללא הרף.
  • חסרונות:
    • היישום יכול לארוך זמן רב מהצפוי.
    • הטכנולוגיה עדיין מתפתחת.
    • מכיוון שתמונות פשוט מפוצלות במקום ולא לשנות את גודלן, הדבר יכול להשפיע לרעה על זמן טעינת העמודים, מה שמרגיל את המבקרים.

גלילה נוספת

בשנת 2014 נראה גלילה נוספת בגלל כמה קל ליישם.

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

פחות טקסט

  • במקום עיצוב כבד של טקסט, נראה יותר עיצוב ממוקד סביב תמונות, אייקונים ווידאו.
    • com כולל פחות מעשר מילים ומחייב את המשתמשים לצפות בסרטון וידאו כדי להבין כיצד להשתמש באפליקציה.
    • com כולל פסקה קטנה של טקסט ומספר מילים בסרגל הניווט בדף הבית שלה.
    • The-Studio.co.il כולל רק כמה מילים ותמונות.
  • יתרונות:
    • עיצוב אתרים מתוחכם יותר
  • חסרונות:
    • קשה יותר ליצור עיצובים באתר 508 תואמים
      • תאימות 508 מתייחסת להתאמת האינטרנט לאנשים עם מוגבלות שאינם יכולים לגשת לאינטרנט באופן המסורתי.

ממשק משתמש שטוח

  • ממשק משתמש שטוח (UI) מתייחס לעיצוב שמתמקד בפונקציונליות, ולא בסגנון.
    • המרכיבים נראים כדי להיראות יותר כמו מה שהם נקראים על שמו.
    • הכל מיועד ל:
      • בהירות
      • פשטות
    • זה אומר להסיר:
      • צללים
      • שיפועים
      • קצוות משופעים
      • הרהורים
  • ראינו את זה כבר ב:
    • חלונות 8
    • אפל iOS 7
    • וורדפרס 3.8
  • עיצוב שטוח פועל נגד עיצוב סקלומורפי.
    • עיצוב סקווומורפי משתמש בפרטים חזותיים בכדי לגרום לדבר אחד להיראות כמו משהו אחר.
      • דוגמה: שימוש בציפוי עץ בפנים לרכב
  • יתרונות:
    • ממשק משתמש פשוט
    • השימוש בצבעים בהירים / מודגשים משפר את מצב הרוח
    • התמקדו בטיפוגרפיה נהדרת
    • חזותיים הם חדים ונקיים
  • חסרונות:
    • חששות שמישות: אנשים לא תמיד יכולים לדעת איפה ללחוץ או לגעת כדי ליצור אינטראקציה.
    • קשה להתאים את לוח הצבעים: ככל שתשתמש בצבעים רבים יותר, זה יכול להיות קשה יותר להתאים אותם כראוי.
    • קל יותר לזהות עיצוב טיפוגרפיה חלש.
    • העיצוב הכללי יכול להיראות פשוט מדי.

תוכן קבוע

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

מקורות

  • גיליון עובדות לטכנולוגיה ניידת – pewinternet.org
  • עיצוב רספונסיבי לאתר: מה זה ואיך להשתמש בו – coding.smashingmagazine.com
  • מהו עיצוב אינטרנט רספונסיבי? – smallbiztrends.com
  • 17,389 תבניות אתר ונושאים החל מ- $ 3 – themeforest.net
  • היתרונות והחסרונות של עיצוב אתרים רספונסיבי – business2community.com
  • מהו עיצוב אתרים Parallax? – הגדרות, טיפים & שיקולים – unleashed-technologies.com
  • נאס”א: פרוספקט – nasaprospect.com
  • סיפור אוכל WWF – נכסים.wwf.org.uk
  • גלילה אינסופית אינה מתאימה לכל אתר – nngroup.com
  • לנצח ומעבר! היתרונות והחסרונות של גלילה אינסופית – inspirationm.com
  • Snapchat – snapchat.com
  • הסטודיו – the-studio.co.il
  • פחות טקסט יותר מולטימדיה – גישה חדשה בעיצוב אתרים – designmodo.com
  • אבודים ונמצאו – דף מיפוי – howto.gov
  • מהו עיצוב שטוח? – gizmodo.com
  • היתרונות והחסרונות של עיצוב שטוח – designmodo.com
  • 18 מגמות מרכזיות לעיצוב אתרים לשנת 2014 – econsultancy.com
  • סרגלי ניווט קבועים: יתרונות וחסרונות – awwwards.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map