20 העלאת מגמות עיצוב אתרים כדי לצפות ב 2017

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

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

1. “מופיע ב” תגים

סטארט, בלוגים, פרויקטים SaaS ואפילו עסקים קטנים כיום באמצעות “כפי שמוצג ב” תגים באתרי האינטרנט שלהם. תגים אלה לעתים קרובות קישור למאמרים על בלוגים המיינסטרים כגון HuffPo, פורבס, CNN, פוקס, ושאר חדשות.

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

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

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

2. מודגש כל כובעי ניווט Nav

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

• הכול באותיות גדולות
• מודגש
• במרווחים שווים
• מיושר לפינה הימנית

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

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

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

3. בלוגים בסגנון מגזין

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

תסתכל אחורה על העיצוב המקורי של TechCrunch כאשר השיקה לראשונה בשנת 2006. נראה כמו בלוג WordPress כללי הנכון?

עכשיו תסתכל על הבית הנוכחי של Techcrunch בשנת 2017:

זה לא רק נראה כמו מגזין, זה גם פונקציות כמו אחד. TechCrunch מפרסם עשרות (אם לא מאות) של הודעות חדשות מדי יום ביומו. הם # 1 go-to מקור חדשות עבור ההפעלה.

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

כאשר אתה חושב על זה, TechCrunch לא השתנה הרבה. זה עדיין “רק בלוג”. אבל זה מתוכנן ומנוהל כמו מגזין, וזה עושה את כל ההבדל.

4. רקע וידאו

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

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

5. רוחות רפאים

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

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

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

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

6. מודאלית חלון opt-ins

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

זו הסיבה שאני חושב אופציונלי opt-in חלונות להמשיך לטפס בשנת 2017.

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

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

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

7. איור & אמנות וקטור

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

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

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

8. sidebars גלילה קבוע

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

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

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

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

9. תוכן העניינים בדף

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

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

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

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

10. עיצובים צבעוניים בהירים

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

דף הבית של Rentberry הוא דוגמה נהדרת שגם משתמשת בו טונות של gradients. וזה אפילו יש את הנ"ל “מופיע ב” תגים הממוקם מתחת! שתי מגמות באתר אחד.

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

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

11. גלילה הנפשות

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

מגמה זו היא בעיקר מוגבל לחברות סטארט-אפ וחברות SaaS כי רוצה קצת pizzazz בעיצוב שלהם.

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

12. דף יחיד Apps (SPA)

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

דוגמאות נפוצות הן אתרים כמו Gmail ו- Facebook. אבל עם יותר טכנולוגיית JS, אני מבחין יותר & יותר ספא פיתחה כל הזמן. לעזאזל, אפילו CodePen יכול להיחשב ספא.

עם ספריות חזיתיות חזקות כגון React & Aurelia, זה הולך להיות אפילו קל יותר ליצור ספא מאפס ב 2017.

13. סרגלי חיפוש הניתנים לשינוי

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

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

14. הודעות Adblock

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

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

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

15. סמלי טהור SVG

גרפיקה SVG כבר התחלחל לתוך האינטרנט אבל הם גדלים יותר מיום ליום. ויש לי תחושה כי 2017 יהיה שנה ענקית עבור SVGs ברשת.

אתה יכול למצוא אלפי חינם סמלי סמל SVG באתרים כמו Flaticon אם אתה יודע איך לחפש. אבל אתה יכול גם קוד SVGs לתוך HTML, למשל על ידי שימוש בדוגמה זו על CodePen.

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

16. Adobe XD

Adobe לכבות בטא מלאה של Adobe XD בשנת 2016, והיא גדלה במהירות. זה כרגע תומך גם MAC & Windows, וזה בשלב הבדיקה לפני שהוא מגולגל לגמרי החוצה.

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

אני מאמין בתוקף שאנחנו יהיה לקרוא הרבה יותר על Adobe XD בשנה הקרובה. זה עלול להפוך את go-to תוכנה עבור עיצוב Mockups UI-אז אנחנו יכולים סוף סוף להשתמש פוטושופ ככלי מניפולציה תמונה (כפי שנועד).

עם עליית התוכנה החדשה, מגיע עשרות הדרכות ערכות חינם GUI גם כן. אתה יכול למצוא הרבה Adobe XD freebies ב dribbble יחד עם שני XD ממוקד אתרים freebie Designmine ו XD גורו.

17. עוד תפריטים המבורגר

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

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

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

18. סמלי תכונות מוצר

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

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

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

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

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

19. קריאה לפעולה למעלה

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

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

אני לא יכול להגיד לך איך לעצב CTA או כיצד לייעל אותו להמרות. אבל אני יכול לומר את המגמה נראה כי הצבת אלה CTA מעל לקפל וברור עבור כל המבקרים לראות.

20. שטח תוכן קטן יותר

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

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

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

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

מסיימים

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

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