2012 년 조심할 웹 디자인 동향 15 개

지금까지 2011 년에는 디자인과 인터넷 기술에 놀라운 변화가있었습니다. 웹 개발은 과정을 간소화하는 데 유용한 셀 수없는 오픈 소스 라이브러리는 말할 것도없고 배우기에 뛰어 들고 더 매끄러운 주제가되었습니다. 그럼에도 불구하고 세계적인 디자인 커뮤니티는 수건을 던지기가 어렵습니다..

나는 지난 해에 매우 빠르게 성장한 15 가지 아이디어를 소개하고자합니다. 이러한 트렌드는 2012 년에 큰 역할을 할 웹 및 그래픽 디자인 기법을 포함합니다. 온라인에서 즐겨 찾는 여러 사이트에서 이들 중 일부를 보셨을 것입니다.

고맙게도 이러한 기능을 구현하는 메소드는 이해하기 쉬워지고 코드에서 훨씬 더 슬림 해집니다..

1. 반응 형 인터페이스 설계

일반 사용자의 경험은 웹 사이트를 디자인 할 때 고려해야 할 가장 중요한 요소 일 수 있습니다. 페이지 요소가 키보드 / 마우스 입력에 신속하게 응답하고 예상대로 작동하기를 원합니다. 일부 예제에는 측면 플라이 아웃 메뉴, 드롭 다운 상자 및 팝업 창이 포함될 수 있습니다.

MooTools 및 jQuery와 같은 유명한 JavaScript 라이브러리를 포함하여 이러한 기능을 애니메이션화하는 것이 훨씬 쉬워졌습니다. 대부분의 현대적인 브라우저는이 코드를 지원하며 스크립트를 사용할 수 없을 때 정상적으로 성능이 저하됩니다. 궁극적으로 사용자는 디자인의 어느 곳과도 상호 작용할 때 편안함을 느낄 수 있습니다..

마찬가지로 형식 입력과 데이터 검사를 고려해야합니다. 많은 등록 페이지에서 각 입력 영역을 작업하면서 작은 응답을 받게됩니다. 유효한 전자 메일 주소, 중복 된 사용자 이름 및 암호 입력 확인을 자동화 할 수 있습니다. 이렇게하면 사용자의 시간을 절약 할 수 있으며 가입 프로세스 전반에서 편리한 가이드를 제공합니다..

2. 터치 스크린 모바일 장치

지난 몇 년 동안 스마트 폰이 비 기술 애호가들 사이에서도지지를 받고 있음이 분명 해졌다. 그러나 2011 년이 되어서야 모바일 사이트와 모바일 전용 템플릿이 폭발적으로 증가했습니다..

Android 휴대 전화와 함께 iPhone 및 iPad 기기의 인기는 터치 명령을 통해 방문객에게 페이지와 완전히 상호 작용할 수 있음을 의미합니다. 이것은 모든 디자인 모형을 현실적으로 고려해야합니다. 모바일 웹 디자인의 동향에 따르면 완전히 별도의 모바일 테마를 구축하면 최상의 결과를 제공하는 경우가 많습니다. 이렇게하면 모바일 사용자에게 사이트의 슬림화 된 버전을 제공하면서 기본 레이아웃에서 모든 동적 컨텐츠를 유지할 수 있습니다.

3. 공짜 물건 톤!

솔직히 무료 다운로드를 즐기지 않는다고 누가 말할 수 있습니까? 웹 디자이너는 수년 동안 온라인으로 콘텐츠를 공유했지만 최근에는 이것이 디지털 아티스트들 사이에서 매우 인기있는 트렌드가되었습니다. 웹 및 그래픽 디자이너를위한 무료 다운로드를 제공하기 위해 특별히 제작 된 커뮤니티가 몇 군데 있습니다..

내 개인 즐겨 찾기 중 두 가지는 Download PSD와 Designmoo입니다. 두 가지 모두 최고 품질의 회원이 자주 업데이트합니다. 또한 Hongkiat Freebies 아카이브에는 체크 아웃 할 수있는 많은 달콤한 음식이 있습니다. 말 그대로, 무료 웹 인터페이스, 레이아웃, 로고, 배너 및 실제적으로 다른 유형의 PSD / AI 파일을 다운로드하는 것은 결코 쉬운 일이 아닙니다.!

일부 멋진 다운로드

아래는 2011 년 초 체크 아웃 한 멋진 무료 공짜입니다. 그리고이 목록에 멋진 파일이 있다고 생각한다면 2012 년까지 기다려주세요.!

미니 웹 UI 세트

다크 미니 뮤직 플레이어

슬라이딩 태그

다크 포토 슬라이더

검색 창

