How to Design Your Community on Ning
Design Guides Your Ning Network
Although the content is undoubtedly the most valuable asset of your Ning network, the design is something to be taken very seriously as well. No matter how relevant and engaging your content is, no one would be particularly excited to browse an ugly website, right? The truth is, 38% of people give up engaging with a website if they find it unattractive. Obviously, as a network creator, you don’t want to lose this much audience. On the contrary, you want users to be happy about every single aspect of your creation.
A visually appealing and user-friendly network design helps you grasp people’s attention and ensure the best user experience possible. It’s not just the matter of aesthetic beauty. As long as your website design is professional and intuitive, more users want to interact with it, hence more people join your network, and the more traffic you drive to your website.
Besides, a unique and individualistic design can make your network stand out from the rest and let you reveal its true identity. After all, we’re talking about personalized social networks Ning is known for.
But how to design a website that will both look cool and be a treat to navigate through? Here are some useful tips for those who have just started to explore the Ning platform and its capabilities.
Getting started with NING Design Studio
One of Ning’s top priorities has always been giving users the maximum control over the visual appearance of their networks. This is why Design Studio was created.
NING Design Studio is a set of tools that allows customizing the design of social websites created on the Ning platform. It offers users an abundance of customization options aimed at making every Ning network unique and beautiful.
The Design Studio can be easily launched by clicking the corresponding icon on the Admin Dashboard which is available as a green toolbar in the top left corner of every network page.
There are several customization categories available within the Design Studio menu:
- Themes: select a general design template for your website;
- Background: choose and configure the image appearing at the backdrop of your website;
- Header: design a header that will match the topic of your network;
- Page: set the overall look of your network pages;
- Custom CSS: insert the custom CSS code to make advanced changes to your website design.
Each category contains several distinctive customization options. To design a website that will look truly professional, take your time and proceed gradually from one category to another, setting the parameters of each element of your network in accordance with your creative vision. You can configure practically every aspect of your website design to match your aesthetic preferences.
What is more, the Design Studio allows you to preview any changes you make before they are actually applied to your network. This makes the customization process very convenient and intuitive.
As a matter of fact, using the Design Studio doesn’t require any technical knowledge and skills as every design element can be easily modified with the help of a user-friendly interface. However, to get the basic idea about the customization options you have at your disposal, let’s review them in closer detail.
Theme
A theme is a template that determines the basic design of your website. By applying a theme to your network, you apply a preset combination of design elements including a header, background image, page layout, navigation bar, fonts, etc.
Ning offers a broad selection of ready-to-use themes meticulously designed for different types of websites. Need a portfolio website? Go pick the corresponding theme in the library. Up for creating a music community? No problem, Ning has templates for that too!
You can find the whole range of themes developed by Ning in the “Themes” tab of the Design Studio menu.
Just pick the one that suits your purpose best and hit the “Publish” button. Before you apply a theme, you can preview it.
Ning themes look great both on a desktop and mobile devices as they have been carefully optimized for the best performance on all existing platforms.
Besides, the “Themes” tab contains two subtabs:
- History: allows you to review all the themes you applied to your networking website before;
- Manage: here you can import and export themes; the Design Studio supports themes in the .txt format.
While you can use the preset themes as they are, it is also possible to further customize them in order to achieve a completely unique design.
Background
Start customizing your theme by setting a background image. There are two simple ways to do it:
- Select one of the standard images offered by Ning;
- Upload your own image and apply it as a background.
To upload your own image, select the “Background” tab and click on the camera icon.
To the right of the image selection list, you will find several additional options to tweak your background image:
- Color: set the color of your background;
- Alignment & Orientation: choose one of the nine positions for your background image;
- Rendering: define how your background image will be rendered on the page; there are five options available in the dropdown menu: Tile, Tile Horizontally, Tile Vertically, Stretch, and Normal.
- Scrolling option: you can either enable scrolling or fix the position of your background image by checking the corresponding radio button.
When you finish with your background image, it’s time to proceed to the header, one of the most important elements of your website design.
Header
A header is a block that contains the introductory information about a website (name, logo, etc.) and a navigation bar. A header remains visible on every page of a website and is usually located at the top, although sometimes it can also be placed on the right or left side of a page, depending on the design concept.
To start designing your website header, click on the “Header” tab.
Within the tab, you will find several subtabs allowing you to set different parameters of your header:
-
Style:
Here you can set the position and orientation of the header. The classic option is a header located at the top, containing a background image, network name, logo, and navigation bar below. However, you can consider other available variants to make your network stand out.
What is more, you are free to change the size (height and width) of your header and its padding by entering the required values (in pixels) in the corresponding boxes.
Tip: The normal header width is between 950px and 960px. The default height limit for most themes is 135px.
-
Name/Logo:
One of the essential functions of a header is to communicate a website name (or a company/brand name). To complete the picture, you’ll want to show your logo as well. With NING Design Studio, you can easily customize both name and logo.
To set a network name, go to “General Settings” of the “Social Site Manager” menu accessible from the Admin Dashboard and enter the name in the “Site Name” text box.
You can then go back to the Design Studio and select the style, color, and size of the font applied to your website name.
When you finish customizing your network name, it’s time to upload your logo. To do this, simply click on the camera icon and find the required image file on your computer.
As soon as the logo is uploaded, you can regulate its size with the help of the slider bar located to the right. You can also change the padding size and the alignment of your logo.
-
Navigation
This menu allows you to customize your navigation bar. You can change the background color and border type, adjust fonts for both tabs and subtabs, set colors, control the hover effect, modify the tab padding size, and regulate the spacing between tabs.
-
Background
To make your header beautiful and unique, set a good-looking background image for it.
The “Background” menu enables you to customize both the canvas background and full-width background. This opens more ways to experiment with the header design, letting you pick the right combination of colors and images. Try to find those that match the design theme you have selected, as well as the topic of your network. You are free to get as creative as you want!
Found the suitable images? Good. Just upload them by clicking on the camera icon and adjust their positioning and alignment – easy!
You might also want to edit your images so that they fit the size of the header, apply filters and effects, etc. To do this, use an online image editing tool, e.g. BeFunky or Pixlr.
-
Account Bar
Here you can set the color of the account bar shown at the top of each network page. You can control the background color, text color, and hover effect. Besides, there’s an option to fix the account bar to the top of the browser window.
Page
The “Page” tab of the Design Studio menu is there to help you customize the overall appearance of your network pages. It contains several subtabs:
- General: Set the color of the page background, select the fonts that appear on pages, regulate the paragraph spacing, modify the page padding size and page width. If you want your website to run in the fullscreen mode, select “100%” in the “Page Width” drop-down menu.
- Module: Control the parameters of modules. Modules are content blocks appearing all over the pages of your network. You can change their background color, fonts, tile and content padding, tile alignment, etc.
- Links: Customize the appearance of links presented on the website, including page navigation buttons and post titles.
- Buttons: Tweak the design of buttons that perform various actions on the site.
- Effects: Make the corners of pages and content modules sharp or rounded and set the shape of profile photos.
Custom CSS
If the inbuilt customization options are not enough for you and you’re not new to coding, explore the “Custom CSS” tab. It allows you to insert a custom CSS code and thereby apply advanced modifications to your website design.
There are two areas where the CSS code can be entered:
- Global CSS: refers to universal customizations;
- Theme CSS: refers to theme-specific customizations.
Tech-savvy users will find the Custom CSS feature particularly useful for achieving even more impressive results in terms of visual presentation.
Design your perfect website
Designing a visually stunning website is a matter of inspiration, creativity, and versatile customization tools. NING Design Studio gives you these tools and encourages you to develop a unique and attractive website that will both look great and feel convenient to navigate through.
Hopefully, this brief overview of the Design Studio core features will help you create a social website that will truly impress your audience. Meanwhile, keep experimenting! Try different things and their combinations to arrive at the design you’ll be happy about and proud of.
