Redesign: FSS
Posted November 11th, 2003 @ 02:34pm by Erik J. Barzeski
I've completed (in Photoshop CS, now that I have it) a new mockup for Freshly Squeezed Software's Web site. If you're curious, click the picture to the right. This is most easily compared with the current MailDrop page.
The FSS site has received a lot of compliments over the years. Yes, it's quite true that we've borrowed many of the design principles from another well-known Mac site, but every graphic and line of code was created from scratch. Introduced in early 2002, I feel that both the site and myself have "grown up" and "grown out" just a bit and are ready to move on. Andy, Nick, and I have taken what we've learned and I've applied it to a fresh design which we only hope continues to serve as a good example of design.
I typically don't buy any software from sites that are poorly made. A good looking, easy-to-use site is of critical importance to software developers hoping to lure in potential customers. "Good looking" and "easy to use" can result in sites that are both fairly simple or slightly more complex, but each of those links share two traits: they're attractive and usable.
I think the new design will do well. Now I just have to figure out what to do via CSS and what to with images.
Update @ 3:45pm: This was when I'd completed the first mockup above, and reached what I'd consider a "complete" but not necessarily perfect design.
Update @ 8:15pm: Added a second version (see the second screenshot) based on the feedback below, and Mike's in particular.
Donate Life
Posted 11 Nov 2003 at 3:54pm #
The secondary nav bar the orange on the green is really hard to read.
Posted 11 Nov 2003 at 4:16pm #
Yeah, I'll agree with that. However, on the whole it's very nice and it's great to see the design move away from the Apple theme.
Posted 11 Nov 2003 at 4:19pm #
I spy three new products to the FSS software family. Oh wait, maybe one? I dunno...
Agree with the previous comment. Perhaps you could squeeze both the bars together (and push the text closer), and create an arc (on the left) that wraps around the orange?
Otherwise, looks snappy.
Posted 11 Nov 2003 at 4:29pm #
I much prefer the use of serif fonts on the current FSS website.
Posted 11 Nov 2003 at 4:59pm #
Man, I'm disappointed. You make spamware? Surely you can put your talents to more ethical pursuits...
Posted 11 Nov 2003 at 5:06pm #
We're using the same fonts. And to mnb, a spammer would have to be a big, big, big moron to send spam with MailDrop. It can't alter headers or do other crap necessary to hide a spammer's identity.
To the other ideas, yes, the orange is a bit harsh on the green, but I think this may be an acceptable compromise because the orange product is the same as the page at which the viewer is looking, so they shouldn't really need to see it in the list. Not the best solution, but currently, the best compromise I've discovered.
Posted 11 Nov 2003 at 6:44pm #
My comments are for the version shown in the "3:54pm Update"
For you company name you use black for the first word and orange for the second with a space in-between. You apply a similar style for your product MailDrop's graphic yet don't use a space. This inconsistency might be addressed better.
In regards to the navigation, I'll iterate others in stating you need to make the type more readable for all states (if they are in that section or not). The key here is to make sure there is as much contrast between the foreground and background as possible. View the sample in "White on Black" (use Universal Access) to see how hard it is to read those current state labels. Other ways to handle state could include using a different shade of background for the word, underlines, boarder colors, etc..
The similarity of the main nav and sub nav have me worried. I think you need to make a more visible connection in the fact that you are in "About Us" and when in "About Us" you have this sub nav. I mean beside Font size these two look pretty similar, and it's might be hard to quickly distinguish.
I also think the size of the logo and navigational elements (as a whole) is too large. When viewed 800x600 or 1024x768 it can take up 50-30% of the page real estate. Remember for this page MailDrop is the star, not FSS's logo.
The heavily 3d shaded "Buy Now!" button doesn't fit in the the flay crisp 2d design.
You have three screen shots on the page; two have feathered edges, one with a crisp black boarder. Why the inconsistency?
The Hard lines between paragraphs can be deleted and replaced with proper white space to make the page feel less gridded.
In the sidebar, do those three titles really require that much emphasis? Also I would recommend making the type a bit larger on the sidebar as with smoothing on its a bit fuzzy.
--- Overall not bad though. I've seen MUCH worse. Good luck launching the new design.
Posted 11 Nov 2003 at 7:03pm #
To respond (please dont take this as nit-picking your post, Mike!) to a few points, ol' Zorn: there is no inconsistency. The company name is Freshly Squeezed Software. The product name is MailDrop.
I don't think I need to distinguish the menus any more than I've done: two-level menu systems are pretty common. People are well-trained.
I'm going to continue playing with the menu colors, but I'm not seeing as much of a problem as some others seem to be having.
Re: the size of the logo, well, I'll disagree here. FSS has many products, and we're doing a bit of branding. Visitors to our current site can barely read the company name.
The heavily shaded "Buy Now" button is merely part of a screenshot - "filler" content - from the existing site. We may make more use of the orange for such buttons, or come up with a flatter "Buy Now" button later. But I appreciate your attention to detail!
Two screenshots are feathered because they have room to feather. The third is not because the "Get Info" window has little border room for fading. Anyway, that stuff is again filler material similar to the button and will be revisited when the site itself is up. Just like those lines. 🙂
Finally, re: the sidebar, yes, I feel that the titles deserve emphasis. One is the navigation, one is the system requirements (people email us frequently asking if they can run our software on Mac OS 9), and the other is obviously something we feel is important enough to place on the site! 😉 The fonts rendered in the GIF are done with Photoshop - they'll be the same as we currently have on our site and thus not as blurry.
So, while it seems like I've disagreed with much of your post, I do appreciate the candor and I assure you that you've given me things to ponder. Thanks.
Posted 11 Nov 2003 at 7:12pm #
Sorry for assuming, I know little about the product and the blurb sounded like it was spamware, although after posting (funny how it always happens that way) I realized that it could be used for quite a few purposes that are NOT spam.
Thanks for setting me straight on the product and for not making it good spamware! 😀
Posted 11 Nov 2003 at 7:17pm #
Zorn - IM me. I want to run some other ideas by you, see how you like those. I'm still very much playing around with all of this, and as I said, you raised some points I am trying to address.
Posted 11 Nov 2003 at 8:10pm #
Hmm. A couple of quick things: the stem of the orange touches the top of the page -- my anal retentive friend Ty calls this "pinching." Everywhere else you leave plenty of breathing space and this seems like a bit of an oversight.
The orange bars on the RH column heads have rounded ends, just like the nav bars across the top, yet they are not links, they are titles. If you are trying to establish a vocabulary of navigation, this would seem to violate it. You might want to reconsider the header style.
I like the emphasis on the company name, but I think you've taken it a bit far. And you've lost the tagline, which I think you have more than enough room for. I understand that "the main squeeze in mac software" may be a bit tired by now, but you could develop another one. How about "it's all in the wrist"?
That being said, I thing the new logo would look a lot better on a business card than the old one...
The overall cleanliness is good, but the orange-on-green text needs rethinking. I don't know what it looks like on a CRT, but on my laptop it almost hurts to look at.
Nice go!
Posted 11 Nov 2003 at 8:11pm #
I hope you make it STANDARDs based..XHTML for markup and CSS for presentation
If not, well, then all is lost 🙁
Posted 11 Nov 2003 at 8:18pm #
Standards is one of the reasons for the redesign. I began blogging (XHTML 1.1, CSS 1/2) after I created the first FSS site, and I've learned a lot in the past few months. So, yes, standards. I just have to figure out where I'll draw the line in the sand. Transparent PNGs? Maybe. CSS 2 positioning and whatnot? Maybe not. That sort of thing.
And fred, your criticism is well-received and probably just a hair too late. What do you think of design #2? Does it address all of your concerns?
Posted 11 Nov 2003 at 8:51pm #
I like a number of the changes in design 2 - the revised product list looks slick with the transparency and the sunken boxes in the sidebar do a nice job of grouping the topics.
Posted 11 Nov 2003 at 11:04pm #
i like how one can get to the products quickly, and in multiple ways.
Posted 13 Nov 2003 at 12:07am #
Mm. Yes. The revised titles and "sunken" sidebar address my concerns nicely. No word on the new tagline, I notice... 😉
Posted 13 Nov 2003 at 12:14am #
The new tagline is "your mom." What do you think? 😉
Posted 21 Jan 2004 at 10:02am #
Today I received an email which I've summarized for you in five words: Your Site Sucks, Hire Me. Perhaps I am feeling particularly {bored, mean-spirited,...