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

MADE IN ISRAEL – אוקטובר 2020

מורדי לוי | אוקטובר 2020

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

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

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

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

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

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

כמה מילים מיוצר האתר:

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

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

designCreated with Sketch.
buildCreated with Sketch.

עיצוב

סטודיו האייל

בנייה

סטודיו האייל

themeCreated with Sketch.
pluginsCreated with Sketch.

תבנית

Hello

תוספים

אין

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

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

כמה מילים מיוצר האתר:

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

designCreated with Sketch.
buildCreated with Sketch.

עיצוב

בנייה

חיים בניסטי

themeCreated with Sketch.
pluginsCreated with Sketch.

תבנית

Hello

תוספים

The Grid

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

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

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

כמה מילים מיוצר האתר:

״כשפנתה אלי נטלי המעצבת המוכשרת שחיה ונשמת לייף סטייל ואופנה, אמא ל-2 זאטוטים, היא ביקשה ממני שניצור את הבייבי החדש שלה "My Precious" חנות בוטיק למוצרי NEW-BORN ולילדים בעבודת יד ובתפירה בהתאמה אישית. כמעצב למעצבת דיברנו ישר באותה השפה וכאבא טרי שזקןק לאותם המוצרים התחברתי למוצרים המהממים, לאיכות ולסיפור המותג."


"כשהתחלנו באפיון ועיצוב האתר רצינו להעביר את התחושה של הרכות, הניקיון והעדינות של המוצרים ששומרים על הילדים שלנו דרך הצבעים הנעימים והקפדה על כל האלמנטים עד הפרטים הקטנים. חווית המשתמש UX של האתר הייתה בעדיפות עליונה ולא היה לי ספק שאלמנטור יהיה הכלי היעיל ביותר, חסך הרבה שעות תכנות ונתן לנו גמישות בתהליך שכלל מחקר ו-A/B Testing לעמוד הבית, עמוד המוצר ותהליך הרכישה במטרה לתת חווית משתמש קלה וידידותית."

designCreated with Sketch.
buildCreated with Sketch.

עיצוב

בנייה

ערן סלע

themeCreated with Sketch.
pluginsCreated with Sketch.

תבנית

OceanWP

תוספים

WooCommerce Advanced Custom Fields PRO JetSmartFilters Unlimited Elements for Elementor Yoast SEO

באתר של ״אביגדור 22״ אפשר לראות דוגמה מעולה לכותרות שגונבות את ההצגה. פונט Secular One במשקל הכי עבה שלו, בגדול, על גבי תמונה – מפיק הצהרה שקשה להתעלם ממנה.

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

כמה מילים מיוצר האתר:

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


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

designCreated with Sketch.
buildCreated with Sketch.

עיצוב

בנייה

ג'נסיס

themeCreated with Sketch.
pluginsCreated with Sketch.

תבנית

oceanWP

תוספים

Jet elements, WP Rocket, Contact Form 7, Imagify, Yoast SEO

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

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

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

designCreated with Sketch.
buildCreated with Sketch.

עיצוב

בנייה

אלפבית פרסום ישראלי

themeCreated with Sketch.
pluginsCreated with Sketch.

תבנית

oceanwp

תוספים

ocean extra, ocean sticky header

חושבים שיש לכם אתר או עמוד נחיתה שחייב להיכנס לחודש הבא? נשמח לשמוע!

מורדי לוי

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

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

2 Responses

כתיבת תגובה

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

רוצים להופיע ברשימת האתרים?

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

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

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