אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » רשת האינטרנט » בניית אתרי אינטרנט » Wireframe

Wireframe

רן בר-זיק יוני 7, 2011 8:30 am אין תגובות

הסבר על אחד מכלי העזר החשובים ביותר כאשר אנו מתכננים את האתר העתידי שלנו.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

מי שעושה שימוש מירבי ב-Wireframe הוא הגרפיקאי אשר עובד לפי ה-Wireframe ויוצר גרסה גרפית של האתר.

מתי לא משתמשים ב-Wireframe?

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

מתי כן משתמשים ב-Wireframe?

במידה ויש לכם אפיון מסודר ומפורט.
במידה ויש לכם את תמונת האתר בראש – מבחינת סדר האלמנטים השונים.

Wireframe
Wireframe

איך יוצרים Wireframe?

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

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

Wireframe לדוגמה
Wireframe לדוגמה

גם מישהו שהוא לא איש מקצוע יכול להבין את ה-Wireframe, גם מישהו שהוא לא איש מקצוע יכול להכין Wireframe שכזה.

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

אחד השירותים היותר מוצלחים בעיני הוא https://gomockingbird.com שמאפשר יצירה מיידית ונוחה, דרך הדפדפן (בתנאי שאין לכם אקספלורר) אפיון נוח ולשמור אותו כ-jpeg או כ-pdf. וכל זה ללא רישום או ביג'ארס. כמוהו יש עוד כמה וכמה שירותים ל-Wireframe.

Wireframe by MockingBird
Wireframe by MockingBird

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

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

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד