מדריך של מעצב לעבוד עם סגנון מדריכים & סגנון אריחים

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

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

סגנון מדריכים עבור האינטרנט

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

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

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

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

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

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

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

ספריית דפוס של MailChimp היא אחת הדוגמאות הטובות ביותר שניתן למצוא ב- StyleGuides.io. זה מדריך מקוון לחיות בסגנון זה מגדיר את הרשת של TelChimp, את טיפוגרפיה ואת רכיבי הדף.

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

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

• מדריכי סגנון חזיתיים (24ways.org)
• צור מדריך בסגנון אתרים (creativebloq.com)
• כיצד להפוך את האינטרנט המושלם עיצוב סגנון מדריך (dtelepathy.com)

מסעף לתוך אריחי סגנון

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

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

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

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

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

הנה ציטוט נהדר מאתר אריחי הסגנון:

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

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

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

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

• סגנון אריחים וכיצד הם עובדים
• סגנון אריחים: אלטרנטיבה עיצוב Comps מלא
• יצירת סגנון אריחים: גישה קלה לכיוון עיצוב

סגנון מדריכים לעומת סגנון אריחים

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

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

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

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

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

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

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

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

עבודה על בסיס לכל פרויקט ולהחליט מה הכי טוב עבור כל אחד.

דוגמאות חיות

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

מדריכי סגנון

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

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

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

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

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

UI מעצב גרג Dlubacz המשותף שלו UI סגנון מדריך עבור פרוייקט אינטרנט. הדבר הזה הוא רציני מאוד. תצוגה מקדימה של מסך מלא משתרע על 21,000 פיקסלים!

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

סגנון אריחים

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

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

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

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

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

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

מילים סופיות

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