המבוא המלא לעיצוב מוצרים דיגיטליים - סוגי עבודות,...

שגיא שרייבר

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

שגיא שרייבר

UI UX

נעים מאוד, שגיא שרייבר

שגיא שרייבר

UI UXעיצוב ממשקחווית משתמש

אפיון

במקצוע שלי אני משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

שגיא שרייבר

Product Designעיצוב מוצר (דיגיטלי)

או בשפה שמכנים אותה היום - עיצוב מוצר

2007 2016

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

טיפים מהנסיון שלי2

מה יש שם בשבילנו שם בחוץ1

המצגת מתחלקת לשניים

מה יש שם בשבילנו שם בחוץ

1

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

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

ויש המווווון כסף שם בחוץ

לקוח/מעסיק

ויש לנו לקוחות

וזה משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

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

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

ניקח יהלומן לדוגמה.

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

וזה משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

וזה משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

וזה משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

וזה משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

וזה משלב את האפיון וחווית המשתמש עם עיצוב ויזואלי של ממשקים

http://www.smashingmagazine.com

אני תמיד אוהב לתת את הדוגמה למה שסמאשינג מגזין עשו בעיצוב הרספונסיבי שלהם בזמנו (זה השתנה מאז אבל הדוגמה הזאת מעולה עדיין)

תראו איך התפריט מתכווץ

מסביב לאתר

אז האתר הושלם, ועכשיו יש לנו עוד עבודה…

מסביב לאתרבאנרים

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

מסביב לאתררי-סייזינג

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

דפי נחיתהמסביב לאתר

ובאנר הרי חייב להוביל לאיפשהו.. ל..דפי נחיתה.

דפי נחיתהמסביב לאתר

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

CTA (Call to action)

בלוגמסביב לאתר

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

ווידג’טים, ועוד ועודמסביב לאתר

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

מערכות ניהול תוכן

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

אתרים ובלוגים

סחר מקוון

מערכות פופולאריותמערכות ניהול תוכן

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

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

וזה רק אתרים!

ועוד לא דיברנו על שום דבר חוץ מעיצוב אתרים…

טיפים

אז לפני שממשיכים - הנה כמה טיפים ממני בנושא הזה

טיפים

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

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

טיפים

תשאלו תמיד שאלות, הלקוח לאתמיד יודע מה הוא רוצה

תגבו בהתאם, חוזה שעתי (ריטיינר)אם אתם פרילנסרים

טיפים פרקטיים לתהליך העבודה מול לקוח

חוזה ריטיינר מול לקוחות – הסבר וטמפלט להורדה חינם

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

cssdesignawards.com

השראה מאתרים

awwwards.com

csswinner.com

makebetterwebsites.com

verynicesites.com

siteinspire.com

pixelperfect.co.il/inspiration

להשראה אני ממליץ בחום לעקוב אחרי השראה בשישי שלנו, כי אנחנו עושים אוסף של 7 אתרים יפים כל שבוע, ואפשר לשאוב המון השראה מזה.

הידעת?

עכשיו שתי עובדות בשטח

1366x768

הידעת?

הרזולוציה הפופולארית בשנת 2015(33%) ובערך אותו אחוז על עוד רזולוציות גבוהות של מסכים רחבים אחרים

45%מהחיפושים ברשת במנועי חיפוש היו מסמרטפונים בשנה האחרונה

מקור

מקורמקור 2

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

יזם בא עם רעיון טוב

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

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

לוגו ותדמית

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

אפליקציה

לוגו ותדמית

עיצוב האפליקציה.

אפליקציה

לוגו ותדמית

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

אתר לאפליקציה

לוגו ותדמית

אפליקציה

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

אנחנו רוצים להבליט בין כל הפיצ’רים של האפליקציה שאנחנו עובדים עליה. מאמר מעולה מאת ג’ולי זאו, דיירקטורית https://medium.com/the-year-of-the-looking-glass/design-the- - של עיצוב בפייסבוק, מדבר בדיוק על זה

beginning-b8e61081ce42

אתר לאפליקציה

אייקוניםלוגו ותדמית

אפליקציה

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

אתר לאפליקציה

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציה

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

אתר לאפליקציה

דף פייסבוק

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאפליקציה

