“Sleek” Design Doesn’t Mean “Bland”

As a design challenge to myself, this past week I’ve been working on a new layout for my main domain, withinmyworld.org. My keyword for this design was “sleek”–I wanted to make something rather minimalist but still pretty, easily readable but still styled.

My first attempt came out like this:
newversion_screenshot
(click the picture for a larger screenshot in new window)

I’ve never tried designing with this vibrant purple before, so this was a fun new challenge. Plus, I really liked the “sticky nav bar” I came up with for a recent blog post, so I incorporated that as well.

The only problem? As lovely and minimalist as this design is, it’s also fairly text-heavy…and kind of blah, somehow. I hated even to admit it to myself, but I had done it again–I had gone overboard with all the text and other elements, and forgotten about how the layout would look all together. Even with the RSS feeds and affiliate buttons I planned to add later, it would still be lacking a certain something.

So I brainstormed. I didn’t want anything too splashy or crazy for this layout, so what could I do to maintain a simple, minimal but “wow” layout?

The Idea: Just a LITTLE Something to Add

What I discovered, after thinking about it and studying it for a couple of days, was that the layout was just a little bit too “same-y” across the page. There was nothing really to draw the eye in, no real graphic elements besides the social network buttons. It needed a little visual interest, as graphic designers say…but it didn’t need a huge image to take away from the “sleekness” of the page design, either.

To that end, I came up with a couple of simple little graphic tricks that could add a little “wow” to my page…and the same principles can work for your page, too! The best part: you only need symbol fonts to do this. (Symbol fonts are just like regular fonts for text, except that every time you hit a key on your keyboard, you make a symbol instead of a letter from the alphabet.)

Trick #1: A Subtle, Simple Background Tile

You don’t have to be skilled at pixel graphics to create a background tile for subtle pattern on your page. Take the following screenshot, in which I added a tiny 15×24 background tile for a little interest:

backgroundtile_example
With just a tiny bit of color variation, plus the use of the Wingdings 2 font and the letter “g”, I crafted this very subtle tile pattern which repeats on either side of the content. (It also repeats behind all the text, too, but I made my container div have a background color so the pattern wouldn’t distract from the text.)

This background tile adds just a little touch of variegated color without looking “busy.” And it’s a curving, soft shape on this page full of hinted squares, rectangles, and other sharp angles–a pleasing juxtaposition!

To Make Your Own:

  • Explore symbol fonts to find a cool symbol you’d like to use on your site. Something fairly simple in shape works really well. (See the “Free Font Sites” list at the bottom of this article to start your search.)
  • Make a small graphic (no bigger than 50×50) and dye it your background color.
  • Choose a second color that is only a few shades different from your background color.
  • Type your selected font symbol in the second color, and resize as necessary so that it fits within the graphic without having any overlap. (Any overlap means your tiling will look obvious and even misaligned…sad!)
  • Save your image, and try putting it as your background tile image (“background-repeat: tile;” in CSS code).
  • Tweak this process as necessary till you get just the right look. (This tiled example was my fourth attempt–I had to tone down the color contrast quite a bit to get this look!)

Trick #2: Add a Little Graphic Twist Anywhere on Your Page

Little graphics don’t have to be just on your background or header–they can appear anywhere you need a divider for your text, or anywhere you want just a little pizzazz. See the following screenshot:

tilinggraphic_example
(click the picture for a larger screenshot in new window)

Here, I’ve added a little semi-border to the top of the page, right underneath the navigation bar and centered above the content div. It’s the same symbol as before (Wingdings 2, lowercase “g”), just in a lighter-colored font and in multiples, strung repeatedly across the top.

This could be placed between the content and the footer, or between sections on my sidebar, just as easily as it is placed above the content. Anywhere I place it, though, it gives the page a little feminine flair while still being minimalist.

To Make Your Own:

  • Select a font symbol you like, as before.
  • Make an image that is wide but not tall (mine here is 300×20, but size yours according to your specific layout needs).
  • Dye your image with your background color.
  • Choose another color that is either much lighter or much darker than your background color.
  • Type your chosen symbol in that second color in a straight line across the image, making sure the symbols fit neatly within the image’s borders so there’s no overlap.
  • Save it, and place it anywhere on your page, in multiples or just one at a time, wherever you need a little visual pep.

(Alternatively, you could achieve this same look by uploading the symbol font file to your site’s folder, typing in a long string of the corresponding letter, and then styling it with CSS, but the above process gives a smoother, anti-aliased look to the result.)

Summary

Adding a little visual interest does not always involve lots of big splashy images, especially if you’re trying to be “sleek” or “minimal” in your design. You may only need a couple of touches to transform your site from “blah” to “wow”!

Free Font Sites

Dafont.com
FontsBytes.com
1001FreeFonts.com
FontSquirrel.com

Leave a Reply

Your email address will not be published. Required fields are marked *