Ning에서 커뮤니티를 디자인하는 방법

콘텐츠가 의심할 여지 없이 Ning 네트워크 의 가장 귀중한 자산 이지만 디자인도 매우 진지하게 받아들여야 합니다. 귀하의 콘텐츠가 얼마나 관련성이 있고 매력적이더라도 추악한 웹 사이트를 탐색하는 데 특히 흥분하는 사람은 없을 것입니다. 그렇죠? 사실, 38%의 사람들이 웹사이트가 매력적이지 않다고 생각되면 사용을 포기합니다 . 분명히, 당신은 네트워크 제작자로서 이렇게 많은 청중을 잃고 싶지 않을 것입니다. 그와는 반대로 사용자가 창작물의 모든 측면에 대해 만족하기를 원합니다.

시각적으로 매력적이고 사용자 친화적인 네트워크 디자인은 사람들의 관심을 사로잡고 가능한 최고의 사용자 경험을 보장하는 데 도움이 됩니다. 미적 아름다움의 문제만은 아닙니다. 웹 사이트 디자인이 전문적이고 직관적인 한 더 많은 사용자가 상호 작용하기를 원하므로 더 많은 사람들이 네트워크에 가입하고 더 많은 트래픽을 웹 사이트로 유도합니다.

또한 독특하고 개성적인 디자인으로 네트워크를 다른 곳과 차별화하고 진정한 정체성을 드러낼 수 있습니다. 결국, 우리는 Ning 이 잘 알려진 개인화된 소셜 네트워크에 대해 이야기 하고 있습니다.

그러나 멋지게 보이고 탐색하기에 좋은 웹 사이트를 디자인하는 방법은 무엇입니까? Ning 플랫폼과 그 기능을 이제 막 탐색하기 시작한 사람들을 위한 몇 가지 유용한 팁이 있습니다.

NING 디자인 스튜디오 시작하기

Ning의 최우선 과제 중 하나는 항상 사용자에게 네트워크의 시각적 모양을 최대한 제어할 수 있도록 하는 것이었습니다. 이것이 디자인 스튜디오가 만들어진 이유입니다.

NING Design Studio는 Ning 플랫폼에서 생성된 소셜 웹사이트의 디자인을 사용자 정의할 수 있는 도구 세트입니다. 그것은 사용자에게 모든 Ning 네트워크를 독특하고 아름답게 만드는 것을 목표로 하는 풍부한 사용자 정의 옵션을 제공합니다.

Design Studio는 모든 네트워크 페이지의 왼쪽 상단 모서리에 있는 녹색 도구 모음으로 사용할 수 있는 관리 대시보드에서 해당 아이콘을 클릭하여 쉽게 시작할 수 있습니다.

Design Studio 메뉴에는 다음과 같은 몇 가지 사용자 정의 범주가 있습니다.

• 테마 : 웹사이트의 일반 디자인 템플릿을 선택합니다.
• 배경 : 웹사이트의 배경에 나타나는 이미지를 선택하고 구성합니다.
• 헤더 : 네트워크 주제와 일치하는 헤더를 디자인합니다.
• 페이지 : 네트워크 페이지의 전체 모양을 설정합니다.
• 사용자 정의 CSS : 사용자 정의 CSS 코드를 삽입하여 웹사이트 디자인에 고급 변경 사항을 적용합니다.

각 범주에는 몇 가지 고유한 사용자 지정 옵션이 있습니다. 진정으로 전문적으로 보일 웹사이트를 디자인하려면 시간을 들여 한 카테고리에서 다른 카테고리로 점진적으로 진행하면서 크리에이티브 비전에 따라 네트워크의 각 요소 매개변수를 설정하십시오. 웹사이트 디자인의 거의 모든 측면을 미적 기본 설정에 맞게 구성할 수 있습니다.

또한 Design Studio를 사용하면 실제로 네트워크에 적용하기 전에 변경 사항을 미리 볼 수 있습니다. 이것은 사용자 정의 프로세스를 매우 편리하고 직관적으로 만듭니다.

사실, Design Studio를 사용하는 것은 사용자 친화적인 인터페이스의 도움으로 모든 디자인 요소를 쉽게 수정할 수 있으므로 기술적 지식과 기술이 필요하지 않습니다. 그러나 마음대로 사용할 수 있는 사용자 정의 옵션에 대한 기본 아이디어를 얻기 위해 더 자세히 검토해 보겠습니다.

주제

테마는 웹사이트의 기본 디자인을 결정하는 템플릿입니다. 네트워크에 테마를 적용하면 헤더, 배경 이미지, 페이지 레이아웃, 탐색 모음, 글꼴 등을 포함하는 디자인 요소의 사전 설정 조합을 적용할 수 있습니다.

