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

Lovely UI
גלריה המתעדכנת בתדירות די גבוהה. ניתן לפלטר את התוצאות על פי רכיבי UI או על פי רשימת תגיות ארוכה ומפורטת.

Make Better Apps
האתר הוא בגרמנית אומנם אבל תחום ה-UX הוא חוצה שפות :) האתר מחולק ל-3 קטגוריות: אייפון, אייפד ודסקטופ.

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

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

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

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

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

App Sites
גלריה המציגה אתרי אפליקציות. כך אפשר להתרשם גם מהאפליקציות עצמן וגם מהאתרים שלהן.

JQM gallery
שלל אתרים ואפליקציות למובייל המפותחים ב-jQuery מובייל. האתר מציע גם כל מיני מקורות נוספים: ספרים, פלאגינים וטוטוריילים.

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

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

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

flicr
אלבום פליקר המכיל המון סוגים של תבניות מובייל להשראה.

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

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

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

ציירי לי כבשה (בשמיים)

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

במהלך הלימוד נוצרה דוגמת ציור חמוד (בדומה למה שהבן שלי מצייר) שנראה ככה:

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

הדוגמא המלאה כאן:
http://www.netcraft.co.il/playground/canvaspicture/index.html

ולהלן ההסברים שלב שלב, איך הגעתי לתוצאה.

הקנבס

ל - canvas יש רק שתי תכונות (attributes) הכרחיות – רוחב וגובה. אם לא מגדירים אותן אז הרוחב הדיפולטיבי יהיה 300 פיקסלים והגובה 150 פיקסל. את התכונות מגדירים בתג ולא דרך CSS, אחרת היחס של אלמנטים בתוך ה- canvas יהיה מעוות. כל הפעולות מתבצעות בקונטקסט דו מימדי (2D Rendering Context), שנמצא בכל תג <canvas>, ובעצם קונטקסט דו מימדי זו מערכת קואורדינטות מלבנית.

השלב הראשון הוא להגדיר בקובץ ה - HTML את ה - canvas שלנו (השטח שבו הולכים לצייר), עם הרוחב והגובה שלו:

		                <canvas id="canvas" width="1100" height="650"></canvas>

ועכשיו ל Javascript.

תשתית לציור

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

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

		            // fuction of converting grades to radians
		            Number.prototype.degree = function () {
			                return this * Math.PI / 180;
		            };

בדיקה האם הדפדפן תומך ב - canvas מתבצעת ע"י בדיקת המצאוּת getContext ואם כן - מקבלים גישה לקונטקסט ציור שהוא 2D (דו-ממדי):

		                var canvas = document.getElementById('canvas');
		                if (canvas.getContext){
			                    // use getContext to use the canvas for drawing
			                    var ctx = canvas.getContext('2d');
		                }

מגדירים משתנים בשביל הרוחב והגובה של ה – canvas, שנשתמש בהם בעתיד:

		                // get the canvas sizes
		                var	canvasWidth = canvas.getAttribute("width"),
			                      canvasHeight = canvas.getAttribute("height");

מציירים שמש

מעגל השמש

קודם נצייר מעגל של שמש בשלושה שלבים:

1. מגדירים גרדיאנט מעוגל של המעגל ע"י שיטת
createRadialGradient(x1,y1,r1,x2,y2,r2)
שבה :
x1,y1 – קואורדינאטות מרכז מעגל פנימי (קטן)
r1 – רדיוס מעגל פנימי (קטן)
x2,y2 – קואורדינאטות מרכז מעגל חיצוני( גדול)
r2 – רדיוס מעגל חיצוני (גדול)

		                // create gradient of sun circle
		                var radgrad = ctx.createRadialGradient(120,140,10,120,130,80);

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

	                    radgrad.addColorStop(0, '#F4F201');
	                    radgrad.addColorStop(0.9, '#E4C700');
	                    radgrad.addColorStop(1, 'rgba(228,199,0,0)');

זה נותן 3 נקודות:

• ראשונה, הנמצאת בנקודת התחלה של מרוח בין המעגלים (על מעגל פנימי) ומציינת צבע #F4F201
• שנייה, הנמצאת בנקודת מרווח של 90% מכל המרווח בין המעגלים מנקודת ההתחלה שלו ומציינת צבע #E4C700
• שלישית, הנמצאת בנקודה סופית של המרווח בין המעגלים (ז.א. על המעגל החיצוני) ומציינת צבע rgba(228,199,0,0)

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

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

	                    // fill the defined rectangle by sun circle gradient
	                    ctx.fillStyle = radgrad;
	                    ctx.fillRect(40,50,160,160);

