Media-Shark

חווית משתמש UX/UI

מה תרצו לדעת?

חווית הניווט המושלמת

על מה המשתמשים שלכם לוחצים הכי הרבה
ועל מה לא בכלל? לחצו כאן כדי לגלות

איך להפוך את חווית החיפוש
לידידותית יותר?

הידעתם? אם החיפוש משלים
את מילות המפתח שהלקוח מחפש
סיכויי הרכישה שלו יעלו ב60%

חוויית המשתמש
(User Experience UX)

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

שימושיות

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

מראה

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

תחושה

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

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

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

עיצוב אתרי אינטרנט

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

תדמית

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

אפיון

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

צבעים

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

מיתוג

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

קריאייטיב

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

השראות

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

פונטים

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

טיפוגרפיה

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

עיצוב בפלטפורמות צד ג'

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

סביבת העבודה

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

הכרת הסביבה העסקית

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

<!DOCTYPE html>

<html>

<head>

<title>UX/UI</title>

</head>

<body>

<h1>תכנות וקוד</h1>

<p class="'white">עיצוב לאתר אינטרנט לא מסתכם רק בעיצוב הקבצים הגרפיים, מעבר לתוכנות הסטנדרטיות שבהן צריך מעצב גרפי להיות בקיא, מעצב האתרים צריך לדעת להתעסק בשפות קוד (HTML, CSS) ולהבין עניין בממשק ניהול האתר (בוורדפרס כמובן 😊)</p>

</body>

</html>

 

תיקוני עיצוב

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

שליטה בתוכנות

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

תקנים וסטנדרטים

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

רספונסיביות (התאמות)

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

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

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

כותרת שקופית 1
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
לחץ כאן
כותרת שקופית 2
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
לחץ כאן
כותרת שקופית 3
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
לחץ כאן
הקודם
הבא

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

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

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

דילוג לתוכן