Design (14)
If you want to give your members a tool to use for showing where their posts and content are geolocated, here is a tool for you. Use this static map generator tool to create an embed code for adding maps to your posts, pages and groups or virtually any post on Ning 3.0 networks using this tool. Code is below for adding your own to a site.
Code for Adding Google Maps Static Map Generator to Your Site. Just plop the following HTML into a text box on a page if you'd like to allow your members to generate a static map code for their posts.
<iframe name="mapgenerator" width="100%" height="700" style="border: 0px #FFFFFF none;" src="https://storage.ning.com/topology/rest/1.0/file/get/11490544?profile=original" marginheight="0px" marginwidth="0px" frameborder="1" scrolling="yes"></iframe>
I just added this to JenSocial, and figured it might be a good idea to add here too. When it comes to Graphic and Web Design, there's a ton of room for all types of artistic and creative levels, styles, etc... However, there isn't room for a ton of fonts. Some of the wonderful aspects of the vastness of the Internet are: so much to discover, so much for the eyes to see - - so many different designs, and so many different Designers. But, way too often, there are too many fonts starring you in the face.
Whether you have designed your own website, or hired a Designer, here are a couple of Design Tips that you can take to heart - - seriously. There's no written-in-stone rules, just a few good rules-of-thumb. To new or novice Designers these tips may seem simple and unimportant. But, trust me on this. These 2 small bits of advice are critical for the success of your overall Design.
- Don't Use Too Many Font Types. There is never a need to use more than 2-3 for a logo, header, or special image. And you shouldn't use more than 3-4 for your overall site.
- Be Consistent When Using Fonts and Applying Font Attributes. For example: If you use a different font for every headline, this is confusing, tough on the eyes, and can give your design a busy and unprofessional look. If you apply bold for one type header, apply bold for all headers of the same type. If you use Lucida Grande, and apply bold for a sub-title, do the same for all sub-titles.
Bottom Line: There will be cases where you really need more fonts. If you need more to communicate better, go for it. But, when possible, try to keep those fonts at a minimum.
Happy Designing!
;-)
Jen
I love, love, love the new design tools.
Thank you to all the boys and girls at ning that put this stuff together. I'm a designer but not a programmer and I made our Veloist site look awesome!
The beta 2 column format is exactly what I wanted to do, cleaner lines and bigger ad space--now I just need some advertisers.
Rock on ning, oh and ride safe.
Mike the Veloist
- In the infinite pursuit of making a little money with our networks, the know-how for creating rotating ads and banners is ever-present. I figured I would help you all out a little bit and point you towards some rotating banner scripts and image rotators for you to implement on your networks as I am on my network for land surveyors. I hope you enjoy these. If you use one, please stop back by and drop a screenshot in the comments below and show us how it turned out.
- Simple Banner Rotator
[DEMO HERE] This free JavaScript supports an unlimited number of banners, the ability to refresh (change) the ads every n milliseconds, where n is an interval you set, as well as the facility to specify a banner or set of banners for rotation at a particular location, or have them rotate randomly. You can set an expiry date for a banner as well, where a particular banner is removed from display after a certain date. Different sets of banners can also be assigned to different parts of your web page, and the script is able to avoid displaying the same banner in different spots on the same page. You can set the sizes of the banners (overriding the default size for the banner), cause the links for each banner to open either in the same window/tab or a new browser window/tab, etc. The script is released under the GNU General Public License, which means that it's open source.
[DEMO HERE] This script rotates your pictures, photos or other types of images along with their associated links (that is, each image can have different target links). The first image that is shown is random, and the subsequent images will be shown in sequence (as far as I can tell). The site's demo uses the script as a sort of photo slideshow.
[DEMO HERE] This banner rotation script will automatically switch the advertisements displayed on your site while your page is being displayed. It can handle Flash, images and other types of banners, and allows you to display two or more banners on the same page.
[DEMO HERE]This banner rotator will display your banners, which may be either images or Flash files, together with their captions.
With this java script you can put random image ad or rotate banner ads randomly. Just put source and link to your images in array and this script will do the rest.
Welcome to the fourth in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.
Trick #4: Adding a Two-Column Hero Box
The following code, used on the homepage of Ning Creators, will insert a "hero" module that spans two columns at the top of your network's Main page content area. This area could be used to insert an image, a custom Flash/JavaScript piece or just a simple text introduction.
Here's an example:
.space {height:270px;} /*Height of the Hero Area */
.module_text .xg_module_body {overflow:visible;}
#spotlight {margin-left:-245px;width:741px;}
#spotlight img, #spotlight embed, #spotlight object {padding:0; margin:0; max-width:741px;}
Next, visit the "Analytics" area inside the "Manage" tab, then paste in the following snippet (underneath any other code that may already be there):
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xg_layout_column_2").attr({_maxembedwidth: "741"});
}
</script>
On the "Features" area inside the "Manage" tab, add one new Text Box at the top of the left column, then a second Text Box at the top of the center column. Save your changes.
Here's an example:
Back on the Main page, click the "Edit" button on the new Text Box in the left column, then insert the following snippet:
Now click the "Edit" button on the new Text Box in the center column, and insert this snippet:
Replace the "ADD HERO CONTENT HERE" text with your custom content (whether it's an image, embed code, HTML, etc.), then save your changes.
Enjoy!
<div class="space"></div>
Now click the "Edit" button on the new Text Box in the center column, and insert this snippet:
<div id="spotlight" class="space">ADD HERO CONTENT HERE</div>
Replace the "ADD HERO CONTENT HERE" text with your custom content (whether it's an image, embed code, HTML, etc.), then save your changes.
Enjoy!
We've collected Ning Networks that have inspiring design here in the past. Here's a post on Socialbrite, where LauraO shares some of her favorites. The collection includes Ning Networks focused on commercial efforts, those that are non-profit based, as well as a couple making best use of the Groups feature.
Some will be familiar, but there are definitely a few Ning Networks new to me!
What do you think of those mentioned? Which do you think should be joining as a best-designed Ning Network?
Welcome to the second in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.
Trick #2: Centering the Navigation
The following code, used on Carmen Electra's official community, will center your network's navigation area in all web browsers.
To do this, just visit the "Appearance" area inside the "Manage" tab, then paste the following CSS snippet inside the "Advanced" section (underneath any other code that may already be there):
#xg_navigation ul {text-align: center;margin: 0 auto;}#xg_navigation ul li {display: -moz-inline-box; /* inline-block for earlier versions of FF */-moz-box-orient: vertical; /* inline-block for earlier versions of FF */display: inline-block;vertical-align: middle;*display: inline; /* ie7+ hack */*vertical-align: auto; /* ie7+ hack */text-align: left;float: none;}#xg_navigation ul li a {display: inline;}
When you're done, click the "Save" button. Your navigation should now be centered. Enjoy!
Hi everyone!
Since there's an active discussion on critiquing each others Ning Networks, here is a web page on hints for critiquing a site -- http://www.digital-web.com/articles/web_design_critique/ -- okay, it's on slightly different subject (actual HTML design rather than Ning Networks) but it's still pretty useful. I'll highlight the major points here:[NOTE THAT THE FOLLOWING TEXT IS FROM THE ABOVE LINK, PARAPHRASED IN THE CONTEXT FOR PEOPLE CRITIQUING NING NETWORKS. THAT SAID, I PRETTY MUCH AGREE. :) ]
Asking for an opinion
The more experienced a designer is, the less s/he's likely to ask people for opinions on her designs. After all, everyone else that hangs out on a list or message board is less experienced than you are, right?
When you are offering up your wares for the world to rip into, it can help to be as specific as possible about what you want them to look at. Here are some suggestions:
- Clearly state what the objective of the site or page is.
- Be specific about what you want comments on - and hope that people will read that before they start offering opinions.Taking it
It can be hard to take criticism, but as I've already said, sometimes it can be tremendously useful. While the tendency may be to listen only to people whom you know and perhaps whose work you admire, this can often shut you off from those out-of-nowhere responses that really make you think.
First of all though, I do tend to listen far more carefully to the opinions of people whose work I admire--that's just natural.
Also, I do tend to discount the type of opinion which says something along the lines of "I don't like your design at all, it's just not my style." (Even worse is that very helpful "your design sucks".) That's not really the point--everyone has his or her preferred styles, or colors, but a decently educated eye can tell the difference between good and bad design.
On the flip side, not all positive feedback is useful either. "I just love everything you do!" is not too in-depth or constructive... it's flattering for sure, but is it useful?
The best type of criticism tends to be very specific, in my opinion. Comments such as "the use of the navigation can be more user-friendly if arranged such a way" or "the color contrast would be better if." etc. are specific and critical without being negative.
When asked for an opinionTaking criticism can be tough, but often dishing it out can be harder. I don't think that anyone wants to hurt someone's feelings; but then again, what can one do when confronted with a design you can't stand? Do you lie? Well...it depends.
Beware of newbies
First of all, consider the source. Is it someone who is seriously considering becoming a professional web designer [or a hardcore Ning user -Ern] --or perhaps someone who already calls himself a pro? If so, then I think that you should be as tough on them as any of their clients might be. On the other hand, if it were someone who is doing this as a hobby, or just starting out, you would probably want to be much gentler.
If you see something positive, it might be good to emphasize this first--especially if you see some kind of potential. Perhaps their designs are way too busy and cluttered (a common problem for beginner-type pages) but perhaps their use of color is unique; then you can latch onto that.
When there's some more potential:
Mentoring
If the person is asking for a critique, and you think their work is worth offering opinions about, then it's a different story. At which point, if you have any experience yourself (and the other party respects your opinions), it's a chance to become a mentor. This can be a truly rewarding experience. It can be a joy to see someone blossom as they absorb the criticism they receive.If the person is not being specific, as is detailed in the above section, ask them those questions. Who is the intended audience? Unless the work in question is a pure for-fun piece, it doesn't necessarily matter how beautiful it is--it also has to be practical. Consider your "student's" goals--are they doing this just for fun, or do they want to make a living at it? Maybe they are very good at doing sites with lots of complicated decorative elements, but if they're aiming for business clients perhaps they'd appreciate some tips on how to make more "boring" sites. And so on.
Hope this helps.- E
Welcome to the first in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.Trick #1: Adding an Arrow Indicator to Navigation DropdownsThe pulldown menus created by our Tab Manager feature are extremely popular, however some Network Creators have expressed interest in displaying an arrow indicator next to tabs that have a dropdown menu (to make it clear to members that there's more content inside that tab). You can see this in action on Enrique Iglesias' official social network.To achieve this effect, visit the "Manage" tab, then the "Analytics" section. Paste in the following snippet underneath anything else that may already exist (don't delete anything):<script type="text/javascript">if (typeof(x$) != 'undefined') {//Adding "dropdown" class to nav tabs that have subtabsx$("li.xg_subtab[dojotype='SubTabHover']").addClass("dropdown");}</script>Save the changes. Now visit the "Manage" tab again, followed by the "Appearance" section. Click on the "Advanced" tab.If you have a light background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/black-arrow.png) no-repeat right center;}If you have a dark background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/white-arrow.png) no-repeat right center;}Save the changes. You're all set. You can adjust the "5px" number above to tweak the spacing that appears to the left of the arrow, and if you want to use a different arrow image or support legacy web browsers, you can create a new image with an image editing program, then swap out the existing black-arrow.png or white-arrow.png URL with your custom image's URL.Note that this technique works best on themes in which tabs don't have a separate background color when selected, though certainly feel free to experiment. Happy dropdowning!