קרנות השמש

1. קרנות השמש נצייר בצורת משולשים המסתובבים 360 מעלות סביב נקודה אחת, והפינה הכי חדה של כל משולש פונה למרכז (נקודת מפגש). חוץ מזה אנחנו רוצים שמעגל השמש יסתיר את נקודת המפגש של הקרנות.
במקרה כזה ניתן לשנות את צורת החפיפה של האלמנטים. צורת החפיפה הדיפולטיבית היא כזאת שכל אלמנט חדש מסתיר
את הישן ואנחנו צריכים הפוך: שהקרנות "יכנסו מתחת" למעגל השמש. אז נשנה את צורת החפיפה
globalCompositeOperation מהדיפולטיבית להפוכה (ישן יסתיר חדש): destination-over.
ואחרי זה נגדיר צבע מילוי של משולשי קרנות.

		            // set composite property for insert rays behind sun circle
		            ctx.globalCompositeOperation = "destination-over";

              // set color of rays
	            ctx.fillStyle = "#edda58";

2. עכשיו נצייר 12 קרנות:

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

                        ctx.beginPath();
                        ctx.moveTo(120, 130);
                        ctx.lineTo(100, -50);
                        ctx.lineTo(130, -50);
                        ctx.lineTo(120, 130);
                        ctx.fill();

ע"י מתודה translate אנחנו מזיזים את כל הפיקסלים של הקנבס לערכים x ו-y המוגדרים בה. וע"י מתודה rotate אנחנו מסובבים את המשולש ל30 מעלות בכיוון השעון.

עושים סיבוב מלא בעזרת לולאת for:

		                // draw 12 triangles of rays: each triangle rotated to 30 grad.
		                for (var i = 0; i < 12; i++) {
			                    ctx.translate(85, -40);
			                    ctx.rotate((30).degree());
			                    ctx.beginPath();
			                    ctx.moveTo(120, 130);
			                    ctx.lineTo(100, -50);
			                    ctx.lineTo(130, -50);
			                    ctx.lineTo(120, 130);
			                    ctx.fill();
		                }

(בגלל שאנחנו עושים סיבוב מלא (30×12=360) ה-canvas חוזר לאותה צורה כמו לפני שהשתמשנו במתודה translate). אם לא היינו עושים סיבוב מלא, צריך היה לבצע שמירה של מצב ה canvas ע"י שורת ()ctx.save לפני שימוש ב-translate והחזר מצב שמור ע"י שורת ()ctx.restore אחרי סיום שימוש ב- translate.

ענני Bezier

• לפני שנצייר ענן, נגדיר לו צבע מילוי:
  ctx.fillStyle = "#bed2fb";
• הענן בנוי מ-5 עקומות המצוירות ע"י מתודה bezierCurveTo.נצייר את העקומות בעזרת bezierCurveTo בשביל שהציור יהיה דומה יותר לציור ידני (שהעקומות לא יהיו בצורה נכונה). בשביל לצייר עקומת בזיה צריך לציין קואורדינאטות של 3 נקודות: (נקודת התחלה של העקומה – היא הנקודה האחרונה שעצרנו בה או הנקודה שהגדרנו, במקרה שלנו, במתודה ctx.moveTo(410,80);). נקודת ביקורת ראשונה, נקודת ביקורת שניה ונקודת סיום של העקומה. בתמונה – נקודות אדומות הן נקודות ביקורת ונקודות כחולות – נקודות התחלה והסוף.חשוב שנקודת התחלה של הציור תהיה גם נקודה סופית של העקומה אחרונה.

                        // draw one cloudlet
                        ctx.moveTo( 410, 80);
                        ctx.bezierCurveTo( 410, 20, 448, 0, 510, 30);
                        ctx.bezierCurveTo( 565, 10, 595, 8, 630, 60);
                        ctx.bezierCurveTo( 700, 65, 700, 160, 610, 160);
                        ctx.bezierCurveTo( 580, 190, 540, 200, 490, 160);
                        ctx.bezierCurveTo( 400, 190, 370, 110, 410, 80);
                        ctx.fill();

• אנחנו רוצים לצייר את העננים עד סוף הקנבס ברוחב, אז נעטוף את הקוד הזה בלולאת while עד x פחות מרוחב הקנבס. ובקוד שלנו לכל הקואורדינאטות נוסיף משתנים x וy- בהתאם. כל ענן יצויר אחרי 400 פיקסלים מרווח ברוחב. בנוסף לכך אנחנו רוצים שהעננים יופיעו אחד למטה, אחד למעלה. בשביל זה נשנה את הקואורדינאטה y בהתאם למספר הסידורי של הענן. זוגי יצויר בגובה y - 80 פיקסלים, ואי-זוגי – בגובה y של 40 פיקסלים.

