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. Within seconds you can change your template design in your admin settings > your igroops theme to a stock theme.
Choices
You want 'em, you got 'em! Here are some of the decisions you will need to make when designing your group site:
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.
Wide Layout or Standard?
In your ADMIN SETTING, Basic Settings, you will see an option for using the "wide layout". This will expand the width of your site by 90px, still within non-scrolling range of almost all displays in use today. There is really no disadvantage for using the wide layout, so we do suggest it. Once you know what layout width you will use, you can proceed to design your other elements. The standard layout is about 885px wide and the wide layout is about 975px wide.
Examples:
Wide Layout: http://ids.igroops.comStandard Layout: http://www.twooting.com
The wide option is fairly new. We are in the process of making new header images for our existing groups to take advantage of the extra space. Moving from standard layout to wide layout is as simple as selecting the option in your admin area, then uploading a header image that is 90px wider (and changing the width of any center column images/widgets if used).
Border or No Border?
The examples above have a border enclosing all the content. This creates a very attractive, organized look and feel that works very well for most sites. However, some sites might want to break out of the constricting border, especially those with header images that work well being fully extended left and right. Choosing to use the border or not does not alter the width requirements for any of your images.
To choose NOT to use the border, enter your HOME PAGE EDITOR and expand the "Headers / Footers / Background" section. There you will see the following options:
If you choose the "using dark background" option, the text and links will switch from dark to light, so they show up better on your background.
Just because there are no borders, the images, menu items, and columns are still restricted to the maximum width allowed by the layout option chosen. Removing the borders allows the background to show through and the header image and menu to appear to continue all the way to the left and right.
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.
Two or Three Columns: Sizing Your Center Column Images
The main image (or main photo). This is the image that is the center of your iGrOOps homepage, under your main menu -- the focal point. The image should convey the look and feel of your group and when possible, include real people for the "human" touch, but be careful with overuse of stock photo people. Some people choose to skip the main image if the site is more content focused. The main image does, after all, take up some valuable real estate.
figure 1: main image using left and right columns.
The sizing for this image, or any image, widget, video, iFrame, or element you place in the center column, has no maximum or minimum height, but different maximum widths, depending on the layout you choose. This part could get a little confusing, so I will do my best to carefully illustrate.
Layout A: Standard Width using Right Column: 405px wide
Example:
Layout B: Standard Width NOT using Right Column: 627px wide
Layout C: Wide Layout using Right Column: 496px wide
Layout D: Wide Layout NOT using Right Column: 717px wide
Layout E: Wide Layout using Right Column Only: 648px wide
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 font and icon package you want to use, and you can either choose one of the pre-designed color themes or create your own custom color theme that matches your image colors.
The names of the sections where you choose the colors should be self explanatory. However, if you are unsure just choose a color and look at your site. You may need to reload your browser to ensure your site is using the latest CSS file.
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:
Backgrounds!
When it comes to choosing the perfect background look for your site, you have almost too many options! Return to your HOME PAGE EDITOR and expand the "Headers / Footers / Background" section. You will see the following options for the background:
By playing around with these options, you should almost certainly get the exact look and feel you are after.
The Top Menu Design
The top menu has some design options as well. By default, it uses a standard font size and face, has a border and no background image - it uses a light background color from your theme. You can change this.
Here are some of the options in your HOME PAGE EDITOR, "Top Menus and Submenus" section.
By using an image for the background menu, you can see how you can really spice up the design. Have a look at the toastmasters podcast website image above for an example.
Other Design Elements and Sizes
Here are some other design specs for elements that are not effected by your choices above.
the small corner of the page peel ad showing
the larger page peel ad being revealed with the mouse over the small image.
the join now ad displays when a non-member tries to access member content