디자인 킬러 모바일 앱 웹 사이트 팁 및 예

모바일 장면은 지난 몇 년 동안 기하 급수적으로 증가했습니다. Google Play의 Android 앱과 함께 iOS 앱 스토어는 스마트 폰 애호가를위한 두 개의 핫스팟이되었습니다. 스마트 폰 사용자 수가 증가함에 따라 새로운 아이디어를 시장에 출시 한 수백 명의 모바일 앱 개발자가 나타납니다..

가장 인기있는 앱은 자체 웹 사이트와 함께 제공됩니다.. 이것은 마케팅과 거기에 귀하의 이름을 얻는 데 도움이 될 수 있습니다. 또한 App Stores 중 하나보다 훨씬 더 예쁜 온라인 URL입니다. 성공적인 모바일 애플리케이션은 거의 웹 존재를 필요로한다고 생각합니다..

이 기사에서는 모바일 앱 웹 사이트의 가장 일반적인 디자인 동향. 그러한 레이아웃을 작성하기 위해 따라야하는 엄격한 규칙은 없습니다. 오히려 웹 디자이너가 청중을 얻는데 잘 작동한다는 것을 발견 한 몇 가지 고유 한 지침과 경향이 있습니다. 내 iOS 개발 가이드와 함께 환상적인 모바일 앱을 구성하고 웹 사이트를 구성 할 수도 있습니다..

아래의 개념을 확인하고 자신의 애플리케이션 웹 사이트 레이아웃에 일부를 구현해보십시오..

장치 스크린 샷

모든 모바일 앱 웹 사이트의 필수 요소는 애플리케이션의 스크린 샷이어야합니다. 방문자는 귀하의 앱에만 관심이 있으며, 스크린 샷을 통해서보다 그 목적을보다 빨리 입증 할 수있는 방법은 무엇입니까? 장치 샷을 어떤 레이아웃 스타일에도 맞출 수 있으므로 제한적인 요소가 아닙니다..

Easy Chef는 다양한 기기 촬영을 사용하는 스페인 iOS 앱입니다. 레이아웃의 맨 위에는 다양한보기의 슬라이드 쇼 미리보기가 있습니다. 그러나 아래로 스크롤하면 iPhone 디스플레이를 사용하는 다른 다이어그램을 알 수 있습니다. 이 패널에는 자세한 레이블과 확대 된 확대 된 화면보기가 포함됩니다. 나는 실제로 오래된 게시물에 유익한 제품 그래픽을 디자인하는 것에 대해 썼다..

또 다른 재미있는 설정은 Tweetbot 갤러리 페이지에서 찾을 수 있습니다. 이것은 iPhone을위한 매우 인기있는 트위터 클라이언트이며 개발자들은 스크린 샷의 슬라이딩 쇼케이스를 구성했습니다. 레이아웃에서 공간을 절약하려는 경우이 방법이 더 쉬운 방법 일 수 있습니다. 방문자는 특정보기를 찾기 위해 아래로 스크롤 할 필요가 없습니다. jQuery는 구현하기 쉽고 슬라이딩 iPhone 스크린 미리보기를 빠르게 조합 할 수 있습니다. 추가 세부 사항을 포함하기가 어려울 수 있지만 다른 섹션에 추가 할 수 있습니다..

앱 스토어 배지

이 기술은 또한 응용 프로그램을 작성하고 나면 매우 비열한 것으로 보입니다. 배지는 앱 마켓 플레이스에 대한 다운로드 링크로 빠르게 인식됩니다. Android 및 iOS 사용자 모두 브라우저에서 바로 앱을 볼 수 있으며 스마트 폰에서 볼 때 리디렉션됩니다..

웹 사이트가 새로운 레이아웃으로 업데이트 되었기 때문에 나는 Instagram을 예제로 사용하는 것을 좋아합니다. Android 마켓 플레이스 (Google Play) 및 iOS App Store를 지원하는 배지가 있습니다. 두 배지는 매우 단순하지만 아직 눈에 쉽게 띄어 있습니다. 좀 더 복잡한 디자인을 원한다면 빠른 드리블 검색을 권장합니다. 재능있는 디자이너는 종종 건설적인 비판을 위해 앱 스토어 배지 개념을 공유합니다..

모바일 소셜 네트워크

페이스 북과 트위터는 모바일로 바뀌었지만, 다른 네트워크의 붕괴를 막지는 못했다. 우리는 완전히 새로운 통신 플랫폼을 허용하는 소셜 네트워킹 사용 모바일 앱을보고 있습니다..

Localmind는 Foursquare와 유사한 개념으로 운영됩니다. Foursquare에서는 계정을 등록하고 현지 장소를 확인하기 시작합니다. 질문을 남기거나 다른 사람들의 질문에 대답 할 수 있습니다. 그들의 웹 사이트는 매우 친절하며 초보자를 초청합니다. 특히 맞춤지도 배경으로 디자인 된 상단 배너 섹션을 좋아합니다. 그라디언트 및 배경 질감을 사용하여 웹 사이트에 고유 한 삶을 제공합니다..

최소한의 사진 공유

Pose는 최소한의 디자인을위한 유사한 이상을 가진 또 다른 모바일 네트워크입니다. iOS 및 Android 기기 용 모바일 앱을 다운로드 할 수 있습니다. 느낌은 weheartit와 비슷하지만 모바일 패션 애호가를위한 것입니다. 전체 앱은 패션, 헤어, 메이크업 및 매력에 초점을 맞 춥니 다..

