CODEDRAGON ㆍDevelopment/UI&UX
HTML 이용한 프로토타이핑
· HTML을 이용한 프로토타이핑 방법
· HTML을 이용한 프로토타이핑
HTML을 이용한 프로토타이핑 방법
· HTML을 이용한 프로토타이핑은 먼저 HTML, CSS, JavaScript와 같은 언어들을 기본적으로 이해하고 활용할 수 있어야 가능하다.
· HTML을 이용한 UI 구성이 가능할 경우 다음과 같은 절차를 통해 프로토타이핑을 진행한다.
|
절차 |
설명 |
|
1 |
프로토타이핑의 대상이 되는 UI 화면의 구조와 구성 요소들을 파악한다. |
|
2 |
HTML의 다양한 태그를 통해 화면의 레이아웃을 구성한다. |
|
3 |
각 UI 표현 요소들을 적절한 HTML 화면 구성 요소들을 이용해 배치하고 표현한다. |
HTML을 이용한 프로토타이핑
메모장이나 HTML 작성 도구들을 활용하여 HTML을 이용해 프로토타입을 제작할 수 있습니다.
로그인 HTML 소스 코드
|
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body> <h1>Login</h1> <p> <input type="text" name="login" value="" placeholder="Username or Email"> </p> <p> <input type="password" name="password" value="" placeholder="Password"> </p> <p> <label> <input type="checkbox" name="remember_me" id="remember_me"> Remember me on this computer </label> </p> <p> <input type="submit" name="commit" value="Login"> </p> <div class="login-help"> <p> Forgot your password? <a href="">Click here to reset it</a>. </p> </div> </body> </html>
|
로그인 프로토타이핑 결과
'Development > UI&UX' 카테고리의 다른 글
| Flags of countries - 전세계 국가의 국기이미지를 무료로 다운로드 (0) | 2018.09.23 |
|---|---|
| billboard.js (0) | 2018.07.23 |
| 아날로그 프로토타이핑 진행, Guide for UX Designers & Information Architects (0) | 2018.07.06 |
| 순바탕체 (0) | 2018.06.30 |
| BBC Sound Effects (0) | 2018.06.21 |