Firefox를 사용하여 간단한 모형 만들기
Pencil은 응용 프로그램 사용자 인터페이스의 모형을 스케치하는 데 사용할 수있는 와이어 프레임 도구입니다. Pencil의 장점은 가볍고 사용하기 쉽고 Firefox와 긴밀하게 통합되어 있다는 것입니다. 그 위에는 무료 오픈 소스 응용 프로그램이 모두 있습니다! 이 기사의 끝에서 Pencil을 사용하여 Brizzly와 같은 와이어 프레임을 만드는 방법에 대한 간단한 데모를 제공합니다..
왜 우리는 와이어 프레임을 만드나요? ?
와이어 프레임은 페이지 레이아웃 아이디어의 스케치입니다. 와이어 프레임은 디자인이 사용자의 요구에 맞는지 확인하기 위해 페이지의 정보 디자인에 중점을 둡니다. 와이어 프레임은 일반적으로 내용, 기능 및 탐색 요소를 나타내는 다양한 모양 (예 : 상자, 타원 및 다이아몬드)으로 구성됩니다. 이 도형은 페이지에 배치를 표시합니다..
처음에는 페이지의 대략적인 스케치를 만드는 데 시간 낭비처럼 보일 수 있습니다. 와이어 프레임은 사용자가 페이지의 중요도 요소에 집중할 수있게하는 데 중요합니다. 멋진 시각적 요소가없는 페이지의 대략적인 스케치를 작성하면 사용자의주의가 페이지 구성 요소의 크기 조정, 레이아웃 및 배치와 같은 중요한 요소로 이동합니다. 우리는 사용자가 페이지의 중요한 요소에 집중하기 시작할 때 클라이언트가 소프트웨어에서 실제로 원하고 필요로하는 것을 더 잘 이해할 것입니다. 와이어 프레임을 생성하면 사용자와 사용자가 효과적으로 공동 작업하고 잠재적 인 설계 문제를 조기에 식별 할 수 있습니다..
연필로 시작하기
Pencil 님의 추가 된 페이지에서 Pencil을 다운로드하십시오. 연필을 설치하면 '도구'> '연필 스케치'에서 액세스 할 수 있습니다..
이것이 브리즈 (Brizzly)의 모습입니다. 단일 페이지 내에서 Facebook과 Twitter를 모아 놓은 아주 멋진 웹 응용 프로그램입니다..
이것은 와이어 프레임의 최종 결과입니다. 이 와이어 프레임의 주요 모양은 직사각형, 텍스트 상자 및 탭입니다. 이 기사의 다음 섹션에서는 각 모양을 만드는 방법을 보여주는 간단한 예제를 제공합니다..
직사각형 만들기
와이어 프레임 모양을 만드는 첫 번째 단계는 '모양 컬렉션'메뉴에서 모양을 캔버스로 드래그하는 것입니다..
직사각형을 적절한 너비와 높이로 크기 조정.
Pencil에서 모든 도형의 텍스트, 테두리 및 배경색을 사용자 정의 할 수 있습니다. 사각형을 마우스 오른쪽 버튼으로 클릭하고 '속성'을 선택하여 속성 창을 엽니 다. 배경 속성 화면입니다. 사각형 배경색을 흰색으로 설정합니다 (#FFFFFF)..
'테두리'탭을 클릭하고 테두리 속성을 조정하십시오. 테두리 색을 검정 (# 000000)으로 설정하고 테두리 두께를 1로 변경합니다.
텍스트 속성 화면에서는 텍스트의 글꼴 유형, 크기, 스타일, 두께, 색상, 밝기 및 불투명도를 사용자 정의 할 수 있습니다..
탭 만들기
집, 임시 보관함, 그림 탭은 서로 쌓인 세 개의 탭입니다. '탭 패널'세 개를 사각형으로 드래그하십시오. 각 탭의 크기를 조정하여 각 탭이 나란히 표시되도록합니다..
텍스트 속성 화면을 열어 '그림'및 '임시 보관함'탭의 글꼴 색을 조정합니다. 회색으로 설정 (# 989898).
텍스트 만들기
캔버스에 '텍스트'모양을 드래그하여 각 메뉴를 만듭니다. 텍스트 속성 창에 액세스하여 텍스트 모양을 조정할 수 있습니다..
색상 변경에 유용한 팁
컬러는 즐거운 와이어 프레임을 전달하는 데있어 가장 중요한 부분 중 하나입니다. 도형의 색상을 변경하는 가장 정확한 방법은 색상의 HTML 코드를 지정하는 것입니다. 특정 색상에 대한 HTML 코드를 파악하는 것은 어려울 수 있습니다. w3cschools.com의 HTML 색상 치트 시트를 사용하여 특정 색상에 맞는 HTML 코드를 찾을 수 있습니다..
또한 colorzilla를 사용하여 화면에서 색상을 선택하고 Pencil에서 사용합니다. 화면의 색상을 선택하려면 Firefox의 왼쪽 하단 구석에있는 스포이드 아이콘을 클릭하십시오. 눈 드롭 아이콘을 더블 클릭하여 ColorZilla의 색상 선택 도구를 열 수도 있습니다. Pencil의 색상 HTML 코드에 16 진 코드를 복사하여 복사하면됩니다..
결론
연필은 와이어 프레임 도구를 사용하기 쉽습니다. Firefox와 연필을 통합하면 다른 Firefox 플러그인을 사용하여 더 나은 와이어 프레임을 만들 수 있습니다.
모래밭
연필 다운로드
다운로드 Colorzilla
W3C HTML 컬러 시트
