עיצוב אתרים בסגנון מגזיני

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

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

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

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

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

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

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

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

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

כפתורים עם צל קשיח שנלחצים פיזית לתוך הדף וקופצים בחזרה בתנועת קפיץ.

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

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

כפתור לייק שקופץ ומפזר ריבועים ועיגולים קטנים כמו נייר גזור.

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

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

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

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

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

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

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

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

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

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

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

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

אקורדיון שירותים שבו פתיחת פריט חושפת בלוק צבע בתנועת clip-path ורשימת תוצרים.

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

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

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

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

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

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

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

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

שלושה כרטיסי שירות של Smile Lab מונחים כמו קלפים ביד. במעבר עכבר הם נפרשים בתלת־ממד, והכרטיס שמצביעים עליו מתרומם קדימה.

טופס הזמנה קומפקטי ל־Grain House: בוחרים שירות מתוך צ׳יפים קופצניים, מקלידים מייל עם קו תחתון שמצטייר, ומקבלים אישור עם חותמת.

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

באנר הצהרה ל־Crumb & Co. המילים נוחתות אחת־אחת עם סיבוב קפיצי, ובמעבר עכבר הן נוטות הרחק מהסמן.

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

שלושה כרטיסי שירות של Open Door מונחים כמו קלפים ביד. במעבר עכבר הם נפרשים בתלת־ממד, והכרטיס שמצביעים עליו מתרומם קדימה.

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

טופס הזמנה קומפקטי ל־Studio Salt: בוחרים שיעור מתוך צ׳יפים קופצניים, מקלידים מייל עם קו תחתון שמצטייר, ומקבלים אישור עם חותמת.

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

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

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

טופס קומפקטי ל־Ben-Ami & Katz: בוחרים שירות מתוך צ׳יפים קופצניים, מקלידים מייל עם קו תחתון שמצטייר, ומקבלים אישור עם חותמת.

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

שלושה כרטיסי מוצר של Fieldnote Roasters מונחים כמו קלפים ביד. במעבר עכבר הם נפרשים בתלת־ממד, והכרטיס שמצביעים עליו מתרומם קדימה.

באנר הצהרה ל־Petal & Stem. המילים נוחתות אחת־אחת עם סיבוב קפיצי, ובמעבר עכבר הן נוטות הרחק מהסמן.

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

טופס קומפקטי ל־Fieldnote Roasters: בוחרים שירות מתוך צ׳יפים קופצניים, מקלידים מייל עם קו תחתון שמצטייר, ומקבלים אישור עם חותמת.

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

שלושה כרטיסי שירות של Haddad Arch. מונחים כמו קלפים ביד. במעבר עכבר הם נפרשים בתלת־ממד, והכרטיס שמצביעים עליו מתרומם קדימה.

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

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

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

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

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

טופס הזמנה קומפקטי ל־Petal & Stem: בוחרים שירות מצ׳יפים קפיציים, מקלידים מייל עם קו תחתון שמצטייר, ומקבלים אישור עם חותמת.

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

באנר הצהרה ל־Ben-Ami & Katz. המילים נוחתות אחת־אחת עם סיבוב קפיצי, ובמעבר עכבר הן נוטות הרחק מהסמן.

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