웹 사이트를 위한 디자인 요소

깔끔한 웹 사이트 레이아웃 및 요소를 디자인하는 기법들에 관심이 있습니까? 바로 여기에서 배울 수 있습니다!

Adobe Illustrator에서는 유연하고 자유롭게 흐르는 웹 요소를 만들 수 있고 픽셀 단위로 완벽한 디자인 환경을 제공합니다. 이를 위해 벡터 그래픽, 반응형 미디어 아이콘, 크기 조절 가능 구성 요소, CSS 생성, SVG 내보내기, 철사 프레임 및 재사용 가능한 기호 등 깔끔하고 상쾌한 웹 레이아웃을 만드는 데 필요한 모든 것을 제공합니다.

웹 사이트 디자인

꼭 사용해 보세요

Adobe XD - 웹 사이트, 모바일 앱 등을 디자인하기 위한 Adobe의 최신 올인원 벡터 기반 UX/UI 솔루션.

효과적인 웹 레이아웃을 위한 5가지 원칙

양질의 웹 환경을 만들려면 다음 웹 디자인 요소에 특별한 주의를 기울이십시오.

  • 적은 클릭을 사용하는 쉬운 탐색
  • 화면 공간의 최적성과 균형 잡힌 사용, 장치 독립적 화면 표시
  • 최소한으로 구성된 깔끔한 구조 - 격자, 타일, 카드 사용
  • 호소력 있고 매력적인 시각적 그래픽
  • 명료하면서도 예술적인 입력 체계

시작하기 전에

Illustrator에서 디자인하는 모든 아트웍은 일반적으로 다음 디자인 테마를 중심으로 구성됩니다.

  • 모양 및 패스
  • 색상 및 패턴
  • 텍스트 및 글꼴
  • 이미지 및 특수 효과

더 알고 싶습니까? 웹 사이트의 필수 구성 요소를 참조하십시오.

웹 문서 설정

웹 문서를 설정하려면

  • 파일 - 열기를 선택합니다. [새 문서] 대화 상자에서 탭을 클릭합니다. 사전 설정 목록에서 요구 사항에 맞는 웹 문서 유형을 선택합니다.
  • 샘플 템플릿을 미리 보고 다운로드합니다. 
웹 문서 선택
웹 문서 선택

반응형 웹 페이지 디자인

끊임없이 확장되는 기술을 사용하여 모든 OS 플랫폼, 화면 크기 및 장치 방향에서 원활하게 응답하는 웹 사이트를 디자인하는 것이 중요합니다.

반응형 웹 레이아웃을 만들려면 다음 요소를 고려하십시오.

  • 유연한 격자 및 레이아웃 - 데스크탑, 태블릿, 모바일과 같이 어떤 화면 너비로도 크기를 조정할 수 있는 웹 사이트 레이아웃을 디자인합니다.
  • 크기 조절 가능 미디어 - 이미지, 비디오 및 유사한 형식을 포함합니다.
  • 동적 미디어 쿼리 - 웹 브라우저 및 장치용 특정 스타일을 추가합니다.

웹 사이트 철사 프레임 또는 구조 만들기

깔끔하고 구조화된 웹 사이트는 더 많은 방문자를 끌어들입니다. 웹 사이트 레이아웃을 디자인할 때:

  • 웹 사이트 철사 프레임 디자인부터 시작하여 다양한 화면 요소를 시각화하고 웹 페이지에 체계적인 방식으로 배치하십시오.
    : 쉬운 탐색과 현대적인 모습을 위해 타일이나 카드를 추가할 수 있습니다.
  • 첫 번째 수준의 사용자 인터페이스가 만들어지면 컨텐츠 및 기타 예술적 요소를 채우는 작업을 진행하십시오.
웹 사이트 구조
다양한 화면을 위한 웹 사이트 템플릿 예

체계적인 웹 레이아웃을 위한 팁과 요령

  • 보다 매끄러운 모습과 느낌을 위해 웹 사이트를 관련 섹션으로 분할하십시오. 개체 - 분할 영역을 선택합니다.
  • 눈금자, 격자 및 안내선을 사용하여 참조 영역을 확인 및 테스트하고 화면 요소를 조정하십시오.
    • 보기 - 안내선을 선택합니다.
    • 보기 - 격자 표시를 선택합니다.
    • 보기 - 눈금자를 선택합니다.
  • 정확한 시각적 윤곽을 만들려면 웹 페이지에 사각형 개체 또는 텍스트 구성 요소를 배치하여 화면을 적절한 섹션들로 나누십시오.
  • 웹 페이지의 주 컨텐츠에 초점을 맞추는 동안 창의적인 로고, 영감을 주는 영웅 이미지, 슬로건, 강령 등 무엇이든 해당하는 사항을 잊지 말고 추가하십시오.
  • 웹 사이트 구조를 저장하려면 내보내기- 웹용으로 저장(레거시)을 선택하십시오. 저장된 파일에 표시할 분할 영역을 선택할 수도 있습니다.

참조:

분할 영역과 이미지 맵

웹 배너 디자인

웹 사이트에서 제품 또는 서비스를 홍보하고 광고하는 마케팅 캠페인을 실행하고 있습니까? 몇 분 안에 눈길을 끄는 배너를 만들어 보십시오!

웹 배너를 만들려면 다음을 수행하십시오.

  • 올바른 문서 크기를 선택하십시오. 일반적으로 배너에는 A4 문서가 적합합니다.
  • [사각형] 도구를 사용하여 배너 윤곽선을 만들고 적절한 치수를 지정하십시오.
  • 그래픽, 텍스트, 그레이디언트를 추가하고 원하는 대로 창의력을 발휘하십시오.
웹 배너

관련 리소스

Adobe 로고

내 계정 로그인