Finding a minimal WordPress theme that delivers a rich media experience can be challenging. You don’t want it to be so vanilla that it gets lost in the crowd, but it shouldn’t be so different that it causes usability issues1 or appears thrown together. I can’t tell you how many times I’ve landed on a website that looks like it has just woken up after a long night on the town — it ain’t pretty! Bad design could very well mean bad business, and in this economy, good business matters more than ever before.
If you are in the market for a minimal WordPress theme, you first need to determine how bare you can go without sacrificing functionality. Focus on the structure, visual presentation and usability of the theme, even if that means setting aside some of your own aesthetic preferences. Your website should of course reflect who you are, but does it really need to be hot pink from top to bottom with lime-green font and 300 drop-shadows? I hate to break it to the eccentrics out there, but, alas, it does not. You would only be putting more money in the pockets of eye doctors. So, the question is, how do you get viewers and prospective clients to feel comfy in your digital world, while keeping everyone’s vision intact? The answer is to keep it simple and choose wisely.
Garnish is a clean, simple, filterable, AJAX-powered one-page portfolio theme by UK-based Web designer Orman Clark, available for purchase at Theme Forest2 for $35. If you’re a sound or visual artist looking to display what you create, you’ll have no problem customizing the logo, layout or portfolio, thanks to the easy-to-use control panel for the theme. If you’re an Adobe CS junkie, you’ll really be able to stretch your creative legs with this one, because the theme is delivered completely unbranded and is structured extremely well. Instead of sifting through someone else’s crazy code, you’re given a clean kitchen in which to cook your own code. Have fun with it!
Garnish home page, with the built-in light color scheme.
Garnish home page, with the built-in dark color scheme.
- Clean, minimal design
- Dark and light color schemes
- AJAX-powered, filterable portfolio
- Support for post formats (asides, images, galleries, quotes, links, standard, audio, video)
- Page templates (archive, full width, jQuery contact form)
- Full localization support (contains .po and .mo files)
- Three custom widgets (Twitter, Flickr, video)
- WordPress 3.0-ready (menus and featured images)
- Custom default log-in logo
- Shortcodes (columns, buttons, toggles, tabs, alerts)
- Layered PSDs for customization
- Extensive documentation
Garnish is a clean, simple, filterable, AJAX-powered one-page portfolio theme.
1. Portfolio Link
The portfolio includes a category filter (top-left) and hover options.
The Garnish WordPress dashboard includes a dedicated “Portfolio” section (similar to how “Pages” and “Posts” are structured) that feeds data to the home page. Garnish is built for small portfolios. How can you tell? The category filter does not bring selected content to the top, but rather grays out what isn’t selected. A bit of scrolling would be required for bigger portfolios. If you think yours will be bigger, try Gridlocked4, another theme by Clark. For Garnish, I’d suggest sticking to three to five rows of media, or 12 to 20 individual items.
The magic-door feature.
The magic-door feature is one of my favorite parts of the theme. On clicking the thumbnail of a portfolio item, the gallery drops down to reveal the selection in full. If the feature is disabled, which you can do in the control panel for the theme, then the portfolio items are linked to their respective pages.
Options for the lightbox, thumbnails and images.
The thumbnail image for each portfolio item must be 220 × 160 pixels (the box above specifies 230 × 170 pixels, but looking at the home page container, it’s actually 220 × 160 pixels), and the full-size image should be no wider than 680 pixels. The layout cannot be adjusted (width-wise) to accomodate smaller photos, so if you do want to go smaller, you’ll have to adjust the code.
A slideshow for a portfolio item.
Each portfolio item can accomodate up to five images by default. The slider controls for moving between images in a set are at the bottom of the photo. You might want to consider customizing this layout a bit by moving the controls elsewhere, to benefit people with small desktop and laptop screens. (You’ll find out why next.)
Navigate to the next or previous portfolio item or set.
And here’s why! At first glance, the navigation arrows appear to cycle through the images in the selected portfolio set, but as it turns out, they move you to the next portfolio set. If you have selected a category using the filter, then it cycles through all of the sets in that category. If you’ve left it unfiltered, then it goes through the entire portfolio. In terms of usability, the location of the controls would be of concern only if the images in your portfolio are tall and the user’s device isn’t big enough to view both sets of controls without scrolling. It’s not exactly a huge issue, and you can always tweak it with a bit of code.
2. Shortcodes Link
Columns, buttons, toggles, tabs and alerts.
Garnish is packed with shortcodes that make the process of structuring your content5 simple and aesthetically pleasing. When creating a page or post, click the green “+” icon to reveal a list of available shortcodes, and then click “Insert.”
3. Blog Link
A list of built-in blog templates.
The Garnish blog is sleek, simple and clean. With one click, you can format a blog post based on the type of media it will display. Options include the following:
- standard (includes the post’s title),
- aside (excludes the post’s title),
A video post.
A post with a link, audio file and quote.
A post with a slideshow, and a custom sidebar video widget.
The blog archive is its own page and is organized by the title, date and subject of posts.
4. Contact Form Link
jQuery contact form.
Mobile Display Link
A comparison of the iPhone and iPad view of the home page.
A comparison of the iPhone and iPad view of the magic door.
The table of contents for the theme’s documentation.
Garnish comes with a 13-page documentation file in PDF, which reviews the following:
- Setting up the home page,
- Post formats,
- Custom menus,
- Theme options,
- Custom widgets,
- Custom page templates,
- Custom log-in logo,
- Featured images,
- CSS files,
- Photoshop files.
All in all, we really like the simplicity, functionality and aesthetics of this theme. Media is the focus here, as well it should be in a portfolio theme; there is no extra clutter to distract the viewer. If you’re looking for a minimal portfolio theme to display your work or are hunting for an unbranded theme to customize, this will suit you well. Aside from the minor usability issues with the navigation arrows, no red flags pop up, especially if you keep in mind that it’s intended for small collections of media.
Goodies to Take Home Link
Helpful Resources Link
- Minimal Sites13
Minimal website gallery and community.
- Minimal Exhibit14
Minimalist design gallery.
- “100+ Clean, Simple and Minimalist Website Designs15,” Hongkiat
- 1 http://sensible.com/
- 2 http://themeforest.net/item/garnish-cleancut-wordpress-portfolio-theme/308989/?ref=ormanclark
- 3 http://themes.premiumpixels.com/garnish/
- 4 http://themes.premiumpixels.com/gridlocked/
- 5 http://themes.premiumpixels.com/garnish/?page_id=10
- 6 http://support.premiumpixels.com/
- 7 http://themes.premiumpixels.com/garnish/
- 8 http://themeforest.net/item/garnish-cleancut-wordpress-portfolio-theme/308989/?ref=ormanclark
- 9 http://www.premiumpixels.com/
- 10 images/garnish/goodies/desktop.zip
- 11 images/garnish/goodies/mobile.zip
- 12 http://www.premiumpixels.com/freebies/loupe-screenshot-magnifying-thingy/
- 13 http://www.minimalsites.com/
- 14 http://minimalexhibit.com/
- 15 http://www.hongkiat.com/blog/clean-simple-minimalist-website-design/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.