소식

시작을 위한 비즈니스 템플릿, Benuity

안녕하세요. UX팀 디자이너 강진현입니다.
비즈니스 템플릿 Benuity를 소개해 드리겠습니다.

시작을 위한 템플릿

하루에도 200개에 가까운 사이트가 아임웹으로 개설됩니다. 웹사이트를 완성하기까지 어려가지 고려할 사항들이 있지만 특히 비즈니스 사이트의 경우에는 포함되는 콘텐츠가 많아 요소들의 정리와 메인 구성에 어려움을 겪게 됩니다. 너무 유치하지도, 무겁지도 않되 신뢰감이 느껴지는 웹사이트를 만드는 것은 사실 쉬운 일은 아닙니다. 그러한 어려움에 조금이라도 도움이 되고자, 이번 템플릿은 아이콘과 텍스트 위주로 작업을 하여 비즈니스의 직관적인 면을 강조하였습니다. 그리고 대부분의 기업소개(비즈니스) 사이트들이 디자인적으로 노후화된 것을 고려하여 세련되고 진취적인 기업의 이미지를 담고자 했습니다.




정직하고 차분한 디자인

Benuity는 아이콘과 텍스트를 사용하여 전문성이 느껴지면서 복잡하지 않도록 표현하였습니다.

컬러

  • 보편적으로 신뢰감을 상징하는 블루를 포인트 컬러로 사용 (#4f76f5)
  • 브랜드 컬러에 맞춰 검정에 가까운 짙은 블루를 텍스트 컬러로 사용 (#252b3f)
  • 섹션 배경 등 서브컬러로 사용되는 회색 역시 푸른색이 가미된 회색으로 사용 (#dedee2)

폰트

  • (영문) 제목, 본문 폰트 : 깔끔하지만 포인트가 있는 폰트(Droid Sans)를 사용
  • (한글) 제목, 본문 폰트 : 가독성이 높은 고딕(본고딕)으로 선택

메인

  • 전체적으로 ‘비주얼 > 기업소개 > 서비스소개 > 관계사 > 최신글’로 이어지는 보편적인 기업소개의 레이아웃을 따름
  • 기업의 구성원들을 비주얼로 사용하여 서비스 자체의 신뢰도를 강조
  • 아이콘과 텍스트로 직관적인 설명
  • 섹션 배경과 갤러리 위젯의 적극적 활용으로 스크롤에 의한 지루함을 방지

서브

  • 버튼 위젯을 활용하여 버튼이 아닌 인포그래픽 디자인으로 활용
  • 구성원들에 대한 자세한 소개와 컨택이 가능한 버튼 아이콘으로 신뢰감과 접근성을 높임




모바일 편집

Benuity는 모바일에서도 완성도 있는 웹사이트가 될 수 있도록 몇 가지 모바일 편집이 따로 이루어졌습니다.

메인

  • PC / Mobile은 디스플레이의 비율과 크기가 다르기 때문에 최적화를 위해 따로 모바일 편집이 이뤄졌습니다.

그 외 서브 / 고정섹션

  • 버튼 위젯을 활용한 인포그래픽의 경우 px단위로 크기가 정해지기 때문에 반응형에 완벽하게 대응하기 어렵습니다. 때문에 모바일에서는 따로 작은 단위로 수정하였습니다.
  • 하단고정섹션의 경우 PC에서 사용한 메뉴리스트 위젯으로 인하여 스크롤이 길어지는 문제점이 있기 때문에 따로 편집되었습니다.
  • 그 외 위젯 여백들이 모바일 편집에서 재조정 되었습니다.




마치며

시작을 위한 비즈니스 Benuity 템플릿으로 시작해보세요 :) 

Benuity 템플릿 살펴보기


목록으로