Web Design: 10 Hottest Trends To Watch Out For in 2013

Web Design: 10 Hottest Trends To Watch Out For in 2013

또, 해외사이트 보다가 좋은 내용이 있어서 퍼왔습니다. ^^
원래 20개인데;; 너무 귀찮아서 10개만 올립니다.;;; 원문사이트 가서 보셈;

역시 번역은 구글번역기를 통했습니다.

원문사이트 보기

All throughout 2012 there has been an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012. Now we can see many of these ideas have come to fruition, and even adopted further increasing levels of novelty. In this article I would like to delve into 20 more design trends for the new 2013 year.

모든 2012 년을 통해 새로운 웹 디자인 트렌드의 거대한 파도가 있었다. 너희 중 몇은 2012 년 들어, 웹 디자인 트렌드에 내 이전 기사를 기억하고 있을지도 모릅니다. 이제 우리는 이러한 아이디어의 많은 결실에 와서 또 신규성 더욱 증가 수준을 채용하고 볼 수 있습니다. 이 기사에서는 새로운 2013 년을위한 20 개 이상의 디자인 트렌드를 탐구하고 싶습니다.

The design influence is merely a reflection of our culture and expectations for user interfaces. Ideally these trends represent favorable ideas in the web design community. However designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.

디자인의 영향은 단순히 우리의 문화와 사용자 인터페이스에 대한 기대를 반영하고 있습니다. 이상적으로 이러한 경향은 Web 디자인 커뮤니티에 유리한 생각을 나타냅니다. 그것은 설계 조건에 올 때 그러나 디자이너는 항상 자신의 의견을 가지고 있기 때문에, 소금 알갱이로, 이러한 아이디어를 가지고 간다.

If you are interested, keep your eyes peeled for examples of these trends and techniques.

당신이 관심이 있다면, 당신의 눈은 이러한 동향 및 기술의 예는 껍질을 벗겨주세요.

1. Responsive Layouts

This topic was my first point in the 2012 trend article, however I feel that responsive web design has been changing to ultimately come to a threshold where layouts are designed to match all forms of digital media. The idea is to support all devices from laptops, desktops, smartphones, tablets, and anything released in the future.

이 항목에서는 2012 년의 트렌드 기사에서 나는 첫 번째 지점이었다, 그러나 나는 민감한 Web 디자인이 궁극적으로 레이아웃이 디지털 미디어의 모든 양식에 일치하도록 디자인 된 임계 값 오는 변화 해오고 있다고 느끼고 있습니다. 아이디어는 노트북, 데스크탑, 스마트 폰, 타블렛, 그리고 미래에 출시 된 무엇에서 모든 장치를 지원하는 것입니다.

(Image Source: Chris Jennings)

You could think of this trend more like a uniform web design where the goal is to have a single set of codes which run perfectly on all environments. Responsive websites are often thought to cater towards mobile browsers, but that isn’t the sole purpose.

당신은 더 목표는 모든 환경에서 완벽하게 실행되는 코드의 단일 집합을 가지고있다 균일 한 Web 디자인처럼,이 경향을 생각할 수 있습니다. 레스 폰 시브 Web 사이트는 종종 휴대 전화의 브라우저를 향해 대응하기 위해 생각했지만, 그것이 유일한 목적은 아니다.

You can have a responsive website which also adds brilliant illustrations and graphics into the layout when the browser window is larger.

또한 브라우저 창이 큰 레이아웃에 선명한 그림 또는 그래픽을 추가 응답 웹 사이트를 가질 수 있습니다.

The big idea here is to think about website design as a single canvas which is dynamic and fluid by nature. CSS3 media queries allow developers to customize layouts based on limited or expanded screen real estate. Use this to your advantage and see how other designers are using it as well!

여기에서 큰 아이디어는 역동적이고 자연 유체이다 단일 캔버스처럼 웹 사이트 디자인을 생각하는 것입니다. CSS3 미디어 쿼리를 사용하면 개발자는 한정되어 있고, 확장 된 화면의 부동산을 기반으로 레이아웃을 사용자 정의 할 수 있습니다. 당신의 이점에 이것을 사용하여 다른 설계자뿐만 아니라 그것을 사용하는 방법을 봐!

