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

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

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

מארק רבינוביץ

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

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

התמונה למעלה מציגה רק חלק קטן מהעמוד של מארק. ניתן לצפות בתמונה המלאהכָּאןאוֹלבקר באתר שלו.

BJW

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

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

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

פאולו קאפדוויל

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

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

בדוקהאתר של פאולובִּפְעוּלָה.

מאט ריד

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

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

שלב 1

: קבל תמונה מדהימה

שלב 2

: שרטט פריסה במחברת המולסקי הקטנה שלי

שלב 3

: פוטושופ

שלב 4

: Tumblr + קוד כמה CSS 1.2 ו-HTML9

שלב 5

: תאמת ש[ISH...או] לא, לא אכפת לי וגם הדודה שלי שאוהבת את האתרים שלי.

שלב 6

: $$$$$$$$$$$$$$$$$

בדוק אתתצוגה מלאה של העמוד של מאטאו סתםלבקר באתר שלו.

רוב סוייר

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

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

יש הרבה יותר בדף של רוב ממה שאתה יכול לראות למעלה.בדוק את זה.

סחאס קטה

תיק העבודות של Sahas מחקה מכשיר Windows Phone 7, שומר על הכל קומפקטי ומהנה לניווט. הוא הרכיב את זה באמצעות HTML5, CSS3, JavaScript, קצת פוטושופ וכמה נכסים מ-Windows Phone 7 SDK. בסך הכל זה מהווה דרך מהנה לנווט בדף הנחיתה שלו וגם כולל לא מעט מידע בחלל קטן.

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

הטייק אווי

מה אתה יכול לקחת מהדוגמאות האלה? להלן שלושת קווי הדמיון החשובים ביותר שהופכים את הדפים הללו למעולים:

• היוצרים בחרו באסתטיקה שמרגישה להם אישית.

• הדפים קודדו מאפס כדי לספק שליטה רבה יותר על המראה והתחושה ממה שיוצר דפי נחיתה רגיל יכול לספק. (אגב, אם אתה רוצה ללמוד את המיומנויות האלה יש לנו קורס Lifehacker Night School לשניהםיצירת אתר אינטרנטוJavaScript.)

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

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