משאבים הטוב ביותר עבור שרטוט מבוססי רשת Wireframes

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

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

תפיסת ממשק UI / UX מוקדמת

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

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

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

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

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

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

מטרות עבור Wireframing

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

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

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

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

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

טבלאות

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

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

יש מוצר נהדר רבים שם בחוץ אם אתה רוצה להתחיל wireframing על נייר, למשל רודיה Dot Pad מגיע בגדלים שונים לשימוש יומיומי. זה רק מגיע עם 80 עמודים אבל זה אופייני למדי של רוב המחברות ציור.

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

Dotgrid אפילו מקבלת הזמנות bespoke המאפשרים לך עיצוב לוח מקשים מותאם אישית משלך. כל ספר מכיל רק תחת 100 גיליונות, כך כולל הקדמי & האחורי אתה מקבל על 200 עמודים עבור רישומי הרשת.

כמה נקודות אחרות של ציור רשת אני רוצה להזכיר כוללים את Behot Dot Grid אשר כריכה קשה וספירלית קשורה, למרות שזה מכיל רק 50 גיליונות נייר.

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

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

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

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

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

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

כלים דיגיטליים ו - Web Apps

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

ראשית, אני רוצה להזכיר כי אתה יכול להשתמש בכלים Adobe כגון Illustrator ל ליצור משלך wireframes - -. זה לא חלק זרימת העבודה של כולם Illustrator בהחלט לא חינם. אבל אם אתה כבר עובד עם Adobe Creative Cloud אז זה יכול להיות מקום טוב להתחיל בו.

1. Moqups

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

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

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

2. רשת פפר

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

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

3. Wireframe.cc

Wireframe.cc הוא אחד הכלים הפשוטים ביותר מינימלי אתה יכול להשתמש עבור wireframing. הוא כולל ממשק ללא עומס עם רשת בנויה מראש ו סרגלי כלים מאורגנים. אתה פשוט לחץ על & גרור כדי ליצור אלמנטים חדשים על הבד. ניתן גם לשמור ולשתף את העבודה שלך.

זהו כלי נוסף המוצע בחינם עם תוכניות פרמיה אופציונליות. כל תוכנית מחויב חודשי, אז זה דומה מאוד Moqups במבנה המחיר. הכלי החינמי הוא שמיש מכל מחשב ללא חשבון.

4. Mockingbird

Mockingbird הוא עוד אופציה נהדרת, אשר מציעה הרבה יותר תכונות מאשר רוב כלי wireframing. אתה יכול להתחיל לעבוד בחינם אבל המשפט מוגבל ל -7 ימים. זה יכול להיות מטרד על כמה משתמשים, אבל הכלי הוא באמת מדהים פועל בכל הדפדפנים.

Mockingbird יש ספרייה אינסופית של רכיבי ממשק משתמש כגון כרטיסיות, אקורדיונים, תפריטים נפתחים, נגני וידאו וקישורי טקסט פשוטים. רשת ברירת המחדל משתמשת במערכת 960gs grid, אך באפשרותך לבחור מבין האפשרויות 12, 16 ו 24 עמודות.

מילים סופיות

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

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

(תמונת השער של אויקון ילמאז)