תהליך עיצוב רספונסיבי חדש

תוֹכֶן

• מתודולוגיה מגיבה
• איך אוכל לשמור תוכן קודם?
• למה?
• 01. הגדירו את יעדי העסק והמשתמשים שלכם
• 02. התייחס אליהם בכל הזדמנות שתקבל
• 03. אל תפחדו לדחוף לאחור
• 04. דחף גם את הצוות שלך
• 05. הגדר את כל צרכי התוכן שלך מראש
• איך אני מופשט תוכן מהמצגת?
• עלינו להפסיק לחשוב על תוכן במונחים של פריסה
• הכריחו את הלקוחות שלכם לתכנן את התוכן שלהם ללא תלות בעיצוב
• סיים את התוכן שלך לפני העיצוב
• השתמש בתוכן אמיתי - בכל פעם
• אז איך פועלים מסגרות קוויות לפרויקטים של עיצוב רספונסיבי?
• שרטוט
• מסגרת בדפדפן
• ביאורים
• השתמש בתוכן אמיתי במסגרות קוויות
• כיצד אוכל לעצב תחילה עבור מסכים קטנים?
• עיצובים מופשטים ממכשירים בהתחלה
• השתמש באריחי סגנון
• צור הרמוניה בממשק
• הצג הכל בדפדפן
• מצא איזון עם תוכניות סטטיות
• סיכום

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

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

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

מתודולוגיה מגיבה

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

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

להלן השאלות שאנו שומעים לרוב על תהליך העיצוב הרספונסיבי שלנו.

איך אוכל לשמור תוכן קודם?

כולנו אופטימיים כל כך בתחילת הפרויקט. "תוכן ראשון!" אנחנו אומרים. “מטרות משתמש! זכרו מה חשוב! " זה נכון. אבל מה זה אומר? איך מיישמים תהליך ראשון של תוכן?

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

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

למה?

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

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

ותפקידנו לחנך אותם. (קרא את הספר המצוין של מייק מונטיירו Design is a Job אם אתה רוצה ללמוד עוד על התמודדות עם לקוחות.) הלקוחות יכולים להתקשות להבין את הערך של כל המחקר והעבודה הקדמית. ולמה הם צריכים? הם לא מקבלים שום דבר 'גמור' בסוף - ולעיתים קרובות מדי הם מקבלים חשבונית ומסמך Word גדול.

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

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

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

01. הגדירו את יעדי העסק והמשתמשים שלכם

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

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

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

03. אל תפחדו לדחוף לאחור

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

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

04. דחף גם את הצוות שלך

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

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

גישה של מפל לעבודה יצירתית פשוט לא עובדת. עבודה זריזה ושיתופית בין חברי הצוות גורמת לתוצאות טובות יותר.

05. הגדר את כל צרכי התוכן שלך מראש

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

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

איך אני מופשט תוכן מהמצגת?

אתה שומע את זה הרבה ברחבי האינטרנט-או-ספירה. אבל רגע, מה? ורגע - למה?

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

עלינו להפסיק לחשוב על תוכן במונחים של פריסה

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

תפריט העל הענק שהלקוח שלך רוצה? לא הולך לטוס באייפון.

הכריחו את הלקוחות שלכם לתכנן את התוכן שלהם ללא תלות בעיצוב

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

סיים את התוכן שלך לפני העיצוב

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

השתמש בתוכן אמיתי - בכל פעם

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

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

אז איך פועלים מסגרות קוויות לפרויקטים של עיצוב רספונסיבי?

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

שרטוט

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

מסגרת בדפדפן

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

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

ביאורים

ביאורים למסגרות קווית של RWD הם חיוניים, אך לעתים קרובות הם מתעלמים. אמור זאת בקול רם: תיעוד, תיעוד, תיעוד! ראינו כמה דוגמאות לכך מחברים וחושבים כי חבר המושבעים עדיין יוצא לדרך 'הטובה ביותר' להעלות הערות נכונות על מסגרות קווית מגיבות בדפדפן. כאמור לעיל, אנו משתמשים באופן קבוע ב- Foundation by Zurb ואוהבים להשתמש בתוסף ה- Reveal שלו כדי להציג את ההערות שלנו. הערות אלה מופיעות רק במסכים גדולים יותר, באופן אידיאלי ניתן להפעיל ולכבות אותן.

השתמש בתוכן אמיתי במסגרות קוויות

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

כיצד אוכל לעצב תחילה עבור מסכים קטנים?

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

עיצובים מופשטים ממכשירים בהתחלה

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

השתמש באריחי סגנון

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

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

צור הרמוניה בממשק

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

אם אתה מעוניין לקרוא הלאה, שני מאמרים מצוינים בנושא הרמוניה בממשק ניתן למצוא כאן וכאן.

הצג הכל בדפדפן

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

מצא איזון עם תוכניות סטטיות

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

סיכום

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

גלה את 20 הכלים הטובים ביותר עבור עיצוב מעצב

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