사용자는 옷, 옷 또는 액세서리의 사진을 찍어 네트워크를 통해 공유 할 수 있습니다. Pose에 대해 알아 차리는 한 가지 방법은 웹 사이트를 얼마나 빨리 탐색 할 수 있는지입니다. 회사 블로그, 연락처 세부 정보 등을 쉽게 찾을 수 있습니다. 다른 앱 웹 사이트는 종종 이러한 민감한 주제가 될 수있는 이러한 기업 기능을 간과합니다..

미디어에서 관심을 끌고 싶다면 웹 사이트를 실제 소셜 네트워킹 제품처럼 보이게 만드는 것이 중요합니다. 당신은 (광고 또는 유료 구독으로) 귀하의 앱을 판매하려고 할뿐만 아니라 네트워크 자체를 판매합니다. 소셜 앱은 일반 앱 웹 사이트를 디자인하는 것보다 분명히 까다로울 수 있습니다. 하지만 사용자가 다운로드하는 파일이 훨씬 많으며 휴대 기기에 대한 흥미 진진한 새로운 분야입니다..

겸손한 시작에서

웹 디자이너는 항상 어수선한 그래픽과 아이콘을 조합 할 수있는 것은 아닙니다. 고맙게도 앱 웹 사이트는 어도비 포토샵이 얼마나 뛰어나는지에 대해 중요하지 않습니다. 미니멀리즘이이 레이아웃 스타일에 대해 더 잘 작동 할 수 있다고 생각합니다..

Leef App은 iPhone 용으로 새로 출시 된 Forrst 클라이언트입니다. 그들의 웹 사이트에는 대담한 다운로드 버튼과 함께 아름다운 앱 스크린 샷이 포함되어 있습니다. 모든 페이지 텍스트는 Apple의 글꼴 및 색상 체계와 비슷한 방식으로 단순화됩니다..

Leef 웹 사이트를 훌륭하게 만드는 것은 각 페이지 요소의 솔직한 특성입니다. 그것은 뻔뻔스럽고 앞쪽에 숨겨져 있거나 옆으로 밀려나있는 것이 없습니다. 연습을 위해서라면 모바일 앱 웹 사이트로이 스타일을 사용하는 것이 좋습니다. 더 작은 가벼운 음식을 최소화하고 관심을 끄는 것에 집중함으로써 많은 것을 배울 수 있습니다..

멋진 화이트 스페이스

또한 우드 카메라 앱 웹 사이트는 훌륭하게 간단합니다. 그들의 레이아웃에는 평범한 흰색 배경과 중심적인 내용 만 남습니다. 이 콘텐츠에는 일부 기본 스크린 샷, 앱 스토어 배지 및 몇 가지 추가 주요 기능이 포함되어 있습니다..

미니멀리즘과 공백이 레이아웃에 중요하다면 그걸로 붙어 라! 우드 카메라는 특히 마음에 드는 웹 사이트 레이아웃이 아니지만 쉽게 탐색 할 수 있습니다. 그들의 사이트는 개발자의 공식 페이지 이외에 어떤 대체 컨텐츠에도 링크하지 않습니다. 이는 앱에 초점을 맞추고 제공 할 수있는 기능을 유지합니다. 이는 화려한 그래픽보다 훨씬 중요합니다. 화려하지 않은 삽화는 나쁜 아이디어라고 할 수는 없지만 적절한 구현이 필요합니다..

다채로운 삽화

미니멀리스트 접근법과 정반대로 나는 독특한 삽화가있는 작품이다. 나는 완전히 숭배한다. 종종이 여분의 세부 사항은 완전히 내게 애플 리케이션을 판매합니다. 내가 관련시킬 수있는 한 가지 예가 iPhone 용 Barista App입니다. 그들의 사이트 헤더는 작은 벡터 카푸치노와 에스 프레소 음료로 가득합니다..

그러나 페이지를 스크롤 할 때 다른 이미지가없는 것을주의하십시오. 이 전체 윗부분은 아이폰 앱을 위해 특별히 디자인되었습니다. 방문 페이지. 벡터는 바로 눈을 끈다. 또한 앱이 무엇인지에 대해 암시한다..

Kitchenator는 요리 및 베이킹을위한 측정 단위를 변환하는 유사한 iOS 앱입니다. 그들의 헤더 배치는 풍부한 목재 질감, 체크 무늬 식탁보 및 물 미니 스푼을 사용합니다. 이 이미지는 콘텐츠를 훑어보기도 전에이 앱의 목적을 암시합니다..

이 디자인 스타일은 실제로 전체 레이아웃을 통해 스며든다. 꼬리말 영역은 비슷한 나무 배경과 동일한 글꼴 선택 항목과 일치합니다. 아주 강력한 그래픽이 포함 된 매우 간단한 웹 사이트 레이아웃의 예입니다..

앱 웹 사이트 : 프리미엄 쇼케이스

약간의 눈 사탕 없이는 어떤 기사가 완성 될까요? 위의 기술과 함께 모바일 앱 웹 사이트의 아름다운 갤러리를 구성했습니다. 로고 및 탐색 체계와 도메인 URL을 확인하십시오. 전문가가 수행하는 작업을 연구함으로써 설계 동향을 이해하고 자신의 프로젝트에서 사용할 수 있습니다..

Bosquet 앱