20 המגמות החמות ביותר שיהיו עיצוב אתרים בוא 2016

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

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

1. סקיצה App עבור עיצוב ממשק משתמש

סקיצה היא במהירות החלפת Photoshop לכל משימות עיצוב ממשק המשתמש החל נמוך wireframes ל דיוק גבוהה mockups & עיצוב סמל.

Sketch App הוא יישום Mac-only המיועד במיוחד עבור מעצבי אינטרנט וניידים. הוא מציע סביבת עבודה חלקה יותר לעצב אלמנטים וקטוריים עבור כל ממשק, אך הוא גם שומר על תכונות רבות שהיית מצפה מ- Photoshop כמו אפקטי טקסט וסגנונות שכבה.

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

2. IDEs מבוססי דפדפן

Desktop IDEs כבר סביב עשרות שנים עם אפשרויות החל Notepad + + ל Xcode ו- Visual Studio. IDE מקלה על כתיבת קוד עם הצעות והדגשת תחביר (בין שאר התכונות).

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

Cloud IDEs פועלות יותר כמו יישומי אינטרנט שבהם תוכל לשמור קטעי קוד לחשבון שלך לצורך שיתוף או אחסון אישי. CodePen הוא אחד IDEs הפופולריים ביותר עם תמיכה HTML / CSS / JS יחד עם preprocessing אישית כמו ג 'ייד / חאמל ו LESS / SCSS.

Mozilla Thimble הוא עוד IDE למפתחים מתחילים שרוצים ללמוד בזמן שהם קוד. גם Codeply הוא נהדר לבדיקת מסגרות תגובה ספציפיות כמו Bootstrap או Zurb של הקרן ללא צורך להוריד את כל הקבצים.

3. חינם Sass / SCSS Mixins

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

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

חלק mixins לבוא בספריות כמו בורבון בעוד אחרים יכולים להיות פריטים העצמאי. נסה לעשות חיפוש ב GitHub עבור Sass / SCSS mixins לראות מה אתה יכול למצוא.

4. פריסות כרטיס

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

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

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

5. קטעי וידאו מסווג מותאם אישית

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

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

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

6. תצוגה מקדימה של מוצר חי

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

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

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

7. אוטומטי רצים המשימה

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

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

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

8. יליד JS Mobile Apps

אני תומך גדול של שימוש בכלים המתאימים לתפקיד. במקרה של פיתוח אפליקציות לנייד, המשמעות היא Java עבור Android, Objective-C / Swift עבור iOS.

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

הפער להפוך למתכנת אפליקציות לנייד מקצר עם היכולת ליצור אפליקציות לנייד באמצעות JavaScript. PhoneGap הוא עוד אפשרות המבוססת על HTML / CSS / קוד JS.

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

9. שיתוף פעולה כלים עבור עיצוב

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

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

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

10. מסגרות Frontend תגובה

מסגרות Frontend כמו Bootstrap כבר בסביבה במשך שנים ולהמשיך להוכיח שימושי בפרויקטים אישיים ומקצועיים כאחד. עיצוב תגובה הכריח את עצמו למסגרות ויצר דרישה לקוד Frontend במקום רק backend (Django, Laravel, וכו '),.

מעבר ל -2016 אני חושב שנקרא הרבה יותר על מסגרות Frontend מגיבות וערכן בפרויקטים באינטרנט. רבים devs הם בשקיקה מחכה שחרורו של קרן 6 ואת הציבור v1 לשחרר את Bootstrap 4.

מסגרות פחות ידועות אחרות שתוכל לבדוק כוללות Gumby ו- Pure CSS.

11. התמקדות גדולה יותר על עיצוב UX

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

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

12. מנהלי החבילה

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

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

13. מתקדם UI אנימציות

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

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

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

14. מעצבים הלומדים קוד

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

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

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

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

15. חינם באינטרנט כלים & Webapps

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

תוכלו למצוא כל דבר, החל קידוד כתובת האתר / פענוח לעורך Markdown חינם לחלוטין. אפילו Google Drive לקחה את מוצרי Microsoft Office לדפדפן (שוב, ללא תשלום).

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

16. הצמיחה של רכיבי אינטרנט

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

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

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

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

17. למידה מקוונת משאבים

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

אני מרגיש בטוח יותר מאי פעם כי נראה גידול של למידה מקוונת. אתרים מוכרים כמו Treehouse ו- CodeSchool מציעים קורסים מדהימים לצד אתרים חדשים יותר כגון Bitfountain ו- Learn-Verified.

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

18. בצד השרת JavaScript

אמנם היו בעבר אפשרויות עבור צד השרת JS, אף אחד לא חלחלו במהירות כמו Node.js. JavaScript devs נפלו מאוהבים בספריה זו וצפו זה לעלות לתחרות ישירה עם שפות backend אחרים כגון Python או PHP.

הצומת מאפשר למפתחים לבנות אתרי אינטרנט באמצעות שפה אחת עבור שני + Frontend קוד. ומשאבים כמו צומת חבילת מנהל לתת ערך רב יותר Node.js.

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

19. תכונות אתר נתמכות

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

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

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

20. עיצוב חומר באינטרנט

הפרסום של Google בעיצוב חומרים היה הצלחה עצומה עבור מעצבי Android. עיצוב חומר נחשב לשפת עיצוב שמטרתה לפשט את התהליך של יצירת ממשקי משתמש לסמארטפונים של Android.

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

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

סוגר

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

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