Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive ecommerce websites

633 views

Published on

Examples of responsive ecommerce websites

דוגמאות לאתרי סחר בעיצוב רספונסיבי

Published in: Design
  • Be the first to comment

  • Be the first to like this

Responsive ecommerce websites

  1. 1. Responsive Ecommerce Websites Lihi Lothan info@thespetz.com 0545.464642
  2. 2. ‫• במסכים הבאים נוכל לראות דוגמאות של‬ ‫אתרי מסחר בעלי עיצוב רספונסיבי,‬ ‫המשתנים בהתאם לנתוני תצוגת המכשיר‬ ‫עליהם הם מוצגים‬ ‫• הדרך הפשוטה ביותר לראות את האתרים‬ ‫היא להקטין את חלון הדפדפן אצלכם,‬ ‫ולראות כיצד הם משתנים – אילו אלמנטים‬ ‫מצטמצמים, אילו נעלמים, מה בא במקומם‬ ‫וכו'‬ ‫2‬
  3. 3. ‫‪Burton – Wide Screen Homepage‬‬ ‫מותג מוצרי גלישת הסקי מציג אתר צבעוני, חי, מזמין‬ ‫3‬
  4. 4. ‫‪Burton – Narrow Screen Homepage‬‬ ‫שימו לב לצורת בר הניווט – איך הוא נראה כשהוא סגור, וכיצד הוא נראה פתוח‬ ‫4‬
  5. 5. ‫‪Nixon – Wide Screen Homepage‬‬ ‫מותג אופנה אורבנית, המתמחה בשעונים‬ ‫5‬
  6. 6. Nixon – Narrow Screen Homepage 6
  7. 7. United Pixel Workers -Wide Screen Homepage ‫מותג אופנה‬ 7
  8. 8. ‫‪United Pixel Workers – Narrow Screen‬‬ ‫‪Homepage‬‬ ‫גם פה מעניין לראות את השינוי בשורת הניווט וסל הקניות, ובבחירות בתצוגת האלמנטים‬ ‫הנוספים בעמוד הבית‬ ‫8‬
  9. 9. ‫‪Salt – Wide Screen Homepage‬‬ ‫מותג אופנה ולייפסטייל של גלישה‬ ‫9‬
  10. 10. ‫‪Salt – Narrow Screen Homepage‬‬ ‫כאן נעשתה בחירה להשאיר את סרגלי הניווט כמו שהם, ולא לצמצמם‬ ‫01‬
  11. 11. Kershaw Knives -Wide Screen Homepage ‫מותג סכינים‬ 11
  12. 12. Kershaw Knives -Narrow Screen Homepage 12
  13. 13. Indochino -Wide Screen Homepage ‫אתר יפהפה של חליפות לגברים‬ 13
  14. 14. ‫‪Indochino -Narrow Screen‬‬ ‫‪Homepage‬‬ ‫שימו לב שכפתור החשבון האישי עבר לתפריט הניווט (צידו השמאלי של המסך)‬ ‫41‬
  15. 15. ‫‪Fit for a Frame - Wide Screen‬‬ ‫‪Homepage‬‬ ‫פוסטרים מעוצבים (שמתאימים לגדלי המסגרות של איקאה!)‬ ‫51‬
  16. 16. ‫‪Fit for a Frame - Narrow Screen‬‬ ‫‪Homepage‬‬ ‫מעבר למספר המוצרים בשורה, וכיווץ הלוגו – תצוגת המחירים קטנה באופן דינמי.‬ ‫61‬
  17. 17. ‫‪SuitSupply - Wide Screen‬‬ ‫‪Homepage‬‬ ‫מותג נוסף של חליפות לגברים. כאן יש משחק מעניין בין שלושה רחבי מסך‬ ‫71‬
  18. 18. SuitSupply – Narrower Screen Homepage ‫הקטנת האלמנטים בעמוד‬ 18
  19. 19. ‫‪SuitSupply – Narrowest Screen‬‬ ‫‪Homepage‬‬ ‫שני הכפתורים הבולטים הם חנות האונליין ומיקומי החנויות. כלומר, סבירות לכך שמי שצופה‬ ‫באתר במסך צר (מובייל), נמצא ברחוב ומחפש חנות פיזית הקרובה אליו‬ ‫91‬
  20. 20. ‫‪Bottom Line‬‬ ‫• חשיבה ועבודה נקודתית לגבי רוחבי המסך השונים‬ ‫ואופן צריכת המידע – מה אנחנו רוצים שהמשתמש‬ ‫יעשה? מה להדגיש? מה אפשר לצמצם? על מה אפשר‬ ‫לוותר?‬ ‫• עיצוב נקי, דגש על תמונות באיכות גבוהה‬

×