Forum Re-Design

[Brice Burrell]

  I thought from the beginning the welcome/show unread post text should be in its own area, let the logo have its own space. I like the pale green in the alternating colors. What I don't like is the "quote, modify and remove" icons, the colors seem out of place wit the rest of the color scheme. Also, I'm not liking the wider green border, I much preferred the pin stripe look. I'm fixated on the border and now its distracting.

[Ned]

Coming together nicely, Matthew.  My screen is 1280 X 1024.

A couple of suggestions - put the Welcome text and links in the right side of the banner back the way it was - with Show unread... and Show new... on seperate lines.  That text still crowds and overlaps the logo.  When it was on four lines instead of three, it worked better, IMHO.

Try the logo in a vertically centered position within the banner, or at least a bit higher.  It's close to the bottom now.

The logo and the Welcome text need to work together.  They seem to be fighting each other right now.

I like the light green shading.

I too would prefer Show unread and Show new on separate lines.  Both on one line encourages you to see them as simple text, not links.

The logo completely fills (vertically) the banner space on both my 800x600 and 1600x1200 monitors.  I literally don't see what David is reporting.

I don't understand "The logo and the Welcome text need to work together."  David, are they physically overlapping, or do you see them as aesthetically clashing, or what?  (BTW, "aesthetically" isn't dismissive, it's one of the major aspects of what Matthew's doing.)

Ned

[Matthew Schenker]

...What I don't like is the "quote, modify and remove" icons, the colors seem out of place wit the rest of the color scheme. Also, I'm not liking the wider green border, I much preferred the pin stripe look. I'm fixated on the border and now its distracting.

I'm looking into options for the "quote," "modify," and "remove" icons.  That might have to come into place later.  I thinned out the green border (back to 1px from 3).
Matthew

[Daviddubya]

I too would prefer Show unread and Show new on separate lines.  Both on one line encourages you to see them as simple text, not links.

The logo completely fills (vertically) the banner space on both my 800x600 and 1600x1200 monitors.  I literally don't see what David is reporting.

I don't understand "The logo and the Welcome text need to work together."  David, are they physically overlapping, or do you see them as aesthetically clashing, or what?  (BTW, "aesthetically" isn't dismissive, it's one of the major aspects of what Matthew's doing.)

Ned

I'll try to describe what I see in the banner.

The tool photo, an MFT at the moment, occupies the left portion of the banner, pretty much top to bottom.

The logo text reads "Festool Owners Group", and below that "discussions and multimedia...".  That logo text occupies the bottom center portion of the banner.  The "discussions and multimedia..." text is at the very bottom portion of the center banner area.  There is lots of space to move both lines of logo text up, maybe centering it vertically.  It looks off kilter to me, positioned at the bottom of the center area.

The Welcome and the three links text are in the right side of the banner area, and positioned at the top of the banner area.  The third line, which still contains two links, crowds the logo text, although no longer overlapping it.  Another thing to try with this portion of the banner would be to left (Edit: oops, I meant right) justify all of the lines, rather than centering them horizontally.  Right justifying these lines will move them visually further away from the logo text, and will allow the logo text to stand out more, IMHO.

[SRSemenza]

Hi,

   I like the green shading. It could be a  little more on my monitor, but it does show.

   I prefer the larger "Festool Owners Group" letters or something in between the two.

   I like the thicker border line, it helps keep the logo from looking like it is running off the top of the screen, somehow the tools just seem pushed up to the top.

   I think stacking up the "recent unread post" etc all on seperate lines works better.


Seth

[SRSemenza]

Hi,

    I agree with others that the icons don't look right. Just words would be better  OR

  Maybe the "quote", Modify", "remove" icons could be something Festool-  copy ring,  MFS or Router, CT.

Seth

[Overtime]

I also like the green shading, and the "pin striping" of the green lines.