로그인 / 로그인 양식

로그인 모달 박스

로그인 양식 정리

가격 테이블

최소로드 바

첨부 파일 팝업

4. HTML5 및 CSS3 표준

이러한 새로운 디자인 원형 모두 2011 년 내내 계속 늘어나고 있습니다. 시맨틱 웹 디자이너는 CSS만의 디자인으로 둥근 모서리를 만들고 그림자를 드리 우는 데 수년이 걸렸습니다. 또한 W3C는 가장 인기있는 브라우저의 지원을 얻는 데 많은 발전을 이루었습니다..

나는 HTML5 / CSS3 웹 개발의 미래에 대해서만 좋은 것들을 볼 수 있습니다. 프론트 엔드 디자이너는 오늘날의 분야에서 종종 간과 되기는하지만 전체 구성 프로세스에 큰 중요성을 제공합니다. 당신이 알고 있고 매일 연습하는 기술에 기초하여 어떤 세트의 '레이블'로 짜내 지 않도록하십시오. HTML5 / CSS3 코딩에 대한 초보자 용 가이드를 제공합니다..

이러한 새로운 표준을 고수하면 JavaScript 및 jQuery에서 훨씬 쉽게 개발할 수 있습니다. 개발자는 이미 HTML5 / CSS3 프로젝트 코드를 온라인에 게시하고 공유하고 있으며, 일이 계속되면 내년으로 갈수록 더 많은 것을 알게 될 것입니다.

5. 리본 및 배너

이 설계 기술은 정확하게는 아니지만 “새로운” 그것은 단지 최근까지 주류를 통해 진정으로 파산 한 적이 없습니다. 모서리 리본, 배너 탐색 모음 및 작은 리본 배지의 예를 보았을 것입니다. 이러한 추세는 Google을 통해 모두 발견 할 수있는 상세한 자습서가 방대한 양의 축적으로 인해 폭발적으로 증가했습니다.

웹 디자이너는 요즘 정보를 공유하기 위해 자신의 블로그를 시작하는 데 더욱 유능합니다. 이제 디자이너들 사이에서 간단한 기술을 쉽게 전달하여 가장 인기있는 효과를 복제 할 수 있습니다. 노력을 덜어주기 위해 다운로드 할 수있는 무료 PSD가 있습니다..

6. 프리미엄 워드 프레스 테마

WordPress 3.0의 최종 버전에는 맞춤형 게시물 유형 및 고유 한 기사 이미지와 같이 오래 기다렸던 기능이 포함되어있었습니다. 그러나 내가 본 가장 중대한 변화는 프리미엄 WP 테마를 전문으로하는 워드 프레스 개발 상점에서 나왔습니다..

그런 테마를 구입하면 설치 과정은 다른 것과 비슷합니다. 그러나 이제는 사용자 정의 플러그인 기능, 하위 테마, 새 관리자 메뉴 및 테마 내에서 바로 다른 많은 기능을 포함 할 수 있습니다. WooThemes, ElegantThemes 및 Rocket Theme는 나머지 모든 것보다 내게 두드러지는 몇 가지 브랜드입니다. 그들의 품질은 절묘합니다. 나는 개발자들이 최고의 템플릿과 가장 직관적 인 관리자 메뉴를 만들기 위해 뛰어 다니고 있다고 생각합니다..

2012 년에는 WordPress가 더욱 사용하기 쉬워 질 것이라고 상상할 수 있습니다. 즉, 더 높은 품질의 테마를 출시하고 더 놀라운 블로그를 시작할 수 있습니다..

7. 온라인 매거진

WordPress 테마에 관해 말하면서 우리는 신속하게 채택 된 온라인 잡지의 성공도 가져와야합니다. 이 웹 사이트는 일반 구조 및 페이지 레이아웃을 제외하고 일반 WordPress 블로그와 크게 다르지 않습니다. 자신의 홈 페이지의 완전한 프리젠 테이션 및 사이트 작성자 컬렉션 수집을 통해 이러한 대형 잡지를 발견 할 수 있습니다.

잡지가 온라인으로 움직이기 시작하면 많은 작가들의 수입원이 될 것입니다. '웹 디자인'과 같은 주제는 게임이나 경제보다 작은 틈새 시장을 겨냥한 것입니다. 그러나 우리가 인쇄보다 온라인으로 더 많은 디자인 잡지를보고 있다는 사실은 앞으로 몇 년 동안 세계가 나아갈 지 알 수있게 될 것입니다.

8. 쉬운 드롭 그림자

