4.2 Showroom Flat design

Transcription

Version : 1.0
Date : 2014, Dec 4
© Copyright 2014 Hyundai Motor Company. all rights reserved.
Document History
Revision History
Date of this revision : 2014.11.28
Revision
Number
1.1
Date of next revision:
Revision Date
Summary of Changes
Drafter / Reviser
2014.11.28
Original Document
이정민(the J)
Approvals
Distribution
This document requires following approvals.
This document has been distributed to
Name
Name
Title
Title
Contents
1. Introduction
1. Overview
2. Guide outline
3. Policy
3. Design elements
1. Color
1. Main
2. Typeface
2. Showroom Flat design
3. Styles
a. Navigation
b. Background image
c. Contents production guide
2. Basic system
1. Basic layout
d. Thumbnail image
e. Table
f. Icon - product page
a. Basic Grid System
b. Layout
g. Button
h. Pop-up
a. Social cube
b. Flagship
c.
E segment
d. Key-visual
e. VR
f.
Highlights
g. Exterior
h. Interior
i.
Performance
j.
Safety
k.
Convenience
l.
Specification
m. Accessories
n. Review
o. Mobile
p. Parallax image
q. Print
1. Introduction
1.1 Overview
Definition of Hyundai Motor Company Website Flat design style guide
Flat design style guide 1.0 is modified to understand users visiting the Showroom of Hyundai Motor Company Website by using more
flat and dynamic contents, and the aim of this guide is to make design works easier and more convenient as a new template.
Applicable scope of Flat design style guide
Flat design style guide V1.0 applies to all pages of Hyundai Motor Company website of each country. In Case of other services come
into Hyundai Motor Company website, this guide should be applied to all pages.
Time to apply flat design style guide
Flat design style guide V1.0 applies on the time of opening, December, 2014.
Reference
PSD files will be provided separately later.
1.2 Guide outline
Flat design style guide components
Flat design style guide V1.0 is organized as below.
1.
Introduction - Regulates the standard frame and applicable scope of flat design style guide.
2.
Basic System - Define the fundamental site structure and basic system like design principle, definition of user environment and
UI template.
3.
Elements Design - Regulates the image, type, color and whole style.
4.
Page Format Design (Regulates the fundamental form of Design Style) – Defines design expressed in Showroom.
Practical use of flat design style guide
Flat design style guide V1.0 is organized as below.
1.
Flat design style guide is a guidebook, which is used to increase understanding and concentration regarding contents by
expressing various contents of the show room as simply as possible.
1.3 Policy
Flat design style guide management policy
Flat design style guide V1.0 will be upgraded continuously and be managed by version.
1.
There will be minor version upgrade if necessary.
2.
For effective website identity management, observe the principles of flat design style guide
Hyundai Motor Company Website identity maintaining policy
1.
It is the principle to unify the whole design of Hyundai Motor Company website based on the flat design style guide.
But if design variation is not against the regulated design principle of the Hyundai Motor Company flat design style guide and
the website Look & Feel, it will be allowed.
2. Basic system
2. Basic system
2.1 Basic layout_a. Basic grid system
Browser display - Showroom Flat design
Maximum size of display : 1920px
10
Minimum size of display : 960px
10
Contents area : 940px
Status bar
26px
2.2 Basic layout_a. Basic grid system
Basic Grid
GNB
70px
Social cube
484px
T Navigation
95px
Contents
Area
Footer
Flexible length
by contents
360px
3. Design elements
3.1 Color
Color Variation1
Main Color
These colors are used for a
and b segment of showroom
flat design.
HMC Orange
#ff7e00
● Home > Product Detail
Page > A,B segment
Sub Color
HMC
#987d64
Color Variation2
These colors are used for c
and d segment of showroom
flat design .
HMC
#a99281
Main Color
HMC Blue
#418ce5
● Home > Product detail
page > C,D segment
Sub Color
HMC Blue
#477bbc
HMC Blue
#71a5de
3.1 Color
Color Variation3
Main Color
These colors are used for a
and b segment of showroom
flat design.
HMC Blue
#41719d
● Home > Product Detail
Page > E segment
Sub Color
HMC
#111111
HMC
#888888
3.2 Typeface
The usage of
Hyundai font
Main text that are used in exception
Hyundai UltraLight / 40pt / #333333
(Font / Size / Color)
This font is mainly used for main
text that are used in exception
and price information.
The usage of
Georgia
This font is mainly used for main
text that are used in exception
and price information.
Hyundai UltraLight / 26pt / #777777 / 36pt
(Font / Size / Color / Line spacing )
Price Information
Georgia / 24pt / #888888
(Font / Size / Color )
3.2 Typeface
Main Title
Font guide for the product
page Title area
Hyundai Ultralight / 40pt / #222222 / 50pt
(Font / Size / Color / Line-height)
Arial / 16pt / #666666 / 24pt
(Arial / 15pt / #666666 / 24pt)
Sub Title &
Contents
Hyundai Light / 30pt / #333333 / 40pt
Title and font guide in the
product page contents area
Arial / 14pt / #888888 / 22pt
Arial Bold / 16pt / #222222
Arial / 14pt / #888888 / 20pt
3.2 Typeface
Common
Contents
Arial / 14pt / #000000
Title and font guide in the
common contents area
Arial / 14pt / #666666 / 20pt
Arial / 14pt / #ffffff
Arial / 14pt / #888888 / 20pt
3.2 Typeface
Bullet
● Home > Product Detail Page >
Print
SNS
Social Review
Arial / 12pt / #666666
List
Review
Arial / 11pt / #999999
Arial / 14pt / #333333
Arial / 12pt / #999999
3.3 Style_a. Navigation - Definition
Showroom
Navigation
A,B segment
Navigation menu for showroom
pages.
C,D segment
E segment
3.3 Style_a. Navigation - Production
Showroom
Navigation
1
2
3
1 Common Area
2 Print / Download / Share
3 Showroom Navigation
Arial / 12pt / #999999
A,B segment
* All capital letters
Hyundai Bold / 12pt / #666666
Hyundai Bold / 12pt / #ffffff
#418ce5
C,D segment
#a99281
E segment
#5184b3
3.3 Style_a. Navigation - Production
Showroom
Navigation
A,B segment
Arial / 11pt / ##4e5665
Arial / 13pt / #666666
#Arial / 13pt / #999999
C,D segment
Arial / 11pt / ##4e5665
Arial / 13pt / #666666
#Arial / 13pt / #666666
E segment
Arial / 11pt / ##4e5665
Arial / 13pt / ##a7a7a7
#Arial / 13pt / #656565
3. Design elements
3.3 Style_b. Background Image
Background
Image Guide
Top part’s visual express the
perspective view.
The width size is 1920px and
the height is 650px.
Width : 1920px / Horizon : 650px
1920px
650px
3. Design elements
3.3 Style_c. Contents production guide
Flat design
Product Contents
Essential ways to use visual explain
-
Use infographics, comparison and metaphors to explain complex message such as technology, safety
category contents.
Headlines need to stand out visually and descriptively.
Body copy is written in a easily understandable way.
3. Design elements
Flat design
Product Contents
Interactive contents
-
Provide simple interactive contents on product detail page.
The VR and some images on contents can be zoom in full screen.
Help users understand by using proper motion.
3. Design elements
Flat design
Product Contents
-
According to the car, the visual explain can be modified properly. Check the below examples.
For background images, use colors and patterns expressing the car’s unique feeling.
Variation of visual explain
24
3. Design elements
3.3 Style_d. Thumbnail Image - Definition
* Common rules :
All image size can be applied to other pages.
1024 * 462
Image size guide for exterior
pop-up window of social
cube.
It can be applied to other
pages.
640 * 289
Image size guide for request
a test Drive, request a
brochure and most like of
social cube.
Reduce the image size
by 50 percent
3. Design elements
3.3 Style_d. Thumbnail Image - Production
1024 * 462
pop-up window of social
cube.
pages.
51px
51px
51px
● Margin : 51px
51px
3. Design elements
640 * 289
of social cube.
pages.
32
32
32px
● Margin : 32px
32px
Reduce 640 * 289
by 50%
Image size guide for request
a test drive, request a
brochure and most like of
social cube.
pages.
Reduce the image size by 50 percent and this image adjustment is by using html.
3. Design elements
3.3 Style_d. Thumbnail Image - Definition
W : 210 / H : 118
Thumbnail image guide for
downloads page. It can be
applied to other pages.
W : 189 / H : 106
upcoming vehicles page. It
can be applied to other pages.
W : 109 / H : 69
social cube’s gallery page.
pages.
Accessories
Thumbnail
W : 203 / H : 113
Thumbnail image size guide
for accessories pages. It can
be applied to other pages.
3. Design elements
15px
15px
W : 210 / H : 118
downloads page. It can be
applied to other pages.
210 * 118
* Save the thumbnail images as
PNG24.
9px
9px
9px
W : 189 / H : 106
upcoming vehicles page. It
can be applied to other pages.
109 * 69
Stroke guide : When the user click the thumbnail image, the stroke will appear around the boundary.
#999999
3. Design elements
7px
7px
7px
7px
7px
W : 109 / H : 69
social cube’s gallery page.
pages.
109 * 69
9px
Accessories
Thumbnail
W : 203 / H : 113
9px
203 * 113
9px
7px
3.3 Style_e. Table - Definition
Spec table
Table is used for showroom
pages.
3.3 Style_e. Table - Production
Spec table
Table line color
#575a5d
Table is used for showroom
pages.
Table title bar color
Table line color
#e2e2e2
#d8d9d9
Arial Bold / 13pt / #57585a
Arial / 13pt / #696969
3.3 Style_f.Icon - Definition
Social cube Icon
Icons used for social cube in
the showroom navigation.
Social cube Icons on Showroom Navigation

A,B segment

C,D segment

C,D segment
 Selection style

A,B segment
* Common rules :
1) Social cube has 5 parts; cover, gallery, experience, most like and talk n talk.
2) ‘gallery’ and ‘experience’ can be used for both flagship and general product’s Showroom pages.
3) ‘most like’ and ‘talk n talk’ can be selected by local.
Social cube Icon
Icons used for social cube in
the showroom navigation.
Social cube Icons on Showroom Navigation