תמיד האפליקציה גם משתנה תוך כדי…

אתר לאפליקציה

רקע לטוויטר דף פייסבוק

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאפליקציהתר לאפליקציה

א

והאתר בהתאם :) והכל תוך כדי משימות אחרות…

אתר לאפליקציה

רקע לטוויטר דף פייסבוק

חומרים שיווקיים

אייקוניםלוגו ותדמית

אפליקציהאפליקציהתר לאפליקציה

א

אפליקציהאתר לאפליקציה

ערוץ יוטיוב

אתר לאפליקציה

רקע לטוויטר דף פייסבוק

חומרים שיווקיים

לוגו ותדמיתכרטיסי ביקוראייקונים

אפליקציהאתר לאפליקציה

אפליקציהאפליקציהתר לאפליקציה

א

אפליקציהאתר לאפליקציה

חומרים שיווקיים

אפליקציהפלטפורמה חדשה

ערוץ יוטיוב

רקע לטוויטר דף פייסבוקלוגו ותדמית

ערוץ יוטיוב

כרטיסי ביקוראייקונים

חולצות+ווסאח

אתר לאפליקציה

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

אתר לאפליקציהאפליקציהאפליקציה

תר לאפליקציהא

אפליקציהאתר לאפליקציה

חומרים שיווקיים

אפליקציהפלטפורמה חדשה

פלטפורמה חדשה

פליקציהא

חומרים שיווקיים

.(VR-ו IOT-וזה עוד לא כולל את ה) ולגבי האפליקציה… יש עשרות סוגי פלטפורמות קיימות היום

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

אז מה עושים שמישהו מגיע אלינו עם עבודה על פלטפורמה שעוד לא הכרנו? ברוכים הבאים לעבודה בסטרטאפ…

אבל האמת שהתשובה פשוטה… מתחילה בג’ נגמרת בל’

פשוט חפשו את מה שאתם צריכים בגוגל… זה הכל.

אבל חפשו בצורה ספציפית. לדוגמה אם לקוח רוצה שתעצבו עבורו אפליקציה לאנדרויד החיפושים שלכם יהיו: - What resolution would be best for designing for android devices- Free android device mockup

Freebie material design elementsוכו’

היתרון הבאמת גדול שלנו

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

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

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

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

טיפים מהנסיון האישי שלי

2

תהיו בעניינים, או שלא תהיו

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

s idebar. io Des igner News Product Hunt

Muz l i Panda

תהיו בעניינים, או שלא תהיו

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

Podcasts fo r des igners

p ixe lper fec t .co . i l /news le t te r -s ignup/

s idebar. io Des igner News Product Hunt

Muz l i Panda

תהיו בעניינים, או שלא תהיו

Podcasts fo r des igners

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

השבועי של פיקסל פרפקט אתם כבר תהיו בעניינים יותר מ80% מהתעשייה בארץ. למה? כי שם אני משתף את המאמרים שאני אישית קורא בשביל להשאר בעניינים. חשוב: לפנות לפחות 3-4 שעות של קריאת מאמרים בשבוע.

50% מהמקצועיות שלכם בתחום. בלי להגזים.

התחילו לעבוד בתחוםצברו נסיון, גם מחוץ לעבודה!

10,000 שעות להיות מאסטר, 100 שעות להתמקצעות

זה כל מה שצריך בשביל להיות מקצוענים בתחום מסויים

מקור

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

משמשים בהם, תעשו רידיזיין לאתרים שאתם קוראים בהם. תעשו רידיזיין לגוגל, לג’ימייל, ל-ynet, למה שבא! העיקר תמיד לעבוד על השרירים האלו. 100 שעות זה לא הרבה נכון? עכשיו לכו לעשות את זה!

התחילו לעבוד בתחוםצברו נסיון, גם מחוץ לעבודה!

v

כמו שאמרתי… זמן איכות עם התוכנה שלכם לעיצוב ממשקים. עכשיו זה פוטושופ או סקץ’ (אני עובד על סקץ’ בלבד), ובהמשך אולי זה יהיה Adobe Comet, אבל העיקר זמן איכות עם התוכנה.

התחילו לעבוד בתחוםצברו נסיון, גם מחוץ לעבודה!

v

