iGrOOps has many very flexible and powerful design elements that allows administrators to get the look and feel they are going after while staying within an easy to use templated system. If you choose not to use our design package and design your own iGrOOp, here is all you need to know to create a spectacular and effective iGrOOp -- assuming of course you have a good sense of design :).
iGrOOps is a template-based system, meaning you do NOT need to know coding or HTML to setup or manage your group.
Choices
You want 'em, you got 'em! Here are some of the decisions you will need to make when designing your group site:
Many of these choices are only available to Pro iGrOOp users -- the free iGrOOp does not allow for nearly as much design flexibility.
Once you have a good idea of what you want your group to look like, it is time to get to work. The basic design of an iGrOOp take take anywhere from 1-5 hours on average.
Much of the following is advice based on opinion from the lead designer at iGrOOps who has over 13 years experience designing websites for attractiveness, professionalism, and effectiveness. Feel free to take the advice you agree with and leave the rest behind.
Designing Your iGrOOp
Do you already have a logo? Do you already have a website or organization colors/style that you are matching? If so, much of the "design" element is already done for you; it is just a matter of organization and layout. However, if you are starting from scratch, begin with the main image.
The main image (or main photo). This is the image that is the center of your iGrOOps homepage -- the focal point. The image should convey the look and feel of your group and when possible, include real people for the "human" touch.
figure 1: main image using left and right columns. This design also uses the center column border.
The sizing for this image has no max or minimum height, but different maximum widths, depending on the format you choose. This part could get a little confusing, so I will do my best to carefully illustrate. Keep in mind that there are three variable and eight possible combinations. Example: if you are using the icon header and left and right homepage columns as pictured in figure 1 the maximum image width for the center main image is 490px.
center column border
top menu
right column
max width
Choosing Your Color Theme
In the administrator settings (link/icon that only admin can see) you will find the option for "Your iGrOOp Color Theme". Here is where you choose which icon package you want to use, and you can either choose one of the predesigned color themes or create your own custom color theme that matches your image colors.
I use a desktop app called "Color Schemer" ( http://www.colorschemer.com/online.html ) to pick colors from my logo/main image and get the hexadecimal value to plug in as the custom color theme.
Some advice when creating a custom color theme:
Header Options
You spoke, we listened. Perhaps the #1 request we have had was for a more customized look option. This is now achievable through the full header and footer image.
Prior to this option, all iGrOOps sites used the default header layout -- the small left side logo with a choice of icon package across the top.
The default header layout is simple, clean, and easy to use. Just because you can make it more custom, doesn't always mean you should.
With the new option, you can design a header image that is exactly 850px wide and a matching footer image of the same width (any height). Instead of the icons being used across the top, text based "tabs" are used.
Because the words take much more space than the simple icon, all the admin tool have been moved to the bottom footer...
To see a more clear and working example of this, visit http://y2s.igroops.com
When you are not a member of a group, or not logged in, you will see different tabs than a member would see. Also, unless you are the admin, you will not see the admin tabs at the bottom of the page.
Some points to note about the new custom design option:
With the full-size header image option, you get one custom tab that appears right after the home page tab. You can use this for anything! Sorry, we can only spare space for one... the real estate is very tight in that area!
To use the full-size header image layout. Upload the images under Pro Package Feature > header/footer/navigation option in your home page editor.
The custom header/footer images work great with a black background as well. If you select the "use dark background" checkbox right under where you upload the background image, the white filled box that would normally appear around your content will not be used and give your group a different look.
The Small Left Header Image
If you prefer the traditional group site look, or want to keep your design work at a minimum, keep the default header and simply upload a small custom version of your logo to the left header.
The height MUST be 50px, but the width could vary. It is suggest you shoot for about 300px wide for the best results. Here are a few tips for the left header image: