חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם

מדוע כל האתרים נראים אותו הדבר?

דור מרקוס | ספטמבר 2019

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

זו תמיד אותה הגברת

מתי לאחרונה גלשתם באתר שלא נראה כך?

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

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

Once upon a site

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

הטרנדים החזיקו מעמד למשך תקופה כזו או אחרת וכשתוקפם פג הוחלפו בחדשים. דוגמאות כאלו ניתן לראות באתרים שנבנו ברוחב 800 פיקסל בליווי תפריט צד ו-Ticker חדשות מלמעלה; טרנד האתרים הבנויים בBoxed כאשר כל האתר נתחם במסגרת מה-Header ועד הFooter; וכמובן טרנד הHero-Section וה-Parallax שעליו אפילו אין צורך להרחיב.

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

שורש הבעיה

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

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

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

רספונסיביות

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

הלקוח (לא) תמיד צודק

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

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

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

משתמש, חוויה ומה שביניהם

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

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

האם נגזר עלינו לבנות אתרים שנראים אותו הדבר?

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

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

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

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

קומיקס או לא להיות

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

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

החיים בעולם האמיתי

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

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

תמונה אחת שווה

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

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

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

קונטרסט

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

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

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

מי הזיז את הגבינה שלי?

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

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

רק על עצמי לספר ידעתי

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

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

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

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

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

כל משבר הוא הזדמנות

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

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

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

רוצים להיות כותבים במגזין שלנו?

דוד מרקוס

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

אהבתם? שתפו.
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב telegram
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

3 Responses

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להיות כותבים במגזין שלנו?

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

רוצים להיות חלק מאלמנטור?

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