S
E
early spring land by your dream
web layout
early spring land / UxUi REPORT.
by TOANTOAN
L
S
E
0
OPENING
STUDENT: NGUYEN XUAN TOAN Visu al / Graph i c / U I De s i gn e r B orn in 19 9 8 . Th e h ot mi l k i n earl y s pri n g .
P R O J E C T : E A R LY S P R I N G L A N D ESL is t h e h om e fabri c bran d ful l of se n s ual an d t ren d y de si gn m ood i n n or th e rn Europe . Wi th l ots of c ategori e s for h om e furn i s h i n g an d h om e s pa vi a t h e c u stom e r ’s de man ds i s al ways on poi n t .
L
1
COMPOSITION
OPENING
LOGO PROFILE 03 SITEMAP 07 PROTOTYPE 09 WEB UI L AYOUT 10 WEB UX PRESENT 76 MOCK UP 102
S
E
2
LOGO PROFILE
Influence ESL which is stand for ‘early spring land’. The spring season is full of transformations, the temperature rises to a more bearable degree. The leaves we saw fall and flowers we saw wilt are now budding into lush, green, picture-perfect plants. Aside f rom the weather's transformations that occur in the spring season, we are transforming our lives, too. While these changes can be f rustrating and tiring for your health and yourself, overall it is a positive season of new begin-nings in weather. Spring helps us to realize lessons as precious as this, where we learn the importance of embracing and adapting to change over time.
Let’s together take this spring season as a chance to write the new chapter of your new beginnings with ESL. Slogan ‘by your dream’: ESL duties are always by your side whenever, even in your dream.
03
L
E
LOGO PROFILE
S
LOGO OF EARLY SPRING LAND
Logo Preview
04
L
E
LOGO PROFILE
S
LOGO TYPEFACE
Brand Name / Slogan Montserrat Bold 0 1 2 3 4 5 6 7 8 9 10 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Montserrat was made by an Argentinian designer named Julieta Ulanovsky in an attempt to “ rescue the beauty of urban typography that emerged in the first half of the twentieth century.” And f rankly, I think she was successful. The typeface itself is fairly neutral, reflecting the readability required of any “urban” font, but because it’s geometric, it’s got a unique flair to it that makes it not as neutral or overly familiar as many neo-grotesque fonts like Univers or Helvetica.
05
L
E
S
LOGO PROFILE LOGO COLOR
Color System
BLACK
YELLOW
PRIMARY COLOR 1
R84
G87
B87
#545757
C65
M55
Y55
K30
The color of mystery. Black is formal and sophisticated, sexy and secretive, it is a colour that signifies power and control. It is considered refined, elegant and confident.
PRIMARY COLOR 2
R232
G196
B70
#E8C446
C10
M20
Y85
K0
T h e c o l o r o f o p t i m i s m . Ye l l o w i s a c o m p e l l i n g c o l o r that conveys youthful, f resh energy. This color of sunshine is uplifting and illuminating and associa te d w i t h s u c c e s s a n d c o n fi d e n c e . Ye l l o w g r a b s
06
L
S
E
3
SITEMAP
Home New Arrivals
Products
S p r i n g fi e l d
Products
Pillow
ESL
SpringďŹ eld
Blanket
News
Reviews
Bedding
Ad Campaign
Customer Care
H o m e Wea r
Showrooms
Store Locator Shopping Cart Wish List Login Search The Company
Customer Care
Sale & Offer
Te r m & Co n d i t i i o n s
Shopping Cart
Privacy & Cookies
Pick Up
FAQS
Change Payment Details
Fo l l o w Yo u r O r d e r
Delete Items
Delivery & Returns
Check Out
Contact Us
The Company Careers Corporate Infomation
07
L
SITEMAP INFOGRAPHIC
earlyspringland.com
ESL WORKING SYSTEM With all the opportunities we make the best effort at work via to serve the best products quality and fulfill lots of options for Slanders.
SHOPPING AREA Lots of stores and showrooms worldwide are ready to serve Slanders all over the world.
CUSTOMER CARE AREA Hoping a huge success in our customer’s heart, we very pleased to answer all questions of Slanders.
?
U YOg
S K pin p N L A sho ES THfor h it w
$ rece
pt
ion
Easy Deilivery
STANDARD/ EXPRESS
CHECK-OUT AREA Thank you so much for putting your trust into us. We w i l l t r y to wo r k h a rd as possible only to serve you. With love ESL.
Easy Returns
4 HOME
PROTOTYPE REVIEWS Reviews
Slider
Slider
STORE LOCATOR
SHOPPING AREA
Store locator / Larger map
Products / Ordering steps / Check-out
SPRINGFIELD About us / Ad campaign / News / Showrooms / Sale & Offer
CUSTOMER CARE
THE COMPANY
Contact us / Delivery & Returns / Follow your oreder / FAQS / Privacy & Cookies / Term & Conditions
Corporate infomation / Careers
S
E
5
WEB UI LAYOUT
Page Titles Montserrat Bold 0 1 2 3 4 5 6 7 8 9 10 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
Text Letters Myanmar Sangam MN / Regular 0 1 2 3 4 5 6 7 8 9 10 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Myanmar Sangam MN / Bold 0 1 2 3 4 5 6 7 8 9 10 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
Color Usage HIGHLIGHT
GENERAL
10
L
E
S
WEB UI L AYOUT WEB WIREFRAME
We b 1 9 2 0
IPad
IPhone X
Slider Slider
Slider
Slider
Slider
Slider
11
L
E
S
WEB UI L AYOUT WEB PREVIEW
We b 1 9 2 0
IPad
12
IPhone X
L
E
WEB UI L AYOUT
S
WEB 1920
New Arrivals
13
L
E
WEB UI L AYOUT
S
WEB 1920
Products / Blanket
14
L
E
WEB UI L AYOUT
S
WEB 1920
Springfield / About us
15
L
E
WEB UI L AYOUT
S
WEB 1920
Springfield / News preview
16
L
E
WEB UI L AYOUT
S
WEB 1920
Springfield / News info
17
L
E
WEB UI L AYOUT
S
WEB 1920
Springfield / Ad campaign
18
L
E
WEB UI L AYOUT
S
WEB 1920
Springfield / Showrooms
19
L
E
WEB UI L AYOUT
S
WEB 1920
Springfield / Sale & Offer
20
L
E
WEB UI L AYOUT
S
WEB 1920
Customer care / Term & Conditions
21
L
E
WEB UI L AYOUT
S
WEB 1920
Customer care / Privacy & Cookies
22
L
E
WEB UI L AYOUT
S
WEB 1920
Customer care / FAQS
23
L
E
WEB UI L AYOUT
S
WEB 1920
Customer care / Follow your order
24
L
E
WEB UI L AYOUT
S
WEB 1920
Customer care / Delivery & Returns
25
L
E
WEB UI L AYOUT
S
WEB 1920
Customer care / Contact us
26
L
E
WEB UI L AYOUT
S
WEB 1920
The company / Careers
27
L
E
WEB UI L AYOUT
S
WEB 1920
The company / Corporate information
28
L
E
WEB UI L AYOUT
S
WEB 1920
Reviews
29
L
E
WEB UI L AYOUT
S
WEB 1920
Store Locator
30
L
E
WEB UI L AYOUT
S
WEB 1920
Store Locator / View larger map
31
L
E
WEB UI L AYOUT
S
WEB 1920
Shopping area / Product details (with Crop & Full view)
32
L
E
WEB UI L AYOUT
S
WEB 1920
Shopping area / Ordering steps (1) (2)
33
L
E
WEB UI L AYOUT
S
WEB 1920
Shopping area / Ordering steps (3)
34
L
E
WEB UI L AYOUT
S
WEB 1920
Shopping area / Ordering steps (4) / Check-out
35
L
E
WEB UI L AYOUT
S
IPHONE-X
New arrivals
36
L
E
WEB UI L AYOUT
S
IPHONE-X
Products / Body fillow (with Crop & Full view)
37
L
E
WEB UI L AYOUT
S
IPHONE-X
Springfield / About us / Ad campaign
38
L
E
WEB UI L AYOUT
S
IPHONE-X
Springfield / Showrooms
39
L
E
WEB UI L AYOUT
S
IPHONE-X
Springfield / News preview / News info
40
L
E
WEB UI L AYOUT
S
IPHONE-X
Springfield / Sale & Offer
41
L
E
WEB UI L AYOUT
S
IPHONE-X
Customer care / Term & Conditions / Delivery & Returns
42
L
E
WEB UI L AYOUT
S
IPHONE-X
Customer care / Privacy & Cookies (with Crop & Full view)
43
L
E
WEB UI L AYOUT
S
IPHONE-X
Customer care / FAQS (with Crop & Full view)
44
L
E
WEB UI L AYOUT
S
IPHONE-X
Customer care / Follow your order / Contact us
45
L
E
WEB UI L AYOUT
S
IPHONE-X
The company / Careers
46
L
E
WEB UI L AYOUT
S
IPHONE-X
The company / Corporate information
47
L
E
WEB UI L AYOUT
S
IPHONE-X
Reviews
48
L
E
WEB UI L AYOUT
S
IPHONE-X
Store locator
49
L
E
WEB UI L AYOUT
S
IPHONE-X
Store locator / View larger map
50
L
E
WEB UI L AYOUT
S
IPHONE-X
Shopping area / Product details (with Crop & Full view)
51
L
E
WEB UI L AYOUT
S
IPHONE-X
Shopping area / Ordering steps (1) (2)
52
L
E
WEB UI L AYOUT
S
IPHONE-X
Shopping area / Ordering steps (3) (4)
53
L
E
WEB UI L AYOUT
S
IPHONE-X
Shopping area / Check-out
54
L
E
WEB UI L AYOUT
S
IPAD
New arrivals
55
L
E
WEB UI L AYOUT
S
IPAD
Products / Body fillow (with Crop & Full view)
56
L
E
WEB UI L AYOUT
S
IPAD
Springfield / About us
57
L
E
WEB UI L AYOUT
S
IPAD
Springfield / Ad campaign
58
L
E
WEB UI L AYOUT
S
IPAD
Springfield / Showrooms
59
L
E
WEB UI L AYOUT
S
IPAD
Springfield / News preview / News info
60
L
E
WEB UI L AYOUT
S
IPAD
Springfield / Sale & Offer
61
L
E
WEB UI L AYOUT
S
IPAD
Customer care / Term & Conditions / Delivery & Returns
62
L
E
WEB UI L AYOUT
S
IPAD
Customer care / Privacy & Cookies (with Crop & Full view)
63
L
E
WEB UI L AYOUT
S
IPAD
Customer care / FAQS (with Crop & Full view )
64
L
E
WEB UI L AYOUT
S
IPAD
Customer care / Follow your order
65
L
E
WEB UI L AYOUT
S
IPAD
Customer care / Contact us
66
L
E
WEB UI L AYOUT
S
IPAD
The company / Careers
67
L
E
WEB UI L AYOUT
S
IPAD
The company / Corporate information
68
L
E
WEB UI L AYOUT
S
IPAD
Reviews
69
L
E
WEB UI L AYOUT
S
IPAD
Store locator
70
L
E
WEB UI L AYOUT
S
IPAD
Store locator / View larger map
71
L
E
WEB UI L AYOUT
S
IPAD
Shopping area / Product details (with Crop & Full view)
72
L
E
WEB UI L AYOUT
S
IPAD
Shopping area / Ordering steps (1) (2)
73
L
E
WEB UI L AYOUT
S
IPAD
Shopping area / Ordering steps (3) (4)
74
L
E
WEB UI L AYOUT
S
IPAD
Shopping area / Check-out
75
L
S
E
6
WEB UX PRESENT
Navigation
Navigation will transform when hover and fix position when scrolling
SPRING
Yellow stroke appears loading from left to right when hover over buttons.
76
L
E
WEB UX PRESENT
S
WEB 1920
Navigation / PRODUCTS button
Pilow section appears when mouse clicks *PRODUCTS on navigation. Changes category when hover over *BLANKET. Info & price appears when hover over image.
77
L
E
WEB UX PRESENT
S
WEB 1920
Navigation / SPRINGFIELD button
SPRINGFIELD section appears when mouse clicks *SPRINGFIELD on navigation.
78
L
E
WEB UX PRESENT
S
WEB 1920
Navigation / LOGIN button / SEARCH button
LOGIN section appears when mouse clicks *LOGIN on navigation. SEARCH section appears when mouse clicks *SEARCH on navigation.
79
L
E
WEB UX PRESENT
S
WEB 1920
Navigation / LOGIN button
CART section appears when mouse clicks *SHOPPING-CART on navigation. WISHLIST section appears when mouse clicks *HEART-ICON on navigation.
80
L
E
WEB UX PRESENT
S
WEB 1920
Ecommerce
Color changes by opacity when hover over image and 3 buttons appears go up.
81
L
E
WEB UX PRESENT
S
WEB 1920
Ecommerce
Navigation
Automatic slider. Appears slowly by increase opacity when hover.
82
L
E
WEB UX PRESENT
S
WEB 1920
Form / The company / Careers
83
L
E
WEB UX PRESENT
S
WEB 1920
Form / Customer care / Follow your order
84
L
E
WEB UX PRESENT
S
WEB 1920
Form / Customer care / Contact us
85
L
E
WEB UX PRESENT
S
WEB 1920
Form / Shopping bag / Proceed with the order Fill the promotional code for discount (Optional)
Fill account access or email address for guest account
86
L
E
WEB UX PRESENT
S
WEB 1920
Form / Proceed with the order Save the users form part way through, and continue fill the shipping address
Provide guidance as help text
87
L
E
WEB UX PRESENT
S
WEB 1920
Store locator
Fill your address to find the store nearby
88
L
E
WEB UX PRESENT
S
IPHONE-X
Navigation
Navigation will fix position when scrolling
89
L
E
WEB UX PRESENT
S
IPHONE-X
Navigation / PRODUCT button / CUSTOMER CARE button
Menu section appears when mouse clicks
on navigation.
Product section appears when mouse clicks *PRODUCT on navigation. Customer-care section appears when mouse clicks *PRODUCT on navigation.
90
L
E
WEB UX PRESENT
S
IPHONE-X
Navigation / SPRINGFIELD button / EARLY-SPRING-LAND button
Menu section appears when mouse clicks
on navigation.
Product section appears when mouse clicks *PRODUCT on navigation. ESL section appears when mouse clicks *EARLY-SPRING-LAND on navigation.
91
L
E
WEB UX PRESENT
S
IPHONE-X
Navigation / LOG-IN button
Menu section appears when mouse clicks
on navigation.
Log-in section appears when mouse clicks *LOG-IN on navigation.
92
L
E
WEB UX PRESENT
S
IPHONE-X
Navigation / LOG-IN button
Store-locator section appears when mouse clicks
on navigation.
Large-map section appears when mouse clicks *VIEW-LARGER-MAP on navigation.
93
L
E
WEB UX PRESENT
S
IPHONE-X
Navigation / SEARCH button
Search section appears when mouse clicks
on navigation.
Shopping-card section appears when mouse clicks *SHOPPING-CART on navigation.
94
L
E
WEB UX PRESENT
S
IPHONE-X
Ecommerce
Color changes by opacity when hover over image and 3 buttons appears go up. Automatic slider. Appears slowly by increase opacity when hover.
95
L
E
WEB UX PRESENT
S
IPHONE-X
Form / The company / Careers
96
L
E
WEB UX PRESENT
S
IPHONE-X
Form / Customer care / Follow your order
97
L
E
WEB UX PRESENT
S
IPHONE-X
Form / Customer care / Contact us
98
L
E
WEB UX PRESENT
S
IPHONE-X
Form / Shopping bag / Proceed with the order
99
L