עם 2012 בפתח, אנחנו שמים לב למגמה ערה של אתרים מעולים שיוצאים בכמויות מדי יום. נראה כמו שצמיחת הווב נמצאת בשיאה.
אבל מה עשה את האתרים השנה לכל כך מושכים?
מה גורם לאתרים האלו להיות מוצלחים?
מה הטרנדים שניתן לראות? ומה אפשר לצפות לעתיד?
בפוסט זה אני רוצה לדבר על הטרנדים של שנה זו באמצעות האתרים מהשבוע האחרון – השבוע האחרון של שנת 2011.
אנחנו כאן בפיקסל פרפקט רוצים לאחל לכולכם שנה מעולה ומוצלחת, מלאת עיצובים מדהימים, לקוחות נוחים (ועשירים) והמון המון השראה וכיף!
הטיפול באלמנטים ופרטי העיצוב: סרטים, טקסטורות ואפקטי לטרפרס
בשנה האחרונה אנחנו יכולנו לשים לב למגמה עולה של השימוש באלמנטים עיצוביים כגון Ribbons וכל מני סוגי Banners שהתחילו להיות יותר ויותר נפוצים בעיצוב ברשת. האלמנטים האלו לא סתם תפסו פופולריות, הם אכן מוסיפים אלגנטיות לעיצוב ונותנים ביטוי יפה לטיפוגרפיה.
בנוסף ניתן לראות שימוש בשילוב של טקסטורות עם אפקט הלטרפרס (האפקט המוטבע) אשר נותנים נפח לעיצוב. כמעט ולא ניתן למצוא אתרים עם רקע לבן חלק כי אז האפקט לטרפרס לא נראה (לרוב מדובר בצל של פיקסל אחד במרחק פיקסל אחד מהטקסט- או ב-CSS text-shadow:1px 1px 1px white;).
הטקסטורות יוצרות עולם עשיר של שילובי גוונים וטקטיליות (התחושה שמשהו הוא בר מישוש ושמעוררת אותנו לגעת בו). השילוב של טיפוגרפיה על משטחים טקטיליים הוא פשוט שילוב מנצח ומרהיב.
אתר קטן ומדהים באיכויות מדהימות וחוויה חלקה וזורמת. הלוגו חמוד גם כן.
[sep]
אתר יפייפה עם טקסטורות, טיפוגרפיה ואלמנטים עיצוביים איכותיים ביותר. העיצוב לא נגמר שם.. מצבי הרולאובר שבאתר הם שעושים את החוויה בו למהנה וחלקה. -CSS3 והתוצאה הינה חווית משתמש מעולה!
אנימציות ב-HTML5 ו-CSS3
האנימציות אשר ניתן ליצור באמצעות HTML5 ו-CSS3 מביאות עימן בשורה: כבר לא צריך פלאש!
זה נכון, פלאש מת.
אנחנו רואים המון אתרים בזמן האחרון שעושים את מה שפעם עשו עם פלאש… רק ללא פלאש.
אם אי פעם היתה שאלה לגבי האנימציות שניתן ליצור עם הכלים של HTML5 בשילוב עם ג'אווה סקריפט ו-CSS3, היום כבר אין.
מלא כלים גם יצאו על מנת לעשות את המעבר הזה קל בשבילנו. כולל כלים אונליין להפיכת swf ל-html5, וגם התוסף המעולה לפלאש- swiffy! (הנה הסבר קצר על התוסף).
בקרוב הכל יעבור ל-HTML5. יותר ויותר דפדפנים מתחילים לתמוך בשפה החדשה, והיא כובשת את עולם הטכנולוגיה.
אתר מעולה ב-HTML5 עם אנימציות ואלמנטים עיצוביים מעניינים, טיפוגרפיה ואייקונים איכותיים.
[sep]
זה פשוט מגניב! זאת פעם ראשונה שאני רואה אתר בסגנון הזה שהוא לא בפלאש.
[sep]
בהקשר של CSS3 ו-HTML5 אני חייב לציין כאן גם את האתר הזה שהצגנו בהשראה בשישי לפני כמה חודשים.
ט-י-פ-ו-ג-ר-פ-י-ה
טיפוגרפיה היא חלק בלתי נפרד מהעיצוב שלנו, והיא גם החלק לפעמים שהכי חשוב.
אתר עם טיפוגרפיה נכונה הוא קריא, ברור ונקי. אתר עם טיפוגרפיה נכונה ונועזת תמיד ייצא מדהים!
אנחנו שמים לב יותר ויותר לנושא של הטמעת פונטים (גם בארץ). למי שעוד לא קרא את המדריך שכתבנו פה על הטמעת פונטים עבריים באמצעות CSS בלבד מוזמן לקרוא.
הטיפוגרפיה גדולה יותר, נועזת יותר, והדבר היפה הוא שהיא וקטורית לחלוטין על הדפדפן. אפשר לעשות קופי פייסט לדברים שנראים לפעמים כמו פוסטר מעוצב (ואתם חייבים לראות את האתר של Beercamp 2011 אם עוד לא ראיתם).
השילוב של טיפוגרפיה עם CSS הוא שילוב קטלני.
אתר מעולה עם טיפוגרפיה מעניינת ואפקטים של אנימציות בג'אוה סקריפט שמופעלות ככל שגוללים למטה. סה"כ החוויה פה היא גם אינפורמטיבית וגם מרשימה.
אפקט הפרלקס (parallax)
האפקט המהמם הזה פעם היה רק בקולנוע, ואז הגיע לשימוש בווב עם פלאש,
אך מאז יציאתו של האתר של נייק – Better World אנחנו לא מפסיקים לראות אותו באתרים מדהימים אחרים (לדוגמה כאן, כאן וכאן).
מאז גם יצאו כמה וכמה מדריכים ליצירת האפקט (לדוגמה כאן, כאן וכאן).
מה שהכי אהבתי באתר הזה הוא האפקט פרלקס בסליידר. הניצול של הפרלקס על מנת לדמות שטח פנורמי הוא אינו חדש ונעשה בזמנו עם פלאש מספר פעמים. אך היצירה של אפקט זה בפרלקס HTML5 וג'אווה סקריפט זה כיף לראות!
אקספירימנטים
אנחנו שמים לב להמון אתרים מורכבים וללא חוויה אחידה. זה חלק מהניסוי וטעיה של התקופה הנפלאה הזאת בעיצוב הווב.
כמו בכל אקספירמנט – התוצאה יכולה להיות נוראית או פשוט מגניבה. אבל מה שבטוח -רק ככה מתקדמים!
אתר מוזר קצת בהתחלה אבל ברגע שמתחילים לסייר בו מגלים קומפוזיציות מעניינות ואפקטים ממש מגניבים. כן, אני יודע השתמשתי במילה 'מגניבים'. חוץ מזה שהוא קשור לסביבונים אז זה מתאים לשבוע האחרון.
[sep]
נשארו רק עוד 2 טרנדים חשובים שראינו השנה וששווה ביותר לציין פה:
אתרים רספונסיביים (Responsive web design)
בעת ריבוי הפלטפורמות – יש דרישה לאתרים רספונסיבים. אתרים שמתאימים את עצמם לכל פלטפורמה שרק יהיו (כמו כאן וכאן – רק תפתחו את האתר ותקטינו את גודל הדפדפן כדי לראות מה קורה).
לא פעם ולא פעמיים ציינתי בפיקסלגיק קישורים למדריכים בנושא (כמו כאן וכאן), וגם אכתוב בקרוב פוסט על השיטה לייצר אתר רספונסיבי.
חזרתם של הגיפים המונפשים (Animated Gifs)
השנה יכולנו לראות כמה דוגמאות מעולות לשימוש ב-animated gifs בעיצוב ברשת ובכלל… אולי זה רק טרנד שהיה השנה, אבל אולי גם נראה אותם בהמשך.
ומה צפוי לנו ב2012?
השאלה שאנחנו נשמח לדעת – אך בעולם המהיר של הווב אנחנו לעולם לא נוכל להיות לגמרי מדוייקים.
השנה הקרובה אנחנו בטוח נראה הרבה יותר אנימציות ואפקטים של HTML5 ו-CSS3. אנחנו גם נראה את הפופולאריות של העיצובים הרספונסיביים גדלה, כי זה פשוט תופס תאוצה עכשיו ויגיע לשיאו לדעתי בשנת 2012.
אנחנו בטוח נראה עוד המון שימוש בטקסטורות ובאפקט הלטרפרס כי זה בלתי נמנע, זה אינו טרנד שיחלוף כל כך מהר.
הטיפוגרפיה גם רק תשתפר. עם יותר ויותר ספריות opensouce לגופנים- מי יודע… אולי גם נמצא את עצמינו עם גופני opensource עבריים בארץ (אאאאאאאמן!).
הטכנולוגיה מתקדמת במהירות. כל כך מהר שקשה לעקוב אחריה. אבל ההמלצה שלי היא – להמשיך ולהתנסות. כמה שיותר. לשאוב השראה מבלוגים כמו זה ואחרים, להשתתף באירועים, ולנסות לשבור מוסכמות ולפרוץ גבולות מתוך הכרה של הגבולות הקיימים באותו רגע נתון!
רק כך נוכל להמשיך ולהתקדם לעבר אתרים מרשימים יותר ויצירת חוויות משתשמש ייחודית ויעילות.
שנה אזרחית נהדרת לכל קוראינו!
רוצים לאחל לנו גם? תנו בלייק או כתבו פה תגובה :)
