Responsive ecommerce websites

Post on 09-Jan-2017

565 views 0 download

Transcript of Responsive ecommerce websites

Responsive Ecommerce Websites

Lihi Lothan info@thespetz.com 0545.464642

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

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

הדרך הפשוטה ביותר לראות את האתרים •, היא להקטין את חלון הדפדפן אצלכם

אילו אלמנטים –ולראות כיצד הם משתנים מה בא במקומם , אילו נעלמים, מצטמצמים

'וכו

2

Burton – Wide Screen Homepage

3

מזמין, חי, מותג מוצרי גלישת הסקי מציג אתר צבעוני

Burton – Narrow Screen Homepage

וכיצד הוא נראה פתוח, איך הוא נראה כשהוא סגור –שימו לב לצורת בר הניווט 4

Nixon – Wide Screen Homepage

5

המתמחה בשעונים, מותג אופנה אורבנית

Nixon – Narrow Screen Homepage

6

United Pixel Workers - Wide Screen Homepage

7

מותג אופנה

United Pixel Workers – Narrow Screen Homepage

8

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

Salt – Wide Screen Homepage

9

של גלישה ולייפסטיילמותג אופנה

Salt – Narrow Screen Homepage

10

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

Kershaw Knives - Wide Screen Homepage

11

מותג סכינים

Kershaw Knives - Narrow Screen Homepage

12

Indochino - Wide Screen Homepage

13

אתר יפהפה של חליפות לגברים

Indochino - Narrow Screen Homepage

14

(השמאלי של המסך צידו)שימו לב שכפתור החשבון האישי עבר לתפריט הניווט

Fit for a Frame - Wide Screen Homepage

15

!(שמתאימים לגדלי המסגרות של איקאה)פוסטרים מעוצבים

Fit for a Frame - Narrow Screen Homepage

16

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

SuitSupply - Wide Screen Homepage

17

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

SuitSupply – Narrower Screen Homepage

18

הקטנת האלמנטים בעמוד

SuitSupply – Narrowest Screen Homepage

19

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

Bottom Line

חשיבה ועבודה נקודתית לגבי רוחבי המסך השונים •מה אנחנו רוצים שהמשתמש –ואופן צריכת המידע

על מה אפשר ? מה אפשר לצמצם? מה להדגיש? יעשה ?לוותר

דגש על תמונות באיכות גבוהה, עיצוב נקי•