E segment
 Selection style

E segment
Loading Icon
Gallery Pop-up
Icons are used for gallery
pop-up pages.
SNS Icon
•
Preview / Next
Icon, Bullet
Performance Icon
When users mouse over it, the SNS icons come out.
Color Icon
Etc
Exterior Color Icon
Interior Color Icon
3.3 Style_f.Icon - Production
Color Icon
(Exterior)
Size of Exterior Color Icon
38px
Icons are used for social
cube pages.
38px
PNG24.
Radius / Stroke
Radius : 3px
5px
5px
#c9c9c9
Upon selecting Exterior Color (Identical to Interior Color Icon)
#333366
Color Icon
(Exterior)
The guide for Exterior Color Icon Style
1
5
2
3
4
6
1
Opacity : 0 / Location : 0
2
3
4
5
Color : #ffffff / Location : 0
6
Color : #ffffff / Location : 100
Color Icon
(Interior)
Size of Interior Color Icon
38px
Icons are used for social
cube pages.
19 19
PNG24.
38px
Case1 : Same fabric, Different color
Case2 : Different fabric, Same color
Case 3 : Different fabric and color
Case 4 : Same fabric and color
3.3 Style_ g.Button - Definition
Basic Button
Style #1
These buttons are mostly
used in flat design.
Basic Button
Style #2
Action Button
 A,B Segment
