Storyblock

Page 1


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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.