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