The 7 customizations you can do to Thesis that will take it from looking mediocre to looking badass and professional. In my experience, these tweaks separate the okay looking designs from the spectacular.
It doesn’t take much. Thesis is optimized in a way that you cannot really mess it up too much, thanks to Pearson. Hence why the default layout actually looks pretty damn amazing all on its own, but there are some small adjustments you can make to really kick ass with customizing.
1. Create professional navigation bar settings with a great color combination
Some of you think it’s really fancy pants if you have a hover color that is different or bold. However, if you’re going for professionalism, your hover state should be useful, not aesthetic. If you are using a light color for the background of your nav bar, then use a darker color as the hover state. I tend to be fond of using a shade lighter or darker than the original color.
And, please use a current page item state. I can’t stand when I go to sites and they don’t make it easy for me to see what page I’m currently on. Use CSS styling to make it as seamless as possible for a user to navigate your site. Each embellishment should add to the experience in some way, whether it makes it easier to glide through the different areas of a site or helps with overall organization. Make choices not for aesthetic purposes, but from a user’s perspective.
2. Create a header without beveling, embossing, or using common fonts such as Impact (and no clip art, for godsakes)
It’s not too tough to make a class act header for your blog. Seriously. Download Gimp, an open source Photoshop-like software program (or use Photoshop, if you have it). Find a great font. The typography in your header will make or break the professionalism of it. Don’t get fancy in Photoshop or Gimp with filters and bevels and embosses. For the most part, a great font stands on its own.
For some beautiful free fonts, check out:
40+ Excellent Free Fonts for Professional Design at Smashing Magazine
All things fonts at Smashing Magazine (they rock, obviously)
DaFont has some decent free fonts if you comb through it
If you want a picture of some sort, choose the right one. Don’t rely on Google image search to give you anything even remotely quality (uh, or copyright free for that matter). Use iStockphoto or Getty Images to spring for a high quality perfect image.
3. Incorporate a splash page and have the blog be secondary
The trend I’ve been noticing is that many people want their Thesis site (and WordPress sites in general) to act as a web page, instead of solely a blog. Whether you’re designing a site for your small business or for your big writing voice, you can establish some credibility by having a splash page. If you are doing anything on top of blogging, a splash page is necessary, in my opinion.
It helps people to understand what’s going on at your site. If you are a business, why is your blog the front page?
Here’s what you do to make a splash page happen:
Create two Pages in WordPress. One will be called “splash” and the other will be called “blog.” At this point, you don’t need any content in the “blog” page because that’s where your posts will soon be housed. You can add whatever you want on your “splash” page at a later time.
In your WordPress dashboard, go to Settings > General > Reading. You’ll see that you have an option to have a static page. In the dropdown, select “splash.” Then, for your “latest posts” page, select “blog” in your dropdown.
And, done! You have now created a dynamic splash page (well, once you add your killer content to it) and a different page to hold your blog posts. You rock, right?
4. Use your color combination in a smart, design-friendly way
Picking a strong and effective color combination for your site design is one of the most important things you can do. Thankfully, Thesis gives you all the control you’ll ever need to implement your color combination in creative and interesting ways.
Oh, I found THIS! and it’s kind of amazing – it’s a color scheme generator. *design geeked out!*
My suggestions for color usage?
- Use 3-4 colors maximum
- Make sure the colors stay within the same palette – pastels, neons (not recommended, but maybe could work), warm, cool, etc.
- Seriously, unless it’s really necessary, always use black as body content text (unless, of course, you are using a dark background for your content box, then use white)
- Throw in splashes of color by stylizing links and headlines
- Links should be the same throughout the site (sometimes I break this rule, but for the most part, I want to keep my links consistent, which, don’t forget, includes post titles)
5. Make sure that each picture or icon you add is consistent with your overall style
I can’t even tell you how many times I’ve seen a mish-mosh of crazy icons all over someone’s site. First, it completely diminishes your credibility, since consistency throughout the site is actually a subconscious indicator of professionalism. Second, it just looks lazy. Make sure the graphics you have throughout the site all are consistent with the style you have gone with.
Design is really intuitive, so if you have an inkling that something feels or looks out of place, then it is. Change it. You don’t want someone discounting your business or your writing based on a clumsy design or for your lack of consistency.
6. If you’re not graphically inclined, focus on intelligent and simple designs
Photoshop brushes are really fun. Yet, they make it really easy for people to go overboard. Same with fonts. Pick smart choices for your fonts and embellishments in whatever you are customizing.
The best design tip I have? Focus on placement. I was on the phone with my friend Greg the other day and he was wondering why the hell everyone loves my Shatterboxx design. He was all, “The first thing I thought of when I saw your site was, ‘Seriously? It’s one column and has a graphic by someone else as the background.’”
And I was all, “Exactly.” Because, you know what separates a mediocre design from a great one? Professional and intelligent placement of simple images and typography. I’ll give you an example. Both of these headers are the same size, use the same colors and the same Photoshop brush. Notice what a small font change and minor placement adjustments do to the header:
NO
YES!
Rinse & Repeat.
The first image is just all wrong and please, for the love of god, STOP! using Impact as a header font. Actually, stop using Impact all together. It’s everywhere, boring, and adds no stylistic goodness AT ALL. While we’re chucking fonts out, stay away from Comic Sans MS, Mistral, and Arial. These fonts are ubiquitous and are just lazy choices in terms of aesthetics.
Small details will set your site apart. Color changes, smart looking nav bars, and great typography/image choices for your header will make a huge difference. Trust me.
As I said before, design is extremely intuitive. Sure, complex designing is tough for people who don’t have the knowledge and tools to execute their ideas, but simple and compelling imagery is right at your fingertips. Oh, and pssst, if you don’t have Photoshop, you can download a 30 day free trial at Adobe. Go wild, people!
{ 12 comments… read them below or add one }
Thank you for this great advice. I just upgrade to Thesis from Neoclassical (another Pearson theme) and I am trying to redesign my site to really give it some visual impact. I am working on a new header and your tips will really come in handy.
Jamie,
You are the queen of negative space!
I loved the idea about the navigation bar tabs going edge to edge – that’s the type of thing that looks awesome when you see it but you don’t know what you’re seeing.
My major concern about that technique, however, is that my client won’t be able to add additional pages/tabs without messing up the design – I usually try to leave a bit of space to the right to allow this if they decide they want to do so on their own, because I think the second-row wrap with Thesis looks très unprofessional. I guess it depends upon the client and our prescience about whether or not they’ll want to be adding to the original navigation.
When you discuss choosing fonts for the header, are you intending that they be made into part of an image? Because I thought fonts were dependent on what was loaded in the user’s computer, and if that computer doesn’t have the font you’ve chosen, the browser will substitute. Am I misinformed, or did I misunderstand you?
Wow, what an excellent design tutorial Jamie. You’ve inspired me to make some tweaks to my site! (Thesis based, of course)
Kathy: Yes, I mean for the header to be an image, that way you can use whatever font you want. Since web accessible fonts make your choices limited, it is best to use an image for your header (in my opinion).
Cynthia: Yes, the navigation bar is tough when you don’t know if a client will add tabs (and most times they don’t know it will mess up the design). I usually ask if people will want to add tabs, then I can plan for that. That’s what you do, too, so we’re thinking on the same level with that.
Clara: Great! I’m happy I was able to help. Keep checking back for more tips.
Don: Nice! I look forward to seeing what you come up with!
Finally, someone who gets what I can conceive of but not quite get there.
I’m calling you.
….and thank you for the tips–generous and enlightening.
I’m curious about the static homepage and blog. If your blog is a page how do you post ‘posts’ to the page? Are you using subpages?
Hey what do you think about my logo? Any suggestions?
Thank you for your ideas on this page-they have been very helpful. I was able to get my navigation bar to span the content box on one site that I made http://lifecoachdrew.com , but on my new site, I downloaded the beta version of thesis 1.6 beta 2 and the code I had previously used doesn’t seem to be working anymore. Do you have any ideas? Do I just need to wait for a tweak to be make to the beta version?
Interesting. I may take you up on some of those tips. I do however prefer to just use webfonts in stead of images. What prompted your choice?
Hi,
Thanks for the tips? How did you make this pages navigation menu? Any tips for me? I am finishing a site and need to “sexy up” the menu…default Thesis abilities just aren’t cutting it.
Thank you!!
{ 2 trackbacks }