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

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

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

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

עיצוב מגיב או עיצוב גמיש (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 */
}

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

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

קרא עוד >>

50 עיצובי UI מדהימים מאתר Dribbble – השראה

לאחרונה מצאתי את עצמי גולש הרבה באתר Dribbble ומתרשם מהעבודות שמעלים שמה מעצבים מוכשרים מרחבי העולם.

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

1. player – מדובר במשתמש שיכול להעלות עבודות/להגיב למשתמשים אחרים, המשתמשים האלה נוצרים באמצעות הזמנה בלבד.

2. spectator – משתמש שיכול לעקוב אחרי יוצרים באתר אך אינו יכול להגיב/לפרסם עבודות משלו  כל אחד יכול להירשם בתור spectator

3. prospect – משתמש שדומה באפשרויות שלו כמו משתמש ה –spectator  ההבדל בינהם שמשתמש prospect נרשם לכך מפני שהוא מעוניין "להשתדרג" בעתיד לחשבון מסוג player ניתן לצפות ברשימת המשתמשים מסוג זה.

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

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

כפתורים/צ'ק בוקס

חיפוש עם תפריט נפתח

נגן מוזיקה

טבלאות ניהול

תפריט

אוסף כלי UI

קרא עוד >>

עיצוב אתרים – 43 קבצי PSD להורדה!

לכל גרפיקאי יש מקורות עיצוב משלו, שמכילים בין היתר מאגרי פונטים, רקעים, טקסטורות, השראה וכד', בפוסט הבא ריכזתי עבורכם אוסף של 43 קבצי PSD להורדה של עיצובי אתרים, בין הקבצים תוכל למצוא אלמנטים של UI/כפתורים מעוצבים וכד', שיקלו לכם על העבודה ויחסכו לכם לא מעט זמן!

אז למה אתם מחכים… תיהנו!

טופס יצירת קשר

לוח תזכורות

תמונות נעוצות

תגית מחיר אדומה

קרא עוד >>

לוגו ב-30 דקות! גימיק או מציאות

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

כיף לראות שיש חברות שכבר עלו על הטכניקות השונות בנושא.

קצת על התהליך:

1. אתם מציינים את שם החברה שעבורה הם מבצעים את הלוגו

2. לאחר מכן מכניסים את כתובת המייל שלכם עבור התקשרות

3. בריף קצר על המשמעות שהלוגו צריך לשדר, וצבעים וכד'.

4. לאחר מכן אתם תועברו לעמוד תשלום של PAYPAL שיחייב אתכם להירשם ובגמר התהליך תגיעו למסך הבא:

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

מה מקבלים?

בגמר התהליך תקבל קובץ ZIP המכיל בתוכו את הלוגו בפורמטים הבאים: ( AI, PSD, PNG, TIFF, JPEG )

קרא עוד >>

25 פרסומות יצירתיות שיוציאו אתכם מהקופסה – חלק א'

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

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

קרא עוד >>