Timeline Button
 A,B Segment
Buttons used for timeline.
 C,D Segment
 E Segment
Basic Button
Style #3
 C,D Segment
 E Segment
3.3 Style_ g.Button - Production
Basic Button
Style #1
•
The base width of button is 150px and increase or decrease the width every 10px if you want.
Ex)
150px (o)
•
160px (o)
The space between the text and arrow should be more than 10px.
Margins of button
10px
Type
Type
Type
Type
10px
Face : Hyundai Bold
Style : Sharp
Size : 13pt
Color : #ffffff
Basic Button
Style #1
•
Fixed ratio
Ex)
140px
35px
Margins of button
8px
1
10px
Type
Type
Type
Type
8px
8px
15px
Face : Hyundai Bold
Style : Sharp
Size : 12pt
Color : #ffffff
1 Color : #418ce5
2 Color : #a99281
3
2
10px
15px
10px
15px
Basic Button
Style #2
•
Fixed ratio
 A,B Segment
855px
Buttons for timeline
68px
The width size is flexible and
does not exceed a maximum
of 940px.
The interval can be changed
depending on the number of
timeline button.
Margins of button
2
1
3
8px
15px
190px
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 14pt
Color : #ff7e00
1 Color : #ff7e00
2 Color : #acacac
3 Color : #000000(15%)
190px
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 14pt
Color : #666666
190px
190px
Basic Button
Style #2
•
Fixed ratio
 C,D Segment