וזה הקוד הסופי של ציור העננים:

		                function drawCloudlets() {
			                    // set cloudlets color fill
			                    ctx.fillStyle = "#bed2fb";
			                    // drawing cloudlet and duplication its until canvas with
			                    var y = 0,
				                          x = 0,
				                          i = 0;
			                    while ( x < canvasWidth ) {
				                        ctx.moveTo(x + 410, y + 80);
				                        ctx.bezierCurveTo(x + 410, y + 20, x + 448, y + 0, x + 510, y + 30);
				                        ctx.bezierCurveTo(x + 565, y + 10, x + 595, y + 8, x + 630, y + 60);
				                        ctx.bezierCurveTo(x + 700, y + 65, x + 700, y + 160, x + 610, y + 160);
				                        ctx.bezierCurveTo(x + 580, y + 190, x + 540, y + 200, x + 490, y + 160);
				                        ctx.bezierCurveTo(x + 400, y + 190, x + 370, y + 110, x + 410, y + 80);
				                        ctx.fill();
				                        x = x + 400;
				                        // for even cloudlet - draw upward
				                        if (i % 2 == 0) {
					                            y = y - 40;
				                        }
				                        // for odd wave - draw downward
				                        else y = y + 40;
				                        i++;
			                    }
		                }

גלים ריבועיים

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

              // set composite property for drawing skiff behind waves
		            ctx.globalCompositeOperation = "destination-over";

		            // set color of waves line
		            ctx.strokeStyle = "#416cf8";
		            // set color of waves fill
		            ctx.fillStyle = "#416cf8";

1. בשתי השורות הבאות נגדיר שאנחנו מתחילים לצייר צורה (אזור הגלים הוא בעצם צורה שמלמעלה – גבול גלי ובצדדים ולמטה - גבולות ישרים) ונקודת התחלה:

		                // begining draw waves shape (all blue area)
		                ctx.beginPath();
		                // set start point to left side of canvas
		                ctx.moveTo(0, 500);

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

גל אחד שלנו יצויר בקוד:

		                ctx.quadraticCurveTo(50, 480, 110,500);

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

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

	              // draw waves until canvas width
		                x = y = 0;
		                var i = 1;
		                while ( x < canvasWidth ) {
			                    // for even wave - draw upward
			                    if ( i % 2 == 0 ) {
				                        y = 40;
			                    }
			                    // for odd wave - draw downward
			                    else y = 0;
			                    // drawe wave as quadraticCurve
			                    ctx.quadraticCurveTo(x + 50, y + 480, x + 110, 500);
			                    ctx.stroke();
			                    x = x + 120;
			                    i++;
		                }

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

		                // close shape of waves for fill
		                ctx.lineTo(canvasWidth, canvasHeight);
		                ctx.lineTo(0, canvasHeight);
		                ctx.closePath();
		                // fill shape in selected by fillStyle color
		                ctx.fill();

סירה על פני המים

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

1. לפני זה נגדיר צבעים של קוים ומילוי:

		                //set lines color
		                ctx.strokeStyle = "#000000";
		                // set color fill
		                ctx.fillStyle = "#d99d4e";

2. נצייר את צורה של גוף הסירה ונמלא אותה בצבע מילוי (לפני זה נעביר את נקודת התחלה של הצורה לנקודה הרצויה):

		              // draw skiff body
	                ctx.beginPath();
	                ctx.moveTo(380, 510);
	                ctx.lineTo(320, 450);
	                ctx.lineTo(610, 450);
	                ctx.lineTo(550, 510);
	                ctx.closePath();
	                ctx.stroke();
	                ctx.fill();

3. נגדיר צבע מילוי של מפרש , נצייר אותו בצורת משולש ונמלא אותו בצבע:

		                // set sail color fill
		                ctx.fillStyle = "#ff6662";
		                //draw skiff sail
		                ctx.beginPath();
		                ctx.moveTo(435, 450);
		                ctx.lineTo(435, 250);
		                ctx.lineTo(530, 355);
		                ctx.lineTo(435, 410);
		                ctx.closePath();
		                ctx.stroke();
		                ctx.fill();

חוף מבטחים

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

