벤치마킹
웹디자인
공유자료실
디자인쇼핑
커뮤니티
폰포디 센터
디자인사이트
+외국 & 컬리티
+기업 &그룹
+유통 & 판매
+패션 & 명품
+자동차
+항공 & 운송
+여행 & 호텔
+기관 & 단체
+언터테인먼트
+교육 & 학원
+연예인 & 영화 &음악
+커뮤니티
+뉴스미디어
인기검색어
새글 2018년 02월 20일
검색1차민규 스피드스…
고정이상화 임원 / 뭘…
인생에서 원하는 것을…
성공해서 만족하는 것…
우리카지노계열 「 ht…
슈퍼카지노「https://…
인생에서 원하는 것을…
+ 꼭 필요했는데 감사합니다
+ 감사합니다^^
인생에서 원하는 것을…
웹디자인!
게시물 1건
2012년 웹 디자인 트랜드 분석
글쓴이 : 폰포디 날짜 : 2012-11-20 (화) 18:34 조회 : 1922

1. 웹 트랜드

1) 반응형 웹디자인 (Responsive Web Design)

반응형 웹디자인이란?

다양한 디바이스들이 하나의 소스로 디스플레이 규격과 상관없이 각 디스플레이에 최적화된 화면을 제공하는 것
사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹 요소들에 대한 총체적인 디자인




반응형 웹디자인은 데스크탑/타블렛/모바일 폰 별로 사이즈는 다르지만 일관성 있는 디자인과 가독성을 고려해
적용한다. 컨셉은 심플, 모티브는 논리적, 기술은 간단한 것이 반응형 웹 디자인의 특징
더 많은 모바일기기의 소개와 도입은 2012년을 반응형 웹 사이트의 해로 만들 것이다. 그리고 웹 디자이너와
개발자들은 틀 대신 다양한 레이아웃을 사용하게될 것이다.





2) 그리드 시스템 (Grid System)
반응형 웹에서 가장 중요한건 그리드 시스템이다. 그리드 시스템으로 인해 유동적으로 사이즈에 맞게 조절되어
다양한 크기에서도 볼 수 있다. 또한 오늘날의 니즈(모바일 컨텐츠)에 맞추고 유연한 가변성을 제공할 수 있다.



3) 테크놀로지와 아트의 만남 (jQuery / CSS3 / HTML5 Animation)
웹디자이너는 유저의 경험 뿐 아니라 화려한 미학과 추가적인 애니메이션 또한 아울러야 한다.
다양한 브라우저(사파리, 크롬, 파이어폭스, 익스플로러 등)와 업그레이드의 제공으로 웹의 테크놀로지가 향상되었다.



jQuery는 착수 준비중인 브라우저 효과의 주류이나 불행히도 100%의 지원을 하지는 않는다. 따라서 css3안에서 대체방안을
사용한 다는 것은 당신의 웹사이트가 대부분의 방문자들과 호환이 가능하여 예외적인 경험을 제공한다고 볼 수 있다.
웹디자이너들은 html과 css를 보다 다양하게 이용하는데 html과 css는 컴퓨터 코딩만으로 다양한 액션을 구현해낸다.
또한, 이 둘은 다양한 효과를 가지고 있어서 코딩으로 로운 경험을 하게 해준다.





4) 스크롤 (Scrolling, Vertical Narratives)
모바일 디바이스의 증가로 모바일, 타블렛등에도 사용할 수 있는 세로 스크롤에 대한 중요성이 증가하고있다.
이렇게 웹을 보던 스크린이 다양하게 변화되면서 맨 위에 중요한 메세지를 담아야한다고 하던 기존의 생각이 모호해졌다.
실제로 세로 스크롤을 이용한 흥미로운 사이트들이 늘어나고 있고, 웹 디자이너의 로운 시도들을 엿볼 수 있다.







5) 사선
대각선(사선)을 이용한 디자인이 늘어나고 있다. 이는 전통적인 웹 레이아웃(header, content colume, sidebar)를 깨고
좀 더 독특하고 그리드를 가로지르는 식의 로운 시도를 하고자 하기 때문이다.


