This is the first one I have made in a while. It uses CSS, PHP, MySQL, etc. Let me know what you guys think.
http://www.silviasorganicfarm.com
Right now we don’t have a lot of product because it is still growing. I just want impressions about the design, how it works in your browser, organization, etc.
Some notes.
Something seems off with the photos on the front page. The one in the title bar looks soft, like it was enlarged too much, and kind of low-contrast. The other one looks way, way over-sharpened or something. “Crunchy.”
The page has a horizontal scroll bar I guess because the title bar is so wide, but the actual content of the page (the text) is only a little over half the width of my screen.
The blue links on a green background don’t have very much contrast.
The drop shadow and embossed text seems like too much to me.
You probably don’t need “-HOME” in the page title.
Typo I think
“Aa spring passes into summer”
I can’t do much about the “crunchy” picture, that is what I have to work with. Maybe a mild blur in PS will help it out, I didn’t really notice. It is the image Silvia wants to use. The other image is a little soft, but again, don’t have much control on that. It is the perfect image for the banner and looks ok to me.
Yeah, the link colors need to be changed. Lucky that is in the css file! Just haven’t gotten around to it yet.
I still need to redo the page to the more modern standard of centering the whole thing. Don’t know why I left justified it. Old habits, I guess.
As far as the embossed text and drop shadows, maybe I am a rebel but this whole sans serif everything clean on a white background web 2.0 look is very sterile to me. A matter of taste.
Thanks!
Yep. Fixed. Thanks. Neber proofread your own work!
And on the “Silvia’s Organic Farm” typography, I was trying for kind of an old timey look.
One of my worries is that is too much green and yellow, but I am unsure of how to introduce other colors without clashing. I have always been taught that you should limit your color palate. Maybe it is ok as it is, but any suggestions are welcome.
Criticisms incoming…
I don’t like the colour scheme. I can appreciate the desire to be ‘green’, but the green and yellow looks cheap. Something like this: http://www.localharvest.org looks a lot classier to me, whilst still retaining the ‘natural’ look and feel. Here’s a similar theme as well: http://www.theorganicfarm.co.uk/index.aspx
The font is huge, which again cheapens the look of the page. The Facebook and Twitter buttons at the bottom of the page are also huge and have a weird border around them.
I also think the main picture is far too huge and on my browser it’s overlapping the border of the page. I’d rather it was offset to the right of the first paragraph of text, or something like that. I don’t like being presented with a huge graphic and having to scroll down the page to see what the website is actually about.
lucassy2004@yahoo.com is a really crappy email address. Yes, I know this is really picky, but as a potential customer, I’m put off by stuff like that. I’d imagine silviasorganicfarm@gmail.com is available and would be a lot classier.
Thanks, Sandra. Good suggestions. The huge font is perhaps my response to the unfortunate trend these days to make all text microscopic. It seems like every other page I visit, I have to hit ctrl + just to read the damn thing! Yeah, I am getting older and my eyesight isn’t what it used to be. We aren’t trying to present paragraphs of info here, just sign some local grocers and restaurateurs up for a mailing list so they can know when her produce is ready.
Anyway, thanks to CSS I can mess around with the fonts and color scheme without too much trouble.
Yes, they are large. But the border? I thought I had killed that. May I ask what browser you are using? I have tested the page with just about everything I can get my hands on and thought the border issue on those icons was quashed.
The ‘old timey’ look of the header font is undermined by the color and shading of the text, which just looks too flashy and doesn’t stand out as well as you think it does against the similarly colored background.
It is too much green and yellow and you can’t introduce more colors because you are saturating the page with green and yellow. If the green and yellow theme was more trim than saturation, then you could bring in more colors via Silvia’s actual product, without risking everything looking like a 3-ring circus.
Also, visible tables is a really dated method of layout. Makes the website feel stale, like it hasn’t been updated in 10 years.
On the media page, instead of linking thumbnails directly to the photos which creates a new page for each one, it would be better to link the thumbnails to an embedded, navigable slide show. This section could also benefit from some captioning. What are we looking at? Yes, vegetables, I see that. But what should I, as I potential customer, know about these particular vegetables? Why should I want them?
In the About and Produce sections, there is no content above the fold because the images are large and centered above the text. The pages feel very imbalanced as a result and there is nothing to encourage the reader to scroll. The images need to be scaled and consistent to allow for cohesive flow between pages.
Personally, I think the header takes up way too much real estate. Well, everything is just a bit too big. I have trouble reading small font as well, and sometimes find myself enlarging fonts while surfing, but I would advise against trying to buck the standard. Let your readers decide what size font they want to view it in by keeping sizes relative and your site dynamic, but at the same time don’t make everything so big that it feels like going back to kindergarten.
ETA: I’m viewing in Firefox 4.0.1.
Working on that. There is a bunch of javascript that came along with the thumbnail system, but I am still puzzling out how to implement it. A lot of folks who publish these things seem to think that you know as much as they do about coding it. Helloooo, if I knew what you knew, I would write the code myself! How about a clue of where to stick that code and link it into the page? Anyway, thanks for the input. I will be digesting your comments and those of others over the next few days and will be making some changes.
There are plenty of sites that list different gallery software, each of which should have a guide to implement them, no coding knowledge required. Just stick the script in a folder, point to it in the header, and then place it in the text flow.
The heading is a single wide image, causing side scrolling. You need to make it a background to a fixed width header instead, in CSS. That way the “overflow” is “hidden” by default.
3 criticisms:
Image optimization. The filesizes of your header, navigation and main page images are ridiculously huge. There is no reason to use pngs in most of these cases. The header and main page image should be jpgs, and you can replace the mouseover images & text of the menu with css text.
I’m not a fan of the orange & green color scheme, but most off all the link color is a bit hard to read
Top to bottom layout. On some pages, the layout is just simply cram everything in top to bottom. For example, the “about” page has a vertical picture on top, with the text on bottom. This could be rearranged side by side and still fit all information above the scroll.
Too many visual breaks.
In between the header and the horizontal line the background shows through, which creates a horizontal line. Then there is the actual horizontal line. Then background shows through again looking like another horizontal line, then you have the border around the content and then the content area background of yellow and another border around specific text and images.
All of that adds up to something that feels broken up, like the eye is constantly readjusting to different contexts. I think you need to reduce that, I would recommend looking at nice web sites and seeing how they reduce that feeling of visual/border complexity.
All of the fonts seem very large, like the intended audience is elderly people with poor eyesight.
Most glaring problem atm is the need to rework the banner image so there is no horizontal scroll bar in a standard browser width (800 pixels or a little shorter, maybe 780 would be good).
And as mentioned, the color scheme is gaudy. Try to play around with a lighter palette. Mint green and light yellow are actually soothing colors, whereas full saturation is more of a visual assault.
I dunno, there’s something very Geocities about it. Just Say No to color gradients.
I get a page with the address http://www.silviasorganicfarm.com/cgi-sys/suspendedpage.cgi that looks suspiciously generic.
I’d get rid of all the underlines. Use bold or italics instead.
Looks like the site pages were removed from the server.