Ning은 다양한 유형의 웹사이트를 위해 세심하게 디자인된 바로 사용할 수 있는 다양한 테마를 제공합니다. 포트폴리오 웹사이트가 필요하십니까? 라이브러리에서 해당 테마를 선택하십시오. 음악 커뮤니티를 만들 준비가 되셨나요? 문제 없습니다. Ning에도 이에 대한 템플릿이 있습니다!

Design Studio 메뉴의 "테마" 탭에서 Ning이 개발한 전체 테마를 찾을 수 있습니다.

목적에 가장 적합한 것을 선택하고 "게시" 버튼을 누르십시오. 테마를 적용하기 전에 미리 볼 수 있습니다.

Ning 테마는 모든 기존 플랫폼에서 최고의 성능을 위해 신중하게 최적화되었으므로 데스크탑과 모바일 장치 모두에서 멋지게 보입니다.

또한 "테마" 탭에는 두 개의 하위 탭이 있습니다.

• 기록 : 이전에 네트워킹 웹사이트에 적용한 모든 테마를 검토할 수 있습니다.
• 관리 : 여기에서 테마를 가져오고 내보낼 수 있습니다. 디자인 스튜디오는 .txt 형식의 테마를 지원합니다.

사전 설정된 테마를 그대로 사용할 수 있지만 완전히 독특한 디자인을 달성하기 위해 추가로 사용자 정의할 수도 있습니다.

배경

배경 이미지를 설정하여 테마 사용자 지정을 시작하세요. 두 가지 간단한 방법이 있습니다.

• Ning에서 제공하는 표준 이미지 중 하나를 선택하십시오.
• 자신의 이미지를 업로드하고 배경으로 적용하십시오.

자신의 이미지를 업로드하려면 "배경" 탭을 선택하고 카메라 아이콘을 클릭하십시오.

이미지 선택 목록의 오른쪽에는 배경 이미지를 조정할 수 있는 몇 가지 추가 옵션이 있습니다.

• 색상 : 배경 색상을 설정합니다.
• 정렬 및 방향 : 배경 이미지의 9개 위치 중 하나를 선택합니다.
• 렌더링 : 배경 이미지가 페이지에서 렌더링되는 방식을 정의합니다. 드롭다운 메뉴에는 타일, 수평으로 타일, 수직으로 타일, 늘이기 및 일반의 다섯 가지 옵션이 있습니다.
• 스크롤 옵션 : 스크롤을 활성화하거나 해당 라디오 버튼을 선택하여 배경 이미지의 위치를 ​​수정할 수 있습니다.

배경 이미지가 끝나면 웹사이트 디자인의 가장 중요한 요소 중 하나인 헤더로 넘어갈 차례입니다.

헤더

헤더는 웹사이트에 대한 소개 정보(이름, 로고 등)와 탐색 모음을 포함하는 블록입니다. 헤더는 웹사이트의 모든 페이지에서 계속 볼 수 있으며 일반적으로 상단에 위치하지만 때로는 디자인 개념에 따라 페이지의 오른쪽 또는 왼쪽에 배치될 수도 있습니다.

웹사이트 헤더 디자인을 시작하려면 "헤더" 탭을 클릭하십시오.

탭에는 헤더의 다양한 매개변수를 설정할 수 있는 여러 하위 탭이 있습니다.

• 스타일 :

여기에서 헤더의 위치와 방향을 설정할 수 있습니다. 클래식 옵션은 상단에 있는 헤더로 배경 이미지, 네트워크 이름, 로고 및 아래 탐색 모음이 포함되어 있습니다. 그러나 네트워크를 돋보이게 하기 위해 사용 가능한 다른 변형을 고려할 수 있습니다.

또한 해당 상자에 필요한 값(픽셀 단위)을 입력하여 헤더 및 패딩의 크기(높이 및 너비)를 자유롭게 변경할 수 있습니다.

팁 대부분의 테마에 대한 기본 높이 제한은 135px입니다.

• 이름/로고 :

헤더의 필수 기능 중 하나는 웹사이트 이름(또는 회사/브랜드 이름)을 전달하는 것입니다. 그림을 완성하려면 로고도 표시해야 합니다. NING Design Studio를 사용하면 이름과 로고를 모두 쉽게 사용자 지정할 수 있습니다.

네트워크 이름을 설정하려면 관리자 대시보드에서 액세스할 수 있는 "소셜 사이트 관리자" 메뉴의 "일반 설정"으로 이동하여 "사이트 이름" 텍스트 상자에 이름을 입력합니다.

그런 다음 Design Studio로 돌아가서 웹사이트 이름에 적용된 글꼴의 스타일, 색상 및 크기를 선택할 수 있습니다.

네트워크 이름 사용자 지정을 마치면 로고를 업로드할 차례입니다. 이렇게 하려면 카메라 아이콘을 클릭하고 컴퓨터에서 필요한 이미지 파일을 찾으면 됩니다.

