יש די הרבה תחומים הקשורים לעיצוב בתעשיית ה-IT. הנפוצים שבהם הם מעצבים, החבויים מאחורי ראשי התיבות UX ו-UI. ובכן, חלק מהאנשים אפילו מצליחים לכלול מפתחי קצה כמעצבים. בואו ננסה להבין מי הם המעצבים בעולם ה-IT, מה ההבדל בין UI ו-UX, ואיזה קשר יש למהנדסי קצה לעצב.
מעצבים
פיתוח ממשק של אפליקציות, אתרים או משחקים הוא תהליך מורכב למדי ודורש יישום ידע מתחומים שונים: הנדסה, פסיכולוגיה ועיצוב. מעצבי ממשק משתמש (באנגלית - User Interface או UI) מתמקדים באופן הצגת הפונקציונליות של האתר (חיפוש, לשוניות, תפריטים) ובפרטי האינטראקציה בין הלקוח לממשק. המטרה של מעצב ממשק משתמש היא עיצוב מוצר מודרני מקובל מבחינה אסתטית . UX ראשי תיבות של User Experience, שפירושו "חווית משתמש". מעצב UX מתמקד יותר בשימושיות ובהבנה של הממשק על ידי המשתמש הפוטנציאלי. מומחה כזה יערוך פעמים רבות מחקרים וסקרים שיהוו בסיס ליצירת קונספט עיצובי, וגם יבדוק מושגים במהלך ואחרי הפיתוח. הוא מתמקד בדרך כלל במבנה, בתוכן, בניווט ובאופן שבו המשתמש מקיים אינטראקציה עם אלמנטים אלה.
הוא מייצר מפות אתר, אבות טיפוס, שהם המבנה הבסיסי בעת יצירת תוכנה. המטרה של עבודתו של מעצב UX היא שהמשתמש יקבל במהירות וללא כאב מהאתר את מה שהוא בא לכאן . עם זאת, כיום נפוץ מאוד לראות את שתי ההתמחויות הללו כתובות בקו נטוי. כלומר, המשימות של שני הכיוונים מבוצעות על ידי מומחה אחד. מעצב UX/UI מעצב את האינטראקציה של המשתמש עם הממשק, מחליט מה בדיוק הוא צריך לעשות ואחראי על איך הממשק הזה ייראה כתוצאה מכך.
מה שמעצב UX/UI צריך לדעת
עורך גרפי . הכלים הפופולריים ביותר בשוק הם Adobe Photoshop, Adobe Illustrator, כמו גם Sketch, Figma. בחר עורך שנוח לך ונסה תחילה לצייר צילומי מסך של אתר אינטרנט או אפליקציה, ולחדש אותם מעט.
כלי יצירת אב טיפוס (Mockplus, Axure) . כלי ליצירת אב טיפוס הוא הקישור בין רעיון לביצועו. זה לא משנה באיזה כלי אתה משתמש. אתה יכול לנסות כמה ולהחליט על זה שמתאים לסגנון ולהעדפות שלך.
פסיכולוגיה של המשתמש. כבר בשלב התכנון כדאי לחשוב האם יהיה נוח לכם או למישהו אחר להשתמש בממשק הזה. שימו את עצמכם בנעלי הלקוח, בנו איתו קשר חזק והיו קשובים לצרכיו. הרי מוצר יצליח אם יהיה לו ביקוש.
תצטרך גם ידע בתורת הצבעים . אנחנו יודעים כמה דברים מילדות, במיוחד אלה שהלכו לבית ספר לאמנות. עם זאת, ישנם פרטים מסוימים לגבי עבודתם של מעצבים. ידע בסיסי ניתן לקבל מספרים או מאמרים באינטרנט.
בהתאם לפרטי העבודה, ייתכן שתזדקק להבנה של HTML ו-CSS או (כמה) שפות תכנות (קישורים למשאבים ניתן למצוא למטה, בסעיף "מה שמפתח קצה צריך לדעת").
מפתח קצה
המשימה העיקרית של מפתח קצה היא לפתח את חלק הלקוח בממשק. כלומר, מומחה כזה "מחייה" את מה שעיצבו המעצבים. הוא אחראי על תפעול ותפעול הממשק ופחות על התוכן הוויזואלי. מפתח קצה צריך לעתים קרובות למצוא פתרון טוב לממשק המשתמש בשלב הפיתוח שלו, ולכן הוא מרבה לשתף פעולה עם מעצב UX/UI. הקוד שנכתב על ידי מפתח הקצה פועל בדפדפן של המשתמש (כמו שאומרים, "בצד הלקוח"). כמו כן, אחת המשימות החשובות ביותר היא להבטיח שהאתר או אפליקציית האינטרנט ייראו אותו הדבר בכל הפלטפורמות והדפדפנים.
מה שמפתח קצה צריך לדעת
ככלל, החזית מבוססת על שלושה עמודים: שפת הסימון של דפי HTML, גיליונות סגנונות CSS ושפת התכנות JavaScript. בנוסף, על מפתח הקצה להבין את עקרונות הפעולה של פרוטוקול ה-HTTP, השרתים והדפדפנים ואת תכונות הצגת הממשק במכשירים שונים הקיימים כיום בשוק. כלים ושיטות ליצירת ממשקי אינטרנט מתפתחים ומשתנים כל הזמן ולכן על המפתח לפקח על כך כל הזמן.
HTML ו-CSS (פריסה)
זו הפריסה, הלבנים ממש שמהן בנוי האתר. שפת הסימון HTML מכתיבה את ארגון האתר, התוכן וכל האינטראקציות ביניהם. זה מאפשר לך לייעד את החלק העליון של העמוד, התחתון, בלוקים בצד עם תוכן, כותרות, הצגת טקסט ואלמנטים מולטימדיה. גיליונות סגנונות CSS משמשים לקישוט רכיבי HTML. הם קובעים בדיוק כיצד מוצג כל אלמנט גרפי שנמצא בדף. באמצעות הגרסאות העדכניות ביותר של HTML5 ו-CSS3, אתה יכול למקם רכיבי וידאו ואודיו בדף, ליצור תמונות ואנימציות דו-ממדיות ואפילו לכתוב משחקים פשוטים. אין צורך לנסות לזכור את כל התגים והסגנונות בבת אחת. זה יעזור ללמוד את היסודות ולהפעיל אותם מיד. אתר טוב מאוד שבו אתה יכול ללמוד את היסודות של HTML ו-CSS הוא W3School. אבל רק אם יש לך לפחות ידע בסיסי באנגלית.
כמו כן, על המפתח הקדמי להבין פיתוח חוצה דפדפנים ופלטפורמות, פריסה אדפטיבית ומגיבה.
אתחול
זוהי מסגרת עבור HTML, CSS ו-JavaScript. כלומר, תבניות מסוימות שמהן, כמו מבנאי, ניתן להרכיב אתרים הרבה יותר מהר מאשר בלעדיהם. אבל, כמובן, אתה צריך להתאים את זה כדי להתאים לצרכים שלך בעצמך. אם אתה יודע אנגלית, אנו ממליצים על אתר getbootstrap ועל אותם w3schools .
JavaScript
Javascript הוא הליבה של פיתוח חזיתי. זוהי שפת התכנות הממשק הראשונה והנפוצה ביותר. זה יכול להוסיף הרבה תכונות לאתר. ברמה בסיסית, שפה זו מאפשרת להוסיף אלמנטים אינטראקטיביים לעמוד. הוא משמש ליצירת מפות שמתעדכנות בזמן אמת, משחקים וסרטים מקוונים אינטראקטיביים. בקורסי JavaRush הבכירים שלנו, אנו לומדים קצת JavaScript. אתה יכול גם ללמוד אותו באותו W3School או לקרוא על זה ברוסית באתר javascript.ru .
jQuery
jQuery היא ספריית Javascript המכילה תוספים והרחבות שיכולים להפוך את הפיתוח לקל ומהיר עוד יותר. במקום לכתוב קוד מאפס, ספריות מאפשרות לך להוסיף רכיבים מוכנים, שאותם ניתן להתאים אישית לפרויקט ספציפי. אתה יכול להשתמש בפונקציות של מילוי אוטומטי של טפסי חיפוש, סידור מחדש ושינוי גודל הרשת, והגדרת טיימרים לספירה לאחור. קורס jQuery מעשי ב-w3school
מסגרות Javascript
ישנם סוגים שונים של מסגרות, אך אתה יכול לבחור אחת שנוחה לך לשימוש. המפורסמים ביותר הם Angular, Backbone, Ember ו-React. הם מייצגים מבנה מוכן לקוד. הם עוזרים להאיץ את ההתפתחות. ובשילוב עם ספריות הם יכולים למזער את הפיתוח של אתר אינטרנט או אפליקציה מאפס. סקירה של 5 מסגרות וספריות JavaScript הפופולריות ביותר של 2017
מערכת בקרת גרסאות Git
מערכות בקרת גרסאות יכולות לעקוב אחר שינויים שבוצעו בקוד לאורך זמן. הם גם מאפשרים לך לחזור לגרסה קודמת של הפרויקט. Git היא מערכת בקרת הגרסאות הנפוצה ביותר. לדעת איך לעבוד עם Git היא מיומנות חשובה לכל מפתח. מדריך Git ברוסית
מסקנות קצרות
UI קיצור של User Interface, שפירושו "ממשק משתמש". כלומר, מעצב ה-UI אחראי בעיקר על אופן הצגת המוצר למשתמש. הוא מפתח כפתורים, אייקונים, בוחר גופנים ומכין פריסה. UX ראשי תיבות של חווית משתמש. אז מעצב UX מעצב עיצוב של אתר אינטרנט, אפליקציה – או כל דבר – כך שלמשתמש יהיה נוח ומובן מה זה, והוא יוכל לקבל מהאתר את מה שהוא צריך במינימום מאמץ. לעתים קרובות מאוד, שני סוגי העבודה מבוצעים על ידי תזמורת איש אחד: מעצב UI/UX. מפתח ה-Front-end מחייה את עבודתם של המעצבים על ידי הכנסת דינמיקה לתוכה: מתחילים ללחוץ על כפתורים, והתמונה מתחילה להשתנות. עליו לדעת שפות תכנות, מתובלות במסגרות, מעבדי קדם וספריות.
GO TO FULL VERSION