오늘은 아주 근사한 사용자와 상호작용이 뛰어난 30개의 웹사이트를 소개하려고 합니다. HTML5, CSS3, 그리고 자바스크립트가 많은 가능성들을 열어준 덕분에 요즈음의 웹 디자인은 아주 인터렉티브하고, 레이아웃은 더 이상 정적인 것에 국한되지 않습니다. 지금부터 소개드릴 30개의 사이트들은 패럴랙스 스크롤 기법을 멋지게 구현하기 위해서 필요한 기본적인 트랜지션 효과에서부터 오디오와 비디오들과 같은 리치미디어 프레젠테이션까지 이르기까지 인터랙티브 웹 디자인의 굉장히 좋은 사례들입니다. 즐겁게 감상해 보시길 바랍니다. 비엔빌캐피탈 매니지먼트 (Bienville Capital Management) 비엔빌캐피탈 매니지먼트 사이트는 아주 원활하게 페이지 전환이 이루어 지고 있습니다. 사이트를 여기저기 클릭해 보..

Design News/Design Trend 2013. 10. 8. 08:30

HTML5와 CSS3의 훌륭한 예제와 코드 소스들이 잘 정리되어 있는 hongkiat.com 블로그의 튜토리얼 섹션입니다. HTML5와 CSS3를 학습하고자 하는 분들과 웹퍼블리싱 실무자들에게 많은 도움이 될 정보들을 담고 있습니다.hongkiat.com 는 해당 주제별 활용예제와 적용방법 웹브라우저별 지원여부도 정리되어 있어 웹퍼블리셔가 프로젝트 사이트 작업 시 해당 코드 소스를 적용할 지 여부를 결정짓기 쉽도록 합니다.또한 데모(demo) 페이지를 별도로 마련하여 실제 적용 모습을 확인할 수 있어 더욱 도움이 되기도 할 것입니다. 최근 들어 HTML5 / CSS3를 활용한 웹사이트들을 많이 접하게 되는데 틈틈히 새로운 표현과 기능들을 익혀 두면 실전에서 웹사이트 콘텐츠 디자인을 최적화하는데 많은 도움..

Design Information/HTML5 and CSS3 2013. 7. 13. 14:31

작년 년말 쯤 양용석 님의 첫 저술서인 'HTML5&CSS3 제대로 배울 수 있는 실전지침서'를 소개한 적이 있는데 4개월 지난 지금 그 뒤를 이어 알찬 내용으로 구성된 실전서인 'HTML5&CSS3 사이트제작의 모든 것'이 출간되었다. 저자인 유지아빠 양용석 님은 개인적으로 친분을 갖고 있는 분이지만 정말 부지런하고 노력파여서 늘 배울 점이 참 많은 저자이기도 하다. 먼저 'HTML5&CSS3 사이트 제작의 모든 것' 출간을 축하하며, 예비 웹디자이너 및 실무 웹디자이너 그리고 HTML5와 CSS3에 관심을 높은 이들에게 간략한 서평을 소개하려고 한다. 작년 년말 쯤 소개했던 양용석 저. 'HTML5&CSS3 제대로 배울 수 있는 실전지침서'는 HTML5&CSS3의 개념정립과 준비를 위한 실전 지침이었..

Design Information/HTML5 and CSS3 2012. 5. 4. 18:28

웹 관련 직업군(웹 기획, 웹 디자인, 모바일 웹)에 관련된 이들에게는 몇해 전부터 HTML5와 CSS3가 큰 관심사로 회자가 되고 관련된 도서는 물론 컨퍼런스들도 자주 개최되고 있다. 특히나 아이폰과 아이패드가 출시되던 시점 전 애플 CEO인 스티브잡스가 어도비 플래시 기술에 대한 반감을 표명하면서 HTML5가 미래의 웹 기술이 될 것이라고 언급하면서 일반인들도 HTML5라는 기술용어를 한 두번쯤 접하게 될 만큼 관심이 높아졌다고 볼 수 있다. 결국 지난 11월 9일 어도비는 모바일용 플래시 플레이어를 더 이상 개발하지 않겠다고 밝혔고, 안드로이드와 블랙베리 플레이북을 위한 플래시 플레이어 11.1 버전을 끝으로 모바일 플래시 개발은 하지 않게되며 HTML5와 PC용 개발에 주력할 예정이라고 밝히는 상..