And it seems that the "Festool Owners Group" font has shrunken so much so to accommodate the welcome text. They now compete for top billing. The Festool fonts should be larger and get the space it needs and deserves. Plus it just looked better.  The welcome text ( as important as it is ) comes second, and hopefully can be worked in somehow. Just my 2 cents.

The thick blue borders left and right of page ? Don't know what it is about it - color ,thickness, too heavy? etc - but it's a little distracting.

Thanks for all the work going into this - it is really looking good, first rate ! 

[Daviddubya]

...And it seems that the "Festool Owners Group" font has shrunken so much so to accommodate the welcome text. They now compete for top billing. The Festool fonts should be larger and get the space it needs and deserves. Plus it just looked better.  The welcome text ( as important as it is ) comes second, and hopefully can be worked in somehow...

I agree.  I think the font size of the words "Festool Owners Group" is part of the problem I was trying to describe above.  Perhaps the size of the photos can be reduced to make a bit more room for larger FOG text?

[fidelfs]

I normally don't read a post with so many reply's I get so confuse. I didn't make an exception to this so If this has been address before sorry.

I don't see the links in the new forum: "Show unread posts since last visit.", "Show new replies to your posts.".  I don't know if there will a new functionality to replace those but I don't see them in the new forum.

If you include those links could you also include them at the bottom of the page as well.  When I am reading several post and I want to read a different post I have to move to the top and click the links.

==== +++++  UPDATE +++++ ======

Let me take that back.  I found the links but they are hidden in the right top corner.  They are not ease to find and also they are black.  A different color/font would be great.  They change color when you hover the cursor over them, but you need to find them first 

[Matthew Schenker]

Everyone,
I asked Andrew to re-design his logos so they are smaller.  I had thought that would be better.  However, it seems that his original, larger, version, works better.  I re-uploaded the larger ones to the test forum.

I also right-justified the "Welcome" text as David suggested.  In addition, I created a very thin, light-gray line around the "welcome" text, in order to make it stand out -- but not too much.

   I like the thicker border line, it helps keep the logo from looking like it is running off the top of the screen, somehow the tools just seem pushed up to the top.

I agree.  So I thickened to green line in the top of the forum, while leaving the line thinner in the left, right, and bottom.  See if that works better.

Matthew

[Matthew Schenker]

...What I don't like is the "quote, modify and remove" icons, the colors seem out of place wit the rest of the color scheme.

    I agree with others that the icons don't look right. Just words would be better  OR

  Maybe the "quote", Modify", "remove" icons could be something Festool-  copy ring,  MFS or Router, CT.

Those icons are easy to change.  All I need to do is create 22x22 jpg images.  If anyone wants to submit suggestions for these icons, feel free!

Matthew

[Daviddubya]

Everyone,
I asked Andrew to re-design his logos so they are smaller.  I had thought that would be better.  However, it seems that his original, larger, version, works better.  I re-uploaded the larger ones to the test forum.

I also right-justified the "Welcome" text as David suggested.  In addition, I created a very thin, light-gray line around the "welcome" text, in order to make it stand out -- but not too much.

Matthew

Matthew - Each revision is a bit better.

I cannot see a line around the Welcome text.  It is invisible on my screen.

Once again I recommend placing Unread Posts... and New Replies... each on a seperate line, rather than combining them on one long line.  The right justification works well, IMHO.  With the right justification, the two links on seperate lines will be well away from the "Festool Owners Group" logo text, allowing the FOG name to stand out.

Thanks for your efforts.

[Dan Clark]

Matthew,

Overall, I like the new forum format a lot.   It's a significant improvement over the current format.   

I'd like to make one suggestion about the use of green - limit it's use to the logo and the "functional" parts of the forum.   I.e. things that do something - buttons, links that highlight on mouseover, icons that are active or indicate someone is online, etc.

IMO, bright green is a great color IF it is used in moderation as an accent.    By making borders and post backgrounds green, the green accents loose their impact.

Look at the Festool products.   Except for the bare metal parts there are only two main colors on the products - a very light gray-beige and a blueish-black. 

