המדריך האולטימטיבי לתמונות גיבורים [שיטות עבודה מומלצות + דוגמאות]

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

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

Yes, it’s a lot of weight for one piece of visual content. That’s why it’s the most heroic of all.

This guide will explain how to level up your website with the perfect hero image, from choosing a graphic inspired by the latest design trends to ensuring your image is the optimal size. We’ll also walk through hero image examples to spark ideas for your own website. Get ready for some design eye candy.

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

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

In web design, a hero image is the first photo, graphic, illustration, or video people see on a web page. It typically incorporates both an image and text in order to convey a company’s core message. Hero images sit above the fold and often feature a call to action (CTA) that encourages people to dive deeper into the website. The goal of this image is to add energy and excitement to a page. You want it to show off your brand’s style, share the purpose of your site, and make people excited to explore.

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

One common mistake when designing a hero image is getting the right file size. Too large, your loading speed plummets. Too small, everything looks pixelated. Let’s walk through the different hero image sizes so you can create a stunning image every time.

מידות תמונת גיבור

Finding the right aspect ratio and cropping can get confusing when sizing a hero image. Banner hero images aren’t the same as full-screen images, and every image has to scale to fit the space. You also have to consider that no one browses in exactly the same way. Personally, my screen is usually zoomed in to 120%, but others may have dozens of tabs open that are all different sizes.

Some image cropping is bound to occur as your hero image scales to fit a variety of screens, so it’s best to think of the following dimensions as guidelines, not rigid rules.

1. מידות מסך מלא ותמונות באנר

הגודל האידיאלי לתמונת גיבור במסך מלא הוא ברוחב 1,200 פיקסלים עם יחס רוחב-גובה של 16:9. עבור תמונת גיבור באנר, הגודל האידיאלי הוא 1600 x 500 פיקסלים.

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

You can check your loading speed for desktop and mobile with Google’s תובנות PageSpeed. It gives a comprehensive look at which site content loads first and where there’s room for improvement. Aim for a זמן טעינת עמוד של שניה עד שתיים because you’ll likely lose people if it’s over five seconds.

2. מידות תמונת גיבור נייד

הגודל האידיאלי לתמונת גיבור נייד הוא 800 x 1,200 פיקסלים.

While it’s important to consider how your hero image looks on a desktop, you can’t ignore the mobile experience. Nearly 55% מתעבורת האתר העולמית בשנת 2021 נוצר בטלפון נייד.

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

3. דחיסת תמונת גיבור

אתה רוצה לדחוס את תמונת הגיבור שלך אם יש לך גודל קובץ גדול (כל דבר מעל 1MB הוא גדול מדי). אתה יכול להשתמש באתרים כמו TinyJPG, דחוס את JPG, או Adobe’s Photoshop Compressor כדי להקטין את הגודל מבלי להפחית את האיכות. רק הקפד לקבוע את המידות הנכונות מראש, אחרת התמונה עשויה להיראות מטושטשת או מתוחה.

When sizing a hero image, check your Google analytics to see the typical screen resolution of your website visitors. Then, design with that target audience in mind. Just remember to test out your hero image on multiple browsers, screens, and phones to see how it scales. Once you have the dimensions right, it’s time to work it into your web page using HTML and CSS.

HTML תמונת גיבור

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

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

הדברים העיקריים שיש לזכור הם:

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

Follow these steps to set up an eye-catching hero image. Note: The examples below include HTML elements and CSS rules, but I’ll explain the difference between the two later on.

1. צור את המבנה.

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

מקור תמונה

מקור תמונה

2. הוסף את התוכן שלך.

Once the structure is in place, it’s time to personalize your image. Add an image, choose a custom font, craft a header and subheader, and create a button with an enticing CTA. If you want to add a filter to your background image (without applying it to the text), DeveloperDrive recommends including the filter before your .גיבור-תוכן קוד.

מקור תמונה

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

שום תמונת גיבור אינה שלמה בלי כפתור שדוחף אנשים לפעול. שלב אחד בתמונה שלך עם אֵלֵמֶנט. רק הקפד לכלול את גופן משפחתי since the text doesn’t automatically translate from the .גיבור-תוכן אלמנט.

3. מרכז את התוכן.

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

מקור תמונה

לטקסט ממורכז, כלול א .text-align: center כלל תחת אלמנט התוכן המרכזי שלך. בדוגמה הבאה, הטקסט מקונן מתחת ל- .גיבור-תוכן קוד.

מקור תמונה

4. הפוך אותו לרספונסיבי.

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

מקור תמונה

5. בדוק את התצוגה.

מזל טוב, מבנה ה-HTML שלך מוגדר! בדוק כיצד התמונה, הטקסט, הכפתור, השוליים, הריפוד והריכוז נראים בגדלי מסך שונים. אם משהו נראה כבוי, סרק את הקוד שלך כדי לראות אם אתה יכול למצוא בעיות. להנחיות מפורטות על יצירה ופתרון בעיות עם HTML, עיין במאמר זה מאת DeveloperDrive. All look good? It’s time to add style with CSS.

תמונת גיבור CSS

While HTML creates order, CSS (Cascading Style Sheets) adds flair. It’s a rule-based language that complements the HTML elements by applying stylistic effects. For example, CSS lets you turn the text in a hero image header bright yellow so it pops against the purple background.

If you don’t include CSS within your hero image, the HTML elements default to the basic browser properties like the example below.

מקור תמונה