828px
68px
Margins of button
1
2
3
8px
15px
190px
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 14pt
Color : #418ce5
1 Color : #418ce5
2 Color : #acacac
3 Color : #000000(15%)
190px
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 14pt
Color : #666666
190px
190px
Basic Button
Style #2
•
Fixed ratio
 E Segment
849px
68px
Margins of button
1
2
3
8px
15px
150px
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 14pt
Color : #5184b3
1 Color : #5184b3
2 Color : #555555
3 Color : #000000(15%)
150px
Type
Type
Type
Type
150px
Face : Arial Bold
Style : Sharp
Size : 14pt
Color : #a1a1a1
150px
150px
Basic Button
Style #3
•
Fixed ratio
41
Buttons for On/Off function
41
Margins of button
1
2
3
7px
10px
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 10pt
Color : #ffffff
1 Color : #418ce5
2 Color : #ffffff(10%)
3 Icon Color : #ffffff(50%)
Type
Type
Type
Type
Face : Arial Bold
Style : Sharp
Size : 10pt
Color : #ffffff(20%)
3.3 Style_h. Pop-up - Definition
Image Large view
3.3 Style_h. Pop-up - Production
Image Large view
(Font / Size / Color)
Hyundai / 12pt / #ffffff
665px
1024px
33px
10
42px
12 10
40
14
16
50px
4.1 Main
Main page
Main page
Home
GNB
70px
Key Visual Area
390px
Sub Navigation
52px
Banner
149px
Footer
325px
4. Page Format Design
4.1 Main
Footer
 Main page
100px
308px
100px
 Except main page