2. Retina Support

Along with responsive support for website layouts I have also seen a dramatic rise in people building for retina devices. Apple first engineered this idea with the iPhone 4 and has since applied this screen display onto their other devices, including the iPad and some MacBooks.

웹 사이트의 레이아웃에 대한 신속한 지원과 함께 나 또한 망막 디바이스 용으로 구축하는 사람들의 극적인 증가를보고 왔습니다. Apple이 처음 iPhone4에서이 아이디어를 디자인하고 이후 iPad 및 일부 MacBook를 포함하여 다른 장치에이 화면을 적용하고 있습니다.

Retina screens are basically twice as dense as any average LCD. So they are the same number of physical pixels, but digitally twice as many pixels can be fitted into the same physical space.

망막 화면은 기본적으로 어떤 평균적인 LCD의 배 조밀하다. 그래서 그들은 실제 화소 수가 같지만, 디지털 배의 화소가 동일한 물리적 공간에 감합 할 수있다.

This means pixel-perfect web designers supporting retina devices will need to create two sets of images. First you need to sample your image at double the resolution, then save a “standard” version at half the size. The larger image will be scaled down to the standard resolution and will look very crisp on retina screens.

이것은 망막의 장치를 지원하는 픽셀의 완벽한 웹 디자이너가 이미지의 두 세트를 작성해야한다는 것을 의미합니다. 먼저 두 배의 해상도로 이미지를 샘플링 할 필요가 있고, 절반 크기로 "표준"버전을 저장합니다. 큰 이미지는 표준 해상도로 축소되고 망막 화면에서 매우 선명합니다.

One of my favorite tools for responsive web design is retina.js. This is a JavaScript library for automatically displaying @2x retina copies of image whenever your user is browsing on a retina device.

민감한 Web 디자인에 대한 내 좋아하는 도구 중 하나가 retina.js입니다. 이것은 사용자가 망막 장치에서 볼 때마다 자동으로 이미지 @ 배 망막 사본을 표시하기위한 JavaScript 라이브러리입니다.

Although this won’t detect CSS background image, it is still the most handy resource as opposed to coding everything in media queries.

이것은 CSS 배경 이미지를 발견하지 않지만, 그것은 미디어 쿼리 모두를 코딩하는 것이 아니라, 아직 대부분의 유용한 리소스입니다.

3. Fixed Header Bars

Using the CSS position: fixed; property is a great way to staple a header bar onto your website. As visitors scroll down your page this will offer constant support for navigation and a trip back to the home page. This trend has been around for a while but now we are seeing this in full force.

CSS의 위치를 사용 : 고정; 속성은 당신의 웹 사이트에 주식 헤더 바 가장 좋은 방법입니다. 방문자가 당신의 페이지를 아래로 스크롤하면 이것은 일정한 탐색을위한 지원 또는 홈페이지에 여행 가방을 제공합니다. 이러한 경향은 잠시 동안 주변되었지만, 지금 우리는 전군에 이것을보고있다.

Fixed headers are so interesting because they can work on practically any website. This includes social networks, blogs, and even design studios or private companies. The design is very trendy and looks great paired with most layouts. But aside from the aesthetics, this bar also provides an exceptional user experience without needing to look very far to navigate the website.

그들은 거의 모든 웹 사이트에서 작동 할 수 있도록 고정 헤더는 매우 흥미 롭습니다. 이것은 소셜 네트워크, 블로그, 심지어 디자인 스튜디오와 민간 기업을 포함한다. 디자인은 아주 유행이고 대부분의 레이아웃에서 훌륭한 한쌍으로 보인다. 그러나 겨드랑이 미학에서이 바도 웹 사이트를 탐색하는 데 매우 멀리 보이는없이 뛰어난 사용자 경험을 제공합니다.

