• The Top 5 Website UX Trends of 2012

  • 2012년 웹사이트 UX 트랜드 상위 5위

Image of 1829 article
  • User interface techniques continued to evolve in 2012, often blurring the lines between design, usability, and technology in positive ways to create an overall experience that has been both useful and pleasurable.
  • 사용자 인터페이스 기술들은 편리하고 즐길 수 있는 총체적 경험을 만들기 위해 가끔씩 디자인과 사용성, 기술이 긍정적인 면에서 경계가 모호해지기도 했지만 2012년에도 계속적으로 발전하였습니다.
  • Infinite scrolling, for example, is a technological achievement that also helps the user by enabling a more seamless experience. Similarly, advances in Web typography have an aesthetic dimension but also represent a movement toward greater clarity of communication.
  • 예를 들어, 무한 스크롤은 기술적인 업적으로 더 매끈한 경험을 가능하게 함으로서 사용자에게 도움이 되고 있습니다. 이와 유사하게, 웹 타이포그래피에서의 진보는 미학적 차원만이 아닌 커뮤니케이션의 최대한 명확성을 향한 움직임도 보여졌다는 것입니다.
  • 1. Single-Page Sites

  • 1. 단일 페이지 사이트

Image of 1829 article
  • Single-page websites are everywhere. Big background images, rich illustrations, and animation techniquesare being used to tell stories, entertain, and get a message across loud and clear. Free of the limitations of traditional website architecture, creative and beautiful one-pagers are flourishing. Two of our favorite single-page sites are Jess and Russ and Ben the Bodyguard. (Several other nice examples can be found here.) As with any trend, people want to emulate it, even if it's not the appropriate solution. This can easily lead to homogenization of style and, in some cases, poor execution. When done correctly, however, the single page website works very well.
  • 한 페이지 사이트는 모든 곳에 있습니다. 커다란 배경 이미지와 다채로운 일러스트레이션, 애니메이션 테크닉들이 줄거리를 얘기하고, 재미를 주고, 메시지를 이해하기 쉽게 하기 위해 사용되고 있습니다. 전통적인 웹사이트 아키텍쳐가 가진 한계를 벗어나 창의적이고 아름다운 한 페이지 사이트들이 번창하고 있습니다. 우리가 좋아하는 단일 페이지 사이트 중 두개는 제시와 러스(Jess and Russ)와 바디가드 밴(Ben the Bodyguard)입니다(여기에서 멋진 예제들을 찾을 수 있습니다). 어느 트렌드이건 비록 적절한 해결책이 되지 않더라도 사람들은 모방을 합니다. 이로써 스타일이 단일화되는 경향이 생기며, 몇몇 사례에서 좋지 못한 결과를 낳기도 합니다. 하지만 올바르게 적용된다면 단일 페이지 웹사이트는 훌륭한 효과를 낳을 것입니다.
  • 2. Infinite Scrolling

  • 2. 무한 스크롤

Image of 1829 article
  • Infinite scrolling is familiar to everyone, even if they don't realize it. It works best for unstructured information; live feed style, sorted by time. Sites with lots of images—like Google images or Pinterest—make excellent use of this technique, but thoughtful implementation is important to prevent user frustration. Lookbook is another good example. By pairing infinite scroll with a floating right column and a "back to top" button, the site allows users to consume endlessly and still get to other parts of the site easily. Infinite scroll is not a "one size fits all" solution—there are plenty of complex factors to consider, and pagination may still be the best technique for search results, large lists, and e-commerce.
  • 무한 스크롤은 모두에게 친숙할 것입니다. 모르고 쓰고 있더라도 말이죠. 이것은 라이브 피드 스타일이나 시간순 정렬 같은 구조화 돼 있지 않은 정보에 적합 합니다. 구글 이미지나 핀터레스트(pinterest) 같이 이미지가 많은 싸이트들이 잘 활용하고 있습니다. 하지만 사용자들의 불편을 막으려면 신중한 구현이 중요합니다. 룩북(lookbook)이 또 다른 좋은 예입니다. 무한 스크롤과 함께, 오른쪽 컬럼에 플로팅과 "돌아가기" 버튼을 써서 사용자들이 계속 페이지를 스크롤하다가도 쉽게 싸이트의 다른 곳으로 이동할 수 있습니다. 무한 스크롤은 언제 어디서나 쓰면 좋은 솔루션이 아닙니다. 고려해야할 복잡한 요소들이 많이 있고, 검색 결과, 많은 리스트 그리고 이커머스에는 페이지 번호가 여전히 더 좋을 수 있습니다.
  • 3. Persistent Top Navigation or “Sticky Nav”

  • 3. 스티키 네비게이션

