Examples of responsive ecommerce websites דוגמאות לאתרי סחר בעיצוב רספונסיבי

1. Responsive Ecommerce Websites
Lihi Lothan
info@thespetz.com
0545.464642

2. ‫• במסכים הבאים נוכל לראות דוגמאות של‬
‫אתרי מסחר בעלי עיצוב רספונסיבי,‬
‫המשתנים בהתאם לנתוני תצוגת המכשיר‬
‫עליהם הם מוצגים‬
‫• הדרך הפשוטה ביותר לראות את האתרים‬
‫היא להקטין את חלון הדפדפן אצלכם,‬
‫ולראות כיצד הם משתנים – אילו אלמנטים‬
‫מצטמצמים, אילו נעלמים, מה בא במקומם‬
‫וכו'‬
‫2‬

3. ‫‪Burton – Wide Screen Homepage‬‬
‫מותג מוצרי גלישת הסקי מציג אתר צבעוני, חי, מזמין‬
‫3‬

4. ‫‪Burton – Narrow Screen Homepage‬‬
‫שימו לב לצורת בר הניווט – איך הוא נראה כשהוא סגור, וכיצד הוא נראה פתוח‬
‫4‬

5. ‫‪Nixon – Wide Screen Homepage‬‬
‫מותג אופנה אורבנית, המתמחה בשעונים‬
‫5‬

6. Nixon – Narrow Screen Homepage
6

7. United Pixel Workers -Wide Screen
Homepage
‫מותג אופנה‬
7

8. ‫‪United Pixel Workers – Narrow Screen‬‬
‫‪Homepage‬‬
‫גם פה מעניין לראות את השינוי בשורת הניווט וסל הקניות, ובבחירות בתצוגת האלמנטים‬
‫הנוספים בעמוד הבית‬
‫8‬

9. ‫‪Salt – Wide Screen Homepage‬‬
‫מותג אופנה ולייפסטייל של גלישה‬
‫9‬

10. ‫‪Salt – Narrow Screen Homepage‬‬
‫כאן נעשתה בחירה להשאיר את סרגלי הניווט כמו שהם, ולא לצמצמם‬
‫01‬

11. Kershaw Knives -Wide Screen
Homepage
‫מותג סכינים‬
11

12. Kershaw Knives -Narrow Screen
Homepage
12

13. Indochino -Wide Screen Homepage
‫אתר יפהפה של חליפות לגברים‬
13

14. ‫‪Indochino -Narrow Screen‬‬
‫‪Homepage‬‬
‫שימו לב שכפתור החשבון האישי עבר לתפריט הניווט (צידו השמאלי של המסך)‬
‫41‬

15. ‫‪Fit for a Frame - Wide Screen‬‬
‫‪Homepage‬‬
‫פוסטרים מעוצבים (שמתאימים לגדלי המסגרות של איקאה!)‬
‫51‬

16. ‫‪Fit for a Frame - Narrow Screen‬‬
‫‪Homepage‬‬
‫מעבר למספר המוצרים בשורה, וכיווץ הלוגו – תצוגת המחירים קטנה באופן דינמי.‬
‫61‬

17. ‫‪SuitSupply - Wide Screen‬‬
‫‪Homepage‬‬
‫מותג נוסף של חליפות לגברים. כאן יש משחק מעניין בין שלושה רחבי מסך‬
‫71‬

18. SuitSupply – Narrower Screen
Homepage
‫הקטנת האלמנטים בעמוד‬
18

19. ‫‪SuitSupply – Narrowest Screen‬‬
‫‪Homepage‬‬
‫שני הכפתורים הבולטים הם חנות האונליין ומיקומי החנויות. כלומר, סבירות לכך שמי שצופה‬
‫באתר במסך צר (מובייל), נמצא ברחוב ומחפש חנות פיזית הקרובה אליו‬
‫91‬

20. ‫‪Bottom Line‬‬
‫• חשיבה ועבודה נקודתית לגבי רוחבי המסך השונים‬
‫ואופן צריכת המידע – מה אנחנו רוצים שהמשתמש‬
‫יעשה? מה להדגיש? מה אפשר לצמצם? על מה אפשר‬
‫לוותר?‬
‫• עיצוב נקי, דגש על תמונות באיכות גבוהה‬