Archive for the ‘Website Templates’ Category

Tips for Basic WordPress Theme Customization

Sunday, May 6th, 2012

In the past we talked about some of the most important HTML and CSS tips for WordPress newbies. Today I’d like to expand on that a bit more generally, talking to new blog owners about the types of things they can do with free (or even premium) blog themes to make them appear more unique. After all, no one wants to use the same old design being used on dozens or hundreds of other WordPress blogs. (more…)

10 Awesome WordPress Themes of 2010 (You May Not Have Seen Yet)

Tuesday, June 8th, 2010

I could spend all day perusing collections of WordPress themes. They’ve come a long way since I started blogging back in 2004. And these days many of the free WordPress themes even rival the premium options. Every year WordPress designers get even more impressive, and 2010 is no exception. So today let’s take a look at ten recent and awesome WordPress themes you might not have come across yet (or if you’re a WordPress junkie like I am, maybe you have).

Here are ten of my favorite themes recently released, in no particular order. I tried to choose a combination of “themed” themes for specific types of sites as well as some more general WordPress themes you could adapt to just about any kind of site or blog run on the WordPress platform.

Note: While I tried to stick to themes released in 2010, it’s possible a few 2009ers  managed to sneak in where release dates weren’t obvious.

1. Webfolio

I’ve seen Webfolio featured on several sites, so you might have stumbled across this one too. But for those who haven’t been on a recent theme hunt, I think it’s one they should see. Gorgeous, no?

Webfolio WordPress Theme
Webfolio WordPress Theme from Site5

Price: FREE  | Info and Download

2. Glory

Glory is the only WordPress theme on this list I’ve actually had the pleasure to use yet (I usually design my own or have them custom-made). I loved the earthy feel of this one so much that I used it to set up my sister’s first blog — a blog on college vegetarian cooking — at DormVeg.com. The only minor complaint I had about using it was that the logo is very difficult to change since there was no logo PSD (unless I missed it somehow) and the logo itself is on a background pattern. Very frustrating, but it was manageable as you can see on the edited site.

Glory WordPress Theme

Glory WordPress Theme from HostWisely

Price: FREE  |  Info and Download

3. Corporate Life

Corporate Life is a gorgeous professional WordPress theme that’s ideal for a business site or a portfolio site promoting services. Everything you’d want on a basic business site is accounted for right on the homepage, saving you from having to adapt a more traditional blog format.

Corporate Life WordPress Theme

Corporate Life Theme from GetACustomDesign.com

Price: FREE  |  Info and Download

4. Choco

While Choco could easily be adapted to just about any niche, it’s one I stumbled across while looking for decent food blog themes. And there really aren’t many great food blog themes for WordPress out there yet. If you’re looking for one, this might be one to consider.

Choco WordPress Theme

Choco WordPress Theme from NewWPThemes.com

Price: FREE  |  Info and Download

5. Brave Zeenat Pro

Dark themes and templates really don’t appeal to me visually, but this one stood out. It struck me as a nice theme option for a photography blog or maybe something in high fashion.

Brave Zeenat WordPress Theme

Brave Zeenat WordPress Theme from DizenoCo.com

Price: $37 (they also offer a free version)  |  Info and Purchase

6. Classic Theme

I’m a big fan of minimalist Web design, especially when it comes to creative professionals’ portfolio sites. And the Classic Theme is a lovely black and white minimalist WordPress theme that really called out to me on that front. This is another one I think could work well for a photographer’s site, or any kind of site or blog where you can’t afford to have the sidebar content detract or distract from the main content.

classic theme

Classic Theme on ThemeForest.net

Price: $27  |  Info and Purchase

7. Portfolius v.11

Speaking of WordPress themes that would make for great portfolio sites, this one also stood out. While the overall design is pretty simple, and while the header doesn’t really appeal to me, it was the layout and typographical choices that really made it “pop” next to the competition. I could see this being used for a copywriter’s blog, a sales letter / product site, or something else relying on text-heavy content.

Portfolius v11 WordPress Theme

