אז מה הקשר בין עיצוב ובניית אתרים ולמה הם חייבים לבוא ביחד?
אם גלשתם באינטרנט בשנות התשעים, אתם בטח זוכרים שרוב האתרים היו מורכבים בעיקר משורות טקסט בפונט מכוער עם רקע בצבע אחיד ובדרך כלל גם תמונות באיכות נמוכה.
היו גם כאלו שהגדילו לעשות וחילקו את העמוד לכמה עמודים באמצעות "פריימים" (Frames) אחד הדברים המכוערים ביותר שנוצרו מעולם וטוב שנפטרנו ממנו…
רוצה לקבל הצעה לבניית אתר? כמה פרטים ואחזור אליך בהקדם
עיצוב ובניית אתרים לעסקים – אז מה חשוב לדעת על זה?
אני מספר לכם את כל זה כדי שתבינו שעיצוב אתרים ובניית אתרים לא תמיד היו שני תחומים נפרדים שמשלימים זה את זה.
למעשה, המהפכה הקטנה בעיצוב אתרים החלה עם שיפורים בשפת HTML: אם פעם פקודות העיצוב יישבו כתגים ישירות בתוך הקוד, התקן החדש נתן להם מקום משלהם בתוך קובץ עיצוב שנקרא גם Cascading Style Sheets או בקצרה CSS.
התקן עצמו נוצר ב-1995, אבל היה צריך עוד כמה שנים טובות עד שהתחילו לנצל אותו כמו שצריך.
לא רק שבקובץ ה-CSS נמצאות כל הוראות העיצוב, אלא שכל אלמנט רגיל ב-HTML יכול לקבל הוראות משלו.
אפשר גם לתייג אלמנטים בתגיות ולתת לכל אחת מהן עיצוב אחר או לתת הוראות עיצוב ייחודיות לאלמנט שנמצא בתוך אלמנט אחר.
רוצה לקבל הצעה לבניית אתר? כמה פרטים ואחזור אליך בהקדם
רק כמה דוגמאות למה שאפשר לעשות עם עיצוב דרך CSS:
- הפיכת כל הכותרות הראשיות באתר לכאלו בפונט 14 מודגש
- קביעת המרווח המדויק בין פסקה לפסקה (שוליים פנימיים וחיצוניים) ובין שורה לשורה בתוך הפסקה
- יצירת אזורים תחומים אחד בתוך השני עם מאפיינים נפרדים (לדוגמה, צבע רקע או שוליים)
בזכות ה-CSS היכולת ליצור ממשק משתמש ידידותי ונוח יותר מאי פעם בזכות ההתאמה האישית של כל אלמנט ואלמנט.
אפשר גם לשנות את האלמנטים באופן דינאמי כגון שינוי גודל הטקסט באתר בלחיצת כפתור, דבר המאפשר ליצור אתרים נגישים לבעלי מוגבלויות בלי הרבה מאמץ.
אם בעבר כל דפדפן פירש בצורה מעט אחרת את הוראות ה-CSS, אבל היום בגלל השליטה הבלתי מעורערת של כרום והעובדה שרוב הדפדפנים משתמשים במנועים דומים, זו כבר בעיה חמורה פחות.
היתרונות של ה-CSS עבור בוני אתרים
היכולת להפריד בין העיצוב למבנה נותן לבוני אתרים כמה יתרונות מרכזיים:
על מנת לראות את הפוטנציאל האורגני ותוך כמה זמן נכפיל לך את ההכנסות
ניתן לחייג למספר 052-9095200 או למלא את הטופס:
1. עמודי ה-HTML הפכו להיות הרבה פחות מבולגנים מבחינת קוד מכיוון שפקודות העיצוב יצאו החוצה ולמעשה ניתן היה להיפטר מהרבה תגים שכבר לא היה בהם שימוש בכתיבה נכונה של הקוד (כגון תג הדגשה).
2. מכיוון שאלמנטים כגון פסקאות או כותרות בתוך הדפים חוזרים על עצמם, אפשר לשנות בקלות את העיצוב של כל הדפים שמשתמשים באותם האלמנטים במקום לערוך דף דף.
3. גם הטיפול בתמונות הפך להיות הרבה יותר נוח ואפשר היה לבנות עמודים שהמבנה שלהם מבוסס על תמונות בקלות רבה יותר.
4. מלבד זאת, עדיין יש אפשרות לתת הוראות עיצוב ישירות בתוך העמוד אם רוצים לדוגמה לבדוק הוראה ספציפית (יש גם תוכנות שעושות זאת בלי לטעון את הדף מחדש).
עיצוב ובניית אתרים – מקצוע חדש נולד (בערך…)
כאמור, זה לא שעיצוב אתרים לא היה קיים קודם לכן כמקצוע, אבל לאחר מתן האפשרות של הגדרת עיצוב חיצוני, היה סוף סוף אפשר להפריד בין שני התאומים הסיאמים האלו.
מי שרצה ללמוד עיצוב אתרים לא היה חייב בהכרח להתעסק עם קוד (אף על פי שזה אף פעם לא מזיק).
המעצב בדרך כלל פועל בשיתוף פעולה עם מי שאחראי לחוויית המשתמש והממשק של האתר כדי שיהיה נוח להשתמש בו ולנווט בין כל המסכים השונים.
לפעמיים הם מגלים שרעיונות שנראים טוב על הנייר קשים יותר לביצוע ואז או שמחליטים לוותר עליהם או שדוחים אותם לשלב מאוחר יותר (אם הם לא חלק קריטי מהעיצוב).
חיתוך PSD אל HTML
היום מקובל מאוד שהמתכנת או המפתח יקבל עיצוב מוכן בפוטושופ עם דוגמאות למסכים אמיתיים של האתר, בדרך כלל מסך אחד לכל סוג של עמוד (עמוד ראשי, קטגוריה, מאמר וכו'). את הסקיצה הזו ממלאים בתוכן לדוגמה שלא יהיה בהכרח התוכן הסופי באתר.
לפעמיים מדובר ברצף של טקסט פופולארי שנקרא לורם איפסום, וכך כל מי שרואה אותו יודע שלא מדובר בתוכן אמיתי (אף על פי שהוא מזכיר קצת טקסט לטיני…).
מכאן התפקיד של המפתח הוא לקחת את העיצוב של האתר ול-"לחתוך" אותו לקוד (מכאן הכינוי "חיתוך HTML").
המעצב אמור לספק לו את כל תמונות המקור, סוגי הפונטים, הצבעים המדויקים שבהם הוא משתמש, המידות בפיקסלים וכו'. בונה האתר מחבר את כל האלמנטים האלו זה לזה תוך כדי טיפול בקובץ ה-CSS ולמעשה יוצר תבנית ריקה של האתר שבה אפשר לשתול תוכן.
חשוב להדגיש ששיטה זו של עיצוב ובנייה היא יקרה יותר באופן משמעותי מפני שנדרשת לא מעט עבודה נפרדת ממעצב האתרים ולאחר מכן קידוד של בונה האתרים.
הרבה אתרים פשוטים לא נבנים בצורה הזו אלא על ידי פתרונות טכנולוגיים מהירים יותר המאפשרים לעצב ולמעשה גם לבנות את האתר בו זמנית – פתרונות כמו Page Builders למיניהם, כמו אלמנטור המצוין שכתבתי עליו ואני משתמש בו הרבה.
עיצוב רגיל ועיצוב למובייל
כשאתרים מודרניים למובייל רק החלו להופיע, היה מקובל לקחת את העיצוב הקיים של האתר ולבצע לו התאמות קלות כגון שינוי של רוחב הפסקאות כך שיהיה קריא גם במובייל. למרבה הצער, הגישה הזו הובילה לכך שאתרים רבים לא באמת היו נוחים לשימוש.
לדוגמה, תוכן חשוב היה נדחק למטה או שהתפריטים היו במקום לא נוח והגבילו עוד יותר את השטח המוגבל של המסך.
היום לעומת זאת מקובל לבצע שינויים ספציפיים ויסודיים יותר בגרסת המובייל של אתרים עד כדי שימוש בתבנית שונה שחולקת את המאפיינים הבסיסים כמו צבע או סוגי הפונטים עם התבנית הקיימת.
דוגמה לשינוי פופולארי היא הפיכת התפריט המקובע לתפריט שנפתח ולא תופס מקום על חשבון שאר התוכן באתר.
לתבנית כזו שנבנית בצורה חכמה יש גם חשיבות בנוגע למהירות שבה האתר יעלה במובייל מכיוון שהיא מצומצמת יחסית ולא מכילה את כל הקוד של האתר הרגיל (כיום יש גם תקנים לקוד רזה כמו למשל AMP שנוצר בין היתר ביוזמת גוגל).
האם תמיד צריך מעצב אתר?
למרות כל מי שכתבתי עד כאן, התשובה המפתיעה היא שלחלוטין לא.
לצד אתרים שיש בהם עיצוב מותאם אישית, קיימים גם אתרים רבים שמשתמשים בתבנית מוכנה מראש. כל תבנית בדרך כלל מתאימה לסוג מסוים של אתר, לדוגמה:
- אתר תדמית
- אתר מסחר אלקטרוני
- אתר מגזין / חדשות
- בלוג
וכו'
היתרון של התבנית המוכנה הוא שהיא מצמצמת מאוד את העלויות של בניית האתר מכיוון שהשינויים שצריך לבצע הם בדרך כלל מינוריים ומסתכמות בהגדרות של צבע, פונטים, תמונות שער, לוגו, רוחב הפסקאות וכו'. לעיתים התפקיד של המעצב הוא רק ליצור לוגו או תמונת נושא.
אם התבנית מספיק מתוחכמת, אפשר לתת לאתר מראה ייחודי יחסית, אבל למרבה הצער עדיין מסתובבות בשוק לא מעט חברות שמשתמשות בתבניות ישנות שכבר עבר זמנן. אם אתם רואים אתר שכולו בנוי מריבועים והמראה שלו "נוקשה" יחסית, כנראה הוא משתמש בתבנית לא כל כך מעודכנת…
להחליף תבנית ברגע
למרות שחברות רבות לבניית אתרים משתמשות בתבניות שהן בנו בעצמן, קיימת גם אפשרות של שימוש במאגרי תבניות.
רוב התבניות האלו מתחברות למערכות ניהול תוכן, אך מכיוון שאלו פופולאריות מאוד כיום, זה לא בהכרח פוגע באיכות של האתר ולפעמיים מי שבנה את התבנית כבר עשה את כל התאמות הממשק הנחוצות למשתמש הממוצע בעצמו.
החיסרון בשימוש בתבניות כאלו הוא שלחברת בניית האתרים (או למי שמחליט לבצע בנייה בעצמו) אין ידע מעמיק לגבי התבנית.
אם רוצים לשנות משהו יסודי שאי אפשר לגעת בו בהגדרות, צריך לשנות את הקוד של התבנית עצמה וזה יכול לגרום לבאגים או עיוותים בתבנית. תבניות כאלו גם לא תמיד ממשיכות להתעדכן, מה שיכול לגרום לבעיות עם דפדפנים מסוימים או כאשר מערכת ניהול התוכן תתעדכן לגרסה חדשה יותר.
חלק מהתבניות שנמצאות במאגרים עולות כסף, ולכן זה לא בהכרח פתרון חינמי.
מן הסתם אלו בדרך כלל התבניות הטובות ביותר שמציעות סט נרחב יחסית של תכונות ואפשרות להתאמה אישית. לעיתים מקבלים משפחה של תבניות בעלות הגדרות דומות, אך מראה שונה לכל אחת, וישנן גם תבניות שהן למעשה נגזרת של תבנית אחרת (תבנית בת).
עיצוב ובניית אתר באופן עצמאי ללא ידע בפיתוח
לצד אתרים שנבנים באופן מקצועי, היום קיימים כלים רבים שמאפשרים לכל אחד לעצב את האתר שלו כראות עיניו ולא להסתפק בשינויים המינוריים שהתבניות הנפוצות מאפשרות לו.
האפשרויות המקובלות הן בניית אתרים במערכות ייעודיות למשתמשים פשוטים (כמו ב-Wix) ושימוש ב-Page Builders.
כאשר המשתמש מעצב את האתר בעצמו, הוא יכול לגרור אלמנטים כמו תמונה או פסקת טקסט אל תוך העמוד ולעצב אותם (לדוגמה, להוסיף לפסקה שוליים חיצונים בעובי מסוים). כל עמוד חדש שייצור יכול להשתמש בעיצוב שונה או בעיצוב של העמודים הקודמים (הם בעצמם הופכים לתבנית).
היתרון העצום של העיצוב העצמאי הוא שמה שהגולש רואה על המסך זהה כמעט ב-100% למה שהוא ייראה בזמן שיגלוש לאתר שלא מתוך המערכת (או כפי שאומר הביטוי, "מה שאתה רואה זה מה שאתה מקבל"). בדרך כלל אפשר גם לעבור בין התבנית שמיועדת למחשב לבין התבנית שמיועדת למובייל במהירות ולבצע את השינויים הדרושים.
ההבדל בין אתר כמו Wix לבין ה-Page Builders כמו אלמנטור הוא שבעוד Wix הוא אתר עצמאי שכל אחד יכול לפתוח בו חשבון בכמה שניות, ה-Page Builders יושבים תחת מערכת ניהול תוכן קיימת (במקרה הזה וורדפרס) ומחליפים את עורך העמודים שקיים בה, תוך כדי הענקת היכולת לעצב את העמוד באופן ויזואלי לחלוטין. חלק מה-Builders מאפשרים גם להחליף את התבנית כולה.
כהערת סיום, אף על פי שהמערכות האלו מיועדות לכלל סוגי המשתמשים, יש חברות בניית אתרים שמתמחות בהן. מבחינת בעל האתר, הוא מקבל אתר בעלות נמוכה מאוד יחסית לבניית אתר "רגיל" עם הבונוס שהוא יכול לבצע שינויים מסוימים בעצמו (לרוב אין יותר מדי ממה לפחד כי תמיד אפשר לשחזר גרסאות קודמות).
בוידאו הבא אני מסביר למה אני ממליץ לבנות אתר בוורדפרס:
מערכות בניית אתרים למעצבים
עד כה הפרדתי בין התפקיד של מעצבי אתרים, בוני אתרים וכל היתר, אבל בשנים האחרונות רואים גם אפשרות נוספת לבנות אתרים באמצעות מערכות מקצועיות שיודעות להלביש קוד HTML אפילו על עיצוב מקצועי.
דוגמה למערכת כזו היא Webflow.
כמו שאתם יכולים לראות, היא מזכירה הרבה יותר את פוטושופ מאשר את הכלים שכבר הזכרתי, וזה ממש לא במקרה. היא מיועדת בין היתר (ואולי בראש ובראשונה) למעצבים שרוצים להציע אתרים ללקוחות שלהם בלי לעבור דרך חברות לבניית אתרים.
מובן שהמעצב לא חייב להשתמש במערכת באופן בלעדי ויש גם פתרונות אחרים כמו אלו של Invision שמאפשרים למעצבים ולמפתחים לשתף סקיצות וגרסאות של האתר בקלות בלי שייווצר ביניהם טלפון שבור.
רוצה לקבל הצעה לבניית אתר? כמה פרטים ואחזור אליך בהקדם
לסיכום – עיצוב ובניית אתרים לעסקים
הדרך הטובה ביותר לבנות אתרים מורכבים או כאלו שיש להם מראה ייחודי היא עדיין לעבור דרך מעצב אתרים ומפתח אתרים (או חברה שמבצעת את שני התפקידים). לעומת זאת, אם הדרישות שלכם גבוהות פחות, אתם בהחלט יכולים לבחור בין שלל פתרונות שיקלו על תהליך הפיתוח הטכני או אפילו לא יצריכו אותו כלל.
בהצלחה 🙂