That’s not the most attractive web page, right?

By including CSS rules, you can develop an image that draws in visitors instead of scaring them away. The above HTML examples include CSS rules, but let’s walk through a basic design so you can work it into your own image.

התבנית הבאה מתארת ​​את ה-HTML וה-CSS הבסיסיים הדרושים ליצירת תמונת גיבור במסך מלא. אתה יכול להתאים את הסגנון על ידי שינוי הכללים תחת .גיבור or .hero-text אלמנטים, כמו גופן משפחתי, צֶבַע, גבול, או padding-top.

מקור תמונה

למידע נוסף והשראה על דרכים להשתמש ב-CSS לתמונות, חפש ב דימוי גיבור forum on GitHub. Now, it’s time to check out what good hero image coding can do for a company’s web page.

דוגמאות לתמונת גיבור

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

כדי ליצור תמונת גיבור רלוונטית היום, הסתכלו על מגמות העיצוב הללו.

1. אנימציית פרלקסה וגלילה

We experience parallax every day when watching cars pass by or walking down the street. It’s the optical illusion that makes objects close to us appear to move faster than objects farther away. In web design, parallax uses foreground and background to recreate this effect. The result seems like magic. Just make sure not to overwhelm visitors by incorporating too many moving elements. Simplicity is key here.

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

2. קומפוזיציות מופשטות

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

3. ערכות צבעים רכות

המבוגר הממוצע מבלה כמעט שמונה שעות ביום עם מדיה דיגיטלית — and that can lead to a lot of eye strain. Web designers have taken note and are starting to lean toward hero images with neutral, pleasing color palettes. This trend is popping up on retail, wellness, and medical websites to offer a more comfortable experience that’s easy on the eyes.

מקור תמונה

4. מוצרים כאלמנטים עיצוביים

Products are the star of the show when it comes to hero images. Companies want to show their offerings and entice visitors to learn more about the features. For hero images, it’s common to see products being used as graphic elements or deconstructed so visitors can dig into the details. Tech and retail companies often use this type of hero image, but it can work for any brand looking to put its product at the forefront.

מקור תמונה

מקור תמונה

5. צבע אמיתי

So long flat colors, hello fine 3-D shading. This trend in hero image web design is all about making people feel like they’re inside the screen. Designers create these realistic experiences using gradients, shadows, and blended colors. While this trend will likely stay in tech and apps, it’s great for pulling people into the world of your website.

מקור תמונה

6 סרטונים

מחקר של Wyzowl מצא כי 84% מהאנשים שוכנעו לקנות מוצר או שירות על ידי צפייה בסרטון של מותג. This makes video the perfect visual content for an attention-grabbing hero image. If you decide to use a video, it’s best to keep it under 30 seconds long and on a loop. As mentioned above, you’ll want to switch out the video for a static hero image for your mobile site so it doesn’t eat up data or take long to load.

שיטות עבודה מומלצות לתמונת גיבור

Trends are only one part of creating a great hero image. The rest of the magic relies on tried-and-true design standards. Even if you’re not a trained designer, you can follow these best practices for a hero image that hits home with your audience.

1. גודל

We already talked about the best dimensions for hero images above (1,200 pixels and a 16:9 aspect ratio), so consider this a reminder of how important it is to have the right size. You don’t want the browsers to resize an image for you or you might wind up with a funky, stretched visual that puts off visitors.

טיפ מקצועי: נסה עם קובצי PNG ו-JPG כדי להבין מה מביא למהירות טעינת עמודים מהירה יותר.

2. הרמוניה

People are instantly distracted by bad design and will click off your site if your hero image doesn’t harmonize with the rest of your layout. Keep your aesthetic in sync by carefully selecting the fonts, sizes, colors, navigation, visuals, and copy.

It’s helpful to reference your זהות מותג והנחיות when coming up with a hero image concept. You don’t want people to lose interest before getting to the good stuff.

3. ארגון

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

כאשר ל תמונה רלוונטית is paired with information, people can remember 65% of the information three days later. But only 10% is remembered from information alone. Make sure your message is clear and connects with your visuals. It’s helpful to set up a simple wireframe for how your hero image will be organized on the page.

4. מְקוֹרִיוּת

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

אתה יכול להגמיש את היצירתיות שלך על ידי יצירת תמונות גיבור מקוריות עם קנבה או לקבל השראה Behance. חסרות תמונות איכותיות? לְדַפדֵף Unsplash or Pexels למגוון תמונות באיכות גבוהה שניתן להשתמש בהן למטרות מסחריות ולא מסחריות.

5. עֲקֵבִיוּת

המאבק הגדול ביותר ליצור ויזואליה מרתקת? 43% מהמשווקים say it’s producing them consistently. To get on a set schedule, set aside the time and resources you need to create visuals — even add it to your marketing budget.

If you’re crunched for time, consider revamping your old graphics. It’s a smart way to save time, and 51% מהחברות have found it’s efficient and effective.

There’s nothing worse than landing on a web page that looks like it was made in the dotcom bubble. It looks sketchy, and you’re afraid to click on anything in case it redirects you to some kind of virus. On the other hand, being greeted by a beautiful hero image makes you want to stay and explore the page.

As the first touchpoint people have with your brand, hero images have a major impact on your brand perception, website traffic, and conversion. So it’s time to put your newfound knowledge into practice and design one that draws people in from the first look.

מקור: https://blog.hubspot.com/marketing/hero-image