Portfolius v11 WordPress Theme from PremiumWP.com

Price: $19.95-29.95  |  Info and Purchase

8. iGifts

I love this one for its simplicity. It’s a pretty basic theme, and there are lots like it. This one jumped out because of the decidedly female focus. I’ve had a tough time finding good female-oriented themes in the past (many are too image-intensive and therefore more difficult to customize). So I could see this used for anything from a mommy blog to a shopping or beauty blog. It’s also professional enough that you could easily adapt this to a magazine-style setup. Love it. And if pink’s not your thing, changing it up for another niche should be relatively simple with this theme.

iGifts WordPress Theme

iGifts WordPress Theme from NewWPThemes.com

Price: FREE  |  Info and Download

Answers

This is another WordPress theme some of you might have seen around already, but one I think deserves some attention for those who haven’t come across it yet. This theme is designed for use with a very specific type of site, other than a blog. Its purpose is to let you set up your very own Q&A site (like Yahoo! Answers).

Answers WordPress Theme

Answers WordPress Theme from Templatic.com

Price: $49 – 99  |  Info and Purchase

10. Fresh Life

This theme jumped out at me because it’s just so versatile right out of the box. The color scheme is perfect for not only business sites and blogs, but news sites as well. Plus, I love a nice bright design any day, and the double-bar navigation really appealed to me. Take a gander.

Fresh Life WordPress Theme

Fresh Life Theme from Theme Junkie

Price: $29.95  |  Info and Purchase

By no means are these the only great WordPress themes out there, even just from the most recent releases. But they’re the ones that caught my eye amongst the crowd, and I think they’re all worth sharing. Remember to keep on looking — new WordPress themes are released pretty much every day!

Do you have a favorite new WordPress theme put out in 2010? Leave a link in the comments to tell us about it.

Why Its Better to Avoid Web Templates With a Lot of Stock Images

Monday, April 19th, 2010

Years ago, when I first started working online and long before I learned how to design my own sites, I relied heavily on Web templates. I loved them. They made my life easier and they were an affordable option for a new start-up. Over time I came to realize that the most attractive Web templates were also often the most problematic for a new site owner — they relied too heavily on images (stock images to be exact). Today I’d like to talk about how stock images can pose problems for new site owners, and why designers might benefit more from creating less image-intensive designs.

What I Mean by “Stock Photos”

I want to be clear. When I’m talking about stock photos in Web templates causing a problem for the webmasters using them, I’m not talking about images that make up the basic site structure (like buttons or navigation link backgrounds). I’m talking about those creepy corporate smiling faces and very niche-specific photos so many designers love to use.

Most often I see these types of photos used in headers of Web templates. However, I’ve seen a few with stock images peppered throughout. Let’s look at why adding them might not be the best idea.

Why Stock Photos are a Problem

There are a few reasons stock photos can be a problem for people using a Web template. But first, let’s look at a common target market for these templates. Yes, some more experienced site owners still like to use templates and just customize them for their own use. But many Web template users (whether buyers or users of free templates) are new to managing their own websites. (more…)

The Most Important HTML and CSS Tips for WordPress Newbies

Monday, February 15th, 2010

I know that some of you are probably designers yourselves, or are at least somewhat familiar with CSS and WordPress theme styling. However, I usually work with writers. Many of them love WordPress for hosting either blogs or professional websites, but they often aren’t sure how to make simple CSS and HTML changes to improve their designs or alter a free theme they’d like to customize.

I’m sure there are plenty of bloggers outside of the writing community with the same problem. They use themes out-of-the-box not necessarily because they want to but because they don’t know how to change things. With those WordPress or CSS newbies in mind, let’s take a non-technical look at some quick HTML and CSS tips and tricks a new WordPress user can use to improve their blog design. Note: I’m not a designer — these are meant to be practical tips to help non-coders work around common WordPress design issues on their own. I do not claim that they’re necessarily the best solutions in all cases. If you’d like to share other methods, please do so in the comments.

1. Replace your blog title with a logo