Design Information/HTML5 and CSS3 2011. 11. 17. 17:23

어도비 일러스트레이터, HTML5 Pack 배포. 어도비시스템즈가 자사의 일러스트레이터 CS5 디자인 에디터에 개발자들이 웹 및 모바일 플랫폼에 자신들이 디자인을 그대로 내보내기 할 수 있도록 웹 형식의 HTML5 패키지를 추가했다고 밝혔다. 이러한 기능은 디자이너가 화면에 보이는 그대로를 웹페이지, 스마트폰 그리고 태블릿과 같은 멀티 플랫폼 뿐만아니라 출판물에도 손쉽게 단번에 내보내기를 통해 구축할 수 있다고 어도비 수석 제품 제품 매니저인 데이비드 메이시(David Macy)는 말했다. 어도비 HTML5 Pack은 디자인을 CSS3 뿐만아니라 HTML5 Canvas 요소와 XML 이미지 포맷인 SVG(확장 가능한 벡터그래픽)로 렌더링할 수 있다고 했다. 어도비 HTML5 Pack은 플래시 포맷의 포지..

Digital News/IT Trend 2010. 9. 15. 06:07

CSS3를 활용, 타이포그래피 삽입 방법을 설명하려고 합니다. 테이블 태그 또는 이미지를 사용하지 않고 css3를 이용하여 박스를 구현하고, 그라데이션 효과와 그림자 효과를 표현하고 입체적인 타이포그래피를 구현하는 방법은 아래와 같습니다. 참고로 본 예제는 Firefox3.6, Safari 4.0 이상에서 직접 확인할 수 있으며, IE8.0에서 CSS3 이 구현되지 않아 확인이 불가하기에 위의 첨부이미지로 실 적용효과를 대체합니다. CSS3 정의. #insetBgd { width: 500px; height: 100px; background: -moz-linear-gradient(-90deg,#003471,#448CCB); background: -webkit-gradient(linear, left top,..

Design Information/HTML5 and CSS3 2010. 3. 22. 00:44

설치형 블로그 플랫폼인 워드프레스(Wordpress)로 블로그를 운영하는 국내 사용자들에게 아이폰 메모(Notes) 앱스의 영감을 잇는 아주 멋지고 감각적인 워드프레스 테마와 스타일 가이드가 무료로 공개되어 개성있는 블로그 테마를 꾸며 볼 수 있게 되었다. 최근 Ndesign-studio.com 에서 공개한 Notepad 테마(Theme)는 아이폰 메모(Notes) 어플리케이션에서 영감을 받아 디자인된 워드프레스 테마로 스케치한 섬세한 터치감과 노트 질감의 배경이 모던한 스타일을 보여주고 있다. Notepad 워드프레스 테마는 상단에 위젯과 소셜 미디어 버튼을 깔금하게 잘 접목시켰고, 페이징 코멘트, 멀티 레벨의 드롭다운 메뉴가 인상적이다. 워드프레스2.9(WordPress 2.9) 버전으로 모질라 파이..

Design News/Design Trend 2010. 2. 13. 03:52

2010년 웹디자인 트렌드는 '어떤 변화와 요소들이 가장 쟁점이 될 것인가?'는 디자이너, 개발자 모두에게 아주 중요한 리소스입니다. 그런 연유로 새로운 한해가 시작되면 전문가들이 향후 트렌드 전망을 매체를 통해 발표하고 현업 실무 디자이너와 개발자들은 업무 지침으로 참고하여 프로세스에 반영하게 됩니다. 최근 해외 웹 트렌드 및 디자인 아이디어를 공유하는 해외 유명 사이트 '웹 디자이너 월(Web Designer Wall)'에서 디자인 전문가들이 2010년 디자인 트렌드 예측한 'Design Trends (Predictions) in 2010' 이란 글을 발행했습니다. 그 개요를 정리해 보면 'HTML5' 와 'CSS3'을 가장 큰 변화로 전망했고, 소셜 네트워크 서비스(SNS)인 트위터(twitter)..

Design Information/HTML5 and CSS3 2010. 1. 23. 08:57