18 דוגמאות של דפי נחיתה עם עיצוב מעניין שבבי יוצא דופן

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

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

ראה, השראה, להחיל את הרעיונות האהובים עליך בפועל, לערבב אותם עם שלך ואל תשכח לבצע בדיקות A / B - זה המתכון הנכון רק ליצירת דפי נחיתה הרוצח.

טופס מורחב

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

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

שני לחצני קריאה לפעולה

בדף הנחיתה של מתזמן המשימות wunderlist.com/ru - שתי שיחות לפעולה בבת אחת, המחזקות זו את זו: "צור חשבון חינם" ו "הורד Wunderlist". משתמשים לוחצים על שני הקישורים, ההמרה גדלה, ודף הנחיתה עושה את עבודתו בצורה מושלמת.

נתונים ספציפיים (תוצאות)

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

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

התאמה אישית

ללא שם: נחיתות בדפוס חסר פנים - br-r, מה יכול להיות עצוב! להחיות את דף אחד, להוסיף אש, עניין לקוח פוטנציאלי. לדוגמה, בדף יצירת האתר של טקטרה, יש תמונות של עובדים המעורבים ישירות בזה. המבקר נכנס ורואה: אהה, לא מפתחים מופשטים יהיה מעורב המשאב שלי, אבל די חי Svyatoslav, פולינה, ארטיום ואחרים.

טופס תשובה נוח

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

סקירות של לקוחות

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

הדגמת התוצאות

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

אפקט פרלקסה

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

אנימציה

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

תשומת לב, השאלה: מה הפונקציה עושה אנימציה זו? אתה יכול לענות על הערות למאמר.

איורים

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

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

רב

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

הנה דוגמה של multilending עבור החברה Oviont, שעשינו.

הלקוח תכנן ליצור דפי נחיתה נפרדים לשלושה מוצרים: כלי אוטומציה משרדית.

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

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

  • תיאור הפונקציונליות;
  • מודולים נוספים;
  • שאלות נפוצות אודות השימוש;
  • יומיים
  • .

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

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

אפקט ריחוף

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

פיצול פריסות

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

3D גרפיקה ומציאות מוגברת

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

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

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

מודל תלת מימדי של הקובייה ניתן לראות באיור (gif).

מה הלקוח רצה

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

מה שעשינו

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

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

הנחיתה היא לגמרי אדפטיבית.

בחירה אינטראקטיבית של צבעי פנים וצבעי רהיטים

דף הנחיתה היוצא דופן "DSK.Color" הוא היכולת לבחור באופן עצמאי את צבע הרהיטים ופריטי פנים באמצעות לוח אינטראקטיבי.

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

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

מה הלקוח רצה

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

מה שעשינו

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

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

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

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

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

מטענים מראש חריגים ורגילים

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

מהו preloader ומה משימות זה פותר

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

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

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

Preloaders מיושמים באמצעות כלי פיתוח חזיתיים סטנדרטיים: HTML, CSS, JavaScript וספריות נוספות ומסגרות, לדוגמה, jQuery, React.

כיצד אנו משפרים נחיתות עם preloaders

אנו יוצרים preloaders ייחודי, כולל אלה אנימציה. הנה כמה מעבודות שלנו.

  • קובי

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

  • רמה

באתר Levellen Interiors השתמשנו בטעינה מראש בצורת לוגו של חברה. זהו אלמנט נוסף של מיתוג האתר.

  • ולנט

בדף הנחיתה של וואלנט אפשר לראות טווה בצורת מלבן טורקיז.

  • פאריאל

האתר Parielle יש מעגל קלאסי בצורת preloader.

  • פרוייקט

בפרויקט הנחיתה נעשה שימוש במטען מראש בצורת מלבן.

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

אינטראקטיבית

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

איך עובד נחיתה

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

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

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

תכונות של יישום

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

עיצוב נכון

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

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

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

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

Loading...

עזוב את ההערה שלך