1.Design Guideline
Basic Guide_Feed
ATT
100%
9:25 PM
Top bar 7.86%
Feeds
Purpose
Block
Collection
Middle bar 4.38%
Card 56.17%
Middle bar contents scroll down view 87.76%
Feed
+
Animation
Vertical align 1.5% Spacing
Detail
1.Design Guideline
Basic Guide_Card
.cst_
line-height:1.5em; font-size:1.1em; text-align:center; font-weight:600;
Vertical & Horizontal Middle Align
Vertical & horizontal Align between contents & bottom icon 1.5% Corner Spacing
Friend
Purpose .blocks .author { font-family:'Josefin Sans', sans-serif; font-weight:400; font-size:1.0em; }
Animation
Animation
1.Design Guideline
Basic Guide_Feed
#도민준 #별그대 #드라마.
Card 56.17%
2014.01.01 at 00:00
3.5%
Good!! happy to see this!!!!!^^ Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
32.1%
Seize the moment, Catch the emotion.
8.23%
Purpose
Animation
감정 반영결과값 애니메이션버튼크키 키우기
Animation
1.Design Guideline
Basic Guide_Feed
#도민준, #별그대, #드라마.
Card 56.17%
2014.01.01 at 00:00
4.79% 11.5%
Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
27.54%
Seize the moment, Catch the emotion.
Purpose 글자크기 자간 댓글 개수설정 배열방식 버튼크기
Animation 블럭 애니메이션 블록 아이콘 했을때 안했을때 두가지 만들기
Animation
1.Design Guideline
Basic Guide_Feed
2014.01.01 at 00:00
Good!! happy to see this!!!!!^^
Q W E R T Y U I O P A S D F G H J K L Z X C V B N M 123
Purpose
space
.com
Animation
Go
Animation
1.Design Guideline
Basic Guide_Feed
2014.01.01 at 00:00
#도민준 #별그대 #드라마.
4.79%
Good!! happy to see this!!!!!^^ Seize the moment, Catch the emotion. Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
Purpose
37.04%
Animation
감정 반영결과값 애니메이션버튼크키 키우기
Animation
1.Design Guideline
Basic Guide_Feed
2014.01.01 at 00:00
Facebook Kakao talk Kakao Story Repost #도민준 #별그대 #드라마. Cancel
Good!! happy to see this!!!!!^^ Seize the moment, Catch the emotion. Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Collection_Feed
Source :
Good
9:25 PM
ATT
100%
Feeds
Feed
Block
Collection
1 : 1.58
My march
Wedding Day
Wedding Day
Jiwon Jang
Aliyah Kim
Aliyah Kim
Blue
Happy birthday
Suyoung Lee
Alex Yoo
3.37% Spacing
Purpose
Animation
Vertical & Horizontal Middle Align
Animation
1.Design Guideline
Basic Guide_Collection_feed_detail
9:25 PM
ATT
Jang’s Collection
Sad day
100%
Top bar 7.86%
28.78% Contents view 92.14%
Profile29.9%
10.55%
Jiwon jang Block name
Following Followers
Collection
15.72% 7.19%
Purpose
Animation
Detail
1.Design Guideline
Basic Guide_Profile
Profile 27.74%
ATT
9:25 PM
100%
Top bar 7.86% Feed
Middle bar 4.38%
Nique
Each menu size : 6.74%
Notification
Friend list Invite Friends Setting
Purpose
Animation
Detail
1.Design Guideline
Basic Guide_Profile
100%
9:25 PM
ATT
Next
Profile
20.7%
Jiwon jang Block name
Badge
Friend
Following
45.3% Collection view
Collection
Purpose
Top bar 7.86%
+ NEW
Followers
Edit Wedding Day
Wedding Day
Aliyah Kim
Aliyah Kim
Blue
Happy Birthday
Happy Birthday
Suyoung Lee
Alex Yoo
Alex Yoo
Animation
1.68%
Animation
1.Design Guideline
Basic Guide_Profile_Collection New
9:25 PM
ATT
Jang’s Collection
Title
2014.02.12
100%
Edit
Top bar 7.86%
28.78% Contents view 92.14%
Profile29.9%
10.55%
Jiwon jang
Block nameBlock nameBlock nameBlock nameBlock nameBlock nameBlock nameBlock name-
Collection
15.72% 7.19%
Purpose
Animation
카드 원본, 소셜정보 보여주기 방식 새로만들기 화면 보여주기방식 탬플릿에 따른 카드 보여주기 방식 변화
Animation
1.Design Guideline
Basic Guide_Profile_Collection New
ATT
9:25 PM
Jang’s Collection
100%
Done
Top bar 7.86%
Title
Jiwon jang Type in your words inside this textbox
Contents view 72.14%
2014.02.12
20%
Purpose
Animation
카드 원본, 소셜정보 보여주기 방식 새로만들기 화면 보여주기방식 탬플릿에 따른 카드 보여주기 방식 변화
Animation
1.Design Guideline
Basic Guide_Profile_Collection New_add card
ATT
9:25 PM
100%
Top bar 7.86% Feeling
% Source
%
Post
%
Block Calendar
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Profile_Collection Edit
9:25 PM
ATT
Jang’s Collection
Sad day 2014.02.12
100%
Edit
Top bar 7.86%
28.78% Contents view 92.14%
Profile29.9%
10.55%
Jiwon jang
Block nameBlock nameBlock nameBlock nameBlock nameBlock nameBlock nameBlock name-
Collection
15.72% 7.19%
Purpose
Animation
카드 원본, 소셜정보 보여주기 방식 새로만들기 화면 보여주기방식 탬플릿에 따른 카드 보여주기 방식 변화
Animation
1.Design Guideline
Basic Guide_Profile_Collection Edit
ATT
9:25 PM
Jang’s Collection
Sad day SUBTITLE
100%
Done
Top bar 7.86%
28.78% Contents view 92.14%
Jiwon jang
Block nameBlock nameBlock nameBlock nameBlock nameBlock nameBlock nameBlock name-
Collection
7.19%
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Profile_Collection_List Edit
9:25 PM
ATT
Collection
Purpose
100%
Delate
My march
Wedding Day
Wedding Day
Jiwon Jang
Aliyah Kim
Aliyah Kim
Blue
Happy birthday
Happy birthday
Suyoung Lee
Alex Yoo
Alex Yoo
Animation
Top bar 7.86%
1.68%
Animation
1.Design Guideline
Basic Guide_Block
100%
9:25 PM
ATT
Top bar 7.86%
Feeds Feed
Block
Collection
Middle bar 4.38%
This Week 1.2014
51.62%
Happy Funny
Love
Blue
Sad
Angry
Last Week. Feb
36.14% 2 weeks ago. Feb
FEB14-21
Purpose 비율설정
Animation
Detail
1.Design Guideline
Basic Guide_Block_Calender_month
100%
9:25 PM
ATT
Top bar 7.86%
Block 2014
30.03%
1
2
Jan
Feb
7
8
Jul
2.95%
Mon
2
44.14%
Purpose
3
Agu Tue
3
5
6
Mar
Apr
May
Jun
9
10
11
12
Sep
Wed Thur
4
4
5
Oct Fri
6
Dec
Nov
Sat
7
Sun
1
Week 1
8
Week 2
9 10 11 12 13 14 15
Week 3
16 17 18 19 20 21 22
Week 4
23 24 25 26 27 28
Week 5
Animation
Animation
1.Design Guideline
Basic Guide_Block_Calender_day
ATT
9:25 PM
100%
Top bar 7.86%
Block 2014.02.15
4%
2014.02.16
Purpose
Animation
Animation
1.Design Guideline
ATT
Basic Guide_Search
9:25 PM
100%
Top bar 7.86% Feeling
4.38% 8.45%
Source
4.38% 9.32%
Popular Latest
Purpose
Animation
4.38%
0.9%
Animation
1.Design Guideline
Basic Guide_Search_Feed
ATT
9:25 PM
100%
Top bar 7.86% Feeling
4% 8.45%
Source
4% 9.32%
Post Block
4.38%
0.9%
Calendar
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Search_Feed_Popular
ATT
9:25 PM
100%
Popular
Top bar 7.86%
2014.01.01 at 00:00
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Search_result
ATT
9:25 PM
100%
#도민준
Top bar 7.86%
2014.01.01 at 00:00
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Post_select feeling
ATT
9:25 PM
100%
2014.01.01 at 00:00
Seize the Catch thenow? emotion. How aremoment, you feeling
4%
Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
35.97%
++
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Post_type
ATT
100%
9:25 PM
Next
Post
Top bar 7.86%
Good Source :
Q W E R T Y U I O P A S D F G H J K L Z X C V B N M 123
Purpose
space
.com
Animation
Go
Animation
1.Design Guideline
Basic Guide_Post_type_source
ATT
100%
9:25 PM
Next
Post
Top bar 7.86%
Select a source
Good Source :
Q W E R T Y U I O P A S D F G H J K L Z X C V B N M 123
Purpose
space
.com
Animation
Go
Animation
1.Design Guideline
Basic Guide_Post_deco
ATT
9:25 PM
Feeds Post
Feed
Block
100%
Done
Top bar 7.86%
Collection
Good Tag
Image
Font
#Andy Warhol, #Kiss, #Love
3.5%
Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
+
Seize the moment, Catch the emotion.
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Post_Image
9:25 PM
ATT
Feeds Post
Feed
Block
100%
Done
Collection
Good Take Photo Libray
Source : Cancel
Tag
Image
Font
#Andy Warhol, #Kiss, #Love
Seize the moment, Catch the emotion. Seize the moment, Catch the emotion.
+
Seize the moment, Catch the emotion.
Purpose 출판연개 이미지 처리방식 어떻게 할지.
Animation
Animation
1.Design Guideline
Basic Guide_Post_tag
ATT
9:25 PM
Feeds Post
Feed
Block
100%
Done
Collection
Tag
Good Source : Done
QTag W E Image R T YFont U I O P #Andy Warhol, #Kiss, #Love
A Seize S the D moment, F G Catch H the J emotion. K L Seize Z the X moment, C V Catch B the N emotion. M
123
Purpose
+
Seize the moment, Catch the emotion. space .com Go
Animation
Animation
1.Design Guideline
Basic Guide_Setting
Profile 27.74%
ATT
9:25 PM
100%
Top bar 7.86% Feed
Middle bar 4.38%
Nique
Notification
Each menu size : 6.74%
Friend list Invite Friends Setting Language SNS setting Push setting Suggest Logout
Purpose
Animation
Detail
1.Design Guideline
Purpose
Basic Guide_Setting
9:25 PM
ATT
100%
Each menu size : 6.74%
Top bar 7.86% Facebook Kakao
Animation
Animation
1.Design Guideline
Basic Guide_Setting_Alert
ATT
9:25 PM
100%
Top bar 7.86% Each menu size : 6.74%
Post alerts
Purpose
Preview Pop-up : New Posts Pop-up : Screen-off Mode Sounds Change to “Vibrate” automatically Vibrate
Animation
Animation
1.Design Guideline
Basic Guide_Login
Seize the moment, Catch the emotion.
Color the block.
Login
Sign up
Login with facebook
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Login
Login with facebook
Name E-mail Adress Password Male
Female
By login, you will automaticly agree with the terms of service
Start Your StoryBlock!
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Login
Login with facebook
First name
Last name
Nick name Facebook E-mail Adress StoryBlock will access your profile, friendlist, email adress, birth, interest, Password likes. Male
Female
By login, you will automaticly agree with the terms of service
Cancel
Yes
Start Your StoryBlock!
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Login
Login with facebook
E-mail Adress Password Start Your StoryBlock!
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Login
Almost there We sent an E-mail instructions to jangjw0707@gmail.com
I’ll check my E-mail
Purpose
Animation
Animation
1.Design Guideline
funny
happy
Basic Guide_Color
lovely
blue
sad
angry
.e_funny { background-color:rgba(50,233,165,1); } .e_happy { background-color:rgba(255,204,58,1); } .e_lovely { background-color:rgba(255,91,120,1); } .e_blue { background-color:rgba(42,130,175,1); } .e_sad { background-color:rgba(101,77,157,1); } .e_angry { background-color:rgba(151,3,10,1); }
Purpose
Animation
Animation
1.Design Guideline
Basic Guide
xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp
CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다. - 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적 - 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐. - pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위 대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 입니다. 예를 들어, 본문 전체가 12pt으로 설정되어 있는 상태에서 본문내의 테이블에서는 좀더 작은 9pt를 사용하고자 한다면, em단위로 본문의 폰트사이즈는 1em이 되고 테이블내 폰트사이즈는 0.75em이 되는 것입니다. [출처] [CSS] em / ex / px / pt / % 의 차이|작성자 genie
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Typhography
Basic fonts Josefin Sans: 100,300,400,600,700
Nanum barun Gothic: 100,300,400,600,700
Purpose
Animation
Animation
1.Design Guideline
Basic Guide_Logo
STORYBLOCK STORYBLOCK
STORY BLOCK
SB
SB
SB
SB
SB
SB
STORY BLOCK STORYBLOCK
STORYBLOCK
SB
STORYBLOCK STORYBLOCK
STORYBLOCK STORYBLOCK
1
Icon Purpose
Animation
28
Icon Animation
1
Icon
28
28
STORY
STORY
STORY
Icon
Icon
Icon
1
28
STORY
STORY
Icon
1
Icon
28
28 STORY
STORY
Icon
1
1
Icon
1 STORY
28 STORY
STORY
Icon
Icon
1
Icon
28
Icon
1
28 STORY
Icon
Icon
1
Icon
28
Icon
1
28
STORY
STO
Icon
Icon
Icon
Icon