כיצד ליצור מדריך סגנון אתרים למותג שלך

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


יצירת מדריך לסגנון אתר אינטרנט

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

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

כאן נכנס מדריך לסגנון.

מהו מדריך לסגנון ומדוע העסק שלי זקוק לאחד כזה?

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

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

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

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

מתי הגיע הזמן ליצור מדריך לסגנון

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

העסק המקוון שלך יהנה ממדריך לסגנון אם ומתי:

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

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

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

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

למדריך לסגנון שלך יש פריסה משלו

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

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

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

מדריכי סגנון Vs. ספריות דפוסים

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

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

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

כיצד ליצור מדריך סגנון

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

שלב 1. הגדירו את מהות המותג שלכם

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

שלב 2. הגדר את כללי הלוגו שלך

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

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

שלב 3. קבע את הטיפוגרפיה

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

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

שלב 4. החלט על לוח הצבעים שלך

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

דוגמה מדריך לצבעים של מוזילהמוזילה שומר על עקביות המותג על ידי הגדרת לוח הצבעים של התוכנה שלהם. חשוב שתכלול קודי צבע ב- HEX, Pantone, HSB, CMYK ו- RGB; אם יעלה האירוע שהמותג שלך חייב להתקיים מעבר למסך מחשב, תהיה מוכן אליו!

שלב 5. קבע את האיקונוגרפיה הנכונה

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

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

שלב 6. קבע את התמונות הנכונות

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

שלב 7: בנה את מערכת הפריסה והרשת

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

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

שלב 8: סגנון את האלמנטים

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

טפסים

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

כפתורים

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

תפריטים

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

דוגמניות

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

אפקטים של אינטראקציה ואנימציה

תאמינו או לא, המותג שלכם יכול להתבטא בפרטים אפילו דקים כמו אלפיות השנייה של אפקט ריחוף. קישור טקסט עם הערך {אנימציה: קלות 500 מילימטר; } מעביר אישיות שונה ותחושת דחיפות בהשוואה ל {אנימציה: 100 מ ‘ליניארית; }.

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

אל תשכח מתוכן

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

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

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

מדריכי סגנון תוכן יכולים להיות די ממצים, אפילו כולל כללים דקדוקיים שהיית מצפה מפרופסור לאנגלית. המדריך ל תאים+ עושה בדיוק את זה. (מדריך התוכן שלהם אפילו אומר לי לכתוב את זה כ- “Tuts +” ולא “Tutsplus”!)

סיכום

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me