Forum Re-Design

[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! ;D )

 

[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 " a variable % size.  That might help solve the problem.

2) Consider changing the "Welcome " 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.  ;D

----

Original:
[attachthumb=1]
New:
[attachthumb=2]
Original Zoomed:
[attachthumb=3]
New Zoomed:
[attachthumb=4]

 

[Dan Clark]

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

 

[semenza]

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

 

[Dan Clark]

I agree with Seth about the stuff in the top right corner.  But I'd go one step farther.  With the exception of the notification that I'm logged in, I don't care about any of that stuff.  It's just excess information that I never use and it detracts from the clean look of the new header. 

I find it easier and faster to check the icons on the left to see if any sections have new posts.  Then check to see the threads with new posts to see if I'm interested in the topics. 

If it's feasible in the new forum format, I'd like to see a disappearing section like the current forum.  People who want to use the feature can use it and those who don't can hide it. 

Regards,

Dan.

 

[semenza]

Hi,

  I think if those were hidable options that would be fine. In fact I think the more on/off options the better. That way people can weed out functions they don't use.  Also even if they are optional, I think that those wanting to use them will want them in a good location. People use the features in different ways- EX.  I never use  "Show new replies to your posts"  or  the list of recent posts at the bottom of the home page. But I use "Unread posts since last visit"  every time I am on.

Seth

 

[Brice Burrell]

 At this point we are so close it may be time to do the change over. We seem to be at the point of diminishing returns. We are going in circles here, that is a sign that we are nowhere close or have spent too much time on the same issues. I think it is time to live with the new design for a few days and see what parts of it we (meaning all of the members) can do without. Set a reasonable target for the release and do it on that day.

 
 Sorry, this comes from my constantly having a deadline to meet, you can ignore the above.  ;D

 

[colinw]

Hi guys,
          I know I am a new member and have not been involved in this design work, but  I have been following the thread closely and would like to add a comment , I agree with Brice sometimes you just have to take the plunge, put the new design up, then work out the kinks ......just like a dry fit before glue up, otherwise you will still be tuning it and altering things in 6 months time.... I used to build and design databases for large coperations or at least used to be a big link in the chain and this was an issue all of the time, just when is the right time. IMHO I think you are there now. BTW Matthew wonderful work and I applaud your efforts I understand how much work a project like this ( the whole Forum thing). Thank you . I don't want to ruffle any feathers just my opinion.....

Colin

 

[Dan Clark]

Colin,

Everyone if free to express their opinion.  Especially when your arguments are reasonable. 

I'd like to see a of couple minor changes, but I think you and Brice are right - it's about time to ship the puppy!  We can make additional changes going forward.

Regards,

Dan.

 

[Matthew Schenker]

Dan,
I like your ideas about toning down the brightness of the grid lines.  However, I generated that color using The GIMP.  I get different numbers from the ones you posted.

Here are the relevant details:
HTML Color: #00ae00
Hue: 120
Saturation: 100
Value: 68
Red: 0
Green: 174
Blue: 0

In the GIMP, the maximum values for hue and saturation are 100.  I'm guessing there's a difference here in references.  Can you help me reconcile my numbers with what you posted?  What software are you using to detect these numbers?

Here's what I did: I toned down the saturation to a value of 70 (I dropped it by 30%, which corresponds to the relative drop you suggested).  This generates the HTML color #34ae34.  In the test forum, I changed all #00ae00 references to #34ae34.  This includes the grid lines, hovers, highlighting, and a few other small elements.  What do you think?

To Seth and Dan: Regarding the "welcome" text, I agree with those of you who say there's not much use to that information!  I belong to several forums, I must admit I never use the "unread posts..." or "show replies..." functions.  I am one of those people who just likes to dive into the boards.  To me, the "F" indicators (which Dan created for us a while back) do the job of letting me know where the new posts are.  So I would not have a problem getting rid of the "welcome" text.  However, I know that a number of members do use these functions.  So, for the moment, I don't think I should disable them.

To Colin: as Dan said, you should always feel free in this forum to offer your opinions, especially when your intent is to help.  We welcome that!

Matthew

 

[Matthew Schenker]

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

Thanks David!  I just added transparency to the images and brought them into the test forum.  Do you see them.  What do you think?
I like them, but I'm thinking they should be even larger, maybe like 20x20?  I actually expanded your originals, but they could be clearer...
Matthew

 

[Daviddubya]

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

Thanks David!  I just added transparency to the images and brought them into the test forum.  Do you see them.  What do you think?
I like them, but I'm thinking they should be even larger, maybe like 20x20?  I actually expanded your originals, but they could be clearer...
Matthew

Matthew,

Yes, I see one of the images.  You are right - it is not clear.

Here are the images in 20X20.  Expanding small images into larger ones will result in fuzzy images.  If you want a different size, I can create it from the original photo.

 

[Overtime]

Wow, that is cool. It is tiny but what a great idea / feature.

And the revised thinner blue border trim all the way around the page is real nice also. Much better. But that's just my opinion and what I see on my screen.

Looking much more refined now and near perfection 

 

[Dan Clark]

Dan,
I like your ideas about toning down the brightness of the grid lines.  However, I generated that color using The GIMP.  I get different numbers from the ones you posted.

Here are the relevant details:
HTML Color: #00ae00
Hue: 120
Saturation: 100
Value: 68
Red: 0
Green: 174
Blue: 0

In the GIMP, the maximum values for hue and saturation are 100.  I'm guessing there's a difference here in references.  Can you help me reconcile my numbers with what you posted?  What software are you using to detect these numbers?

Here's what I did: I toned down the saturation to a value of 70 (I dropped it by 30%, which corresponds to the relative drop you suggested).  This generates the HTML color #34ae34.  In the test forum, I changed all #00ae00 references to #34ae34.  This includes the grid lines, hovers, highlighting, and a few other small elements.  What do you think?
...

Matthew,

Initially, the green lines looked better but then I noticed that the green lines didn't look quite the same.  After grabbing the window with GIMP and zooming to 1600%, the color picker showed some of the green grid lines were different colors.

It looks like the interior grid lines and the line UNDER the "Home" toolbar has a saturation of "70".  However, the outside border and the line OVER the "Home" toolbar still has a saturation of "100".

At least on my monitor, the less saturated lines fade into the background and blend nicely.  The fully saturated lines have a "glow" to them - they stand out and look very odd.  I think they should all be the same with a saturation of "70".

Regards,

Dan.

p.s. I realized that we might be talking apples and oranges, so I installed GIMP.  It's a nice tool.  The color management seems much better than PhotoShop Elements V6.0 and HyperSnap 6.