CSS3의 한면으로서 디자이너가 페이지의 어느 곳에서나 그림자를 구현하는 것이 그 어느 때보 다 쉬워졌습니다. 상자 텍스트 및 상자 스타일 요소에는 명확한 그림자 효과를 렌더링하는 각각의 속성이 부여되었습니다..

텍스트 그림자 구문은 암기하기가 쉽고 상자 그림자처럼 따라갑니다. 이러한 효과를 렌더링 할 때 이미지가 필요 없기 때문에 웹 개발자는 이러한 기본 아이디어를 더욱 확장 할 수 있습니다..

9. 다이내믹 타이포그래피

글꼴은 웹 디자인 전통을 포괄하는 영역의 큰 부분입니다. Arial, Helvetica, Georgia 및 Trebuchet MS를 비롯한 가장 유명한 글꼴은 수년 전부터 사용되어 왔습니다. 웹 표준의 목적을 계속해서 충족 시키지만 고급 웹 페이지 활판 인쇄를위한 대체 옵션은 많이 있습니다..

예를 들어, Typekit은 문서 헤드에 몇 줄의 코드 만 포함되도록 요구합니다. 이 후 포함시킬 글꼴 이름을 지정하고 CSS에 추가 할 수 있습니다. 이 기술의 가장 중요한 부분은 주로 JavaScript에 의존하기 때문에 최종 사용자는 글꼴을 설치할 필요가 없습니다.

또 다른 대안은 Typekit과 비슷한 방식으로 작동하는 Google 웹 글꼴입니다. 관심있는 디자이너에게 CSS3의 @ font-face 미디어 쿼리를 확인하는 것이 좋습니다. 훨씬 더 창의성을 발휘할 수 있습니다. 이 코드를 사용하여 .ttf 또는 .otf 글꼴 파일을 웹 서버에서 가져와 사용 가능한 스타일 시트 글꼴로 포함하십시오! 동적 글꼴을 구축하는 데 사용되는 수많은 시스템이 있으므로 2012 년에이 분야에서 혁신과 디자인 인재가 급증 할 것으로 예상됩니다..

10. 이미지 갤러리 슬라이드 쇼

jQuery가 인기를 얻음에 따라 점점 더 많은 이미지 슬라이드 쇼가 웹 레이아웃에 포함되는 것을 목격 해 왔습니다. 갤러리는 내부 페이지 콘텐츠를 빠르게 엿볼 수있는 데 적합합니다. 포트폴리오 항목, 사진, 추천 이미지가있는 블로그 게시물, 데모 스크린 샷 등이 될 수 있습니다..

고유 한 슬라이딩 및 페이딩 애니메이션을 많이 고려하면 홈 페이지에 대한 빠른 슬라이드 쇼를 구성하는 것이 더 쉬워 진 적이 없습니다. 나는 2012 년이 디자이너들 사이에서뿐만 아니라 이러한 경향에 대한 상승감을 보게 될 것이라고 확신합니다. 온라인 웹 응용 프로그램과 소프트웨어 회사는 가이드 라인으로 슬라이드 쇼를 사용하여 스크린 샷과 고유 기능을 표시했습니다..

11. 모달 팝업 상자

나는 모달 박스가 데스크톱 소프트웨어와 모바일 앱에 수년간 출현했다는 것을 고려할 때 여전히 인터넷에 새로운 것을 느낀다. 모달 윈도우의 목적은 새 페이지로로드하지 않고 현재 페이지 상단에 상자 내용 (예 : 사용자 등록 또는 로그인)을 제공하는 것입니다..

많은 오픈 소스 이미지 갤러리 스크립트는 배경이 팝업 상자보다 어둡게 나타나는 경우 라이트 박스 효과 유형을 사용합니다. 나는 많은 사람들에게 아직 받아 들여지지 않았지만 나는 그것을 볼 때마다이 특징을 정말로 즐긴다. 모달 박스는 섹시하고 매끄 럽지 만 코드 작성 및 작동이 매우 어려울 수 있습니다.

자신의 웹 사이트에 대한 아이디어를 얻으려면 인기있는 소셜 뉴스 공유 커뮤니티를 확인하십시오. Reddit과 Digg는 전형적인 레이아웃을 가진 레지스터 / 로그인 모달 박스를 특징으로하기 때문에 처음 두 가지가 있습니다. 또한 Google+의 UI 효과는 상당한 양의 모달 기능을 자랑합니다..

12. 영감 목록

목록 항목의 컬렉션은 웹 디자인 초기부터 나타났습니다. 우리가 새로운 세기로 나아감에 따라 설계자는 HTML 주문 및 정렬되지 않은 목록을 사용하여 탐색 메뉴를 제공하기 시작했습니다. 하지만 요즘에는 할 수 있고 훨씬 더 많이 사용되고 있습니다..

