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

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

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

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

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

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

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

קרא עוד >>

אינפוגרפיקה המדריך לחיפוש קריירה בתחום ה-UX

אני מאמין שרובכם שומעים או רואים לאחרונה המון פעמים את צירוף המילים UI/UX ואתם שואלים את עצמכם מה זה בעצם אומר…

UX זה קיצור של user experience או בעברית חווית משתמש,

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

ע"פ ההגדרה של נילסן נורמון:

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

אני ממליץ לכם לקרוא על הנושא בהרחבה בפוסט שפורסם ב-UXI ,

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

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

קרא עוד >>

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

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

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

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

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

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

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

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

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

מה מקבלים?

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

קרא עוד >>

אייקונים שימושים לעבודה שוטפת עם רקע שקוף

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

רובנו עובדים עם אתרים שמסספקים בנק תמונות שמאפשרים לנו להוריד תמונות באיכות גבוהה ובקלות, קיימים לא מעט אתרי בנק תמונות, לדוגמא קיימים אתרי בנק תמונות בתשלום כמו shutterstock, istock, dreamstime  ובניגוד קיימים גם אתרי בנק תמונות בחינם שלכל אתר ותמונה יש את המגבלת שימוש החופשית שלה שאותם צריכים לקרוא, בכל אופן אם אתם מחפשים אתרי בנק תמונות בחינם אני אישית מכיר כ-36 אתרי מאגרי תמונות בחינם! .

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

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

קרא עוד >>

טכנולוגיה לאן? – יום עשוי מזכוכית צפייה מומלצת!