By default, your WordPress theme might include a blog title link in the header, but to customize and brand your site you want to replace it with a logo. Here’s how to do that. First upload your logo image and have the URL / address for the file on-hand. Then go to the WordPress templates editor in your admin panel and find header.php. You might see something like this:

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

That code adds a link to your home page (with the text of your blog title). On my business site, this is what the site name looks like without a logo: (more…)

5 webdesign trends that will stay for 2009

Tuesday, February 24th, 2009

Web 2.0 is still here and hasn’t been renamed yet, but it seems that its design has evolved for the better. From soft gradient and glossy buttons it has gotten more handmade looking. Following are some trends that we’ve started to see more in 2008, and that will be all the rage in 2009.

1. Grungy & Rusty
Grungy designs are quite common for music band, they’ve also been around for quite a while in graphic design. However, a few talented designers have brought this trend to blog design. Dirty lines and lavished backgrounds are becoming common and will be even more in a near future.

bartjanverhoef screenshot

2. Watercolour
With its irregular gradients, watercolour is one of the most enjoyed type of paintings. Webdesigners using this effect will add a soft touch to their designs and a kind of dreamy effect.

vigetinspire screenshot

3. Collage
Before Photoshop, collage used to be a commonly used technique to mix elements together. It is also a good way to put colorful elements together and will often turn to joyful designs.

freepeople screenshot

4. Vintage
Stylized old school drawings or photos will add a charming touch to any blog design. While not appropriate for every niche, vintage blog designs will definitly keep on being trendy.

jeffsarmiento screenshot

5. Sketches
The first impression I get when confronted to a webdesign sketchy background is that there is some work in progress. Sketchy webdesign can definitly be a good choice if you want to make your blog or website a more lively place.

satsu screenshot

This article was written by Mirko Humbert, a swiss designer running a popular graphic design blog.

10 Simple CSS Tips and Tricks for Better Web Design and Usability

Thursday, October 30th, 2008

If your website doesn’t achieve the success you’re hoping for, it might be due to a very simple reason: bad design. While professional templates are hard to achieve for a non-designer, these simple CSS tweaks can dramatically improve your design, make it more accessible, and make it more efficient.

1. Nice Pull Quotes
Using the blockquote HTML tag is a good practice that many web writers use to differentiate quoted text from the rest. However, you can improve the rendering of these by tuning it with CSS. Adding nice typographic quotes and a background color will make your citations really stand out.
Tutorial on SitePoint

2. Background Images for Bullets
Bulleted lists are a nice way to display links, archives, or categories but they do look very common and fail to blend into your site’s design if to stick to displaying default bullet points. Did you know that you can replace these bullets with custom images? Doing this, you’ll have a more coherent design.
Tutorial on MaxDesignTutorial on MacWorld

3. Rounded Corners
When creating a box in your design using basic HTML and CSS, it will look very square with hard corners. You can smooth those out and make them look less aggressive using one of these two easy techniques.
Tutorial using imagesTutorial without images

4. Styling Your Forms With CSS and Labels
Unfortunately, it is still very common to see people use tables to align their forms. It is actually easier and more accessible to use CSS and labels to achieve this.
Tutorial on Pete Freitag’s blog

5. Styling hCard with CSS
hCard is a simple, open, distributed format for representing people, companies or organizations using a 1:1 representation of vCard properties and values in semantic HTML or XHTML. It is a nice way to display your contact information and it is easy to set up using the hcard creator.
Tutorial on 24Ways

6. Creating Your Print Stylesheet
If your article is long, chances are that people will want to print it out to read it. Improving the layout of the printed version is quite quick to do, so why don’t you do it?
Documentation on CSS discuss

7. Link Labeling
Ever clicked a linked and been taken to a PDF, DOC or MP3 file? Remember how annoying it was? Knowing this, you should be kind to your visitors and give them a way to know what kind of file a link will open. This can be done by adding a little application icon using the following technique.
Tutorial on Maratz.com

