15 ספרי UX ו-UI בחינם. שווים קריאה!

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

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

1. Search User Interfaces by Marti A. Hearst (2009)

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

————————————————————–

2. Web Style Guide by Patrick J. Lynch and Sarah Horton (1999)

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

————————————————————–

3. Designing Interfaces – Patterns for Effective Interaction Design by Jenifer Tidwell (2006)

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

————————————————————– קרא עוד >>

מצגת CSS3 שמבוססת על הסגנון של Prezi

לפני יותר משנה כתבתי בבלוג סיקור קצר על כך שהגיע הזמן לעזוב את ה-Power Point ולעבור ל- Prezi .

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

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

דבר נוסף שכדאי לדעת על היתרון בשימוש ב-Prezi זה שהם השכילו והשיקו את אפליקציית פרזי לאייפד – prezi App for Ipad המאפשר לכם לנדוד עם המצגות שלכם לכל מקום ולא להיות מקובעים למחשב.

קרא עוד >>

להורדה: תבניות לעיצוב דף פרופיל/מותג לטוויטר החדש

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

עיצוב הGUI שתקבלו כאן עוצב ע"י  Jon Darke ושוחרר רשמית עבור Smashing Magazine, אז כמובן כל הקרדיט שמור להם על שיתוף והעלאה של החומר השימושי הזה.

קבצי PSD של העיצוב מכילים mockup שלם של כל עיצוב האתר באופן ווקטורי ואיכותי לשימוש איכותי ומקסימלי עבורכם.

להורדת תבנית mockup לטוויטר:

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

–  פרופיל אישי – תמונה לצפייה

–  פרופיל אישי למותגים – תמונה לצפייה

–  קובץ RAR להורדת כל החומרים – להורדה

תכונות:

–  100% דיוק ברמת הפיקסל

–  2 גירסאות להורדה, פרופיל ופרופיל למותג.

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

–  כל השכבות והתיקיות מסודרות לפי נושא

–  קובץ מותאם לגירסאת CS4+

תבניות עיצוב לאייפון, אנדרואיד ושאר ios למינהם

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

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

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

50 דוגמאות לאתרים מבוססי עיצוב מגיב/גמיש

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

ציטוט קצר על ההגדרה:

עיצוב מגיב או עיצוב גמיש (Responsive Design) – עד היום לא בחרו שם רשמי בשפה העברית למונח הזה, מדובר בעיצוב שמגיב בהתאם לסביבה ורזולוציה שבה הגולש נמצא, לצורך העניין הרזולוציה במסך מחשב בגודל 22 אינץ שונה מהרזולוציה שיש באייפון / באייפד כנ"ל גם אם נטה את האייפון / אייפד לרוחב נקבל רזולוציה נוספת  ולכן יש צורך לבצע התאמה של האתר להתקנים אלו כדי שאנחנו ההגולשים נוכל לנווט ולגלוש בקלות באתר מהתקנים השונים, את הזיהוי של ההתקנים מבצעים באמצעות שורת קוד ב-CSS, שיודעת לזהות מאיזה התקן ורזולוציה הגולש הגיע ובהתאם לכך לבחור את תצוגת האתר המתאימה ביותר.

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

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

דוגמאות לעיצוב מגיב

Simon Collison

Andersson-Wise Architects

Stephen Caver

Sparkbox

קרא עוד >>