שיין סנואו הוא עיתונאי טכנולוגיה בניו יורק. עקבו אחריו בטוויטר ב-@shanesnow.

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

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

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

פרי מוחו של בן לרר יליד ניו יורק,מתחןהושק בשנת 2005 "כדי להתמודד עם היעדר מידע מצחיק ומעשי שזמין לגברים צעירים" בעירו. עד 2010 הפרסום הגיש 2.2 מיליון מנויים יומיים ב-19 ערים בארה"ב ובבריטניה, והיה רשום כמספר 93 ב-2010 Inc 500 החברות האמריקאיות הצומחות ביותר.

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

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

תהליך העיצוב מחדש

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

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

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

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

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

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

בינתיים, אוניל וצוות הפיתוח שלו החלו לבנות את המסגרת האחורית לפיצ'רים חדשים, כמו אלגוריתם TOP של האתר (המציג את התוכן הפופולרי ביותר באתר). הם גם החלו להעביר את מסד הנתונים של האתר ל- MongoDB כדי לשפר את מהירותו.

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

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

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

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

יישום

בניית העיצוב החדש הייתה פשוטה, עם כמה בעיות בלתי נמנעות.

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

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

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

לאחר בניית מודל העבודה, כל שנותר היה לחבר את האתר ל-backend ולבסיס הנתונים של מערכת ניהול התוכן של Thrillist.

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

שיעורים וטיפים לעיצוב

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

כריס שטיב הציע:

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

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

הביאו שוקולד לפגישות.

ג'ס וויליאמס הציע:

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

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

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

מארק אוניל הציע:

קבל הרבה משוב מכולם, אבל דע מאיזה משוב להתעלם.

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

למה עיצוב חשוב

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

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

משאבי פיתוח ועיצוב נוספים מ-Mashable:

-כיצד ה-iPad משפיע על אפליקציות אינטרנט

-סוזן קאר: ראיון עם מעצב איקוני [גלריה]

-5 דרכים טובות יותר לקרוא את "חדשות האקרים"

-5 מחוויות המשתמש החדשות הטובות ביותר של 2010