8. Removing Dotted Outlines
Ever notice this dotted outline coming around focused or active anchor links? It makes your site look less professional, so you should get rid of it using the following technique.
Tutorial on CSS tricks

9. Image Replacement for Submit Buttons
There are three ways to deal with submit buttons when designing: leave the default browser button, customize the background and border with CSS, or replace the button with an image. The last solution is the one that will blend in with the rest of the design the best.
Tutorial on Ampsoft

10. Styling Tables with CSS
Even though you should avoid using HTML tables for layout purposes, there are still cases where it’s the best solution, such as for presenting tabular data.
Tutorial for zebra table with CSS on A List ApartHow to style tables with CSS

This article was written by Mirko Humbert, a Swiss designer running a popular design blog.

The Science Behind Web Templates

Friday, June 15th, 2007

A web template can be defined as a pre-defined schematic or pattern which you can re-use to fulfill you own requirements. A template can be of various types ranging from a formula based electronic calculator to a web design. It is a ready to use design created by web designers and sold for profits. Web templates are similar to any other website that allows the integration of text, audio, video and various other applications with it. A web design also makes use of certain strategies with which it can be deployed and distributed using the internet as a medium. A web design system is a methodology used to develop web templates. Web design systems are meant to work three functional levels; the principles to carry out these functions are pre-defined.

The core principles or functions can be listed as follows:

1. Web design systems work towards saving development time
2. Web design systems also work towards building a cost effective website or a cost effective online presences
3. A good web design system ensures that a webmaster or the owner of the website needs to spend very little time on maintaining his website

Web templates are a result of these three requirements. A web design system can enable you to produce a large number of replicas quickly and accurately, similarly, web templates can be used to create as many web pages and web sites as possible without having to worry about extra development costs. (more…)

Important Aspects with Flash Technology

Wednesday, May 16th, 2007

Presently there are a few irrefutable advantages to properly designed Flash web page. Profound importance is given to the well framed content with the raged Flash technology. Without a strong regulation and exceptional coding, implementing Flash could turn out to be really atrocious and might cost you a lot of prospective customers. But, in this era where everything seems to be a blind maze it is advisable to install flash applications for your website or your template only if it satisfies the genuine need and intention with no explanatory troubles. Coming to a conclusion of when and how to exercise Flash are the larger concerns at this point. Above and beyond esthetic expressiveness and skilled rules of coding there are a number of incredibly sensible requirements to be understood in the greatest Flash webpage. (more…)

What is a Web Template?

Saturday, April 28th, 2007

A web template is a framework of graphics and style created to simplify the web design process. A template is created with design elements excluding unique content effectively separating design and content elements. Templates vary in style and complexity.

Types of Web Templates

All-Page Template – a template encompasses an entire page including all design elements. Most elements including a header, footer, graphics and content location are fixed.

Block Templates – Only a portion of a website is included in template format. Menu bars or headers might be fixed on an otherwise dynamic website.

Template Engines – Templates used in conjunction with a template engine can be used to create mass-produced pages. Customized content contained within a database is combined with a pre-selected template to create mass-produce pages of a website. The template engine creates slightly differing pages based on database entries with little or no manual input of content into the web design.

Web Design Templates – Templates used for more personalized customization to create a more complex and unique website. These pages are updated in a more manual fashion. They may also contain fewer pages as they are not mass-produced via template engine.
(more…)

Advantages of Website Templates

Wednesday, April 18th, 2007

The main reason why people use website templates is to get an advantage in the form of it being faster in making the website that can often be as many as five to ten times faster than other means of creating a website. Professionals who are expert web designers can do the job, but the whole process is much slower.

You would also get better quality of finished product if you use a website template since the one’s that are already created are aesthetic as well as professional and provide maximum functionality as well. With ease of editing of the website template possible, you can create truly artistic websites without much fuss or bother.

A website template will also not necessarily mean spending a lot of money, as for a small sum of money; you can get a quality design that will provide a basis for creating your own website. Spending fewer than one hundred dollars provides you with a full-site creation with many pages, and for two hundred dollars you can get the templates adapted to your particular requirements. (more…)