사선을 그리드 어긋난다고만 생각하지 말고 로운 도전을 함으로써 충분히 다양한 디자인에 대한 경험을 할 수 있다.






6) 모듈 인터페이스
모듈 인터페이스란?
한가지 일을 수행하는 프로그램에서 여러가지 인터페이스를 통해 유동적으로 사용 가능한 것을 말한다.
어플리케이션의 영향으로 모듈성의 인터페이스를 가진 웹디자인을 재선호하기 시작했고, 놀랍게도 우리는 페이스북과
트위터같은 앱에서 웹과 관련한 컨텐츠에 접근하고 있다는 것을 알 수 있다. 그러면서 데스크탑과 스크린, 탭, 아이폰과
같은 핸드디바이스 사이의 경계가 모호해 지고있다.







모듈 인터페이스의 가장 대표적인 트위터.




트위터 한 페이지 안에서 다른 페이지로 넘어가지 않아도 우리는 모든 것을 다 할 수 있다.
예를 들면, 팔로잉을 보고, 팔로워를 보고, 다른 사람들의 영상을 보기도 한다.




7) 사용자 정의 글꼴 (Custom Font Faces)
최근 구글의 웹 글꼴은 풍부한 글꼴 숫자뿐만 아니라 구글이 지원하는 글꼴 라이브러리를 통해 HTML요소에 css font-family
속성을 복사하기만 하면 간단하게 설정된다. 심지어 사용자 정의 글꼴을 플러그인으로 만들어 무료로 설치할 수 있게 제공해 개발자가 잘못된 업로드등으로 인한 스트레스가 없어졌다.


무료 온라인 폰트 라이브러리 Typekit는 관심있는 웹디자이너를 위한 무료평가판을 제공한다. 이런 경향은 독특한 블로그를유지하는 워드프레스 디자이너들에게 인기가 많았다.


8) 고정 네비게이션 영역 (Fixed-Position Navigation)
만약 당신의 웹사이트를 사용함에 있어서 주요 사이트맵이 없다면 몇 가지 작은 링크들이 필요하다.





그렇다면 그 링크들을 통해 보이는 화면을 항상 유지하는 것은 어떨까? 이러한 방법은 웹사이트의 기능을 크게 향상시킬 것이며
전반적인 페이지를 쉽게 바꿀 수도 있다. 이러한 발상은 네비게이션바, 링크, 로고들을 당신의 웹 페이지안에 둘 것이며, 방문자는 한 페이지안에서 단지 스크롤을 내리는 것만으로 볼 수 있을 것이다.
Simon Wuyts의 사례는 로운 수준의 고정 네비게이션을 보여준다.







+ 트랜드는 디자이너로서 항상 유의하고 유념해야할 부분이라고 생각한다.
트랜드에 뒤떨어진, 트랜드에 벗어난 디자인은 식상하고 이상하게 느껴질 수 있기 때문이다.
진정한 트랜드를 읽어낼 줄 아는 것은 그만큼의 경험과 통찰력이 필요한 것이라고 한다.
항상 국내외 사이트와 다양한 분야의 디자인을 참고하고 자료를 수집, 분석하며 나의 디자인에도 적용해보는 것,
그 것이 트랜드에 맞춘 디자인을 하는 디자이너가 되는 방법이 아닐까?



+ 참고

webdesign.tutsplus.com/articles/industry-trends/the-state-of-web-design-trends-2012-annual-edition
cyworld.com/ssjjong2/5432977
blog.daum.net/buzzweb/633



Total 1 [ 날짜순 / 조회순 ]
게시물 1건
1 2012년 웹 디자인 트랜드 분석 폰포디 11-20 1923
이용약관 | 개인정보 취급방침 | 책임한계,법적고지 | 이메일수집거부 | 탈퇴신청
디바인소프트(엥끄닷컴) | 대표 : 김호현 | 평일 오전10시 ~ 오후6시 주말 공휴일 휴업 | 사업자번호 215-02-95758 | 경기도 하남시 덕풍동 아이테코 926호
copyright (c) divinesoft all right reserved