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 */
}

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

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

קרא עוד >>

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

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

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

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

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

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

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

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

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

קרא עוד >>

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

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

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

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

לוח תזכורות

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

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

קרא עוד >>

דעה: חווית משתמש בנענע מייל – התוצאה בפנים

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

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

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

נכנסתי לאתר של נענע והגעתי למסך התחברות הבא:

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

קרא עוד >>