대부분의 블로그 테마에서 전체 사이드 바에 목록이로드되어 있습니다. 기사 항목에 목록 용으로 멋진 CSS 스타일을 만든 디자이너는 말할 것도 없습니다. 올해 초 다른 게시물에서 영감을주는 목록 스타일을 다루었으므로이 문제에 대한 더 많은 통찰력을 얻을 수 있습니다. 2012 년을 기대하면서, 정말 독창적 인 몇 가지 예를 기대하고 있습니다. 아마도 Flowapp의 커스텀 레이아웃 인 태스크 & 할일.

13. 생성 된 이미지 축소판

웹 우주에서 우리는 내용이 왕이라는 것에 동의 할 수 있습니다. 그러나 대부분의 설계자는 공백 텍스트의 페이지가 빠르게 지루하게된다는 것에 동의합니다. 부드럽게 뿌리는 방법을 알고 있다면 이미지에 여분의 향신료를 더할 수 있습니다. 한 가지 방법은 동적 썸네일을 사용하여 각 페이지 나 기사에 대한 미리보기를 제공하는 것입니다..

블로그는 오늘도 추천 이미지 트렌드를 계속 채택하고 있으므로 생성 된 미리보기 이미지를 테마에도 적용 해보십시오. 이들은 종종 기사 제목에 대한 나의 관심을 이끌어 내고 텍스트 링크로 가득 찬 페이지를 나누는 것을 돕습니다..

또 다른 예로 Dribbble은 각 디자인 샷에 대한 축소판의 전체 갤러리 목록을 제공합니다. 이러한 테이블 행 스타일 레이아웃에서는 각 축소판을 한 눈에 파악하고 찾고있는 항목을 찾기 쉽습니다. 이 전략은 전체 디자인 커뮤니티의 주목을 끌었다. 적어도 Dribbble의 구성원은 기껏해야. 2012 년에는 과거의 사례를 바탕으로 이러한 아이디어를 더욱 발전시킬 것으로 기대됩니다..

14. 대형 아이콘

이 독특한 트렌드는 Mac OS X 아이콘 디자인의 인기에서 기인합니다. 프로그래머가 Mac 응용 프로그램 용 웹 사이트를 시작하기 시작하면서 우리는 너무 자주 브랜딩에서 나타나는 엄청난 크기를 보았습니다. 따라서 이러한 추세는 iOS 개발자를 통해 받아 들여졌으며 이제는 현대적인 디자인 문화에 안락하게 자리 잡고 있습니다..

2012 년으로 접어 들면서 이러한 동향이 어떻게 공평하게 전개 될지 예측하기는 어렵습니다. 한편으로는 이러한 아이콘이 복잡하고 필요 이상으로 많은 공간을 차지할 수 있습니다. 그러나 우리는 iOS / OSX 앱이 부족한데도 미치지 못하고 디자이너는 여전히 완벽한 픽셀 아이콘 사양을 만들고 있습니다. 말할 것도없이 웹 디자이너는 이제 어떤 페이지 브랜딩에서든 대형 아이콘을 포함합니다! 방문자의 직접적인주의를 끄고 회사 이름을 짓는 좋은 방법입니다..

15. 과장된 하이퍼 링크

앵커 링크는 모든 웹 사이트에서 가장 중요한 5 가지 요소 중 하나입니다. 이들은 1990 년대부터 분명히 먼 길을 걷었으며 인기있는 디자인 동향은 기하 급수적으로 증가했습니다. 과장된 디자인이 우선시되는 시대로 이동하고있는 것으로 보입니다..

Patterntap에서 몇 가지 링크 예제를 확인하여 뛰어 내리고 눈을 뗄 수 있는지 확인하십시오. 표준 및 호버 효과 모두에서 하이퍼 링크 디자인에 대한 수많은 아이디어가 있습니다. CSS3 둥근 모서리, 텍스트 그림자 및 사용자 정의 글꼴 패밀리는 더욱 멋진 아이디어를 믹스에 추가합니다. 가장 좋아하는 예제 중 하나는 각 블로그 항목 퍼머 링크에서 짧은 동적 애니메이션을 사용하는 SimpleBits입니다..

결론

이 아이디어는 내가 2011 년 내내 우선 순위를 얻는 것을 보았던 인기 트렌드 중 일부에 지나지 않습니다. 멋진 웹 디자인은 항상 포커스와 사용자의 의도를 최우선으로합니다. 이러한 철학은 2012 년으로 갈 것 같지 않지만 레이아웃을 만들고 데이터를 표현하는 방법은 항상 변합니다. 의견 나누기 영역에서 생각이나 질문을 알려주세요..