공짜로 살인자 웹 UI 레이아웃 설계 - 궁극적 인 가이드
웹 디자인 분야는 불과 몇 년 만에 숨을 거두었습니다. 그 어느 때보 다 전 세계적으로 활발한 활동적인 디자이너가 있으며 혁신적인 프로젝트 아이디어를 위해 협력하고 있습니다. 그리고 이러한 경향의 많은 개념은 전문 그래픽 디자이너를 통해 개발되었습니다..
사용자 인터페이스를 구축하는 데 필요한 기술을 완전히 이해하려면 몇 달에서 몇 년이 걸릴 수 있습니다. 페이지 요소의 크기와 배치, 텍스트와 라벨의 가독성을 고려해야합니다. 여가 시간을 갖게되면 적은 비용으로 웹 사이트를 구축하고 혼란을 줄이기위한 최소한의 방법을 찾아 낼 수 있습니다. 그런데도 고려해야 할 수십 가지의 다른 설계 기술이 있습니다..
이 가이드에서는 몇 가지를 짝을지었습니다. 현대적인 사용자 인터페이스 설계 기술 와 공짜로 다운로드 할 수 있습니다. 함께 놀아 라. 이것이 그래픽 / 웹 디자인을 구축하는 데 관심이있는 사람들에게 약간의 동기를 부여하고자하는 나의 희망입니다. 전문 웹 디자이너조차도 이러한 추세 중 몇 가지가 다음 프로젝트에 유용 할 수 있습니다..
전체 템플릿 연습
처음부터 자신의 레이아웃을 디자인 할 기술이 있으면 템플릿으로 시작할 필요가 없습니다. 초보자는 전체 디자인에서 시작하여 더 세세한 부분까지 작업하는 것이 더 편안 할 것입니다..
포트폴리오, 홈페이지, 블로그 및 기타 여러 카테고리에 대한 전체 PSD 웹 사이트 템플릿의 우수한 무료 다운로드가 있습니다. 이것들은 시작하기에 완벽한 디자인입니다. “일반” 웹 레이아웃. 각 웹 사이트는 페이지 요소에 대한 다양한 요구를 가지며 어떤 항목이 중요한지 결정해야합니다.
다음은 Martin Fabricius가 디자인 한 "AppCivilization"이라는 PSD 예제입니다. 이 레이아웃은 모바일 앱과 웹 사이트를 디자인하는 독창적 인 스튜디오를위한 것입니다. 하단에는 포트폴리오에 전시 된 작은 크기의 앱 아이콘 패널이 있습니다. 전체 디자인이 머리글, 위쪽 슬라이드 쇼, 주요 내용 및 어두운 바닥 글에 가로로 세분화되어 있음을 알 수 있습니다..
원본 소스 - 다운로드
방문 페이지 디자인
마틴이 고안 한 또 다른 공짜 물건을 살펴 봅시다. 이 다음 예는 모든 유형의 제품을 판매하는 데 사용할 수있는 방문 페이지입니다. 일반적으로 이들은 사용자가 앱, 사진, 아이콘, 템플릿 등을 다운로드 할 수있는 디지털 상품입니다..
원본 소스 - 다운로드
그러나 그의 디자인에서 가장 중요한 부분은 초보자가 쉽게 해결할 수 있다는 점입니다. 헤더에는 큰 이미지가있는 작은 상단 탐색이 여전히 사용되지만 예상되는 사용자 작업은 다릅니다. 그는 큰 것을 가지고있다. “구입!” 폴드 바로 위에 두드러진 버튼. 제품 랜딩 페이지에서 jQuery 슬라이드 쇼보다 더 많은주의를 끌 것입니다..
또 다른 위대한 UI 기술은 페이지의 중간에 작은 아이폰 기능을 표시하는 것입니다. Martin은 iPhone 미리보기 샷, App Store 버튼 및 주요 기능의 작은 목록을 제공합니다. 방문자가 제품 세부 정보를 찾고있을 때 형식이 지정된 목록을 통해보다 간단하게 만들 수는 없습니다..
기타 템플릿 :
다음은 패스에서 풀어 낸 두 가지 무료 PSD 템플릿입니다.
- "BiZ"비즈니스 웹 사이트 PSD 템플릿
- "ThinkJuice"제품 사이트 PSD 템플릿
- 전문 비즈니스 사이트 PSD 템플릿
- "Polo360"포트폴리오 사이트 PSD 템플릿
다음에 관심이있을 수도 있습니다.
- 비즈니스 웹 사이트 템플릿
- "곧 제공 될 것"페이지 자습서 + 템플릿
주요 사이트 탐색
메뉴와 버튼은 훨씬 더 큰 페이지 요소를 만들기위한 도구 일뿐입니다. 귀하의 웹 사이트의 메인 네비게이션이 매우 중요한 목적을 가지고 있음을 부인할 수 없습니다. 모바일 사용자를위한 가능한 대체 방법으로 사이트에 쉽게 액세스 할 수 있어야합니다..
아래는 바느질 효과가있는 멋진 탐색 모음입니다. 강조 스타일은 어두운 상자 또는 페이지 내용을 가리키는 아래쪽 팁으로 표시 할 수 있습니다. 이 스타일은 수년에 걸쳐 두드러졌으며 올바른 설정에서 멋지게 보입니다..
원본 소스 - 다운로드
또 다른 비슷한 공짜는 에디 길. 이 두 번째 탐색 표시 줄에 링크 목록과 몇 가지 추가 페이지 단추가 모두 포함되어있는 것을 정말 좋아합니다. 방문자가 웹에서 내 프로필을 찾을 수있는 보조 링크를 제공해야합니다..
원본 소스 - 다운로드
대체 메뉴 스타일
일반적인 가로 방향 탐색 바를 제외하고 고려해야 할 다른 스타일의 디자인이 있습니다. 수직 링크는 다른 하위 제목으로 나뉘어 페이지 내용에 더 많은 공간을 남깁니다..
예를 들면 웹 사이트 Icojam이 디자인 한 메뉴 공짜 물건을 가져 가라..
각 표제는 선택한 객체를 기반으로 확장 및 축소되도록 작성됩니다. 또한이 설계는 소수의 카운터가 각 카테고리의 오른쪽에 위치하도록 허용합니다. 각 주제 아래에 게시물 개수를 계산하는 블로그 탐색 도구로 작성하는 것이 가장 좋습니다.
원본 소스 - 다운로드
탐색 팁 / 자습서 :
- 50 개 이상의 CSS 탭 기반 탐색 스크립트 클린
- Breadcrumb 탐색 모범 사례 및 예제
- jQuery로 모바일 내비게이션 만들기
- CSS3에서 코딩 빵 부스러기 내비게이션
- 덜 CSS로 탐색 설계
클리너 웹 양식
인터넷의 현대화 시대는 정적 인 회의장과는 거리가 멀다. 사용자는 지속적으로 정보를 공유하고 매일 상호 작용합니다. 이 텍스트 및 미디어 공유의 대부분은 웹 양식을 통해 관리됩니다..
깔끔한 양식 입력 및 버튼을 디자인하는 방법에 대한 몇 가지 예를 살펴보아야합니다. 요소를 디자인하면 방문자를 실제로 사용하도록 유도하는 데 많은 도움이됩니다. 그러면 사이트 신뢰도가 높아져 더 많은 페이지 뷰가 발생합니다..
로그인 필드
체크 아웃 할 로그인 양식 PSD의 몇 가지 좋은 예가 있습니다. 이 로그인 공짜 경유 WP 과학자 모든 표준 요소가 있습니다. 로그인 / 암호, 제출 단추 및 세션 쿠키를 관리하는 확인란의 두 입력 필드.
이 디자인 모델은 jQuery를 통해 효과를 구현할 수 있다면 완벽합니다. 위쪽 오른쪽 화살표 머리는 팝업 스타일 창 설정을 생각하게합니다. 이것은 사용자가 등록 링크를 클릭 할 때까지 양식을 숨겨서 웹 사이트 공간을 절약 할 수있는 훌륭한 기술입니다.
원본 소스 - 다운로드
아래 양식은 디자이너 덕분에 무료로 다운로드 할 수 있습니다. 길 후 블레히트. 그는 거친 배경과 종이 텍스처와 비슷한 패턴을 사용했습니다. 내가 Gil의 디자인에 대해 특히 좋아하는 것은 "특대"요소입니다. 그것은 전체 페이지를 채우는 로그인 양식에 훨씬 더 상냥한 착륙입니다. 사용자는 입력 내용을 쉽게 볼 수 있으며 혼란이 적습니다..
원본 소스 - 다운로드
CSS3를 사용하는 프론트 엔드 개발자로서 경험이 있다면이 그래픽을 코드로 쉽게 변환 할 수 있습니다. 버튼 및 입력 필드에 대해 선택된 외부 광선 효과 및 둥근 모서리를 구현할 수도 있습니다.
콘택트 렌즈
거의 모든 웹 사이트에서 찾을 수있는 또 다른 양식은 문의 양식입니다. 여기에는 일반적으로 보낸 사람의 이름, 전자 메일 및 메시지 내용 필드가 포함됩니다.
아래 공짜 공짜는 사용자 지정 텍스처와 아이콘을 사용하는 멋진 예입니다.
디자인도 사용 자리 표시 자 텍스트 레이블 대신. 즉, 양식을 처음로드 할 때 각 필드는 기본값 (예 : 사용자 이름)으로 설정됩니다. 하지만 입력을 시작하면 자리 표시자가 지워지고 대신 콘텐츠가 표시됩니다. 모든 표준을 준수하는 브라우저가이 효과를 지원하므로 페이지 공간을 절약 할 수 있습니다..
원본 소스 - 다운로드
잡을 멋진 또 다른 공짜 물건은 재능있는 존 노리 크웰. 이 디자인은 훨씬 간단하며 각 입력 위에 레이블이 있습니다. 이것은 회사의 다른 부서를 통해 메시지를 보내야하는 대기업이나 신생 기업에게 훌륭한 솔루션입니다.
원본 소스 - 다운로드
양식 자습서에 문의하십시오.
- 로그인 / 등록 양식 : 아이디어와 아름다운 예
- 누적 용지 효과 로그인 양식 만들기
- Ajax 기반 HTML5 / CSS3 문의 양식 만들기
리본 및 배너
단지 6 ~ 7 년 전에 둥근 모서리가 인기있는 디자인 트렌드에서 상승하기 시작했습니다. 이제 그림자와 모서리 리본을 더 추가했습니다..
원본 소스 - 다운로드
이러한 요소 중 일부는 의견 카운터 또는 블로그의 게시 날짜와 같은 디자인 하이라이트로 사용할 수 있습니다. 위의 스티치 리본은 방문자의 관심을 끌고 자하는 포트폴리오 또는 프로젝트 페이지에 적합합니다. 디자인이 상단에서 떨어지는 비슷한 수직 리본을 사용해 볼 수도 있습니다..
이러한 작은 페이지 효과는 레이아웃을 향상시키는 데 많은 도움이됩니다. 방문자는주의를 기울이고 이러한 미학적 인 즐거움을 사랑합니다. 그러나 작은 코너 리본이이 디자인 트렌드의 일부일뿐입니다..
원본 소스 - 다운로드
또한 전면적 인 배너 디자인은 브랜드 인지도 제고에 크게 인기가 있습니다. 로고, 탐색, 홈페이지 또는 추천 블로그 게시물에서도 이러한 정보를 활용할 수 있습니다. 좋은 디자인 기능을 통해 실질적으로 무의미합니다..
코너 감싸기
매우 특별한 리본 배너 효과는 페이지 구석에 디자인을 배치하여 수행됩니다. 이렇게하면 페이지가 3-D로 보이고 리본이 웹 사이트의 위쪽 부분으로 감싸집니다..
아래의 디자인은 무료로 다운로드 할 수 있으며 자신의 프로젝트 아이디어로 사용할 수 있습니다. 이것이 방문자들의 주목을 끄는 이유와 왜 이러한 추세가 그런 격렬한 광란으로 변했는지를 알 수 있습니다. 배너를 과도하게 사용하지 않도록주의하십시오. 대량으로, 이것들은 이전의 "web 2.0"광택 / 미러링 된 효과와 매우 흡사합니다.
원본 소스 - 다운로드
버튼으로 디자인하기
하이퍼 링크를 제외하고 버튼을 사용하여 방문객과의 상호 작용을 극대화 할 수 있습니다. 이러한 페이지 항목은 jQuery 및 Ajax 호출을 사용하여 아무 것도 수행 할 수 있습니다 (단, 예를 들어 공짜 다운로드와 같이 정적 컨텐츠에 연결하는 데 단추를 사용할 수 있음)!
아래 UI 킷은 매트 이방 사람 단순한 버튼 그 이상입니다. 그의 PSD 세트는 비슷한 형태의 건물을위한 그라디언트와 텍스처를 찾는 초보자에게 환상적입니다. 단 한 번의 PSD보다 UI 키트에서 훨씬 더 높은 품질의 버튼을 자주 찾을 수 있습니다..
원본 소스 - 다운로드
대안을 만드는 법
이 기술을 연습하는 데 시간을 할애하면 시간이 지남에 따라 여러 가지 스타일을 만들어야합니다. 이로 인해 서로 다른 프로젝트와 레이아웃간에 유사한 버튼을 전환 할 수 있습니다. 좋은 예가 디자이너가 제공하는 밀키 버튼입니다. 로버트 반 클리 콘.
원본 소스 - 다운로드
각각의 원래 3 개의 버튼은 서로 다른 그래디언트 스타일을가집니다. Photoshop에서 작업 할 때 그라디언트 사이의 색상을 일치 시키거나 색상을 효과 레이어로 이동해야합니다. 이 이해로 당신은 다운로드를위한 자신의 단추 공짜 물건을 건설 할조차 수 있었다!
원본 소스 - 다운로드
목재 + 종이 텍스처
기본 레이아웃 디자인에 양념을 칠할 필요가 있다면보다 교활한 방법으로 이동해야합니다. 텍스처는 CSS 배경이나 너비 설정 콘텐츠를 통해 적절하게 구현할 수 있다면 항상 환영받을 수 있습니다. 그리고 제가 본 가장 인기있는 질감 중 두 가지는 목재와 빈 종이입니다.
메모장 아이디어는 정말 간단하지만 사용자 인터페이스 요소의 일부로 또는 레이아웃 전체에 멋진 브랜딩 디자인으로 작업 할 수 있습니다. 그러나 종이가 항상 최선을 다하는 것은 아니며 다른 질감이 스타일이 섞여 들어가는 데 도움이 될 수 있습니다. 나무의 질감이 더 세밀해질 수 있습니다.
원본 소스 - 다운로드
이미지가 눈에 띄고 멋진 외장으로 감싸여 있습니다. 텍스처의 전체 개념은 웹 사이트에 특정 느낌이나 감정을주는 것입니다. 나무 테마는 가정과 자연의 감각을 불러 일으킬 수 있습니다. Jeremiah Wingett가 다운로드 할 수있는 멋진 웹 UI 킷이 있습니다. 창조적 인 느낌이라면 자신 만의 텍스처를 조합하여 웹 기반 환경에서 어떻게 수행하는지보십시오.
28 고해상도 목재 텍스쳐
결론
최고의 웹 디자이너는 일상적으로 실천하고 결점이 궁극적 인 목표를 저해하지 않도록하는 사람입니다. 당신은 반응이 있어야하고 성공과 실패한 시도에서 빨리 돌아와야합니다. 이 가이드의 팁과 공짜는 웹 프로젝트를위한 다른 페이지 개념을 만드는 법을 배우기 시작할 때 좋은 출발점이 될 것입니다. 그리고 우리는 포스트 토론 영역에서 그 문제에 대한 당신의 생각을 읽고 싶습니다..