לכו גם לכנסים ואירועים בתחום. למה? כי שם תפגשו אנשים מעניינים, תחשפו להשראה, טכנולוגיות To connect the dots חדשות, ותפתחו קשרים שאתם לא יודעים מתי יבואו לטובתכם. תוכלו רק

https://www.youtube.com/watch?v=sr07uR75Qk0 …בדיעבד

התחילו לעבוד בתחוםצברו נסיון, גם מחוץ לעבודה!

v

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

שווה הרבה להמשך. אם תזכו זה רק בונוס.

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

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

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

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

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

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

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

http://www.pixelperfect.co.il/freebies/retainer-contract/

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

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

דברו על זהעם חברים, משפחה, מכרים, בכנסים

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

דברו על זהעם חברים, משפחה, מכרים, בכנסים

אתם מדברים עם אנשים…

דברו על זהעם חברים, משפחה, מכרים, בכנסים

הם ידברו עם עוד אנשים…

דברו על זהעם חברים, משפחה, מכרים, בכנסים

אם אתם מחפשים לקוחות… תעבירו את המסר…

דברו על זהעם חברים, משפחה, מכרים, בכנסים

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

דברו על זהעם חברים, משפחה, מכרים, בכנסים

דברו על זהעם חברים, משפחה, מכרים, בכנסים

דברו על זהעם חברים, משפחה, מכרים, בכנסים

ואז אולי יום אחד זאת תהיה הפריצה שלכם ללקוחות מחו”ל.

דברו על זהעם חברים, משפחה, מכרים, בכנסים

ככה בונים קהל לקוחות

תעשו את זה כמו שצריךמחפשים עבודה?

טיפים למעצבים מחפשי עבודה

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

מחפשים עבודה?לפני הראיון

החלק הראשון הוא ההתכוננות לפני הראיון…

טיפים למעצבים מחפשי עבודה

מחפשים עבודה?

לאיזה סוג עבודת עיצוב אתם רוצים להתקבל?

מה עבד להם? אולי זה גם יעבוד לכם

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

תיק עבודות שלכם צריך להראות חשיבה!

הפורטפוליו שלכם יותר חשוב מהקורות חיים

פרטי קשר במקום בולט בקורות חיים

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

מינימום שנות נסיון - לא להתעלם

תתכוננו לפני

לפני הראיון

צריך לחשוב על כל הדברים הללו… פירוט במאמר

טיפים למעצבים מחפשי עבודה

מחפשים עבודה?בראיון עצמו

בראיון עצמו יש דברים אחרים שצריך לשים לב אליהם.

טיפים למעצבים מחפשי עבודה

מחפשים עבודה?

תביאו לפגישה חומרים שלא הראתם באתר/פורטפוליו שלכם

תביאו איתכם לראיון מסכים מלאים בגודל מלא

דברו על על מה לקחתם החלטות ולמה. דברו תכלס

בראיון עצמו

פירוט במאמר

טיפים למעצבים מחפשי עבודה

מחפשים עבודה?במבחן הבית (אם יש)

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

טיפים למעצבים מחפשי עבודה

מחפשים עבודה?

תעשו דאבל צ’קינג

קחו יום אחרי שאתם מסיימים את המבחן לוודא שלא שכחתם כלום

במבחן הבית (אם יש)

פירוט במאמר

טיפים למעצבים מחפשי עבודה

נקודה אחרונהThe Designer’s seat at the table

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

המודעות לדבר הזה. זה יתבטא במשכורות שלנו. ואפרופו משכורות…

נקודה אחרונהThe Designer’s seat at the table

76,000

38,00044,000

32,50038,000

11,50019,000

רחא הקפהו סופד תוינוניב תורבחהלעמו

תונטק תורבח הלודג פאטרטס תרבח)שיא 500 דע(

תורבחו וידוטסםוסרפ

סנלירפ

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

סקר משכורות מעצבים מאת פיקסל פרפקט מגזין pixelpelperfect.co.il

מאת 1000+ אנשים בארץ בלבד, אוקטובר 2015

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

יתפרסמו בפיקסל פרפקט.

נקודת בונוסKill your ego. Help eachother.

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

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

תודה!שגיא שרייברפיקסל פרפקט מגזין

sagi@pixelperfect.co.il pixelperfect.co.il

ו… שתפו את המצגת הזאת אם אהבתם :)