שיעור 35: טיפים לעיצוב ונראות האתר, אתרים לדוגמא, אתרי וורדפרס מומלצים, אתרים להשראה – עם דוגמאות וצילומי מסך

טיפים לעיצוב אתר, UI, UX, עיצוב אתרי וורדפרס, דוגמאות לאתרי וורדפרס, אתרי וורדפרס מעוצבים, אתרים לדוגמא,

היי קואלטיז!

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

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

אבל אתם יודעים איך זה… כל סוף הוא התחלה של משהו חדש ו… הו הו איזה דברים חדשים אני מתכננת לכם 🙂

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


התלבטתי הרבה על מה לדבר איתכם בשיעור האחרון.

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

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


אתר מעוצב הוא לא רק אתר שנראה יפה.

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

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

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

אז יאללה…. בואו נתחיל 🙂

00:00 – הקדמה
04:31 – טיפ 1: אחידות
08:00 – טיפ 2: מקצועיות
10:30 – טיפ 3: שפה
13:00 – טיפ 4: צבעים וקונטרסט
14:52 – טיפ 5: לוגו מקצועי
16:36 – טיפ 6: רושם ראשוני
18:35 – טיפ 7: גלילה למטה
20:23 – טיפ 8: רספונסיביות
20:49 – טיפ 9: פחות זה יותר
22:57 – טיפ 10: להעביר מסר ברור
24:21 – טיפ 11: ויזואליות
26:27 – טיפ 12: הנעה לפעולה


1. אחידות

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

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

 

דוגמא טובה: leenheyne.nl/home

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

 

דוגמא פחות טובה: pennyjuice.com

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

 

 


2. מקצועיות

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

  • תמונות איכותיות

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

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

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

 

דוגמא טובה: river-bar.co.il

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

 

דוגמא פחות טובה: 007museum.com

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

 


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

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

  • קופירייטינג – זהו מונח שמגיע מהעולם הדיגיטלי וע”פ ויקיפדיה, Copywriting , היא הפעולה או העיסוק בכתיבת טקסט לצורך פרסום או צורות שיווק אחרות. מטרת הפעולה היא להגביר את המודעות למותג ולבסוף לשכנע אדם או קבוצה לנקוט בפעולה מסוימת.
    או במילים אחרות, קופירייטינג בא לסגור לנו את כל הפינות הקטנות באתר שבמקרה (או לא במקרה) הן גם הכי ממירות.
    לדוג’:
    במקום הכיתוב “שליחה” בכפתור של טופס הרשמה, נרצה ליצור כפתור: “חזרו אליי/ אני מחכה לשיחה מכם/ יאלה בואו נתחיל/ כן, אני אשמח לקבל../ נרשמתי, אפשר להתחיל..” וכו’.
    בצורה הזו, הגולשים שלנו יבצעו יותר פעולות באתר, כי אנחנו בעצם מובילים אותם ומסקרנים אותם בכתיבה היצירתית והייחודית.
    נסו את זה, מה אכפת לכם… מקסימום יעבוד 🙂
  • דו-אליות או דו-לשוניות
    אני יוצאת לרגע משפת המאמר של ‘אנחנו’ ועוברים ל’אני ואתם’.
    אם אתם עוקבים אחריי כבר זמן מה, אתם בטח יודעים שאני מאוד בעד שיוויון מגדרי, ואני חושבת ששיוויון מגדרי מגיע קודם כל משיוויון לשוני.
    אם יש לכם קהל יעד מאוד ספיציפי – ודאו שאתם מדברים אליו בלשון הרלוונטית אליו.
    אך אם הקהל שלכם הוא קהל מעורב, נסו מידי פעם לפנות אליהם בלשון אישה (ולא נקבה) ותראו איך הם מגיבים.
    או אולי אפילו, נסו לייצר סקר או שיח מעניין ושאלו מה הם חושבים על הנושא ואיך הם מרגישים עם זה.ממש כמו שעשיתי בקבוצת התוכניסטים, כשהכנתי את מדריך אלמנטור למתחילות. את הפוסט עם הדיון תוכלו לראות כאן.
    התוכניסטים זו קבוצת תוכן עשירה באנשים חרוצים ומלאי תוכן רלוונטי, מדריכים ויצירתיות שופעת. אם אתם שם, תעצרו להגיד היי לנאור מנהל הקהילה, הוא ישמח לשמוע שהגעתם 🙂

 

דוגמא טובה: hutzpe.co.il

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

 

