HTML 이용한 프로토타이핑

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>

 

 

 

 

로그인 프로토타이핑 결과


 

 

 

 



반응형