Image of 1829 article
  • Persistent menus are ideal for complex sites, long scrolling pages, or applications with toolbar functionality. Persistent menus can be distracting, so it's best to keep them slim and unobtrusive. A great example is New Zealand's tourism website, which features a navigation that collapses down to just the main sections, leaving plenty of real estate for the rest of the page. The Gmail Web interface also does it right by giving users a persistent toolbar with the most used actions.
  • 스티키 메뉴는 복잡한 사이트, 긴 페이지, 툴바 기능이 있는 어플리케이션에 적합합니다. 하지만 스티키 메뉴는 방해가 될 수도 있으므로, 얇고 단순하게 유지하는것이 좋습니다. 뉴질렌드 관광정보 사이트가 훌륭한 예 입니다. (스크롤 하면)네비게이션의 중요 부분만 남기고 접혀서, 페이지에 충분한 나머지 부분을 남겨줍니다. Gmail의 웹 인터페이스도 가장 많이 사용하는 기능만 남기는 스티키 툴바를 잘 구현하고 있습니다.
  • 4. The Death of Web 2.0 Aesthetics

  • 4. 웹 2.0 미학의 종말

Image of 1829 article
  • We've noticed a return to basics in visual design trends. A flat, clean, minimalist aesthetic with a focus on typography and information hierarchy has replaced the big, bright, juicy days of Web 2.0. A lot of websites and apps are even ditching graphical background images for pure CSS styles in order ensure a compelling experience across devices and resolutions. Our favorite recent visual designs include BasecampDropbox, and the Smashing Magazine redesign.
  • 시각 디자인은 기본으로 돌아가는 경향을 보이고 있습니다. 타이포그패피와 정보서열에 집중한 밋밋하고 깔끔한 미니멀 리스트적 미학이 크고 밝고 화려한 웹2.0의 미학을 대신하게 돼었습니다. 많은 웹사이트와 앱들이 다양한 기기와 해상도에 상관없는 강력한 경험을 사용자에게 주기위해 그래픽 배경이미지를 포기하고 순수 CSS를 택했습니다. 저희가 좋아하는 최근 디자인으로는 Basecamp, Dropbox, 와 Smashing Magazine의 새로운 디자인 이있습니다.
  • 5. Typography Returns

  • 5. 타이포그라피의 귀환

Image of 1829 article
  • Thanks to maturing font technologies and improved font rendering on most browsers and devices, designers have more typefaces to choose from and more control of their type. There is an increased awareness of the importance of content, and with it, using typography to effectively communicate a message. With mobile, responsive design, and more retina displays, typography will continue to be an important focus on the Web in the next few years. One of our favorite examples is The New Yorker, which uses a standard Web font (Times New Roman) for body copy, beautifully paired with display fonts for headings and navigation (Irvin, Neutra).
  • 폰트기술의 성숙과 대부분의 브라우저와 기기들의 폰트 랜더링 기술 발전으로, 디자이너들은 더 많은 타입페이스를 고를 수 있고, 타입을 더 많이 컨트롤 할 수있게 돼었습니다. 컨텐츠의 중요성과 효과적 의사전달을 위해 타이포 그라피의 사용에 대한 관심이 증가했습니다. 모바일 기기의 사용, *리스폰시브 디자인, 그리고 레티나 디스플레이 때문에 타이포 그라피는 향후 몇 년간 계속 중요한 관심 분야가 될 것입니다. 좋은 예로는 뉴요커(New Yorker)가 있습니다. 이 사이트는 바디는 표준 웹폰트 (Times New Roman)와 헤딩과 네비게이션은 Irvin, Neutra을 함께 사용하고 있습니다.
  • note icon
    사용자의 사용환경에 따라 쓰기 쉽도록 유연하게 페이지 레이아웃이나 네이게이션이 변화하는 디자인."
  • In 2013, we’ll be looking for more examples of sites that improve user experience by judiciously balancing beauty, utility, and technology.
  • 2013년에도 미, 기능 그리고 기술에 적절한 균형을 맞추어 사용자 경험을 발전시키는 더 많은 사이트들을 찾아보겠습니다.
1 Comment
junuki

junuki • Jan 10th, 2013

thanks for sharing great article! i edited a note - Responsive design "사용자의 사용환경에 따라 쓰기 쉽도록 유연하게 페이지 레이아웃이나 네이게이션이 변화하는 디자인."