בקצרה
בניתי את אתר הסטודיו מחדש כי הוא כבר לא התאים לעבודה שאני עושה היום, והיה מסורבל להמשיך לפתח אותו. עבדתי עם Claude Design ו-Codex על העיצוב, התוכן והבנייה, עם הרבה סבבים של בדיקה ותיקון. שמרנו על התוכן החשוב ועל כתובות העמודים, עשינו סדר במערכת ודייקנו את חוויית השימוש במחשב ובטלפון. עכשיו יש לסטודיו אתר שקל יותר לעדכן, עם מקום לפרויקטים ולתכנים הבאים.
אז האתר החדש של 3Pines Studio באוויר, ואני ממש שמח לשתף אתכם גם בתוצאה וגם בתהליך.
הפעם הייתי צריך להסתכל על העסק שלי כמו שאני מסתכל על עסק של לקוח לפני שאני ניגש לבנות לו אתר חדש. לשאול מה האתר צריך לספר, מה כבר התיישן או לא מתאים, ואיך אני רוצה שמי שנכנס אליו יכיר את הסטודיו ויבין מה בעצם אני עושה.
זו הייתה הזדמנות לעשות סדר, לרענן את העיצוב וליישם באתר של הסטודיו דברים שלמדתי תוך כדי עבודה על אתרים של אחרים. לאורך התהליך עבדתי עם Claude Design ו-Codex, בדקתי, החזרתי הערות ושיניתי לא מעט פרטים עד שהכול התחבר.
אז הנה הסיפור של האתר החדש, מההחלטה לבנות אותו מחדש ועד הרגע שבו הוא עלה לאוויר.
משהו כבר לא הסתדר לי עם האתר הישן
את האתר הקודם בניתי בתחילת הדרך של הסטודיו. הוא ליווה אותי בפרויקטים הראשונים ובזמן שלמדתי והשתפרתי. אבל כשחזרתי להסתכל עליו עם הניסיון שיש לי היום, ראיתי לא מעט דברים שהייתי בונה אחרת.
היו בו דברים שלא נבנו נכון מההתחלה. עם הזמן נוספו עוד תכנים, עוד תמונות ועוד שינויים, והאתר הפך לקצת מסורבל. היה קשה יותר לשמור על סדר ולהמשיך לפתח אותו כמו שרציתי.
גם העיצוב היה צריך רענון. כשנכנסים לאתר של סטודיו לבניית אתרים, רוצים לראות עבודות, להבין מה הוא מציע ולהכיר את מי שעומד מאחוריו. רציתי שהאתר שלי יציג את כל אלה כמו שהם היום.
האתר ההוא עשה את שלו ועזר לי להתחיל. עכשיו רציתי לקחת את מה שלמדתי ולבנות אותו מחדש, בצורה שתתאים לי יותר.
מה רציתי שיהיה אחרת
רציתי אתר שיהיה לי נוח לעבוד איתו. להוסיף פרויקט, לפרסם מאמר או לעדכן שירות בלי שכל שינוי קטן יהפוך להתעסקות גדולה. היה לי חשוב לבנות אותו מסודר מההתחלה, כך שאוכל להרחיב אותו כשהעסק יגדל.
עוד לפני הקוד והעיצוב, עברתי על התוכן. איך מסבירים את מה שהסטודיו עושה למישהו שלא מכיר את התחום? מה כדאי לספר על כל פרויקט? ואיך עוזרים למי שנכנס להבין אם אני האדם המתאים לבנות לו אתר?
החלטתי להישאר עם WordPress, אבל הפעם לבנות תבנית בקוד עם שדות עריכה מותאמים באמצעות ACF. במילים פשוטות: לכל תוכן יש מקום ברור במערכת הניהול, ואפשר לעדכן אותו בלי לסדר מחדש את העיצוב בכל פעם.
בפרויקט הזה בחרתי גם להוריד את Elementor ולוותר על תוספים שלא היה בהם צורך באתר החדש. רציתי מערכת פשוטה יותר לתחזוקה, קלה ומהירה (lean, mean fighting machine) שבה ברור לי מה כל רכיב עושה ולמה הוא נמצא שם.
איך עבדתי עם Claude Design ו-Codex
את העיצוב בניתי עם Claude Design. בנינו יחד דיזיין סיסטם, כלומר שפה עיצובית ומערכת רכיבים משותפת לכל האתר. זה נתן לנו בסיס מגובש והקל על עיצוב העמודים. עם Codex עבדתי על המחקר, הטקסטים, הקוד והחיבור לוורדפרס, וגם על התיקונים והבדיקות.
בפועל, זו הייתה שיחה אחת ארוכה עם הרבה סבבים. הסברתי מה אני רוצה, הסתכלתי על התוצאה וחזרתי עם הערות. לפעמים דיברנו על מבנה של עמוד שלם, ולפעמים על כפתור שצריך לזוז כמה פיקסלים או על תמונה שנחתכה לא טוב.
אהבתי את האפשרות לנסות רעיון ולראות אותו בתוך האתר. למשל, לנסות אנימציה עדינה, לגלול בעמוד ולהרגיש אם היא מתאימה או אם היא מושכת יותר מדי תשומת לב. משם היה אפשר לשנות ולבדוק שוב.
היו גם דברים שלא עבדו טוב בניסיון הראשון. כשזה קרה, היה צריך לעצור, להסביר מה מפריע ולחזור על הבדיקה. ככל שההערה שלי הייתה ברורה יותר, היה קל יותר להגיע לתוצאה שרציתי.
אני הבאתי את ההיכרות שלי עם הסטודיו ואת ההחלטות על התוכן, העיצוב והחוויה. הכלים עזרו לבצע אותן בצורה יעילה, חכמה ומהירה. ועדיין, הייתי צריך לגלוש באתר, להשתמש בו כמו שלקוח עושה ולהחליט מה עובד ומה עוד דורש תיקון.
על המסך זה לא תמיד נראה כמו בעיצוב
אחרי שהעיצובים היו מוכנים, השוויתי אליהם את האתר שנבנה. היו פערים: ריווחים שונים, תמונות שלא הוצגו כמו שצריך וכותרות שנשברו אחרת.
היה לי חשוב לראות מה מקבל אדם שנכנס לאתר. פתחנו את העיצוב ואת העמוד באותו רוחב, השווינו חלק אחרי חלק, תיקנו ובדקנו שוב. עברנו גם על מסכים רחבים וגם על טלפונים, ופתחנו תפריטים וגלריות כדי לראות איך הם עובדים.
כשעוברים על האתר ככה בצורה יסודית, שמים לב לדברים שקשה לראות בדוח בדיקות: כותרת שתופסת יותר מדי מקום בטלפון, תמונה שחסר לידה הסבר או קישור שלא ברור שאפשר ללחוץ עליו. אלה היו הדברים שרציתי לתפוס לפני שמישהו אחר ייכנס לאתר.
כמה שינויים קטנים ששווה להתעכב עליהם
אחד הדברים ששינינו היה התיאורים בתיק העבודות. בהתחלה הם היו קצרים מדי. רציתי שמי שרואה פרויקט יבין למי האתר נבנה ומה עשינו בו, אז נתנו לתיאור קצת יותר מקום לצד צילום המסך.
גם האנימציות עברו כמה ניסיונות. רציתי קצת תנועה בזמן הגלילה, אבל בהתחלה היא הייתה מהירה מדי והתחילה מוקדם מדי לטעמי. האטנו אותה ושינינו את התזמון. בחלק העליון של העמוד ויתרתי על אנימציית כניסה, כדי שאפשר יהיה להתחיל לקרוא מיד. התחשבנו גם במי שבוחר בהגדרות המכשיר להפחית את התנועה במסך.
עוד שינוי קטן הגיע כשבדקתי את תיק העבודות בטלפון. הכפתור לצפייה בפרויקט ישב לצד הכותרת. כשהכותרת הייתה ארוכה מדי, הוא ירד לשורה חדשה ושינה את הפרופורציות של הכרטיס. ביקשתי להעביר אותו מתחת לתיאור. עכשיו קודם רואים את התמונה וקוראים על הפרויקט, ורק אז מגיעים לכפתור.
כל אחד מהשינויים האלה קטן בפני עצמו. יחד הם הפכו את האתר לנעים וברור יותר, ולכן היה לי חשוב להתעכב עליהם.
ומה עושים עם כל התוכן מהאתר הישן?
כבר היו באתר מאמרים, פרויקטים ועמודים שחשוב היה לשמור. העברנו אותם לאתר החדש ושמרנו על הכתובות שלהם, כדי שקישורים קיימים ימשיכו להגיע למקום הנכון. היה לי חשוב גם לצמצם את הסיכון לפגיעה בנוכחות של האתר בגוגל ובמנועי AI.
עברנו גם על התמונות והתוספים. הקטנו את משקל התמונות, בדקנו מה עדיין בשימוש והסרנו את מה שלא נדרש, אחרי גיבוי. רציתי שהאתר החדש יהיה מסודר גם מאחורי הקלעים.
כחלק מהעבודה בדקנו שהכותרות ותיאורי העמודים שמיועדים לגוגל נשארו כמו באתר הקודם. השווינו אותם ב-92 עמודי תוכן, ואחרי ההשקה נבדקו 103 כתובות באתר.
לצד הבדיקות האלה פתחתי את האתר גם באייפון שלי ועברתי עליו בעצמי. רציתי לראות איך הוא מרגיש בטלפון אמיתי: לקרוא, לגלול, ללחוץ ולוודא שנוח להשתמש בו.
ואז הגיע הזמן להעלות אותו
אחרי כל סבבי העיצוב והתיקונים, שמרנו גיבויים והעברנו את האתר החדש לכתובת הראשית של הסטודיו.
גם אחרי שהאתר עלה, המשכנו לבדוק. פתחנו אותו בלי להיות מחוברים לניהול, עברנו על העמודים ובדקנו את התפריטים והטופס. בדקנו גם את כלי הנגישות ותיקנו בעיות שעלו בשילוב שלו עם האנימציות ועם הניווט במקלדת.
אחת הבדיקות הייתה פשוט לשלוח פנייה מהאתר. עמוד התודה נפתח והמייל הגיע לתיבה שלי. זה היה רגע קטן שסיכם הרבה עבודה: האתר באוויר, הוא נראה כמו שרציתי ואפשר לפנות אליי דרכו.
אז ברוכים הבאים לאתר החדש
אני שמח שהקדשתי לאתר שלי את תשומת הלב שאני נותן לאתרים של לקוחות. הוא מציג טוב יותר את העבודה שלי היום, נוח לי יותר לנהל אותו ויש בו מקום לפרויקטים ולמאמרים הבאים.
אתם מוזמנים להסתובב, להציץ בתיק העבודות ולראות מה התחדש.
ואם גם האתר שלכם נשאר קצת מאחור, או שהעסק גדל ועדיין אין לו אתר, אתם מוזמנים לדבר איתי. נבין מה אתם צריכים ונבנה יחד אתר שמתאים לעסק שלכם היום, עם מקום למה שיבוא בהמשך.
בואו נעשה את זה יחד.
שאלות נפוצות
למה בניתי את האתר מחדש?
בניתי את האתר הקודם בתחילת הדרך. מאז למדתי הרבה, הסטודיו התפתח והאתר נעשה מסורבל יותר. רציתי לעשות סדר, לרענן את העיצוב ולהקל על עצמי להוסיף ולעדכן תוכן בהמשך.
איך כלי AI השתלבו בעבודה?
עבדתי עם Claude Design על העיצוב ועם Codex על המחקר, הטקסטים, הקוד, התיקונים והבדיקות. אני בחרתי את הכיוון, בדקתי את התוצאות והחזרתי הערות. היו הרבה ניסיונות ותיקונים לאורך הדרך.
מה עשינו עם התוכן מהאתר הקודם?
שמרנו על התוכן החשוב ועל כתובות העמודים. בדקנו גם שכותרות ותיאורי העמודים שמיועדים לגוגל נשארו כמו קודם. תמונות ותוספים שלא נדרשו עברו בדיקה לפני שהסרנו אותם, ושמרנו גיבויים.
איך מעדכנים את האתר החדש?
דרך מערכת הניהול של WordPress, עם שדות שהותאמו לתוכן באמצעות ACF. אפשר לשנות טקסטים ותמונות במקומות המיועדים להם, והעיצוב נשמר. באתר הזה בחרתי לעבוד עם תבנית בקוד, ללא Elementor.
האם כל אתר ישן צריך לבנות מחדש?
לא בהכרח. לפעמים עדכון של התוכן, שיפור במובייל או שינוי עיצובי יספיקו. אם קשה לערוך את האתר, להוסיף לו דברים או להסביר דרכו מה העסק עושה היום, כדאי לבדוק אותו ולהבין אם אפשר לשפר את הקיים או שעדיף להתחיל מחדש.