דוגמא פחות טובה: 

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

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

 

 


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

  • איזה מסר אני רוצה להעביר לגולשים או הלקוחות שלי?
  • איזה תחושה אני רוצה שהגולשים שלי ירגישו כשהם נכנסים לאתר שלי?
  • מה אני רוצה שהגולשים שלי יחשיבו עליי או על העסק שלי?

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

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

במאמר הזה תוכלו לראות מה המשמעות של כל צבע אומר ומה מסמלים הצבעים של המותגים הפופולרים ביותר בארץ ובעולם.

 

דוגמא טובה: mars.idolaish.com

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

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

צבעים מאוד מתאימים לקונספט וכתב ברור וקריא.  

 

דוגמא פחות טובה: tondo.design

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

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

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

 


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

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

 

דוגמא טובה: blackswan.co.il

best wordpress websites, אתרי וורדפרס לדוגמא

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

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

 

דוגמא פחות טובה: sharonleeltd.co.uk

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

בקיצור – לא טוב.

 


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

 

 

דוגמא טובה: tulikiss.co.il

best wordpress websites, אתרי וורדפרס לדוגמא

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

 

דוגמא פחות טובה: walkerstone.com

worst wordpress websites, אתרי וורדפרס לדוגמא

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

 


7. “גלילה למטה”

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

 

דוגמא טובה: qualitor.net

best wordpress websites, אתרי וורדפרס לדוגמא

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

 

דוגמא קצת שונה אבל גם טובה: designbygolden.com.au

best wordpress websites, אתרי וורדפרס לדוגמא

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

 


8. רספונסיביות

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

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

 


9. פחות זה יותר – Less Is More

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

דוגמא טובה: eta.co.nz

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

 

דוגמא פחות טובה: arngren.net

worst wordpress websites, אתרי וורדפרס לדוגמא

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

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

 


10. העבירו מסר ברור

למה אנחנו בונים את האתר שאנחנו בונים?

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

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

 

דוגמא טובה: mordilevi.com

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

 

דוגמא פחות טובה: fullystudios.se

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

 


11. ויזואליות

אין הרבה מה לומר כאן חוץ מ… תסתכלו על הדוגמאות.

דוגמא טובה: thecoolclub.co

best wordpress websites, אתרי וורדפרס לדוגמא

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

 

דוגמא פחות טובה: obama.org

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

 


 

12. הנעה לפעולה

המונח Call To Action הוא מונח חשוב בעולם הדיגיטל שחשוב להכיר. 

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

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

 

דוגמא טובה: smartchameleon.top

best wordpress websites, אתרי וורדפרס לדוגמא

הנעה לפעולה מיוחדת בצד ימין למעלה ‘Start A Project’ מניעה את הגולשים לפעול.

 

דוגמא פחות טובה: operapm.co.uk

wordpress websites, אתרי וורדפרס לדוגמא

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


עוד אתרים יצירתיים שנראים ומתנהגים טוב:

landlifecompany.com

northwest.agency

segevchef.com

ceremonycoffee.com

landlifecompany.com

mohuawines.co.nz/home – הבעיה היחידה באתר הזה היא שאי אפשר לגלול חזרה למעלה בכפתור אחד וזה קצת מוריד את חווית המשתמש

 

 

עוד אתרים שלא מומלץ לקחת מהם השראה:

berkshirehathaway.com

faemagazine.com

tondo.design – אמנם האתר הזה חדש ומעוצב, אבל הוא עשה לי כאב ראש מאוד גדול. ויש בו יותר מידי צבעים. אז אני לא כ”כ ממליצה עליו.

 


טוב, הגיע רגע הסיום.

לקח לי יותר מידי זמן להוציא את השיעור האחרון הזה.

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

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

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

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

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

 

נתראה בהמשך,

שיר, הקואלטית שלכם 🙂 


אהבתם את המאמר? תוודאו שאתם לא מפספסים את קורס וורדפרס – מדריך וורדפרס למתחילים! יש שם המון מאמרים שיכולים לעזור לכם 🙂

כמו כן אל תפספסו את מדריך אלמנטור למתחילות 2020.


טיפים לעיצוב אתר, UI, UX, עיצוב אתרי וורדפרס, דוגמאות לאתרי וורדפרס, אתרי וורדפרס מעוצבים, אתרים לדוגמא, אתרים יפים, אתרים להשראה, דוגמאות לאתרים, האתרים הכי יפים, אתרים מומלצים

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

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

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

מה אנשים אוהבים לקרוא כאן?

פוסטים אחרונים

2 תגובות

כתיבת תגובה

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

רוצים להקים אתר איכותי שמותאם בול לצרכי העסק והמותג שלכם?

השאירו פרטים ואתם בחצי הדרך לשם :)