웹사이트 디자인은 시크하거나, 모던한 느낌, 또는 클래식하거나 미니멀리스트 등 다양한 스타일과 방향이 있습니다.
홈페이지에서 사이트의 레이아웃과 느낌은 개인 스타일, 브랜드 정체성을 드러내야 하지만 표준적으로 적용할 수 있는 몇 가지의 기본 규칙이 있습니다.
잘 만든 웹 디자인은 사용자 경험과 기능 사용성에 영향을 미치며 사이트를 한눈에 쉽게 이해할 수 있어야 합니다. 아래는 사이트를 효과적이고 매력적으로 만드는 데 도움이 되는 5가지 간단한 웹 디자인 팁입니다.
눈에 띄는 웹디자인을 위한 5가지 팁
홈페이지를 단순하게 유지하고 혼잡함을 피해라
비주얼 우선순위 구조를 고려한 디자인을 해라
읽기 쉬운 웹 사이트 콘텐츠를 만들어라
사이트를 쉽게 검색할 수 있도록 해라
모바일 친화적으로 디자인 해라
출처: wix
1. 당신의 홈페이지를 단순하게 유지하고 혼잡함을 피하세요.
홈페이지는 즉각적으로 핵심 메세지를 사용자에게 전달할 수 있어야 합니다. 사용자는 웹 사이트의 모든 단어를 거의 읽지 않는데요.
대신에 사용자는 페이지를 빠르게 스킨을 하고, 단어와 문장과 이미지를 선택적으로 읽는 편입니다.
이러한 사용자의 행동을 파악하고 글자 수 보다는 감정을 어필하는 것이 더 좋습니다.사이트 방문자가 읽고, 클릭하거나, 기억해야하는 횟수가 적을수록 콘텐츠를 더 잘 처리하고 평가할 수 있습니다. 주의 집중 기간을 줄이도록 설계하면 사용자가 원하는 대로 행동할 가능성이 높아집니다.다음과 같은 간단한 웹디자인 팁은 콘텐츠를 나누고 보기 쉽도록 하여 매력적인 홈페이지 디자인을 만드는 데 도움이 됩니다.
2. 시각적 우선순위 구조를 고려한 디자인
우선순위 구조는 콘텐츠를 명확하고 효율적인 방법으로 노출시킬 수 있게 해주는 중요한 디자인 원칙입니다. 따라서 적절한 비주얼 구조를 사용한다면 사용자에게 가장 의미가 있는 우선순위의 콘텐츠로 관심을 끌 수 있습니다.
시각적 우선순위 구조의 가장 중요한 요소는,
크게 및 무게 : 비즈니스 이름 및 로고와 같은 상위 가치의 콘텐츠를 더 크고 시각적으로 두드러지게 표시합니다. 사용자는 자연스럽게 크고 굵은 제목으로 먼저 끌리는 경향이 있으며 작은 단락의 텍스트로 넘어갑니다.
콘텐츠 배치 : 올바른 웹 사이트 레이아웃을 사용하여 방문자의 시선을 적절한 방향으로 유도해야 합니다. 예를 들면 화면 중앙에 중요한 CTA버튼을 배치하거나 로고를 배치할 수 있습니다.
정보에 대한 명확한 우선순위 구조를 설정하면 독자는 무의식적으로 당신이 설정한 흐름에 따라 정보를 수집하게 됩니다. 색상이나 대비, 간격 등을 이용하여 가장 주목을 받아야 콘텐츠를 의도적으로 강조하세요.
강력한 비주얼 우선순위 구조를 얻는데 도움이 되는 웹 디자인 요소는 wix pro gallery와 같은 스트립 또는 격자 레이아웃입니다. 더 많은 아이디어와 영감을 얻으려면 디자이너가 만든 웹 사이트 템플릿을 확인해 보세요.
3. 읽기 쉬운 웹 사이트 콘텐츠 만들기
'가독성'은 사람들이 단어, 문장 및 문구를 인식하는 것이 얼마나 쉬운지를 측정합니다. 사이트의 가독성이 높으면 사용자가 쉽게 스캔하거나 훑어 볼 수 있는데 이런 식으로 정보를 쉽게 받아드릴 수 있습니다.
웹사이트 가독성을 얻는 방법은 다음과 같은 주요 규칙을 따르면 쉽게 가능합니다.
대조(Contrast)의 중요성: 텍스트 색상과 배경 색상 간의 충분한 대조는 웹 사이트의 가독성뿐만 아니라 사이트의 접근성도 높이는 데 중요합니다. 웹 사이트 색상 구성표가 브랜드 색상을 대표할 수 있겠지만 요소 간에 충분한 대비 요소가 있는지 확인하세요. 대비 검사기와 같은 온라인 도구를 사용하는 것을 권장합니다.
글꼴 유형: 타이포그래피 세계에서는 다양한 유형의 폰트를 제공하는데요. 특히, Sans serif(링크-최근 셰리프 아티클) 폰트는 현재 당신이 읽고 있는 것과 같이 긴 온라인 텍스트에 가장 적합합니다. 서로 다양한 유형의 글꼴을 혼합하여 흥미로운 폰트 모음을 만들 수도 있습니다. 로고 디자인을 위해 사용할 수 있는 로고 폰트도 많이 있습니다. 필기체로 보이는 스크립트 폰트와 같이 디자인적 요소를 강조하는 더 많은 디스플레이용 폰트도 있습니다. 하지만, 과도한 사용은 비효율성을 생성할 수 있으니 자제해야 합니다
글꼴 수 제한 : 단일 웹 사이트에서 세 가지 이상의 글꼴 사용은 권장하지 않습니다. 일부 프로젝트는 보다 정교한 글꼴 조합을 요구할 수 있지만 다양한 서체를 사용하면 브랜드 아이덴티티를 산만하게 할 수 있습니다.
텍스트 테마 활용 : 명확한 구조를 구축하려면 작성된 웹 사이트 콘텐츠의 크기와 무게가 큰 제목부터 작은 제목, 작은 단락 또는 본문에 이르기까지 다양해야 합니다.
출처: wix
4. 사이트를 쉽게 탐색할 수 있는지 확인하세요
사용자가 원하는 것을 쉽게 찾을 수 있도록 유도하는 게 우리 사이트 웹 디자인의 목적입니다. 또한 견고한 탐색 기능이 있는 사이트는 검색 엔진이 콘텐츠를 색인화하는 동시에 사용자 경험을 향상시키는 데 도움이 됩니다.
로고를 홈페이지에 연결: 웹 사이트 디자인 팁은 방문자를 기대하게 만들어야 하며 클릭 수를 줄여야 합니다. 만약 로고가 없다면 브랜딩을 위해서 로고를 생성하는 것이 좋습니다.
메뉴 고려: 고전적인 수평 목록, 햄버거 메뉴 또는 기타 항목을 선택하든 웹사이트 메뉴는 눈에 잘 띄고 찾기 쉬워야 합니다. 또한 각 섹션의 중요성에 따라 구성되어야 합니다.
세로 탐색 제공: 원 페이지 사이트 와 같이 사이트의 스크롤이 길 겨우에는 앵커 메뉴를 사용하세요. 클릭 한 번으로 사용자가 모든 섹션으로 빠르게 이용할 수 있습니다. 고려해야 할 또 다른 옵션은 '맨 위로 이동' 버튼으로 방문자가 사이트의 어느 곳에서나 페이지 상단으로 이동할 수 있습니다
바닥 글 작업: 바닥 글은 사이트의 가장 하단에 위치해 있으며 중요한 링크를 모두 배치하는 것이 좋다. 연락처 정보, 소셜 미디어 아이콘 및 단축 메뉴 버전 또는 방문자에게 필요할 수 있는 기타 관련 링크가 포함될 수 있습니다.
5. 모바일 최적화
모든 사이트 방문자는 사용하는 디바이스의 종류와 상관없이 웹사이트를 쉽게 활용할 수 있어야 합니다. 사용자의 입장에서 사이트의 모바일 버전을 살펴보고 모든 페이지, 사용자 작업 및 버튼을 테스트해야 합니다. 모바일 웹 사이트는 테스트탑 버전보다 깨끗하고 깔끔해야 하며 페이지 요소를 최소화하고 메뉴와 같은 요소들은 축소하는 것이 좋습니다. 모바일 디자인을 향상하는 데 사용할 수 있는 고유한 모바일 기능도 있습니다.
웹디자인을 위한 마지막 팁
가장 중요한 웹 디자인 팁 중 하나는 심플함입니다. 다양한 레퍼런스를 확인하세요. 웹사이트의 디자인을 탐색하고 최신 웹 디자인 트렌드를 읽어보세요.
이 글은 5 Web Design Tips for an Outstanding Site 를 참고했습니다.