4. Large Photo Backgrounds

Photographers or even fans of photography will definitely enjoy this design trend. I have seen countless showcases discussing the ideas of big oversized photography in the background. It’s an excellent way to capture your visitor’s attention and it can look great when done properly.

사진사, 또는 사진 촬영 팬들은 확실히이 디자인 트렌드를 즐길 수 있습니다. 나는 백그라운드에서 큰 대형 사진 촬영 아이디어를 논의하는 수많은 쇼케이스를보고 왔습니다. 그것은 당신의 방문자의 관심을 캡처하기 위해 제대로 수행 될 때, 그것은 놀라운 볼 수있는 좋은 방법입니다.

(Image Source: davidia-int.hr)

I am often fond of big photographs since they can be pleasing on the eyes. When blended into your layout, this design technique can give your website a major edge in marketing. On this topic I always consider the ever popular design portfolio of Kerem Suer. This unique background photo behaves as custom branding for everybody who lands on his website.

그들은 눈에 기쁘게 수 있기 때문에, 큰 사진 자주 좋아해요. 레이아웃에 혼합하면이 설계 방법은 당신의 웹 사이트 마케팅의 주요 가장자리를 줄 수 있습니다. 이 항목에서는 난 항상 케레무 제소의 지금까지 인기있는 디자인 포트폴리오를 생각한다. 이 독특한 배경의 사진은 누구를위한 맞춤 브랜드로 행동 명이 그의 웹 사이트에 토지.

5. CSS Transparency

The new CSS3 properties have allowed for opacity edits on any webpage element. This means you have control to generate transparency in any modern web browser – no Photoshop required! This trend of web design transparency was recently discussed on Codrops with some very enlivening talking points

불투명도는 모든 웹 페이지 요소에 편집을위한 새로운 CSS3 속성을 허용하고있다. 이것은 현대의 Web 브라우저에서 투명성을 생성하기위한 컨트롤을 가지고 있다는 것을 의미합니다 - 아니 Photoshop은 필요 없습니다! Web 디자인의 투명한 이러한 경향은 최근 몇 가지 매우 북돋워 이야기 포인트와 Codrops에서 논의되었습니다

One excellent example is on the Squarespace Blog where the central wrapper is given a background: transparent property. Typically this can be used to generate some other background from repeating http://media02.hongkiat.com/web-design-trend-2013/, or to setup the background using internal elements.

transparent 속성 : 한 우수 사례는 중앙 래퍼가 백그라운드가 주어 Squarespace 블로그에 있습니다. 일반적으로, 이것은 http://media02.hongkiat.com/web-design-trend-2013/ 반복에서 다른 백그라운드를 생성하고 내부 소자를 이용한 백그라운드를 설정하는 데 사용 할 수있다.

Another interesting design technique for manipulating transparency is through rgba() color syntax. When designing in CSS you have the option of specifying colors using Red, Green, Blue, and Alpha-Transparency values. So using the syntax rgba(255,255,255,0.6) would generate the color white at only 60% opacity. This is certainly a design trend we can expect continuing into 2013 and beyond.

투명도를 조작하기위한 또 다른 흥미로운 설계 방법은 RGBA ()를 통해 색상 구문입니다. CSS로 디자인 할 때, 빨강, 녹색, 파랑 및 알파 투명도 값을 사용하여 색상을 지정하는 옵션이 있습니다. 구문 RGBA (255,255,255,0.6)를 사용하면 불과 60 % 불투명도로 색이 흰색 생성되기 때문에. 이것은 확실히 우리는 2013 년 이후 계속해서 기대할 수있는 디자인의 경향이다.

6. Minimalist Landing Pages

Anybody who has spent some time researching markets will understand that selling on the Internet is just plain smart. You have access to a large consumer base from anywhere in the world. Additionally you can sell products which are not even physical, such as videos or creative resources.

