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

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

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

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

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

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

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

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

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

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