Beck Ag, along with all the websites on this list, set the bar for agricultural website design by marrying new design trends with a conservative color pallet and design choices. The combination leaves viewers feeling wowed and comfortable at the same time.
The site achieves this effect through a variety of means:
- Large original imagery focuses on people, giving the site a personal feel, a great choice considering the nature of the business.
- Videos supplement the personal feel and give viewers an introduction to the company in a more contemporary fashion.
- Dynamic sub-navigation adjusts as viewers scroll down the pages of the site first appearing in a green box after viewers leave the overview section. After which a sliding green indicator arrow pairs with highlighted text to display the area they’re viewing and allows them to jump from section to section.
- Large legible text with plenty of line spacing keeps large blocks of content easy to read.
- Throughout the site text is used as a design element, adding interest to all pages and calling attention to important information.
- Creative consistent formatting may seem inconsistent at first glance, but don’t let it fool you. Two margins are used for the site content, one for larger introductory text and section headers and another to call attention to noteworthy supplementary content in the left column. This keeps the internal design interesting and adds emphasis to key information.
- Round images break up the sea of squares we find online.
- Subtle background textures add richness and depth while varying shades horizontally divide information into sections so the viewer subconsciously knows they’re about to switch subject.
- Creatively placed full screen sliders add interactivity and display content on well formatted slides.
This site is such a great combination of style and imagery I was surprised, and not in a good way, when I happened across the Beck Ag Connects community forum site (http://beckagconnects.com/). I took a double take for sure. I’d wager re-designing the look of this site is on their 2014 marketing to-do list, and if it’s not they should consider the suggestion.
The American Soybean Association hits it out of the park with their attention to design details. The site feels welcoming and well put together.
The little design details that set this site apart include:
- Icons depicting issues, this is standard on many sites, however on this site the designer has added a nice touch choosing to highlight certain issues with two tone icons.
- The macro background image of soybeans adds interest and is set off by a subtle diagonal pattern overlay.
- Internal page content has plenty of extras to keep a viewers interest such as video, supplementary photos and large call to action buttons.
- Information is organized in a variety of ways using expanding and contracting and tab sorting features.
- Blog posts are formatted in a non-tired fashion sporting the dates and categories to the left and clear titles, excerpts and read more links to the right separated by fine grey lines.
- A simple easy two tiered horizontal navigation paired with spacious drop down menus, highlighted menu items, consistently formatted titles and easy to follow breadcrumbs keep visitors from being lost in the multitude of pages.
My favorite thing about this site though, is the space. Generally to achieve space in a site design we remove the edges, which is why layouts with “no edges” and horizontal design elements stretching from one side of the screen to the other are so popular. This design achieves space by adding ample space between design elements: between boxes on the homepage and sidebars, between titles and text, and even between each item in bulleted lists. My eyes can travel from item to item easily without fuss.
Keeping with the details, the only out of element items I can find on the site are a few odd elements that may have been overlooked or added after the initial website launch. A few buttons display text in a very similar color to the button background color making them hard to read, and illegible to the colorblind.
The calendar page introduces a new font, looks like Courier, that isn’t used in the rest of the site.
The National Corn Growers Association pulls in all kinds of trendy design goodness on their agricultural website:
- A macro image of corn decorates the background.
- The rest of the design stays relatively flat on top, creating compliments of background texture and color that’s easy on the eyes.
- Their shrinking-stay put navigation, large page titles and straightforward breadcrumb menus ensure you never lose your place on the site.
- A site search feature allows viewers to easily find the content they seek.
The overall site design is sound and attractive while some of the interior pages could use a bit of graphic enhancement. The information can seem a bit overwhelming at time due to lack of or inconsistent formatting.
Some of the main navigation links to pages of links or other websites. At times this is a must and there’s no way around it, however in this case they may consider directing viewers to a landing page with sub navigation in each case for them to choose their next direction.
Textures and colors make a viewer feel at home on the United Soybean Board site.
The design is on the modern side but doesn’t go over the top bringing it all together in a balanced fashion:
- Clever statements on the homepage slideshow such as “chicks dig soybeans” and “stop that yield robber in it’s tracks” add personality to the content.
- Featured recent design trends include use of subtle textures in the background, using text as a design element and adding color altering filters to images.
- The site is regularly updated with articles, building credibility with search engines and giving viewers a reason to keep in contact to stay up-to-date on soy related news.
- Consistent content formatting throughout the site keep the viewer feeling comfortable with large amounts of content options.
- An image paired with each article keeps the content interesting as you move down the page.
The title font for the images, while it adds interest and originality to the page, displays a not so attractive blob on all the lowercase “a’s”. When choosing a non-web safe font it’s important to know how it will render on multiple browsers prior to using it in action.
The buttons under the blog articles link to associated tags. At first, while surfing on autopilot I wasn’t aware of this and clicked a few tag buttons thinking they were read more links. Perhaps tags could be formatted like simple links and a read more button could be placed below the articles to clear up confusion for users on auto pilot.
This agricultural website was developed by America’s Pork Producers and the Pork Checkoff.
It provides a vehicle to involve the public, motivating them to consume more pork:
- Large, professionally photographed food images of prepared recipes make the site a mouthwatering treat for more than just your taste buds.
- Many recent design trends to dress up the site including textured background images, macro photography, a large footer providing additional navigation and contact information and use of @fontfacing to dress up the pages with design friendly fonts.
- Easy-to-use large buttons and well-organized information grouped in logical categories allows viewers to navigate with ease.
- Brings in an educational component explaining various cooking methods, and pin worthy content (great for boosting social media sharing) with yummy recipes tested and reviewed by other viewers.
On the homepage there are links to various blog posts, each of those posts open in a different window and are housed on a site that doesn’t share the same design elements as the original. Ideally the blog would be located within the site or at least look quite a bit like it so viewers aren’t confused when landing on a new looking site, that I might add, isn’t nearly as lovely as the one they came from.
iDE is not a traditional American looking agricultural website with good reason, it’s not. They don’t facilitate projects in the United States.
This design is different from the others listed, yet just as effective in it’s purpose, it had to be included in the mix:
- Large inspiring background images give viewers a feel for what the organization does, who it impacts and why it’s important. As the saying goes, “a picture’s worth a thousand words” and this site makes good use of adding words to compliment their imagery, not the other way around as most marketing materials tend to do.
- Many sites use the middle column of the screen and leave the right and left open to create space, this site uses the left and right sides of the screen, hugging content to the edges leaving the space in the middle to keep the focus on their imagery.
- Breadcrumb menus and easy-to-read, reversed out page titles help viewers know where they are in the site on each page.
- To keep text to a minimum on each screen, the site adopts a paginated page effect in the right column, allowing viewers to click on the following number to view the next page.
- A small but necessary nicety: when displaying links to PDFs, the viewer is told in the link the type of file and the file size, a very considerate label for those with slower internet connections.
- The upper right corner of the screen houses all sorts of great viewer features such as Google site translation and search. Also, a large, yet not glaring and appropriately bright donate button catches viewers eyes and calls to attention the non-profit company status.
The text on the site is quite small, 12 px, which is fine for print but seems microscopic in the world of web, bumping it up a few sizes would improve readability greatly and only take a few seconds to accomplish. I think this is especially important because donors tend to be a more mature audience and they may greatly appreciate not having to grab a magnifying glass to read the content prior to making the decision to donate. Along the same lines the drop down menu content feels fairly small and cramped, bumping up the leading and font size would be an improvement here as well.
Original text size feels small and cramped. Improvements like text sizes are easy to update.
Increasing text size in drop down menus, sub heading and text improves readability.