본문 바로가기
포트폴리오[기업]

[반응형홈페이지제작 매스티지]문화자원을 연결하고 실험하는"광명문화예술교육지원센터 "

by (주)매스티지 2024. 7. 4.

안녕하세요~!

20년노하우, 국내 최다 홈페이지 제작 매스티지입니다^^

오늘은 광명의 문화자원을 연결하고 실험하는 

광명문화예술교육의 장, 광명문화예술교육지원센터의 반응형홈페이지

매스티지와 진행한 리뉴얼홈페이지를 같이 살펴보려고해요:) 

 

 

사용친화적인 UI/UX를 적용시켜 홈페이지를 이용하는 유저의 접근성을 높이고

다양한 디바이스 화면에 이질감없는 완벽한 고퀄리티 화면 구현으로

언제 어디서든 광명문화예술교육지원센터 홈페이지를 이용하실 수 있습니다.

 

 

 
 

광명문화예술교육지원센터

광명문화예술교육지원센터

www.gm-arte.or.kr

#광명문화예술교육지원센터 #반응형홈페이지제작 #홈페이지리뉴얼 #고퀄리티홈페이지


광명문화예술교육지원센터

2011년 설린된 광명시 문화재단으로

사회, 청소년 문화예술교육을 위한 지원사업을 하고있습니다.

시민 주도의 자발적이고 주체적인 문화예술 창작 및 맞춤형 교육을 지원하고

시민들의 분야별 동아리 지원을 통한

다양한 문화예술 활동을 확대하고 활성화 하고 있습니다.

청소년에게는 악기 교육을 통한 문화예술 경험을 만들어

취약계층 청소년들의 문화예술 접근성을 강화시키고 있습니다.

 



광명문화예술교육지원센터가 중요하게 생각하는 함께, 상상, 실험이라는

3가지 키워드 가치로 지역사회의 다양한 구성원들과의 커뮤니티,

공간이 함께 지속가능한 만남을 노력하며

지역사회 현장을 중심으로 다양한 문화예술의

실험적 접근과 지원
을 시도합니다.


[메인페이지]

 

 

 

풀페이지 형태의 와이드한 레이아웃으로 구성하여

가독성이 높게 제작되었어요^^

컨텐츠는 메인 비주얼, 센터소식, 자료실, 사업안내

4가지로 구성하였고, 풀페이지 구조의 레이아웃을 돋보이게 하기 위해

원스크롤링 기법 적용해 마우스를 스크롤하면

컨텐츠 섹션 영역이 한 페이지씩 한 번에 이동된답니다.

컨텐츠 섹션별 구분이 명확해져 홈페이지를 이용하는

유저들의 피로함을 줄이고 접근성을 높였어요.

좌측에 횡스크롤 바로 컨텐츠 구분을 눈으로 쉽게 확인할 수 있으며

원하는 컨텐츠를 클릭하여 빠른 이동 또한 가능하답니다^^

 


[상단GNB영역]

 

 마우수를 스크롤해도 GNB가 상단에 계속 고정되어

홈페이지 이용 편의성을 높였으며,

내비게이션 메뉴에 마우스를 올리면 포인트 컬러

베리에이션되어 유저가 쉽게 인지할 수 있도록 제작했답니다.

또, 우측에 탭을 통해서도 전체메뉴를 확인 가능합니다:0

 

 

 

흰색의 무채색 컬러와 광면문화예술교육지원센터(광명문화재단)

로고 색상을 선택해 블루컬러로 전체적인 컬러를 설정했답니다! 

블루컬러 청량함, 시원함, 활기찬 느낌을 상징하기 때문에

문화예술교육의 기반을 조성하고 참여를 유도하는

문화재단 이미지와 잘 어울리는 것 같지 않나요~^^

마우스 오버시 변형되는 요소그래픽 디자인

블루컬러를 포인트로 하여 디자인했답니다.

 


[메인비주얼]

 

광명문화예술교육지원센터다양한 문화예술

수업 사진을 활용해 메인 비주얼로 만들었는데요.

알록달록 톡톡튀는 물감으로 미술활동을 하는 아이들 사진을 활용해

홈페이지 이용자들에게 따뜻하고 설레는 느낌을 만들어

광명문화예술교육지원센터 문화예술교육 참여유도할 수 있겠네요^^

 


 

 

 

다음은 공연, 참여안내, 공고 등 광명문화예술교육지원센터

다양한 소식을 소개하는 컨텐츠예요.

날짜와 타이틀, 소개글이 잘 보이도록 한줄 한줄

열 형태의 레이아웃으로 구성했고, 백그라운드에 신나는 느낌의 일러스트를 제작해

뒤에 배치해 문화재단 이미지와 잘 어울리도록 제작했답니다^^

 


 

 

광명문화예술교육지원센터가 하는 다양한 문화예술 활동을

갤러리 형식의 레이아웃으로 구성하여 만들어졌어요.

각 요소에 마우스를 올리면 이미지가 확대되며 클릭하면 상세페이지로 바로 이동하고,

하단 좌우 화살표 버튼을 이용해 최신 활동자료를 확인할 수 있으며

상단 더보기 버튼을 클릭하면 센터자료실 페이지로 이동되서

사용자가 더 많은 자료를 볼 수 있도록 제작되었답니다:)

 


 

 

 

광명문화예술교육지원센터가 하는 사회문화 예술교육, 청

소년 문화예술교육, 문화예술교육 기반조성 3가지 지원사업을

간단히 보여주는 컨텐츠로 각 교육에 어울리는 일러스트를 활용해 만들었어요!

 


 

 

대표사진 삭제

이념, 가치, 연혁광명문화예술교육지원센터

소개하는 컨텐츠기 때문에 정확한 정보전달을 위해

간결한 레이아웃으로 홈페이지를 이용하는 유저의

가독성을 고려해 제작했으며

포인트 컬러를 활용해 컨텐츠 요소를 강조했답니다.

 


 

 

광명문화예술교육지원센터활동자료, 발간자료를 소개하는 컨텐츠입니다^^

이미지와 글이 들어간 뉴스레터 형식의 레이아웃으로 제작해

한 눈에 알아보기 쉽도록 제작했고,

해당 요소에 마우스를 올리면 포인트 컬러

테두리에 스트로크가 들어가는데 요소를 클릭하면

상세페이지로 이동이 가능하답니다:)

 

 

매스티지는 전문 프로세스를 통한 다양한분야의 반응형홈페이지 제작 경험과 
성공적인 사례로 각종 홈페이지 제작 어워드에 수상을 받을만큼 
고객과의 신뢰를 구축하고있습니다.

매스티지의 20년노하우를 믿고, 
함께 웹사이트를 구축하고 싶으시다면 언제든지 연락 주시기 바랍니다^^
개별상담을 통해 보다 자세한 제안을 드리겠습니다. 감사합니다~!

 

 

▼ 홈페이지 제작 및 문의▼

매스티지 바로가기 클릭

 

▼ 홍보영상 촬영 및 문의 ▼

홈페이지 바로가기 클릭