로고가 업로드되는 즉시 오른쪽에 있는 슬라이더 막대를 사용하여 로고 크기를 조절할 수 있습니다. 패딩 크기와 로고 정렬을 변경할 수도 있습니다.

• 항해

이 메뉴를 사용하면 탐색 모음을 사용자 지정할 수 있습니다. 배경색 및 테두리 유형을 변경하고, 탭과 하위 탭의 글꼴을 조정하고, 색상을 설정하고, 호버 효과를 제어하고, 탭 패딩 크기를 수정하고, 탭 사이의 간격을 조절할 수 있습니다.

• 배경

머리글을 아름답고 독특하게 만들려면 보기 좋은 배경 이미지를 설정하세요.

"배경" 메뉴를 사용하면 캔버스 배경과 전체 너비 배경을 모두 사용자 지정할 수 있습니다. 이렇게 하면 헤더 디자인을 실험할 수 있는 더 많은 방법이 열리고 색상과 이미지의 올바른 조합을 선택할 수 있습니다. 선택한 디자인 테마 및 네트워크 주제와 일치하는 것을 찾으십시오. 원하는 만큼 자유롭게 창의력을 발휘할 수 있습니다!

적합한 이미지를 찾았습니까? 좋은. 카메라 아이콘을 클릭하여 업로드하고 위치와 정렬을 조정하기만 하면 됩니다.

헤더 크기에 맞도록 이미지를 편집하고 필터 및 효과 등을 적용할 수도 있습니다. 이렇게 하려면 BeFunky 또는 Pixlr 과 같은 온라인 이미지 편집 도구를 사용하십시오 .

• 계정 표시줄

여기에서 각 네트워크 페이지 상단에 표시되는 계정 표시줄의 색상을 설정할 수 있습니다. 배경색, 텍스트 색상 및 호버 효과를 제어할 수 있습니다. 게다가 브라우저 창 상단에 계정 표시줄을 고정하는 옵션이 있습니다.

페이지

Design Studio 메뉴의 "페이지" 탭은 네트워크 페이지의 전체 모양을 사용자 정의하는 데 도움이 됩니다. 여기에는 여러 하위 탭이 포함되어 있습니다.

• 일반 : 페이지 배경 색상 설정, 페이지에 표시되는 글꼴 선택, 단락 간격 조절, 페이지 패딩 크기 및 페이지 너비 수정. 웹사이트를 전체 화면 모드로 실행하려면 "페이지 너비" 드롭다운 메뉴에서 "100%"를 선택합니다.
• 모듈 : 모듈 의 매개변수를 제어합니다. 모듈은 네트워크의 모든 페이지에 나타나는 콘텐츠 블록입니다. 배경색, 글꼴, 타일 및 콘텐츠 패딩, 타일 정렬 등을 변경할 수 있습니다.
• 링크 : 페이지 탐색 버튼 및 게시물 제목을 포함하여 웹사이트에 표시되는 링크의 모양을 사용자 정의합니다.
• 버튼 : 사이트에서 다양한 작업을 수행하는 버튼 디자인을 조정합니다.
• 효과 : 페이지 모서리와 콘텐츠 모듈의 모서리를 날카롭거나 둥글게 만들고 프로필 사진의 모양을 설정합니다.

맞춤 CSS

내장된 사용자 정의 옵션이 충분하지 않고 코딩이 처음이 아닌 경우 "사용자 정의 CSS" 탭을 탐색하십시오. 사용자 정의 CSS 코드를 삽입하여 웹사이트 디자인에 고급 수정 사항을 적용할 수 있습니다.

CSS 코드를 입력할 수 있는 두 가지 영역이 있습니다.

• 글로벌 CSS : 범용 사용자 정의를 나타냅니다.
• 테마 CSS : 테마별 사용자 정의를 나타냅니다.

기술에 정통한 사용자는 사용자 정의 CSS 기능이 시각적 표현 측면에서 훨씬 더 인상적인 결과를 얻는 데 특히 유용하다는 것을 알게 될 것입니다.

완벽한 웹사이트를 디자인하세요

시각적으로 멋진 웹 사이트를 디자인하는 것은 영감, 창의성 및 다양한 사용자 정의 도구의 문제입니다. NING Design Studio는 이러한 도구를 제공하며 보기에 좋고 탐색하기 편리할 고유하고 매력적인 웹사이트를 개발하도록 권장합니다.

Design Studio 핵심 기능에 대한 이 간략한 개요가 청중에게 진정으로 깊은 인상을 줄 소셜 웹사이트를 만드는 데 도움이 되기를 바랍니다. 그동안 계속 실험해 보세요! 다른 것들과 그것들의 조합을 시도하여 당신이 만족하고 자랑스러워할 디자인에 도달하십시오.

브렌다 피터슨

Brenda는 Ning의 기술 전문가입니다.

모든 게시물 보기