웹 사이트 트래픽을 극대화 할 수있는 8 가지 핵심 설계 도구 |

8. Adobe Edge Inspect

2013 년에 업데이트되고 출시 된 새로운 브랜드 인 Creative Cloud는 Adobe Edge Inspect를 사용하여 웹 디자인을 미리보고 다른 플랫폼에서 어떻게 보이는지 미리 볼 수 있습니다. Edge의 주된 매력은 실시간으로 플랫폼에서 변경 사항을 확인하여 시간을 절약 할 수 있다는 것입니다.

이 도구를 사용하면 컴퓨터와 모바일 장치를 동기화 할 수 있습니다. 이렇게하면 여러 플랫폼에서 한 번에 웹 디자인을 탐색하고 검사 할 수 있습니다. 또한 웹 디자인을 변경하고 디버깅 할 때 Java, CSS 및 HTML 코딩 작업을하는 동안에는 작업 내용이 바로 장치에 표시됩니다.

7. 스켈레톤

이 회사의 CSS 파일 번들은 탁상용 모니터에 표시되는지 또는 손에 작은 빛나는 화면에 표시되는지에 관계없이 세련된 웹 사이트 개발을 가능하게합니다. 반응 형 웹 디자인을위한 사용하기 쉬운 상용구로 간주되는 Skeleton은 사용자 장치의 크기에 따라 확장하고 축소하는 프레임 워크를 만들기 때문에 적절하게 명명됩니다. 기본 디자인 요소가 포함되어 있지만 디자이너가보다 정교한 스타일을 도입 할 수있을만큼 유연합니다.

6. 반응 형 와이어 프레임

반응 형 웹 디자인 기법을 사용하는 실험 도구로 청구되는 Responsive Wireframe은 HTML / CSS를 사용하여 디자인의 데스크톱 및 모바일 뷰를 볼 수있는 오버레이 그리드를 제공합니다. 이 도구를 사용하면 브라우저에서 쉽게 디자인 할 수 있습니다. 일부 설계자는 이러한 와이어 프레임이 창의력을 꺾을 수 있다고 주장 할 수도 있지만, 다른 디자이너는 플랫폼 전반에서 작동하는 디자인을 빠르고 간단하게 만들 수 있다고 주장합니다. 이 도구를 사용하면 반응 형 와이어 프레임을 사용하여 디자인을 테스트 할 때 랩탑, 데스크탑 및 모바일에서의 모양을 확인할 수 있으므로 시간이 절약됩니다.

5. 스타일 타일

무드 보드보다 구체적이지만 실제 모형보다 덜 정적 인 Style Tiles는 디자이너가 고객에게 다른 웹 사이트 레이아웃을 보여줄 수있게합니다. 타일을 제공함으로써 디자이너는 여러 가지 완성 된 버전을 만들어야하는 번거 로움을 피할 수 있습니다.

이러한 계단식 타일은 어떤 장치에도 맞지 않는 디자인을 보여주기 때문에 관련된 여러 가지 고려 사항을 고려하기 전에 디자인을 쉽게 만들고 클라이언트와 공유 할 수 있습니다. 반응 형 디자인. 바꾸어 말하면,이 접근법은 설계자에게 차원 제한을 없애줍니다. Style Tiles의 자매품 인 "Component Style Guide"는 iPhone 및 새로운 Blackberry 10 스마트 폰과 같은 플랫폼에서 디자인을 수행하고 작동하도록 조언합니다.

4. 반응 형 계산기

백분율을 사용하여이 계산기는 PSD 설계를 반응 형 웹 프로젝트의 요소로 변환하는 데 필요한 데이터를 제공합니다. 여섯 개의 필드를 입력하고 "Submit Query"를 클릭하십시오.이 계산기로 PSD의 테두리, 여백 및 패딩을 선택하십시오.

3. Wookmark

웹 페이지의 구성 요소를 가져 와서 열로 가져 오는 jQuery 플러그인입니다. 열 레이아웃은 브라우저 창 크기를 기반으로합니다. 이 편리한 도구는 다양한 화면 크기에 반응하는 사이트를 만드는 훌륭한 방법입니다.

2. ProtoFluid

웹 기반이기 때문에 장점이있어이 도구를 사용하면 다른 해상도와 크기로 디자인을 모형으로 볼 수 있습니다. Firebug를 사용하여 HTML, CSS, JS 및 기타 요소에서 문제가 없는지 확인하십시오. 키보드 단축키, 서로 다른보기 간 빠른 전환 및 깨끗한 코드로이 도구를 사용하면 Nexus, iPhone 및 iPad를 비롯한 다양한 화면 크기에서 디자인이 얼마나 잘 보이는지 테스트 할 수 있습니다.

1. Foundation

이 프론트 엔드 프레임 워크는 더 똑똑하고 빠르게 코드를 작성할 수있는 옵션을 제공합니다. 기능 중이 도구를 사용하면 작은 화면을 디자인하여 시작할 수 있습니다. 큰 화면을위한 디자인을 만들기 위해 노력할 때 Foundation은 디자인 요소를 향상시키는 데 도움을줍니다. 또한이 도구는 시원한 HTML 템플릿을 제공하여 사이트 디자인을 신속하게 시작할 수 있습니다.

이 도구의 유연한 그리드, 반응적인 레이아웃 및 신속한 프로토 타입 제작을 활용하십시오. National Geographic, Pixar 및 Los Alamos National Laboratories를 포함하는 사이트 목록을 사용하는 사이트 목록에서 재단의 효능 및 신뢰성을 확인할 수 있습니다. 응답 성있는 웹 디자인을 최대화 할 때 가장 큰 어려움은 무엇입니까? 어떤 도구가 가장 도움이 되었습니까?

[

경유