Everyone talks about the Festool "Green", but it is used only on the logo and the functional parts - switches, knobs, connectors, and latches.   IMO, the green color's impact comes from its limited use!   

I decided to try out my ideas...

This image is a screen shot of the test forum exactly the way it appears on my screen:


This image is a copy of the first image, except that the green border lines are changed to dark gray.   What is interesting (and surprising) to me is that the green band also looks like it changed color.  (The band color was NOT changed.)   


This image is a copy of the second image except that the green band was desaturated and the luminance increased.  I.e., it is actually a very light greenish gray.   


This image is the same as the third image, but the band color is less strong:


To my eyes, the third or maybe the fourth image is the best.   They are better because I think they are the most readable, easiest to navigate and have the most impact.   

In the third and fourth images notice that the wonderful (IMO) green elements in the header are now more prominent.  "FESTOOL OWNER'S GROUP" now pops out at you.   Your eyes are drawn to the controls in the Domino.   Notice that the green "Online" icon sticks out and other icons seem more visible.  And most importantly, the text content pops out. 

My personal preference is obviously the third image because it is most readable.   From a pure attractiveness perspective, I find the second image to be the most attractive with the greatest impact.   The fourth image is a middle ground between image 2 and 3.

Regards,

Dan.

[Ned]

Clear and reasoned presentation, Dan.

The third image, with the monitor set to 16-bit color, looks OK.

I like the third image, too.

Ned

[Daviddubya]

Ned's (Edit - oops - Dan's) screenshots made me realize that the text for the links in the right portion of the banner is even more of a problem on his size screen than it is on mine.  I can now see why the links won't fit well into the banner on seperate lines.  I don't have a specific recommendation, but I do think the links need to be in a position that does not interfere with "Festool Owners Group", IMHO of course.

[Ned]

Ned's screenshots made me realize that the text for the links in the right portion of the banner is even more of a problem on his size screen than it is on mine.  I can now see why the links won't fit well into the banner on seperate lines.  I don't have a specific recommendation, but I do think the links need to be in a position that does not interfere with "Festool Owners Group", IMHO of course.

I'm confused.  I (Ned) haven't posted any screenshots.  Most recently Dan (same letter count, different guy) did.  Yet the mention of screen size makes me wonder if something in David's post does have to do with something I did.  But I don't know what.

Ned

[SRSemenza]

Hi,

        I think I figured out why the logo and the whole page in general seems to be jammed up to the top of the screen.   The thin/ thick green line is not enough of a separator.  It looks/feels like the page is not at the top to me. I keep wanting to scroll to get to the top.  I think it is because it is not framed. If the Festool dark blue page frame went across the top as well as around the sides and bottom , I think that would do it.  Look at the current forum- the frame goes all the way around.

        Try going to the bottom of the page , and then back to the top. It looks like you are at the bottom but not at the top. Also if you are using windows try toggling F11 (full screen) it makes the effect show up even more.
 
        Would it be hard to put the green top line back to thin , and put the blue frame across the top, the same width as it is on the sides?

Seth

[SRSemenza]

Hi,

     I see Dan's point about keeping the green to a minimum to maximize impact. And I like the idea of it being used in the way Festool does for functional items. But I prefer the green lines to grey, and the green shading to grey. I don't think that either are overdone.  To me those things are nice highlights , and the grey is just a little to dull when combined with the other grey stuff on the pages.
     As far as keeping the green in the  functional  vein goes. We could mentally consider the green lines to represent the guide rail strips.  And the green shading could be the FOG.  Also I can find two places on Festool equipment that the green is simply informational or just a company highlight as opposed to actually functional- One being the green stripe on the Systainer labels, the other the rings on the AS hoses. 


Seth
     

[SRSemenza]

Hi,

     Could the "unread posts", etc. simply be removed from the logo area and put somewhere else?  Like in the top grey navigation bar if they were abreviated or shortened?   The more I look at it they seem out of place in the logo field anyway.
     If something was neede to fill that right side area how about an actual logo. Like something that could be made into a members patch