לפני שנצייר אי, נחזיר את צורת החפיפה של האלמנטים למצב דיפולטיבי שהוא source-over (בשביל שהאי יעלה מעל הצורה של הגלים) ונגדיר צבע מילוי:

              // set composite property for drawing island in front of waves
		            ctx.globalCompositeOperation = "source-over";

              // set composite property for drawing island in front of waves
		            ctx.globalCompositeOperation = "source-over";

		            //set island color fill
		            ctx.fillStyle = "#925112";

לאחר מכן נצייר את הצורה עם ציור עקומה וקוים ומילוי בצבע:

		                // draw island
		                ctx.beginPath();
		                ctx.moveTo(canvasWidth, 470);
		                ctx.quadraticCurveTo((canvasWidth - canvasWidth / 6), 470, (canvasWidth - canvasWidth / 2.2), canvasHeight);
		                ctx.lineTo(canvasWidth, canvasHeight);
		                ctx.closePath();
		                ctx.fill();

הדשא של (האי) השכן

ציור של דשא מורכב מהשלבים הבאים:

1. הגדרת צבע ורוחב קוים:

		                //set grass lines color
		                ctx.strokeStyle = "#61e676";
		                //set with of lines
		                ctx.lineWidth = 2;

2. ציור קבוצה של 3 קוים בעזרת bezierCurveTo, שכל קו מתחיל באותה נקודה וציור 4 קבוצות של דשא ע"י לולאת for שכל קבוצה נמצאת למטה או למעלה לפי סדר רץ:

		            //draw 4 grass groups (3 blades in each group)
		            for ( var i = 0; i < 4; i++ ) {
			                ctx.moveTo(x + 750, y + 600);
			                ctx.bezierCurveTo(x + 752, y + 550, x + 770, y + 550, x + 785, y + 545);
			                ctx.moveTo(x + 750, y + 600);
			                ctx.bezierCurveTo(x + 740, y + 555, x + 750, y + 555, x + 760, y + 540);
			                ctx.moveTo(x + 750, y + 600);
			                ctx.bezierCurveTo(x + 725, y + 550, x + 735, y + 560, x + 710, y + 555);
			                ctx.moveTo(x + 750, y + 600);
			                x = x + 100;
			                // for grass group - draw upward
			                if ( i % 2 != 0 ) {
				                    y = y + 45;
			                }
			                // for odd grass group - draw downward
			                else y = y - 45;
		            }

3. סוגרים מסלול ונותנים פקודה לצייר קוים (בצבע strokeStyle שהגדרנו אחרון):

		                // closing path and drawing lines
		                ctx.closePath();
		                ctx.stroke();

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

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

בספרים הבאים לא תמצאו הרבה תמונות ושיחות (כמו שאליס אוהבת), ובכל זאת הרכבתי רשימה קצרה של ספרי Javascript מומלצים בחום מכל צוות ה Front-End שלנו כאן בנטקראפט.
רשימה שתעזור לכם להיכנס לעניינים, לחדד כישורים או סתם להעביר זמן איכות עם כוס קפה ושורות קוד שרק אתם והדפדפן יודעים להבין.

נ.ב. או בונוס למצטיינים

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

ECMA-262 Javascript. The core מאת Dmitry Soshnikov

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

קריאה נעימה!

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

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

למי שלא הצליח להירשם בזמן (ההרשמה השניה נסגרה תוך פחות מ-10 דקות אז אל תרגישו רע) אני שמח לצרף את המצגות שהועברו:

טל פלורנטין - סליחה, אפשר בבקשה לקבל עזרה?

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

אייל שחר - UX מהבטן

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

ויטלי מיז'יריצקי - אפיון טראנסיוריסטי של ממשקי גאואמורטיזציה אינקרמנטלית

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

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

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

דנה כהן ברון - חייו של הפרילאנס

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

ליאור יאיר - לאפיין את המאפיין - להיכנס לתחום חווית המשתמש

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

זיו מלצר - איך חציתי את הקווים

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

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

מה היתה המשימה?

תרגיל הסיום של הקורס היה לאפיין ממשק למערכת לניהול תקציב משפחתי. קהל היעד הוגדר כמשפחות ישראליות, משתמשים בגילאי 30 – 45 מרמת הכנסה בינונית+. ניתנה למשתתפים בחירה חופשית בפלטפורמה אליה מכוונים - iPhone / iPad / Website / Desktop application.

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

מה קיבלנו?

תשפטו בעצמם:

מורן אסרף

אילן ליכטנייר

צופי שפר

אלה מוגילבסקי

אלכס בונין

נלי פרייד

חושבים על ללמוד אצלנו?

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

]]>