100px
100px
308px
100px
4.2 Showroom Flat design - Definition
Social Cube
Main
Home > Product Detail Page Main
Gallery
Experience
Most like
Talk n talk
4.2 Showroom Flat design_a.Social cube - Production
Social Cube
Main
30px
70px
Image of the vehicle should not
overlap the text.
75
20
40
470px
640px
30
24
60
95px
Social Cube
Main
30px
70px
Hyundai UltraLight / 40pt / #333333
Hyundai UltraLight / 26pt / #777777 / 36pt
470px
640px
Arial / 14pt / #888888 / 20pt
Arial / 11pt / #888888 / 13pt
95px
Social Cube
Gallery
70px
384 * 80
111
7
7
45px
7
20
10px
10px
81px
81px
7
28
Hyundai Medium / 36pt / #555555
11
7
Social Cube
Experience
70px
321 * 76
45px
20
27px
5
10px
10
10px
640 * 289
145px
73px
28
11
7
Social Cube
Most like
70px
940 * 67
10px
10px
32px
114px
40px
360px
28
640 * 289
10 7
Reduce the image size by 50 percent and this image adjustment is by using html.
Social Cube
Talk n talk
70px
328 * 66
20
10px
45px
581px
10px
28
10
4
69px
4.2 Showroom Flat design_b.Flagship - Definition
Flagship Product
Showroom
: Highlights,
Exterior,
Interior,
Performance,
Safety,
Convenience
Highlights
Exterior
Interior
4.2 Showroom Flat design_b.Flagship - Definition
Flagship Product
Showroom
: Highlights,
Exterior,
Interior,
Performance,
Safety,
Convenience
Performance
Safety
Convenience
4.2 Showroom Flat design_c.E segment - Definition
E segment
Product Showroom
: Highlights,
Exterior,
Interior,
Performance,
Safety,
Convenience
Highlights
Exterior
Interior
4.2 Showroom Flat design_c.E segment - Definition
E segment
Product Showroom
: Highlights,
Exterior,
Interior,
Performance,
Safety,
Convenience
Performance
Safety
Convenience
4.2 Showroom Flat design_d.Key-visual - Production
Key-visual
product image
1
260px
75px
680 *2 290
4
3
* Common rules : 1)
2)
3)
4)
3
Position of
horizontal line may
vary depending
upon the
background image.
The image is to be located at 260px down and 75px right from the lower-left corner of GNB.
An image that shows both front and side is to be used for the page. The size of the vehicle should neither be
bigger nor smaller than the other vehicles on the site.
(Size of PNG may vary depending upon the location and size of the vehicle.)
The image of the vehicle should not overlap either ‘like’ or ‘page navigation’ buttons.
The rear wheels should not be over the horizontal line.
4.2 Showroom Flat design_e.VR - Production
VR Guide
(Exterior)
* Save the images as PNG24.
640px - 289px
* Common rules :
1024px - 462px
1)
2)
3)
4)
image type : PNG image. Non-vehicle area should be transparent.
Size
•
640px-289px
•
1024px-462px
Name rule
•
(model name)_(Exterior or Interior)_(Color name)_(size)_(Num).png
•
Ex) 1024 : YF_Black_Berry_1024_0.png
•
Ex) 640 : YF_Black_Berry_640_0.png
36 files MUST be numbered from 0 to 35. Otherwise the page won’t work.
•
DOs
•
YF_Black_Berry_1024_0.png (O)
•
•
DON’Ts
•
YF_Black_Berry_1024_00.png (X)
•
4.2 Showroom Flat design_e.VR - Production
VR Guide
(Interior)
640px - 251px
* Common rules :
1024px - 640px
1)
2)
3)
4)
image type : jpg (Images should be optimized since there are numbers of files.)
Size
•
640px-251px
•
1024px-640px (Resized depending upon browser size)
Name rule
•
(model name)_(Exterior or Interior)_(Color name)_(size)_(Num).jpg
•
Ex) 1024 : YF_Black_Berry_1024_0.jpg
•
Ex) 640 : YF_Black_Berry_640_0.jpg
120 files MUST be numbered from 0 to 119. Otherwise the page won’t work.
•
•
5)
DO's
•
•
DON'Ts
•
•
Since file number 100 is a default picture, it should be the photo of dash-board.
4.2 Showroom Flat design_f.Highlights - Production
Highlights
Movie
Size of display : 1280px
100
Text area
30
100
16
16
516
710
660
21
32
150
Highlights
Movie
Arial / 15pt / #666666 / 24pt
235 * 100
Arial Bold / 14pt / #ffffff
Arial Bold / 14pt / #ffffff(50%)
710
660
Hyundai Ultralight / 36pt / #ffffff
* All capital letters
Arial / 16pt / #666666 / 20pt
150
Highlights
Contents case01
100
30
Text area
50
90
410
410 * 360
420
20
20
30
20
420 * 360
410
410 * 360
360
20
30
20
50
20
410 * 360
Bottom Margin : 110px
360
Highlights
Contents case01
Arial / 15pt / #666666 / 24pt
Hyundai Light / 30pt /
#333333 / 40pt
Arial / 14pt / #888888 / 22pt
Highlights
Contents case01
Mouse click
100
30
Text area
50
90
410
420
20
20
410
24
850 * 360
410 * 360
50
360
20
50
20
410 * 360
360
Highlights
Contents case01
Mouse click
Arial / 15pt / #666666 / 24pt
Arial Bold / 16pt /
#ffffff / 24pt
Arial / 14pt / #888888 / 20pt
Highlights
Contents case02
40
20
30
690
20
ex)
1
* Common rules : 1)
In case that the number of the title lines does not match up, a title in the first line should be matched to the
last line of the longer title.
Highlights
Contents case02
Hyundai Lignt / 30pt / #333333 / 40pt
1
Arial / 13pt / #b94309 / 20pt
Arial / 12pt / #666666 / 20pt
Arial / 14pt / #888888 / 22pt
* Common rules : 1)
Title color may vary depending upon the segment.
Highlights
Contents case03
20
30
690
80
20
640
640
Highlights
Contents case03
#333333 / 40pt
Arial / 14pt / #888888 / 22pt
4.2 Showroom Flat design_g.Exterior - Production
Exterior
150
Users can choose the content in
front, side or rear.
Background color or sub
navigation are used in accordance
with segment of the vehicle.
(a and b segment are expressed
in warm tone and c and d
segment are expressed in blue
tone.)
30
Text area
110
120
80
468
940 * 468
110
Exterior
Arial / 16pt / #666666 / 24pt
Arial Bold / 14pt / #444444 / 22pt
940 * 468
Exterior
150
When users click the button, the
detailed content can be identified,
and the vehicle position is moved
depending on the location of the
detailed pop-up.
30
If there are ON/OFF buttons, a
default is ON.
110
Text area
90
30
40
40
20
27
70
540 * 600
110
600
Exterior
Arial Bold / 16pt / #ffffff / 24pt
Arial / 14pt / #888888 / 20pt
600
Exterior
E segment
The height of tile is flexible.
140
330
440
430
52
600
32
30
20 20
30
20 20
Exterior
E segment
Arial / 14pt /
#cccccc / 20pt
600
Exterior
E segment
Screen when you mouse-over
140
Dim - #000000(95%)
Stroke - 1px / #3e6283
330
440
430
52
20
20
600
1
20
32
30
20 20
30
20 20
* Common rules : 1)
Regarding big tiles - a decrease of vertical size as 20 px (based on the line between the upper and lower tiles)
Regarding small tiles - No size changes from the previous tile.
Exterior
E segment
140
Arial / 14pt /
#ffffff / 20pt
Arial / 14pt / #888888 / 20pt
600
4.2 Showroom Flat design_h.Interior - Production
Interior
100
Background color can be changed.
Text area
30
100
40
13
17
9
40
20
20
100
Interior
Arial / 16pt / #666666 / 24pt
Arial / 12pt / #666666
Arial / 14pt / #888888 / 20pt
Interior
A,B segment
Front and rear images which are
possible up to 1280px are
provided but the main image is
displayed in 960 size.
100
Background color can be changed.
However, bottom margin=0px is
applied to the background
color(#FFFFFF)
The plus Icon should be inside
940px.
1280 * 600
600
16
11
150
22
6
18
140
170
Interior
C,D segment
100
1280 * 600
600
16
11
150
22
6
18
140
100
170
Interior
A,B segment
When users click the plus button,
the detailed content comes out.
100
Animation or still image can be
seen in the detailed content.
90
Background color of the detailed
content can be changed in
accordance with segment of the
vehicle.
20
30
600
400
570
Interior
A,B segment
Arial / 14pt / #666666 / 20pt
Arial / 12pt / #666666
600
Interior
C,D segment
100
90
20
30
600
330 * 170
400
570
Interior
C,D segment
Arial Bold / 16pt / #e1e1e1
Arial / 14pt / #888888 / 20pt
600
330 * 170
Interior
E segment
100
123
20
30
600
290 * 170
30
97
318
488
Interior
E segment
Arial Bold / 16pt / #e1e1e1/ 20pt
600
Arial / 14pt / #888888 / 20pt
290 * 170
4.2 Showroom Flat design_i.Performance - Production
Performance
100
The number of tab is limited up to
6.
Text area
30
100
90
17
30
30
60
100
Performance
Arial / 16pt / #666666 / 24pt
Arial / 16pt / #666666 / 20pt
Arial Bold / 30pt / #222222 / 30pt
Arial / 24pt / #222222
Arial / 14pt / #666666 / 20pt
Arial/ 14pt / #666666
Arial / 13pt / #f58d0a
Arial / 13pt / #3f86c6
Performance
Margin : 60px
80
60
10
140 * 40
10
10
140 * 40
45
20
22
750px
60
Performance
Margin : 60px
Hyundai Ultralight / 40pt / #ffffff
140 * 40
140 * 40
Arial Bold / 13pt / #444444 / 20pt
750px
Arial / 12pt / #b9b9b9
Arial / 14pt / #dddddd / 20pt
Safety
100
The timeline consists of from 2 to
6 contents at least.
The number of each image in
contents is restricted to 16.
Text area
30
100
7
50
23
20
60
7
20
100
700px
1280 * 700
100
4.2 Showroom Flat design_j.Safety - Production
Safety
Arial / 16pt / #666666 / 24pt
Arial / 14pt / #666666
Arial / 12pt / #666666
Arial / 14pt / #888888 / 20pt
Safety
Margin : 60px
105
10
20
22
160 * 174
60
30
18
680px
160 * 130
18
160 * 130
Safety
Margin : 60px
160 * 174
Arial Bold / 12pt / #ffffff / 18pt
Arial / 14pt / #666666 / 20pt
160 * 130
160 * 130
4.2 Showroom Flat design_k.Convenience - Production
Convenience
100
Text area
30
120
310
320
310 * 310
320 * 310
310
40
30
310
30
310 * 620
310
630 * 310
120
Convenience
Arial / 16pt / #666666 / 24pt
Hyundai Llight / 28pt / #ffffff
Arial Bold / 14pt / #444444 / 20pt
Arial / 14pt / #000000(50%)
Convenience
A,B segment
960px
Detailed pop-up consists of 4 tiles
and the remainder becomes
dimmed.
Dimmed color of the detailed
content can be changed in
accordance with segment of the
vehicle.
50
20
20
620px
630 * 620
150 * 94
150 * 94
150 * 94
35
50
8
8
Convenience
A,B segment
960px
Arial / 14pt / #cccccc / 20pt
620px
150 * 94
150 * 94
150 * 94
Convenience
C,D segment
960px
50
20
20
19
630 * 620
50
620px
Convenience
C,D segment
960px
Arial / 14pt / #cccccc / 20pt
Arial / 12pt / #998675
620px
940px
Common
95px
11
Mouse-over makes image zoom in.
thumbnail
image size :
306 * 133(px)
20
11
thumbnail
image size :
306 * 133(px)
thumbnail
image size :
306 * 133(px)
20
20
10
10
10
thumbnail
thumbnail
thumbnail
image size :
image size :
image size :
306 * 133(px)
306 * 133(px)
306 * 133(px)
section bottom margin 125px
20
20
(가장 긴 텍스트 밑 라인부터)
10
10
10
section bottom margin 125px
(125 px from the small letter base line of the last line having the longest contents)
80px
940px
Common
Arial / 14pt / #000000
Arial / 14pt / #666666 / 20pt
Arial / 12pt / #8d744b
Arial / 14pt / #888888 / 20pt
4.2 Showroom Flat design_l.Specification - Production
4.2 Showroom Flat design_l.Specification - Production
4.2 Showroom Flat design_m.Accessories - Production
4.2 Showroom Flat design_n.Review - Production
4.2 Showroom Flat design_o.Mobile - Production
Mobile_
Highlights
Tiles are relocated inside 960px in
order that detailed contents can
be seen properly in a mobile
version.
100
30
Text area
50
90
310
310 * 300
300
10
20
30
300 * 300
10
310
310 * 300
300
30
10
310 * 300
300
Mobile_
Highlights
Arial / 15pt / #666666 / 24pt
#333333 / 40pt
Arial / 14pt / #888888 / 22pt
Mobile_
Highlights
100
30
Text area
50
90
310
10
300
10
310
80
25
300
640 * 300
10
30
310 * 300
300
Mobile_
Highlights
Arial / 15pt / #666666 / 24pt
Arial Bold / 16pt /
#ffffff / 24pt
Arial / 14pt / #888888 / 20pt
4.2 Showroom Flat design_p.Parallax image - Production
Parallax image
guide
Web image (1920px * 820px)
Mobile image (980px * 450px)
Web : Actual size
(1920px * 820px),
A size you can see during the
Parallax (1920px * 520px).
Mobile : Size (980px * 450px)
Fixed ratio
Parallax size : 1920 * 520
820
450
450
Parallax size : 1920 * 520
820
4.2 Showroom Flat design_q.Print - Production
960px
Print
117
Representative images in
showroom page are utilized.
22
440
46
20
15
15
25
45
15
15
25
45
960px
Print
Hyundai Ultralight / 42pt / #333333
Hyundai Ultralight /
31pt / #999999 / 45pt
Arial / 14pt / #999999 /
20pt
Hyundai Bold / 18pt / # 333333
Arial / 14pt / #666666 / 20pt
Hyundai Bold / 18pt / # 333333
Arial / 14pt / #666666 / 20pt
960px
Print
20
15
15
15
16
15
13
13
45
15
15
25
960px
45
15
12
36
13
90
480
480
58
960px
Print
Hyundai Bold / 18pt / #333333
15
Arial Bold / 12pt / #333333 / 14pt
Arial Bold / 14pt / #333333 / 18pt
Arial / 14pt / #666666 / 18pt
25
15
Arial / 14pt / #333333 / 37pt
Arial / 14pt / #333333 / 37pt
Arial / 12pt / #736357
End of Document

4.2 Showroom Flat design

Transcription

Similar documents

Practical Guide to RDFa

Past Projects

Mental Ability Test

MS by LATEX (http://jupiter.hallym.ac.kr) 2016 1 21

Practical guide to

Past Projects