[#2 Contents] 박람회 플랫폼 세부 디자인

웹의 흐름 로직을 잘 세워 보았으니,

이제는 창 별 세부 디자인을 세울 것이다.

세부 디자인을 세우면서 꼭 포함될 필수적인 부분이 있다!!

1. 어떤 요소가 들어가야 하는지

2. 어디에 요소가 위치할지

3. 어떤 기능이 적용될지 

등등... !!

 

이렇게 크게 큰 툴을 세우고, CSS로 구현할 대략적인 디자인을 기획했다.

 

<index.html>

- 필수 요소

1) Welcome message + Fair Title

2) Enter Button

3) background img

 

-  필수 기능

1) Moving Background -> 현장감 있게

2) Enter Button -> 클릭시 login.html 로 이동

 

- 세부 디자인 

index.html 세부 디자인 기획

 

<login.html>

- 필수 요소

1) Welcome + Fair Title

2) Information form (이름, 신분)

3) 자세히 알아보기 form

 

- 필수 기능

1) Information local storage에 저장

2) Information 입력 확인 후 Enter Button 생성 (By. JS)

3) 자세히 알아보기 form 링크 연결

 

- 세부 디자인

login.html 세부 디자인

 

<name-tag.html>

- 필수 요소

1) 이름표 form

 

- 필수 기능

1) local host에 저장된 정보, 이름 , 신분란에 대입 (by.JS)

2) Splash 약 3초간 그 후 main.html 로 연결

 

-세부 디자인

name-tag.html 세부 디자인

 

<main.html>

- 필수 요소

1) Booth img

2) Modal 창

3) Hover 창

4) led neon sign -> 현장감

5) Nav-bar

 

- 필수 기능

1) Booth, hover시 preview 제공

2) Booth, click시 modal 창 제공

3) Nav-bar 각 링크 연결

 

- 세부 디자인

main.html 세부 디자인

modal 창 세부 디자인

hover 창 세부 디자인