Seth

[Brice Burrell]

Dan, I like the look of the green pin strips lines, however, your gray line do make the page easier read. What I don't like about the gray lines, they seem a bit too dull in color how about black instead?

Seth I think you are right about the top of the looking a little out of place and I like your idea of trying the blue border at the top.

[Daviddubya]

I'm confused.  I (Ned) haven't posted any screenshots.  Most recently Dan (same letter count, different guy) did.  Yet the mention of screen size makes me wonder if something in David's post does have to do with something I did.  But I don't know what.

Ned

Sorry, I meant Dan.  Your posts were right next to each another, and my memory is so short that I forgot who posted the screenshots.  Smile.

[Dan Clark]

One point about designing websites that I learned a long time ago (and just remembered about 10 minutes ago) is that all of this depends on your eyes and your monitor.   

Your perception of the green lines (or any brightly colored lines) depends on your monitor and your eyes.  That doesn't mean that my eyes and monitor are better.   It means that they are different!   

And that's a major problem when designing websites!  I have three monitors that I use at home - one on my laptop and two on my workstation.  On my laptop, the green lines are OK.  Not quite as good as dark gray or black, but pretty good.  On my workstation monitors, the lines are a bright, gaudy green - not quite offensive, but pretty close.   

So here's the snag...  If the FOG webpage is "brightened up" so that it looks nice and bright for one person on one monitor, it can look offensive and gaudy to someone else on a different monitor.  That's why a lot of big professional websites are fairly plain - the designers know that it's better to be perceived as plain by most than to be perceived as offensive by some.

Look at the default SMF template we have.   And take a look at two of the most prominent websites:
http://www.amazon.com/
http://www.google.com/search?hl=en&q=Festool&btnG=Google+Search

Pretty boring aren't they?   As boring as they may be, they also don't offend people.  I'm 100% sure that this is intentional.

Now rove around the web and find some REALLY offensive websites.   I'm talkin' GAUDY colors.  Anyone want to take a bet the web page would look great on the author's monitor!?!

So we come back to the issue of line color.   On your monitor...  Are the green lines offensive enough to bother you?   Are the gray lines offensive enough to bother you?

I'll bet that, while they may not be their favorite, virtually no one would be bothered by the gray lines.  Maybe not great, but not bothersome either.   On the other hand, I'll bet that there are other people who are bothered by the green lines.

In other words, while we should focus on making the website look good to most people, we also need to ensure that website does NOT look bad to some people.  I'm not looking at a rating system from 0 to 10, I'm looking rating range of +10 to -10.   Goodness to zero to badness.

For example, using the current FOG website as a baseline with a score of "0"...

IMO, the new website would score +10 with the gray lines and -4 with the green lines.   That is how much those green lines bother me on my workstation monitors.   

So how much would gray lines bother you?  Would you score the new website a +10 with the green lines and a -4 with the gray lines?  Or would it take your score from +10 to +9?

The bottom line is that we don't see reality; we see one reality presented by our monitor.   From a looks standpoint, I think it's better to have everyone pretty satisfied with their monitor's reality than to have some extremely satisfied and some dissatisfied.   

Regards,

Dan.

p.s., website creation and coding isn't particularly difficult.  Website design is very difficult.  I applaud Matthew courage and strength of will in creating the FOG website!  (I've done some website development in the past.  I know what it's like.  That's why I don't do it no more! )

[Dan Clark]

Dan, I like the look of the green pin strips lines, however, your gray line do make the page easier read. What I don't like about the gray lines, they seem a bit too dull in color how about black instead?

Seth I think you are right about the top of the looking a little out of place and I like your idea of trying the blue border at the top.

Brice,

I'm not promoting gray or any other color.  Gray is fine with me.  Black is fine with me.   Dark, low luminance green would be fine with me.  I'm just promoting "not bright" and maximum readability.   

