Minimalist website design is a bit of a challenge for me. I tend to over think things. And in some cases, the more flashy the site the better, but in this particular case, the minimalist design was the way to go.
I realize that everyone sees beauty differently, but for me, what’s simple and natural is beautiful. And for me minimalist web design reveals the simple and natural. If I had to vote on all the work I did in 2013, this project would probably win the award for best website design.
My original concept (displayed below) for this site was very different. And it’s funny now, to think back on my original idea and how hard I tried to sell it to my client (and myself).
The one thing the client was most interested in was the images. He wanted each page to have a unique and very large image in the “header”. And my original concept, didn’t really support a “large image”.
There are four things I like most about the design.
- The unique background images on each page
- The small simple header
- The page title section
- The use of white space
Although there isn’t much functionality to this site, I did add some pagination to two pages. The Recent Transactions and Historical Transactions pages have content that switches when the next or previous buttons are clicked.
This was specifically requested by the client. He didn’t want visitors to have to scroll down the page to see these “transactional tombstones”.
To accomplish this pagination functionality, I used a custom post type and the Views plugin from onTheGo Systems (affilink). Views makes it quick and easy to build custom functionality from within the WordPress admin, without writing any PHP.
Now to explain my four favorite aspects of this design.
4. The use of white space
I’m sometimes guilty of trying to fill as much white space with content, images, and colors. So for me to develop this site with lots of white space and little color was, to be transparent, a challenge.
The only color is in the header (logo and navigation), the title tags (large blue font within the pages) and the images (top of each page).
Lots of white space makes this site very clean and draws your attention to what is most important, the content and large images.
It feels very refreshing!
3. The page title section
I really like the way this part of the site looks. The image behind the title and the dark inset font really stands out and adds an elegant style to the design.
2. The small simple header
Branding and navigation. That’s it!
I made the logo and navigation bar as small as possible to allow more of the background image to be visible without taking up more real estate.
The logo being a bit larger makes it stand out a bit more against the navigation bar that is the same color.
1. The unique background images on each page
The large bright images really make the site pop. All of the images used were taken by the client himself. Each was strategically placed, using the image to help tell a story and extend the message of the page.
For example, the image below showing the About page, has an image of New York that actually shows the building where their office is (red circle).
I wrote a tutorial on how I set a different background image for each page, if you’re looking for this type of design solution. This tutorial works for Genesis Framework Child Themes (affilink) only. If you need another solution, please contact me.
As in all of my projects, this site is responsive and as been optimized for search engines.
If you’re curious about how much a site like this cost, it took me about 8 hours to develop the WordPress theme and 4 hours to get the pages and content all setup. At my hourly rate of $100, this site cost $1200, plus $350 for the onsite SEO.
Ready to get your project started? Get a Quote Today!