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

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

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

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

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

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

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

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

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

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

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

Simon Collison

Andersson-Wise Architects

Stephen Caver

Sparkbox

קרא עוד >>

עיצוב מגיב / עיצוב גמיש מה זה? ואיך משתמשים בזה?

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

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

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

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

קוד CSS לדוגמא:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

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

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

קרא עוד >>

סרטון השוואה לרגל יציאת מערכת ההפעלה Win8

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

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

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

קרא עוד >>

21 אפליקציות אנדרואיד למעצבים – שחובה להכיר

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

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

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

1.  Color Mood Designer – אפליקציה מדהימה שמזהה את הסכמה של הצבעים שהכי תתאים לעיצוב של האתר שלך.

2)    HP IPrint Photo – האפליקציה הזו מאפשרת לכם להדפיס מסמכי PDF השמורים על גביי מכשיר הטלפון שלכם, היתרון המשמעותי באפליקציה הזו שהיא לא מצריכה חיבור של כבלים כדי שתוכלו להדפיס, האפליקציה מבית HP מזהה את המדפסת באמצעות התקן ה-WI-FI ומדפיסה את המסמך הרצוי.

3)    Photoshake–  האפליקציה מאפשרת לכם ליצור קולאז' או סתם לחבר כמה תמונות ביחד.

4)    Color Pal –  באמצעות האפליקציה הזו תוכלו לחפש או לצפות בפלטות צבעים הכי פופלאריות

5)    Superdry Color Picker–  בחירת צבע מתוך ספריית הצבעים שבאנדרואיד, רק צריך לבחור צבע ומקבלים את הקוד שלו

6)    Magic Color Picker– האפליקציה הזו עוזרת לכם לבחור צבע מתוך מספר סוגים שונים של מצבי צבעים (מצב בטוח,אינטרנט וכד') כלי מאוד שימושי למעצבים

7)  Free Draw–  האפליקציה הבאה תעזור לכם לבטא את המחשבות והרעיונות שיש לכם, באמצעות קנבס שעליו תוכלו לצייר וליצור את היצירה שלכם, ולאחר מכן אפילו לשתף אותה באמצעות הפייסבוק, טוויטר, מייל וכד'.

8)    Draw–  האפליקציה הבאה מאפשרת לכם לצייר כל דבר בסגנון הצייר המוכר והישן

9)    Sketchbook–  האפליקציה הזו מאפשרת למעצבים להדגיש את היצריתיות והכשרון שלהם, מומלץ לנסות

קרא עוד >>