콘텐츠
- 01. Ableton
- 02. Adobe 및 HTML
- 03. 이벤트 분리
- 04. BBC 뉴스
- 05. 빌드 2012
- 06. 목차
- 07. CSS 트릭
- 08. 카레
- 09. dConstruct 2012
- 10. Disney.com
- 11. Fray, 3 호
- 12. Gov.uk
- 13. Heroku 상태
- 14. 로타 니에미 넨
- 15. 마이크로 소프트
- 16. 다각형
- 17. 폭동
- 18. 스키니 타이
- 19. 스타 벅스
- 20. Tattly
- 21. 다음 웹
- 22. 디자인의 모양
- 23. 시간
- 24. 유나이티드 픽셀 워커
- 25. 노트르담 대학교
- 마음에 드 셨나요? 읽어보세요!
2012 년에는 반응 형 웹 디자인이 실제로 주류가되었습니다. A List Apart에 대한 Ethan Marcotte의 주요 기사가 나온 지 2 년이 지난 지금은 더 이상 단순한 개념이 아니 었습니다. 우리는 반응 형 웹 디자인의 주요 조명 중 일부에게 지난 12 개월 동안 출시 된 최고의 반응 형 웹 사이트를 선택해달라고 요청했습니다. 여기에 그 결과물이 있습니다.
클라이언트가 목을 쉬지 않고 자유롭게 돌아 다닐 수있는 개인 프로젝트부터 Microsoft, Disney, Currys 및 Starbucks와 같은 혁신적인 클라이언트 작업과 BBC, The의 미래 친화적 인 사내 작업에 이르기까지 인상적인 믹스입니다. 다음 웹 및 시간. 여기에 알파벳순으로 있습니다 ...
01. Ableton
"Futura가 그렇게 용감하게 사용하는 것을 본 적이 없습니다!" 베를린에 본사를 둔 음악 소프트웨어 개발자 인 Ableton을위한 Edenspiekermann의 작업에 대해 디자이너, 발표자 및 작가 Elliot Jay Stocks를 찬사합니다. "하지만 대담한 이미지와 생생한 색상 팔레트가 결합되어 작동합니다."
에든버러에 본사를 둔 모바일 디자인 컨설팅 업체 Yiibu의 디자이너이자 공동 소유주 인 Stephanie Rieger는 다음과 같이 동의합니다. "이 사이트는 화려하고 재미 있고 유쾌한 브랜드 사이트입니다. 사이트의 일부는 약간 무겁지만 청중을 감안하면 , 브랜드의 본질과 음악과 비디오를 통합해야 할 필요성 때문에 그들은 훌륭한 일을 해냈다 고 생각합니다. 소프트웨어 비교 테이블에서 열 레이블을 회전하는 것과 같은 작은 창의적이고 실용적인 디자인 터치를 찾아야합니다. 작은 화면에 더 잘 맞습니다. "
02. Adobe 및 HTML
"Adobe의 웹 관련 제품을 소개하는이 사이트는 실제로 적응 형 레이아웃 디자이너이자 개발자 인 Stephen Hay는 실제 반응 형 디자인이 아니라 "성능이 크게 향상 될 수 있으며 모바일 페이지 상단의 공간을 대부분 차지하는 탐색 기능이 마음에 들지 않습니다.
내가 여기서이 사이트를 언급 한 이유는 인쇄 디자인 소프트웨어의 거물 인 Adobe가 최신 웹과 디자이너의 요구를 인식하기 시작했다는 적응 형 레이아웃과 콘텐츠 신호 때문입니다. 디자인에 뿌리를두고있는 Adobe는이 사이트를 그래픽 적으로 매력적이고 완전한 반응 형 디자인으로 바꿀 수있는 기회를 갖게되었습니다. "
03. 이벤트 분리
웹 개발자이자 저자 인 Tim Kadlec은 "새롭게 재 설계된 An Event Apart는 화려할뿐만 아니라 훌륭하게 제작되었습니다."라고 말합니다. 반응 형 디자인 구현. "[개발자들은] 가능한 경우 SVG 아이콘을 사용하고, 필요한 경우 PNG로 대체합니다.
이미지가 보일 때 지연로드됩니다. 예를 들어 이벤트 페이지를 아래로 스크롤하면 스피커 이미지가 미묘하게 페이드 인되는 것을 볼 수 있습니다.이 모든 것이 더해 매력적이고 깔끔한 디자인입니다! "
04. BBC 뉴스
Clearleft의 디자이너이자 .net의 월간 Responsive 칼럼의 저자 인 Paul Robert Lloyd는 "2012 년 최고의 반응 형 사이트는 BBC News 모바일 웹 사이트였습니다."라고 말합니다. "아직 레이아웃 측면에서 데스크톱 브라우저로 확장되지는 않았지만 진정한 의미에서 반응합니다.
"모바일 우선 정신으로 설계되어 다양한 장치 특성을 아름답게 충족하도록 확장됩니다. 점진적 향상의 환상적인 예입니다. 반응 형 이미지에 대한 논의가 많지만 BBC의 접근 방식은 완전히 실용적입니다. 마크 업은 단일 이미지 만 참조합니다. , 즉 헤드 라인 스토리의 경우 조건부로드는 더 많은 기능이있는 장치 만 다른 스토리에 최적화 된 이미지를 수신한다는 것을 의미합니다.이 사이트는 모든 장치에서 액세스 할 수있을뿐만 아니라 엄청나게 빠릅니다.
"내년에는 비주얼 디자인과 레이아웃보다 성능에 더 초점을 맞추고 싶습니다. 그런 점에서 BBC News 모바일 사이트는 다른 사람들이 따라야 할 좋은 예입니다."
05. 빌드 2012
리드 디자이너이자 Paravel의 1/3 인 Reagan Ray는 "올해 가장 좋아하는 부분 중 하나는 Andy McMillan과 Kyle Meyer가 새로운 Build 컨퍼런스 사이트를 위해 어떤 아이디어를 내놓는 지 보는 것입니다."라고 말합니다.
"그들은 2012 년 버전에 반응했고 지금까지 최선의 노력이라고 생각합니다."
06. 목차
"콘텐츠 매거진은 Ethan Marcotte 자신이 크리에이티브 디렉터로서 불공정 한 이점을 가질 수 있습니다.하지만 아무도 내 선택이 공정해야한다고 말하지 않았습니다."라고 보스턴의 Filament Group에서 일하며 Responsive Images Community의 창립자이자 회장 인 Mat Marquis는 말합니다. W3C 그룹입니다.
"콘텐츠는 아름다운 타이포그래피와 전체적인 디자인을 자랑합니다. 예상 한대로 어떤 크기로든 콘텐츠를 앞과 가운데로 유지합니다. 디자인은 중단 점에 따라 다른 방식으로 사본을 감싸는 호별 삽화로 뒷받침됩니다. 삽화는 디자인을 향상 시키되주의를 산만하게하지 마십시오. 읽는 것은 진정한 즐거움이며 이것이 바로이 '웹 디자인'에 관한 모든 것입니다. "
07. CSS 트릭
"다시 말하지만, Chris Coyier의 이름이 적힌 사이트를 선택하는 것은 속임수처럼 느껴지지만 공정한 것입니다. 그 사람은 야수이고이 재 설계로 엄청난 일을했습니다."라고 Mat Marquis는 웃습니다. "Chris는 자신의 사이트에서 엄청나게 많은 유용한 정보를 관리하고 있으며 모든 화면 크기에서 논리적이고 사용할 수있을뿐만 아니라 많은 개성을 가진 디자인을 사용합니다.
"여기서 훌륭한 언급은 빠른 데모와 테스트 케이스를 만드는 데 매우 유용한 도구 인 Chris의 codepen.io (편집시 아직 완전히 반응하지 않음)입니다. 거기에 몇 가지 놀라운 작업이 있습니다."
08. 카레
"Currys는 많은 에이전시 및 개인 사이트가 가지고있는 디자인 수준이라고 생각하는 수준이 아닐 수 있지만 반응 형 디자인 기술을 폭넓게 활용하는 데 그 중요성을 고려하여 선택하고 있습니다. 최초의 진정한 대규모 전자 상거래 사이트입니다. 저는 그것이 반응 형 디자인을 수용하는 것을 봤습니다. "Offroadcode의 크리에이티브 디렉터 인 James Young이 설명합니다.
"모든 형태와 크기의 방대한 양의 콘텐츠와 제품을 처리하는 동안 다양한 장치에서 좋은 경험을 제공하며 사용하기 쉬운 구매 프로세스가 포함되어 있습니다. Currys 웹 팀. "
09. dConstruct 2012
"놀라운 스피커 라인업 외에도 dConstruct 사이트 자체는 아름답게 제작 된 반응 형 경험입니다."라고 오하이오에있는 소규모 대행사 인 Sparkbox의 사장 인 Ben Callahan은 말합니다.
"내가 가장 좋아하는 사이트 세부 정보는 내비게이션입니다. 더 작은 뷰포트 경험을 위해 추가 된 아이콘을 참고하십시오. 이것은 터치 대상 영역에 대한 실제주의가 주어 졌음을 보여 주며 더 작은 장치에서 사이트를 보는 사용자에게 암시 적 가치가 있음을 나타냅니다. – 모바일 중심의 사고 방식입니다. @clearleft를 잘하셨습니다! "
10. Disney.com
Filament Group의 웹 디자이너 / 개발자 인 Scott Jehl은 "Disney의 미디어 복잡성이있는 사이트가 반응을 보였을 때 웹에서 멀티미디어 콘텐츠를 제공하기위한 접근 방식의 유효성을 실제로 보여주었습니다."라고 회상합니다. "사이트의 절제되고 깔끔한 디자인은 사이트에서 인라인으로 볼 수있는 디즈니 영화 및 TV의 풍부한 이미지와 Ajax 및 history.pushState 미묘하고 흔들리지 않는 페이지 전환을 만듭니다.
"이 사이트는 또한 터치 장치 용 제스처 기반 캐 러셀 및 작은 화면의 오프 캔버스 페이지 푸시 내비게이션과 같은 멋진 상황 별 상호 작용을 계층화합니다."
11. Fray, 3 호
Scott Jehl은 이렇게 회상합니다. " '웹의 오리지널 스토리 텔링 잡지'인 Fray 3 호는 제가 올해 본 반응 형 디자인 중 가장 좋아했던 반응 형 디자인이었습니다. "표지 아트 워크의 디자인 요소가 레이아웃 전체에서 재사용되는 아름다운 반응 형 표지 디자인 외에도, 이번 호의 각 기사에는 인쇄 잡지에서 볼 수있는 것과 같이 고유 한 맞춤형 아트 지향 디자인이 있지만 빈도는 낮습니다. 웹에서.
"대부분의 레이아웃은 '중괄호'기사의 왜곡 된 제목과 바이 라인, 전체 인용문을 상쇄하는 것과 같이 미세하게 조정 된 CSS를 포함하여 아름다운 효과를냅니다. 경고 : 사이트의 주제는 성인을 대상으로합니다."
12. Gov.uk
Stephen Hay는 다음과 같이 말합니다. "Gov.uk 디자인은 시각적으로 단순하지만 (실제로 이미지가 없음) 그 의도가 무엇인지는 분명합니다. 정보를 빠르게 찾을 수 있도록 도와주는 것입니다. 정부 웹 사이트의 경우 이것은 쉬운 작업이 아닙니다.이 사이트가 반응 형일뿐만 아니라 신중한 콘텐츠와 구조가 사용되는 장치에 관계없이 더 명확한 사용자 경험으로 이어질 수있는 완벽한 예입니다.
"정부가 정보를 액세스 할 수 있도록 제공하는 것이 매우 중요합니다.이 사이트의 단순성은 다른 정부 기관이 따르는 모범이 될 것입니다."
13. Heroku 상태
두 번째로 선택한 Scott Jehl은 "Heroku는 웹 응용 프로그램을위한 배포 서비스이므로이 사이트는 매우 기술적 인 사용자를 대상으로합니다."라고 말합니다. "Heroku의 상태 사이트는 현재 사고에 대한 상태 알림과 보고서 타임 라인을 통해 서비스의 가동 시간을 모니터링하는 장소 일뿐입니다.
"작은 화면 프리젠 테이션은 보수적이지만 깔끔하게 디자인 된 목록 프리젠 테이션으로 매우 기능적이고 의미가 풍부합니다. 그러나 더 넓은 뷰포트에서는 타임 라인이 수직 데이터 시각화로 변합니다. 여기서 사건은 매력적인 HTML5 캔버스를 통해 시간 지점에 연결됩니다. -그린 라인으로 콘텐츠를 더욱 매력적으로 만듭니다. "
14. 로타 니에미 넨
Elliot Jay Stocks는 "Lotta의 영리한 사이트는 화면의 왼쪽과 오른쪽이 인접한 섹션의 콘텐츠를 애타게하기 때문에 탐색을 장려합니다."라고 말합니다.
"저는 이것이 다른 너비에서 깨질 것으로 예상했지만 동작은 항상 일관되게 유지되며 미디어 쿼리를 JavaScript와 결합하여 개별 열을 합리적으로 스택하고 크기를 조정합니다."
15. 마이크로 소프트
Ben Callahan은 "새로운 Microsoft 사이트는 여러 가지 이유로 저에게 흥미로 웠습니다."라고 밝혔습니다. "마이크로 소프트와 같은 거대 기업이 이런 식으로 반응 형 웹 디자인을 뒷받침하는 것을 보는 것은 지난 2 년 동안 우리가 얼마나 발전했는지를 보여줍니다.이 디자인은 Metro 스타일을 명확하게 수용하고 대부분의 사람들에게없는 수준의 청결 함과 공간을 제공합니다. 다양한 뷰포트 및 상호 작용 모델에서 사용할 수 있도록 만드는 데 실질적인 도전이 될 수있는 상당한 양의 탐색도 있습니다. 드롭 다운이 뒤에 있다는 사실이 마음에 듭니다. 딸깍 하는 소리 또는 접촉 [이벤트] 반대로 : 호버. 더 큰 해상도에서도 가까운 장래에 더 많은 것을 보게 될 것입니다. @paravelinc 잘했습니다! "
사이트에서 일한 레이건 레이는 "트렌트와 데이브는 패러 벨 경적을 울리기에는 너무 겸손합니다. 그래서 그렇게 할 것입니다. 우리는 마이크로 소프트에게 이처럼 흥미 진진한 시간에 작은 역할을하게되어 기뻤습니다. 좋은 예라고 생각합니다." 반응 형 디자인을 채택한 대기업의
16. 다각형
"Polygon은 큰 형 (IGN, Gamespot 등)을 부끄럽게 만드는 엄청나게 풍부한 반응 형 게임 사이트입니다."Paravel의 수석 개발자이자 Chris Coyier와 함께 ShopTalk의 공동 호스트 인 Dave Rupert는 칭찬합니다. "큰 그래픽은 내 게이머의 감각을 자극합니다. 내부 게시물은 아트 디렉션과 반응 형 아키텍처의 놀라운 조화입니다."
17. 폭동
Elliot Jay Stocks는 다음과 같이 설명합니다. "단순하고 중앙에있는 한 페이지 사이트는 반응 형 디자인으로 쉽게 변환되는 것처럼 보일 수 있지만 모든 것을 원활하게 재조정하려면 기술, 고려, 예리한 눈이 필요합니다. Riot의 사이트가 바로 그 일입니다."
18. 스키니 타이
Ben Callahan은 "저는 80 년대 남은 음식을 어딘가에 보관함에 넣는 것 외에는 아무렇지도 않은 관계를 가지고 있지 않지만이 사이트가 멋지게 실행되었다고 생각합니다."라고 말합니다. "또한 더 복잡한 사이트에서 반응 형 기술이 사용되는 것을 확인하는 것도 고무적입니다.이 경우 전자 상거래 경험입니다.이 사이트의 탐색은 모든 뷰포트 해상도에서 고유하지만 스펙트럼의 작은 끝에서 매우 잘 작동합니다. 시각적 특성 이 크기의 상점에 완벽하게 합리적이며 사용에도 불구하고 계속 사용할 수 있습니다. : 호버 터치 장치에서. 잘 했어 @falkowski! "
19. 스타 벅스
Paravel의 창립자 인 Trent Walton은 "반응성이 뛰어난 Starbucks.com은 훌륭하지만 우리에게 더욱 영감을주는 것은 함께 제공되는 웹 기반 스타일 가이드입니다."라고 말합니다. "그것은 .psd 또는 .pdf가 할 수있는 것보다 훨씬 더 유연하고 반응이 빠른 레이아웃의 힘을 전달합니다."
20. Tattly
Mat Marquis는이 임시 문신 사이트에 대해 "저는이 목록에 위험한 시간을 포함 시켰습니다. 따라서 귀하 및 / 또는 귀하의 상사에게 미리 사과드립니다. 다양한 장치에 걸쳐 Tattly에서 디자인하고, 특정 중단 점에서만 얻을 수있는 경험을 원합니다. 그들은 사이트가 광범위한 장치 / 창 크기로 잘 번역되도록 훌륭한 작업을 수행했습니다. 아마도 훨씬 더 중요한 것은 그들이 나를 나쁜 놈처럼 보이게 만드는 확실한 방법을 제공한다는 것입니다. 어쨌든 한 번에 며칠 동안. "
21. 다음 웹
"내가 여전히 끈적 거리는 사이드 바의 팬은 아니지만이 사이트는 꽤 놀랍습니다."라고 Dave Rupert는 인정합니다. "공백과 타이포그래피는 정말 편안한 환경을 조성합니다. 태블릿으로 TNW를 방문했을 때 기분이 좋아졌습니다. 느낌이 좋고 독서 경험이 좋습니다."
22. 디자인의 모양
Trent Walton은 "Frank Chimero의 반응 형 독서 경험은 모든 수준에서 영감을줍니다."라고 말합니다. "그의 온라인 버전 The Shape of Design은 읽기에 즐거움입니다. 눈에 잘 띄지 않는 챕터 탐색이 잘 작동하고 미디어 쿼리 글꼴 크기 스케일링은 모든 것을 놀랍도록 비례 적으로 유지합니다. "
23. 시간
Stephen Hay는 "Boston Globe의 주도에 따라 Time은 반응 형 뉴스 웹 사이트의 세계에서 그 구현으로 주목을 받았습니다."라고 박수를 보냅니다. "모바일에서 '전체 웹 사이트'로 연결되는 링크를 제공하는 뉴스 웹 사이트가 전 세계에 하나 적다는 사실만으로도 충분하지만이 사이트는 모바일에서 정말 좋아 보입니다. 그것은 시간의 정체성입니다. 일부는 일부 장치에서는 텍스트가 약간 작을 수 있지만 개발자는 확장을 유지했습니다. 항상 좋은 생각입니다. 확장 된 이미지 제공과 같은 성능 향상을 위해 몇 가지 조치를 취할 수 있지만 [하지만] 올바른 방향으로 나아가는 단계입니다. "
24. 유나이티드 픽셀 워커
"저는 United Pixelworkers의 대담한 단순성을 좋아하며 작은 화면을위한 견고한 그리드 레이아웃과 탐색 처리가 잘 작동합니다."라고 James Young은 말합니다. "Currys 사이트와 마찬가지로이 사이트는 모든 장치에서 내 기본 작업 인 상품 구매를 쉽게 완료 할 수있는 전자 상거래 사이트입니다.
"구매를 완료하기 위해 Shopify로 이동하는 것은 유감입니다. 곧 브랜드가있는 결제 완료 페이지를보고 싶습니다.하지만 여전히 티셔츠를 구매하는 것은 매우 쉽습니다."
"반응 형 전자 상거래는 어렵지만 Pixelworker가 알아 낸 것 같습니다."라고 Dave Rupert가 덧붙입니다. "훌륭한 홈페이지, 훌륭한 제품 페이지, 훌륭한 결제 흐름. 훌륭한 반응 형 전자 상거래 사이트를 만들고 싶다면 이것이 바로 당신의 바입니다."
25. 노트르담 대학교
Tim Kadlec은 "노트르담 대학이 진행하고있는 일 중 일부를 좋아합니다."라고 격찬합니다. "RSS를 사용하여 작은 화면에서 페이지 무게를 줄입니다. 또한 위치 정보를 사용하여 캠퍼스 둘러보기 기능을 향상시킵니다. 사이트에서 사용자가 캠퍼스에 있음을 감지하면 가장 가까운 위치를 식별하고 도보 경로를 제공합니다. 유용한 방법입니다. 사용자의 컨텍스트와 장치의 기능을 사용하여 경험을 향상시키는 것입니다. "
이 기사를 위해 2012 년 가장 좋아하는 반응 형 사이트를 선택해 주신 모든 기여자에게 감사드립니다 : Ben Callahan, Elliot Jay Stocks, Tim Kadlec, Paul Robert Lloyd, Mat Marquis, Scott Jehl, Stephanie Rieger, Stephan Hay, James Young 및 전체 of Paravel : Trent Walton, Dave Rupert 및 Reagan Ray.
일부 사이트를 확인하는 데 영감을 얻었기를 바랍니다. 댓글에서 우리의 선택에 대해 어떻게 생각하는지, 그리고 올해 가장 마음에 드는 사이트가 무엇인지 알려주십시오.
마음에 드 셨나요? 읽어보세요!
- 화려한 Wordpress 튜토리얼 선택
- 최고의 로고 디자인을위한 최고의 가이드
- 디자이너를위한 최고의 무료 웹 글꼴
- 증강 현실의 다음 단계 알아보기
- 무료 텍스처 다운로드 : 고해상도 및 지금 바로 사용 가능