시장을 연구하고, 몇 시간을 보냈어요 모두가 인터넷에서 판매는 단순한 스마트임을 이해하는 것이다. 당신은 전세계 어디에서나 큰 소비자 기반에 대한 액세스 권한을 가지고있다. 또한 이러한 비디오 및 창조적 자원으로도 실제하지 제품을 판매 할 수 있습니다.

Creating a landing page online is all about capturing new leads for your product or service. New trends are following the idea of minimalism: keep everything simple and focus on your core product.

온라인 랜딩 페이지를 만들 때 당신의 제품 및 서비스에 대한 새로운 단서를 캡처하는 모든 내용입니다. 새로운 트렌드는 미니멀리즘의 아이디어를 다음과 같습니다. 모두 심플하게 지키고 당신의 핵심 제품에 초점을 맞추고 있습니다.

This is exemplified on the PictoPro webpage which offers a beautiful resource for cheap icons. The page is fairly crafty using vector icons as a background effect. But all the text is easy to read and it’s basically a one-click checkout process. You cannot get much simpler than that.

이것은 저렴한 아이콘의 아름다운 자원을 제공하고 있습니다 PictoPro Web 페이지에 예시되어있다. 페이지에는 백그라운드 효과로 벡터 아이콘을 사용하여 매우 교활입니다. 그러나 모든 텍스트는 읽기 쉬우 며, 그것은 기본적으로 한 번의 클릭으로 점검 과정입니다. 당신은 그것보다 훨씬 쉽게 얻을 수 없습니다.

7. Digital QR Codes

The abundance of mobile smartphones has led to a surge of QR Code apps. This stands for Quick Response Code and has developed from the older UPC barcodes. You will find these tagged everywhere from restaurants to event venues and automobile sales lots.

모바일 스마트 폰의 풍부한 QR 코드 앱의 급증으로 이어지고있다. 이것은 빠른 응답 코드의 약자로, 오래된 UPC 바코드에서 개발했습니다. 당신이 레스토랑에서 행사장과 자동차 판매장 어디서나 태그 된 이들을 찾을 수 있습니다.

But very recently I have found a couple of websites with these codes built right into the design. This isn’t something you would normally consider since they are often found in print. But QR codes could become trendy as data transmission becomes quicker over time. You can see a brilliant example of this technique on Keith Cakes contact page.

그러나 최근 내가 바로 디자인에 포함 된 이러한 코드 Web 사이트의 커플을 발견했다. 이것은 그들이 수시로 프린트에서 발견되고 있기 때문에 일반적으로 고려하는 것은 아닙니다. 데이터 전송은 시간이 지남에 빠를수록 그러나 QR 코드가 유행이 될 가능성이 있습니다. 당신은 키스 케이크의 연락처 페이지에서이 기술의 화려한 예를 볼 수 있습니다.

8. Social Media Badges

Marketing is one of the ultimate determining factors in a website’s success or failure. Social media and viral marketing are exploding in many different websites. Digg used to reign popular in this domain but has since conceded to rivals like Reddit. But these are not the only two popular resources for sharing stories online.

마케팅은 웹 사이트의 성공 또는 실패의 궁극적 인 결정 요인의 하나이다. 소셜 미디어와 바이러스 마케팅은 다양한 웹 사이트에서 폭발되어 있습니다. Digg이 도메인에서 인기 군림하는 데 사용되지만 다음 붙여 같은 라이벌 인정했습니다. 그러나 이들은 온라인 공유의 이야기를위한 유일한 2 개의 인기있는 리소스가 없습니다.

(Image Source: WebTreatsETC)

You can check practically any social community for sharing badges and will likely find a great solution. You can position these badges pinned to blog posts and articles anywhere in your layout. These are still used actively by readers and fans who want to share content quickly on places like Facebook, Twitter, or even LinkedIn.

당신이 공유 배지 위해 실질적으로 모든 사회 공동체를 찾을 수 아마 좋은 해결책을 찾을 수 있습니다. 당신은 게시물과 어디서나 레이아웃 기사를 블로그에 고정이 배지를 배치 할 수 있습니다. 이들은 지금도 Facebook이나 Twitter 또는 LinkedIn과 같은 장소에 신속하게 컨텐츠를 공유하려는 독자와 팬에 의해 적극적으로 사용되고 있습니다.