Regards,

Dan.

[Matthew Schenker]

Everyone,
This is a really good discussion, and it helps me a lot!  I think Dan's comments about over-using the green are important, and I also understand Brice's and Seth's points about making the site brighter and more lively with the green.  Looking over all the elements, I believe there's a compromise here -- perhaps leaving the green "alternating bands" of the posts but toning down the grid lines.  I'll experiment and you can all continue commenting.

Seth's comment regarding the margin of the page is a good one.  When I first launched the test site, I actually had that drak bluish-black margin going all around the forum, including the top.  Then I took it away from the top.  But this makes me reconsider, so I'm going to put it back and, again, people can comment.

There is still an issue, I understand, with the placement of the "welcome text" in the header area.  I see what people are saying.  But my goal here is to get all the "intro" stuff neatly placed in the top region so we can get to the business of the forum.  In the "default" template we're using now, notice all the excessive layering of stuff before we get to the real meat of the forum.  I hate that, and it's one of the main things I'm trying to fix in the re-design.  My goal with the "welcome text" is to make it clear, not intrude on the header, and not take any extra forum space.  I'll keep working on it.

Check the forum again today to see the new changes.

I think we're getting real close to a launchable design.  And let me emphasize again that, even after the new deisign is launched, I can continue to tweak things.

Thanks everyone for getting involved!

Matthew

[Matthew Schenker]

Everyone,
While we're discussing various elements of the re-design, can someone out there create two little images for me?

Here are the details:
1. An "open" and a "shut" Systainer
2. GIF format
3. 15x15 pixels
4. Transparent background

Thanks!

Matthew

[Daviddubya]

...There is still an issue, I understand, with the placement of the "welcome text" in the header area.  I see what people are saying.  But my goal here is to get all the "intro" stuff neatly placed in the top region so we can get to the business of the forum.  In the "default" template we're using now, notice all the excessive layering of stuff before we get to the real meat of the forum.  I hate that, and it's one of the main things I'm trying to fix in the re-design.  My goal with the "welcome text" is to make it clear, not intrude on the header, and not take any extra forum space.  I'll keep working on it....
Matthew

Matthew,

Here's a recommendation on the banner area:

Make the photos of the tools smaller and keep them as far to the left as possible.
Move the "Festool Owners Group" and "discussions and mutlimedia..." text to the left and keep the FOG portion as large as possible.
Change the Welcome and link text to 4 lines and right justify it.

By making these changes, I suspect you can eliminate the overlap in the two text areas and accomplish your goals.

[Daviddubya]

Matthew,

Here are the Systainer gif's you wanted.  (Edit - corrected size to 15X15)

[Dan Clark]

Everyone,
This is a really good discussion, and it helps me a lot!  I think Dan's comments about over-using the green are important, and I also understand Brice's and Seth's points about making the site brighter and more lively with the green.  Looking over all the elements, I believe there's a compromise here -- perhaps leaving the green "alternating bands" of the posts but toning down the grid lines.  I'll experiment and you can all continue commenting.

Seth's comment regarding the margin of the page is a good one.  When I first launched the test site, I actually had that drak bluish-black margin going all around the forum, including the top.  Then I took it away from the top.  But this makes me reconsider, so I'm going to put it back and, again, people can comment.

There is still an issue, I understand, with the placement of the "welcome text" in the header area.  I see what people are saying.  But my goal here is to get all the "intro" stuff neatly placed in the top region so we can get to the business of the forum.  In the "default" template we're using now, notice all the excessive layering of stuff before we get to the real meat of the forum.  I hate that, and it's one of the main things I'm trying to fix in the re-design.  My goal with the "welcome text" is to make it clear, not intrude on the header, and not take any extra forum space.  I'll keep working on it.

Check the forum again today to see the new changes.

I think we're getting real close to a launchable design.  And let me emphasize again that, even after the new deisign is launched, I can continue to tweak things.

