15 אינטרנט מגמות עיצוב להיזהר בשנת 2012

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

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

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

1. עיצוב ממשק תגובה

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

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

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

2. מסך מגע התקנים ניידים

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

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

3. טונות של freebies!

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

שני המועדפים האישיים שלי הם להוריד PSD ו Designmoo, שניהם מתעדכנים לעתים קרובות על ידי חברים באיכות הגבוהה ביותר. בנוסף ארכיון Hongkat Freebies יש שפע של מוצרים טובים כדי לבדוק. בכל תקופה לפני זה ממש מעולם לא היה קל כל כך להוריד ממשקי אינטרנט חינם, פריסות, לוגו, באנרים, וכמעט כל סוג אחר של PSD / קובץ AI!

כמה הורדות מסודר

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

ממשק אינטרנט מיני

אפל מיני נגן מוסיקה

תגיות הזזה

מחוון תמונה כהה

תיבות חיפוש

טופס כניסה / כניסה

תיבת כניסה מודאלית

טופס כניסה נקי

טבלאות תמחור

מינימלי טוען ברים

קובץ מצורף מוקפץ

4. HTML5 ו CSS3 סטנדרטים

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

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

דבק בסטנדרטים חדשים אלה גם להפוך פיתוח ב- JavaScript ו- jQuery פשוט הרבה יותר. מפתחים כבר מפרסמים ומשתפים את קוד הפרויקט HTML5 / CSS3 שלהם באינטרנט, ואם הדברים יימשכו, בוודאי נהיה לב הרבה יותר מזה של השנה הבאה.

5. סרטים וכרזות

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

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

6. פרימיום WordPress ערכות נושא

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

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

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

7. Online מגזינים

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

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

8. קל צללים ירידה

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

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

9. טיפוגרפיה דינמית

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

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

חלופה נוספת היא Google Web Fonts שמתנהגת באופן דומה ל- Typekit. אני ממליץ על המעצבים המעוניינים לבדוק את CSS3 של @ font-face שאילתה, כפי שאתה נתון הרבה יותר יצירתיות. קוד זה יכול לשמש כדי לייבא .ttf או .otf גופן קובץ משרת האינטרנט שלך ולכלול אותו גופן styleheet שמיש! עם כל כך הרבה מערכות חלופיות המשמשות לבניית גופנים דינאמיים אני מצפה 2012 להחזיק גל של חדשנות כישרון העיצוב בתחום זה.

10. גלריית תמונות מצגות

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

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

11. תיבות קופצות מודאליות

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

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

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

12. רשימות מעוררות השראה

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

ברוב הנושאים של הבלוג אני מוצא את סרגל הצד כולו נטען עם רשימות! שלא לדבר על מעצבים אשר יצרו סגנונות CSS מדהים עבור רשימות המאמר שלהם ערכים. אנחנו מכוסים השראה סגנונות רשימה בהודעה אחרת מוקדם יותר השנה אשר עשוי לתת לך קצת יותר תובנה בעניין. במבט קדימה לתוך 2012 אני מצפה כמה דוגמאות יצירתיים באמת, אולי בקנה אחד עם פריסה מותאמת אישית של Flowapp עבור משימות & אל dos.

13. התמונות הממוזערות תמונה ממוזערת

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

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

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

14. סמלים מוגזמים

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

קשה לחזות כיצד מגמות אלה יהיו הוגנות כאשר נעבור לתוך 2012. מצד אחד סמלים אלה יכולים להיות clunky ולוקח יותר מקום מהנדרש. עם זאת, אנחנו אפילו לא קרובים להכות מחסור של iOS / OSX Apps ומעצבים עדיין churning מחוץ פיקסל מושלם מפרט הסמלים. שלא לדבר על זה מעצבי אינטרנט הם עכשיו כולל סמלים גדולים בתוך כמעט כל דף מיתוג! זוהי דרך טובה לשים את תשומת הלב הישירה של המבקר שלך ולבנות שם עבור החברה שלך.

15. היפר מופרז

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

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

סיכום

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