Below I have put together a small list of social media badges you can try in your own website layouts

나는 소셜 미디어 배지의 작은 목록을 함께 넣어 가지고 아래에는 자신의 웹 사이트 레이아웃에서 시도 할 수 있습니다

• StumbleUpon Badges
• Google +1 Button
• Pinterest Buttons
• LinkedIn Share Badge
• Hacker News Vote Badge
• Dzone Vote Buttons
• Free Social Media Icon Sets – Best Of
• 100+ Remarkably Beautiful Twitter Icons And Buttons

9. Detailed Illustrations

Newer design trends are all about catching and holding one’s attention. I feel that illustrations perform this task brilliantly. The problem is finding a designer who can make such impeccable works of art, or even teaching yourself.

새로운 디자인 트렌드는 사람의 관심을 끌기 및 유지에 대한 모든이다. 나는 그림이보기 좋게이 작업을 수행하는 것을 느낍니다. 문제는 예술과 같은 소견이없는 작품을 만들 수있는 디자이너를 찾거나, 혹은 스스로 가르치고 있습니다.

(Image Source: twogiraffes.com)

Illustrations can be used in many various ways to bring about different moods in your website. Look around the Internet, and you will find many different website galleries and showcases focusing on digital illustrations. You can see these artistic works eventually blend into its website branding almost perfectly. MailChimp is probably the most definitive example with its trademark chimp mail carrier.

일러스트가 자신의 사이트에 다양한 기분을 가지고 많은 다양한 방법으로 사용할 수있다. 인터넷 주위를보세요, 당신은 디지털 그림에 초점을 맞춘 다양한 웹 사이트의 갤러리와 쇼케이스를 찾을 수 있습니다. 당신은 이러한 예술 작품은 궁극적으로 거의 완전히 그 웹 사이트 브랜드에 용해 볼 수 있습니다. MailChimp 아마 그 상표 침팬지 메일 캐리어에서 가장 결정적인 예입니다.

10. Infinite Scrolling

Infinite scroll loading has been around for at least a few years. But this technique hadn’t really hit mainstream until this year and I’m sure it will continue into 2013.

무한 스크롤로드는 적어도 몇 년 전부터 나돌고있다. 그러나이 기술은 정말 올해까지 주류를 치고 않았다고 난 2013에 이어 확신합니다.

Pinterest has adopted this loading technique for their layout and it works beautifully. You can search anything and the results page will continually load as you scroll down. Pagination is basically a non-issue and doesn’t even work as a detriment into the user experience. Talk about designing for simplicity!

Pinterest는 레이아웃이로드 방식을 채택하고있어, 그것이 훌륭하게 작동합니다. 당신은 무엇을 검색 할 수 있으며, 스크롤 다운하면 결과 페이지에는 지속적으로로드됩니다. 페이지 나누기는 기본적으로 비 문제이며, 심지어 사용자 환경에 불이익으로 작동하지 않습니다. 단순화를 위해 디자인에 대해 이야기!

But another great example and possibly my favorite example is on Tumblr. You can blog and reblog photos from other people you follow which all appear on your Dashboard. So after logging into your account all the most recent posts will scroll infinitely down the page.

그러나 또 다른 좋은 예, 아마 내가 제일 좋아하는 예는 Tumblr에있다. 당신은 블로그, 모두가 당신의 대시 보드에 표시되는 당신이 따라 다른 사람의 사진을 리부로구 수 있습니다. 그래서 당신의 계정에 로그인 한 후 모든 최신 기사는 페이지 하단 무한 스크롤합니다.

This is an excellent technique which does not work on every layout, but for the right websites this can look and behave phenomenally.

이것은 모든 레이아웃에서 작동하지 않습니다 좋은 방법이지만, 오른쪽의 웹 사이트를위한, 이것은보고 급격하게 행동 할 수 있습니다.