Thanks everyone for getting involved!

Matthew

Matthew,

In virtually all subject areas, we walk into them thinking we know very little.  After spending a massive amount of time studying and working in that area, we gain a little expertise.   That's when we realize that after all that work, we're still VERY LOW on the totem pole.   We just didn't understand the height of the totem pole when we started.

Art is one of my totem poles.   I studied art when I was a kid and spent a couple years in an art school in the late '50s.   In the late '80s, I studied water color with a woman named Kay Kandra: http://www.kaykandra.com/.  In a separate post, I'll attach a pic of one of her lesser works that hangs in my family room. (I really need to put it in a much better frame.)  If you think it's a simple painting, think about this - many of the crisp lines were done with ONE brush stroke.   I.e., one stroke of the watercolor brush to get it right the first time!  She was awesome.

Kay taught me a lot about the use of white space, and contrast and light.  Her favorite phrase was "Great use of white space!"   Her painting is example of that.   Most important is the limited use of strong colors.   That's what I love about it - it's the balance of the white space, and bland and strong colors.  They are in balance and focus.   

Your eye is drawn from place to place - as the artist intended.   You can't see the original that I have, but the colors are very pleasing to the eye.   And there is a certain "tension" between the warmer colors and cooler colors.  I can't explain it, but they "vibrate".

So this is where I get many of my ideas about focal points, color and balance, contrast and light.  It is also why I think the new FOG forum design is approaching the point of being true art!

While I thought all of the entries in the logo contest were excellent, when I looked at Andrew's my jaw dropped.   My mind sort of went blank and thought "Wow!".   Kind of like when I look at Kay's paintings.   IMO, Andrew's logo IS true art!   

Now, enough philosophy on to the substantive...  Here are three suggestions:

1) If possible you might want to make the header a frame with three sections.  The frame would have the tool ICON as a fixed size, the "Festool Owners Group" section a fixed size, and the "Welcome <name>" a variable % size.  That might help solve the problem.

2) Consider changing the "Welcome <name>" background back to white.  I think the gray background is distracting and detracts from the logo area.

3) While I prefer gray or black, there seems to be a preference for color lines.   I think the new lines colors are much better but still a bit distracting, so I decided to take a closer look.  After some juggling, I was able able to get a clear screen capture of the new lines, the colors in the Festool Router and Andrew's Festool Logo.

After taking several samples of the Andrews Festool logo, I found the hue is 69 (warm green), the luminance is 100 (moderate brightness) and the saturation is 163 (medium saturated).   For the lines, the hue is 70 (warm green), the luminance is 103 (medium bright), but the saturation is 240 (completely saturated).  I think the key is saturation.

Suggestion: Change the Hue, Saturation, and Luminance to closely match the logo.  I.e., create a line with:
- Hue = 69
- Luminance = 100 
- Saturation = 163

Besides fading into background a bit, the key benefit is that the lines would tie in with the logo.   Attached are zoomed-in and normal screen shots of the lines in their current state and modified to match the logo.

Regards,

Dan.

p.s. one advantage of studying art is the knowledge of how far down the totem pole I reside.   I can appreciate it, but I suck at doing it.  Maybe that's wisdom.  I'm not sure. 

----

Original:

New:

Original Zoomed:

New Zoomed:

[Dan Clark]

Sorry for breaking this up, but I couldn't add the Kay Kandra image in the first post.

[SRSemenza]

Hi,

    I really like the blue frame going all the way around including the top. Now it looks like the page has a top.

    The grey shaded box in the logo banner doesn't work for me. I still think this stuff doesn't belong there. Do we really need the messages info there anyway. How about just combining it with the "My Messages"  button like it is now with the flashing envelope?   That would reduce the troublesome section to "Unread posts since last visit", and New replies to your posts" and I think those items would just fit on the right side of  that grey bar that doesn't seem to be fully used.   I think that would give it a more organized look, putting all the business in one place.


Seth