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

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

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

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

디자인 프로세스를 진행하다 보면 각각의 엘리먼트를 돋보이게 디자인 해야 하는 경우가 많은데 적지 않은 시간과 노력이 소요되어 디자이너에겐 부담감으로 다가오기 십상이고, 밤샘 작업을 강행해야 하는 상황을 초래하기도 합니다. 어떻게 보면 디자이너이기 때문에 모든 것을 창의적으로 디자인해야 하는 것이 당연한 일이겠지만 때로는 같은 분야에 종사하는 디자이너들이 공유해주는 리소스를 통해 효과적으로 활용하고 디자인 프로세스에 소요되는 시간을 절약하는 것도 지혜롭게 대처하는 방안이라 생각됩니다. 가끔씩 해외 디자인 커뮤니티를 살펴보다 보면 국내와 달리 상용 디자인 리소스에 버금가는 하이퀄리티 디자인 리소스를 무료 배포 및 공유하는 정보를 접할 수 있는데 인터넷을 통한 진정한 정보 공유의 마인드를 가진 해외 디자이너들..

Design Information/Design Resources 2011. 5. 28. 05:48

성공적인 중소기업 웹사이트 디자인, 5가지 디자인 트렌드 가이드라인으로 활용해야 오늘날 많은 사용자들이 새로운 기술 그리고 스마트폰과 태블릿 시장의 인기와 함께 온라인을 통한 액세스 및 상호작용의 트렌드가 크게 변화되고 있는 상황이며, 모바일 디바이스를 통한 웹사이트 이용자가 크게 늘어나고 있다는 것을 미디어를 통해 자주 접했을 겁니다. 웹사이트 유지 및 디자인은 규모가 큰 기업이나 기관의 경우, 넉넉한 예산이 마련되어 있어 웹 산업의 변화 트렌드에 맞춰 웹사이트를 무리없이 변경할 수 있는 여유가 있겠지만, 타이한 예산과 아웃소싱에 의존하는 일반 중.소기업에게는 결코 쉽지 않은 일입니다. 하지만 일반 중.소기업도 변화하는 글로벌 웹디자인 트렌드를 잘 활용해 기업 웹사이트를 개선하게 되면, 큰 비용을 들이..

Design News/Design Trend 2011. 2. 25. 20:06

최근 선보인 구글(Google)의 새 검색기능 '인스턴트 프리뷰(Instant Previews)'가 향후 웹페이지 레이아웃 등 웹디자인 트렌드에도 적지 않은 변화를 줄 것으로 내다보인다. 인스턴트 프리뷰(Instant Previews)는 구글의 검색 결과를 이미지로 미리 확인할 수 있는 순간 미리보기 형태의 기능으로 사용자가 구글 검색을 통해 정보를 검색한 결과 페이지의 항목 우측에 돋보기 모양의 아이콘이 나타나며, 해당 돋보기 아이콘을 클릭하면 해당 페이지를 미리 보여주는 팝업 이미지가 보여 지게 되는 기능이다. 구글 검색의 인스턴트 프리뷰 기능을 통해 사용자는 검색결과 페이지에서 자신이 원하는 정보를 담고 있는 웹사이트인지 바로 확인할 수 있기 때문에 기존에 해당 사이트를 열어 확인하던 절차가 단축되..

Digital News/IT Trend 2010. 11. 10. 05:30

실무 웹표준 지침서, '크리에이티브 디자이너를 위한 웹표준' 근래에 들어 심심찮게 회자되는 단어가 바로 '웹표준'이 아닐까 싶다. 웹2.0 시대가 도래한 이후 다양한 플랫폼이 사용되기 시작했고 그로 인해 웹디자인 분야는 또 한번의 격동기 아닌 격동기를 거치게 된다. 특정 웹브라우저에 비중을 두고 HTML, Java, 플래시 같은 플러그인 요소를 접목해 완성하는 일반적인 웹디자인 스타일만으로는 경쟁력을 갖추기 힘든 시장상황이기도 하다. 비록 웹 환경을 구축하는 큰 맥락은 같을지 모르지만, 사용하는 웹브라우저가 다르고, 모바일 웹페이지 그리고 웹2.0 으로 지칭되는 블로그, SNS, 위젯에 이르기까지 콘텐츠의 효율적인 연동이 요구되는 오늘의 상황에선 어쩌면 웹표준이 필수요소인 것은 부인하기 어려운 까닭이다...

Design Information/HTML5 and CSS3 2010. 6. 4. 13:22

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