חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם

מדריך אלמנטור ליצירת Style Guide

אלינה חזנובה | אוקטובר 2020

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

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

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

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

מהו סטייל גייד (ולמה אתם צריכים אותו)

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

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

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

בתור מעצבי אתרים, בטח יצא לכם לשמוע לא מעט על "סטייל גייד" וגם על מונח נוסף – "דיזיין סיסטם" (Design System). אף שאלה מונחים דומים – מדובר בשני דברים שונים למדי.

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

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

היתרונות ביצירת סטייל גייד בפרויקטים לעיצוב אתרים

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

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

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

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

איך ליצור סטייל גייד לאתר שלכם (ב-11 שלבים)

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

שלב 1: למדו את המותג שלכם

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

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

Uber מדגימים את ערכי המותג

שלב 2: הגדירו את חוקי השימוש בלוגו

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

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

הנחיות לשימוש בלוגו של Spotify

שלב 3: הגדירו פלטת צבעים

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

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

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

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

הגדרות צבעוניות של Yelp

שלב 4: צרו חוקים לטיפוגרפיה

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

תחילה, תצטרכו להגדיר את משפחות הפונטים והגדלים שלהם לכותרות, מ-H1 ועד ל-H6.

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

הגדלים של הפונט צריכים להיות כתובים בפיקסלים ׁ(px), ולשמור על עקביות בין האלמנטים השונים. ואם אתם רוצים לשמח את המפתחים של האתר שלכם, הקפידו על פערים קבועים בין גדלי הפונטים, כמו למשל בסדרה של 14px, 16px, 18px. הימנעו ממידות ביניים כמו 15px.

היררכיה טיפוגרפית של Mail Chimp

שלב 5: הגדירו את הפריסה ואת חוקי המרווח

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

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

כללי הריווח מתוך הדיזיין סיסטם של Firefox’s Photon

שלב 6: עצבו את האייקונים שלכם

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

אייקון גיאומטרי מתוך הגדרות העיצוב של Google’s Material

שלב 7: קבעו את ההגדרות לאיורים ותמונות

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

הנחיות האיור של Atlassian

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

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

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

חוקיות התמונות מתוך שפת המותג של Audi

שלב 8: הגדירו את הסטייל של הרכיבים המרכזיים באתר

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

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

מצבי הכפתור מתוך הדיזיין סיסטם של IBM’s Carbon

מומלץ מאוד להסתכל על ספריית רכיבים, כמו Material Design של גוגל או Ant Design של עליבאבא, כדי לאתר אלמנטים חשובים שאולי חסרים בסטייל גייד שלכם.

שלב 9: פתחו את הקול של המותג שלכם

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

דוגמה לקול מותג מתוך הדיזיין סיסטם של Beeline

שלב 10: כללי עשה ואל תעשה ממוקדים

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

הנחיות עשה ואל תעשה עבור כפתור פעולה צף מתוך Google’s Material

שלב 11: אל תשכחו את האלמנטים להורדה

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

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

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

נכסי המותג של Uber להורדה

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

מצאו מקורות השראה לסטייל גייד שלכם

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

בכדי לעזור לכם במשימה הזו, אספנו עבורכם 7 דוגמאות יפהפיות ל-Style Guides  אשר מוצגות באתר הבינלאומי שלנו. הדוגמאות האלה ממחישות איך מותגים שונים בחרו להציג את האישיות שלהם בווב. מקורות נוספים להשראה תוכלו למצוא בתיקיות אונליין כמו Style Guides.io או Design Systems Repo – שמציעות שפע דוגמאות לסטייל גייד ודיזיין סיסטם שנוצרו על ידי חברות מובילות ומותגים שונים.

עדכנו את הסטייל שלכם

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

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

שמרו על האחידות של המותג

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

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

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

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

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

רוצים להיות כותבים במגזין שלנו?

אלינה חזנובה

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

אהבתם? שתפו.
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב telegram
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

3 Responses

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להיות כותבים במגזין שלנו?

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

רוצים להיות חלק מאלמנטור?

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