디자인 스터디 그룹 3주차

다들 여름 휴가라든가 건강상 스터디 모임이 몇 주 미루어지게 되었습니다.

그리하여 8월 3일 오랜만에 모이게 되었어요. 역시 이번에도 에이지 스토리에서 만났습니다.
이제 아지트가 되어가는 듯하네요.ㅎㅎ

오자마자 카톡으로 공유해드렸던 960 그리드 시스템에 관련되서 질문을 해주셨어요.

어떻게 쓰는 것인지.. 어떻게 활용하는 것인지에 대해서 궁금해하셔서요.

우선 960 그리드 시스템이란, 웹 사이트 레이아웃을 효율적으로 잡아주는 프레임웍입니다.
이를 사용하면 반응형 웹을 디자인할 때도 유용하고, 특히나 컨텐츠와 요소들을 배치함에 있어 가장 안정적이고 이상적인 레이아웃을 완성할 수 있어 많은 디자이너들이 사용하고 있습니다.

일단 사용 방법에 대해서는 다시 포스팅하도록 할께요. 다운로드 주소 http://960.gs/ 입니다.

study_0803_01

 스케치를 할 수 있는 인쇄용 파일, 그리고 샘플 psd, 컬럼으로 만든 예제 html/css, 그리고 포토샵과 파이어웍스 액션등을 제공해줍니다. 

study_0803_02

요렇게 액션을 활용해서 컬럼을 만들어주는 방법을 설명해드렸어요.
이제 레이아웃은 960 그리드로 만드는 시도를 해보시길 바래요~

그 다음은 html과 css 기본 마크업에 대해서 기초적인 부분을 알려드렸습니다.
html5로 아주 간단하게 구성을 하는 방법과 원리를 알려드렸는데, 실제로는 직접 더 심도있게 공부하셔야 해요. ㅠㅠ
그냥 어떻게 어떤 원리로 마크업이 진행되어 사이트가 만들어지는 시연해드렸습니다.


n_IMG_5017

반응형 웹사이트가 항상 맞는 것은 아니지만 n스크린에 대응하여 업무를 하기 위해서는 반응형웹에 대해서도 공부하는 편이 좋아요.

중간 중간 지금 만들고 있는 사이트에 대한 밴치마킹 사례를 발표하였고, 차주에도 다른 분들의 밴치마킹하여 어떻게 디자인 할 것인지도 이야기 들어보려고 합니다.

먼저 시간이 되시는 분은 메인 시안을 만들어보시는 것도 좋다고 하시니 기대하도록 할께요.
그럼 조만간 다시 한번 시간 잡아서 스터디하겠습니다~

 n_IMG_5018

 마지막으로 최근에 Html5와 css3로 만들었던 프레젠테이션 사이트를 리뷰하면서 대략적으로 어떻게 구현될 수 있는지 보여드렸습니다.

아직 멀고도 험난한 길이 느껴지는데 ㅠㅠ 모두들 힘내세요. 

도움이 되셨나요?

여러분의 좋아요 와 공유하기가 글쓴이에게 큰 힘이 됩니다!