The Basics of Web Design

by Eric Hamm on April 10, 2009
in Design

basic_web_designImage courtesy of dullhunk

As you probably already know, a blog theme is just another website template. Pages of code that sit on web servers and tell browsers what to put on their pages, these themes are nothing but plain old websites. Learning about web design is leaning about blog theme design. So here are a few tips about what a solid site should do to make the most of its online real estate.

Framework:

First and foremost, a website design is just a kind of framework for the content it presents in its boundaries. From the header where the logo/title sits, to the navigation bar that is attached in some way, shape or form to any sidebars, feature sections and the final footer to close the circuit. All of this, surrounding the main content area where you’re focused voice is present. This framework is the glue that holds your website together.

Starting with the header: An effective header is one that is just the right size to make visible your name-brand, but not too much to burst your readers personal bubble. It should fallow the theme of the rest of the site, but carry just enough difference that it stands out and draws those new eyes into itself. You want a new visitor to be drawn to it, but not so much that they can’t look away.

The navigation bar: I personally believe that this is the most important part of the framework. Acting as a kind of anchor, the navigation bar (or navbar for short) becomes the boundary between your header and the rest of your content (this assumes it’s on top and not on the side, but that’s an assumption I’m going to make in this handbook). It holds the keys to each page on your website and allows instant access, no matter where you go. The header is important, but without the navbar, it would feel naked and out of place.

The key to an effective navbar is simple. Use JUST the necessary amount of pages to it and it will do its job. Too many and they become lost in themselves, doing nothing more than confusing your short attention spanned reader.

Sidebar: The sidebar is your sub-content area. Kind of a mix between the navbar and your main content area, the sidebar both caries access to other locations as well as house content you want readily available with just the slightest glance.

A solid sidebar is one that is JUST big enough to house your necessary links, buttons, forms and images. Keep it simple, but not bland. You want to draw your readers eye, but not distract from your main content.

Speaking of your main content area: This should be the largest piece of land on your website, housing the focus and point of your pages. White or light background is ideal, with dark colored text. Clean is always good and the rest is up to your own grammatical skills.

The footer: The final piece to the puzzle, the footer closes the loop to keep the circuit circling. There are two kinds of effective footers and both are about as opposite as they come…

One is the simple cut off point. This should be almost invisible, but just enough to house the credits and bounce your readers eye back up to the top. The second kind is one that houses much more than the credits. Used as a feature section, this kind of footer is almost a kind of bottom sidebar. A great place to put some ‘bonus’ links for your readers to feast on, this can be a solid way to extent your website just a bit further. Just be careful not to over do it. Too much clutter in the basement of your site and you’ll lose your visitors in the mess of pictures, links and who knows what else.

So keep it clean either way and try and stick to the JUST ENOUGH rule.

Feel:

The feel of your website should be just what it needs to be to draw your reader in. If it’s a news site, it should fee informational. If it’s about art, it should feel creative. Whatever your content is trying to convey, your website should back this up with the right layout.

But don’t mix this up with the idea that the framework should be decked out. The fact is, what you put INSIDE your layout should determine the look and feel, not so much everything else. I mean sure, it doesn’t hurt to have a unique, attractive custom logo and the colors DO make a difference, but the words and images that fill the insides, those are what will solidify your message. The framework should be just that…a FRAME. Just like too much picture frame can take away from the picture, so too can your over-the-top web design distract from the content inside.

Keeping people coming back:

The fact is, a new visitor isn’t your bread and butter. It’s only when that person re-appears at a later time that you know you’ve done something right. No amount of theme customization will be enough to ensure the masses will come back, time and time again. It’s up to YOU to fill the walls of your website with words and images that inspire a return. Successful online activity may start with a solid frame, but this quickly transitions to its rightful place, in the hands of your voice.

Blog Traffic Exchange Related Websites
  • The Coming Real Estate Crash? Foreclosures Up 79%. In California, that is. I am sure it not as high other places, but a 79% jump in foreclosures is a pretty big jump, wouldn't you say? According to Inside Bay Area, California had 16,273 foreclosure filings in February, up 79 percent from a year ago which does not bode......
  • Monthly Mortgage Rate ResetsReal Estate: No Bottom Yet? John Mauldin is an investment adviser and president of Millennium Wave Investments. He sends out an interesting weekly newsletter, which most recently focusedon the current real estate market.  It seems like the bottom isn't in sight yet: Analyst contend that much of the bad news in the subprime-loan and housing......
  • Ben Stein Not Hot On Real Estate Here's an excerpt from Ben Stein's column about why he thinks real estate isn't such a great investment.That means the house has kept up with inflation -- barely.In fact, when I do the math, I realize that it hasn't fully kept up with inflation. Plus, the owner would have had......
  • Real Estate - Latest News <a href="http://247wallst.com/2010/01/07/commercial-real-estate-begins-to-mirror-residential-market/">Commercial Real Estate Begins To Mirror Residential Market – 24/7 ...</a><p>The residential real estate crisis is over. Home prices are stable. The number of people who are in the market for a home is up. Tax credits and home prices, which are still historically low, are the cause for......
  • Riskiest Real Estate Markets In The US A lot of people are wondering where to invest in order to catch the next real estate boom. I don't have a ready answer for that, but Forbes magazine was nice enough to tell us where the riskiest markets are. 1. Miami, Fla. Due in part to escalating insurance costs,......

Wordpress Theme Design: Less Is Often More

by Eric Hamm on March 31, 2009
in Design

Just some ramblings of a guy riddled with ADHD…

Links from video:

Twitip.com

Stevepavlina.com

How To Use Gimp To Make An Image Transparent

by Eric Hamm on March 5, 2009
in Design

In this screencast video tutorial I show how to use Gimp to take an image with a white background and make it transparent.  This technique is great for logo creation as well as other web design techniques.

Eric

Blog Traffic Exchange Related Websites
  • Web Design, A Profitable Twitter Traffic Machine Home Business Do you have the following abilities?1. Proficient programming knowledge, specifically in the fields of HTML and PHP; and2. A sharp sense of outlineIf you do, then a very lucrative job at home business opportunity awaits you. I'm talking about web design.As a web designer, you can look forward to a......
  • jerseysFlorida Gators Jersey If you're looking for a way to really show off which college football team you're rooting for this year, why not take a look at the unique Florida Gators jerseys that are available on the market today? There are a wide variety of different Florida Gators jerseys for you to......
  • Where To Find A Good Web Designer When you are into the internet business, the first thing that comes into your mind is to build your own website, right? With a website, it's just like you have a virtual store open 24 hours a day, 7 times a week. But to make people come and visit your......
  • gatorsbedFlorida Gators Bedding One of the unique ways that you can showcase your Gator Pride is to purchase Florida Gators bedding. There are a number of different Florida Gators bedding items that you can buy, including Florida Gators comforters, Florida Gators blankets and Florida Gators pillows for example. You can buy a big......
  • The ABC Of Essential Web Design If anyone mentions the term Internet it’s not surprising that most people immediately start thinking about the proverbial website. Contrary to popular belief though building a website is not just about uploading it to your web host. It’s essential that you present all your information in a logical order......

The Thesis Theme is #1 in My Eyes

by Sean Platt on January 29, 2009
in Design

I totally heart the Thesis theme for Wordpress.

The Thesis theme, designed by Chris Pearson of DIY Themes isn’t the first theme I used for Writer Dad, but it is the one I fell for.  I don’t love the Thesis theme like I love my wife or children, but I feel a similar affection for it as I do my Macbook or aluminum keyboard.  It’s just one of those things that helps to make my workday a pleasure. 

My days of blogging started with a whisper.  I had a Blogspot address (now orbiting the Blogoshpere like an abandoned satellite) and I fed that first blog with the absolute absence of regularity.  I loved the ease of one button publishing, but was far from serious about the endeavor.  It was my rough draft and I knew it.  The second as I started to grow serious about my aims, I found Blogger a bit too lacking for what I wanted to do.

I had no web design experience whatsoever, but after finding myself building a website I needed for only a single weekend (a terrific story I look forward to telling someday), I decided to move my secret blog into the open.  

I used a Mac app called Rapid Weaver to throw my temporary site together, and though a Thesis theme the site was not, I was pleased to find that at least I had the ability to build myself a website.  If I can build a five page site in a weekend, I thought, I can build myself a blog.

So I built a blog on Rapid Weaver, and even bought a custom template for twelve dollars called “Notebook.”   It was red, black and dumb all over.  I was instantly bored by its limitations and totally done with it by the end of the first weekend. 

I was still far from finding the Thesis theme, but I had done enough reading to know I needed WordPress.

I installed WordPress and started to play.  By that time, I’d been bandying about behind the scenes of blogging for about a month.  I was ready to take it seriously, but every theme I uploaded felt like I was walking around in clothes from another man’s closet.

Finally I found what I’d been searching for – the Thesis theme from DIY.  I loved it in the browser, never once questioned my purchase, and knew what I had a second after upload.  

I was home.  Thesis had removed my confusion.  It allowed me immediate, incredible flexibility, and enabled my site to look far more polished than it would have otherwise.  The Thesis theme also had enough power under the hood to handle SEO, a word I was not yet close to understanding.

In the time since, I’ve only come to love the Thesis theme more and more.  Each new update has improved upon the theme’s underlying foundation.  Additional help from my friends Eric and Dave have given me a site built on increasingly common architecture that still manages to look uniquely my own.

I purchased the developer’s license and have used the Thesis theme for my potty training help site as well as a few planned niche sites.  As of yesterday, DIY themes released the newest version of the Thesis theme, my most anticipated update ever.  The newest version will allow the front page of a WordPress site to appear as a magazine styled theme.

There are many choices for WordPress themes, and there isn’t a single best.  For me, however, the Thesis theme helped me become a better blogger by giving my site its immediate shine.

Sean

Blog Traffic Exchange Related Websites
  • Smooth Move: Five Steps to a Successful Phone Transition During Your Office Move Moving your office to a new location is a considerable endeavor affecting nearly every aspect of your business operations. While there are many important projects to consider, ensuring that the primary means of communication—the phone for most businesses—transitions seamlessly should be one of the top priorities.Successfully moving the phone......
  • timemoneySave Time, Money and Space in Over 80 Ways If you're looking for handy gadgets, tools and various items that can save you time, money or space (or all three!) this list of more than 80 top products is just what you need. Everyone's got saving money on their minds these days. Some of us are always looking to......
  • One Year Of Frugal Dad, A Look Back Hard to believe I have been writing here at Frugal Dad for an entire year! In some ways it is hard to remember a time when I wasn't writing, but in other ways I can easily remember being a fan of so many other blogs, but hesitating to start one......
  • start business boxHow To Get Started As An Online Income Business Internet Marketer If you are new to internet marketing and the thought of starting an online income business from home seems like an unreachable dream the truth of the matter is that it has never been easier for anyone with absolutely no experience to build a successful business online. It makes no......
  • siegelDale Siegel Shares the New Rules for Mortgages I was recently fortunate enough to have the opportunity to interview Dale Siegel, author of The New Rules for Mortgages. We exchanged emails in a Q&A format on the subject of mortgages, the housing market, etc. Here are her responses to my questions. Lending Guidelines Frugal Dad: Lenders used to......

Wordpress Themes of 2009: The Evolution of the Do It Yourself Website

by Eric Hamm on January 28, 2009
in Design

flexlogo

Yesterday I talked about the birth of “Motivate Thyself,” and the premium Wordpress theme I used to give the blog a face.  Now I’d like to discuss the fast paced evolution of WordPress themes, and how the average blogger can benefit.

What’s changed in the last 6 months?

A half year back, having the full ability to tweak your theme without monkeying with internal code was a rarity, to say the least.  Thesis was the only theme that even came close.  You could change both font type and size, content placement, sidebar size and position, as well as a host of other useful features.

Even with all that, it was still difficult to insert a custom logo or change the background of the blog.  It could be done, but not with the instantaneous click of the mouse that would make it simple for newbies.  iThemes Essence series, used by “Motivate Thyself”, had some phenomenal back end features, but was lacking in most other areas.

That was 6 months ago…

Fast forward to early ‘09.  Now you can enjoy a wide array of benefits from the latest batch of fantastic looking, internally robust, and easy to manipulate themes.  From iThemes, Flexx series (this is what’s beneath the hood of the Blueprint) to a few free offerings like Ikarus and Flexibility, consumers are experiencing the multiple benefits that come from thriving competition met by solid innovation.

Down to the details.

When you login to WordPress to make design adjustments on your blog, you are at the mercy of your theme’s back end features.  Let’s assume you’re not a design geek.   The latest batch of themes meets the average blogger with a host of new features that allow the user to easily adjust the theme from many available single click tweaks.  Programming skills not required.

flexx1

Let’s return to Flexx for a moment.  As you can see, one of its excellent features is the ability to change the entire layout of your blog’s design with just a few simple clicks.  You can add a custom header, then adjust the background with a different color, or even an image if desired.  Heavy design tweaks that used to require at least a basic understanding of CSS and PHP (computer code), now do not.  This is an evolution that has swept the entire WordPress community, not just that of paid themes.  There are some excellent Wordpress themes offering similar features at the unbeatable cost of nada.

How about some negatives?

Well, if you DO know how to get under the hood of your blog and really tweak the heck out of it, you might find these newer features a bit cumbersome.  Before, you could just open up the lone style sheet and change a few things around and be able to do whatever you’d like with your theme.  Now you’ll find you must deal with multiple CSS files and more complicated coding.  You can still tweak to your hearts content as long as you’re willing to manipulate the more complex files.

It’s a bit like being a mechanic and working on a 21st century car.  You’re used to doing everything with a good old fashioned wrench, but now must fix several tons to a computer just to make a few adjustments on the engine.  There are now circuits where there were once just nuts and bolts.  To the average driver it’s all positives, but to the person lying on their back facing all the metal, the new advantages are coupled with complication.

The future looks bright!

Overall I’m ecstatic about the advances I’m seeing; better looks and increased functionality right out of the box.  This will narrow the field for the average blogger.  Great writing framed by bland blog design will become increasingly less common.  Just as blogging has leveled the playing field for the broadcast of our individual voice, these new Wordpress theme designs are making it so everyone can look like a blogging pro.

For those like myself, who like getting their hands dirty with a little code now and again, we’re just going to have to learn how to work with a bit more complexity.  That sounds just fine to me!

Eric

Blog Traffic Exchange Related Websites
  • jello8 Wordpress Blog Theme Design Considerations Most blogging platforms offer a wide variety of different themes to chose from, and most can be altered and edited to suit your needs, or left alone exactly as they are. Some themes are plain and dull while others are colorful, modern and inspiring. There are thousands of themes out......
  • Top 100 Tools and Themes for BloggerTop 100 Tools and Themes for Blogger [/caption] WordPress receives a lot of love from the blogging community, but Blogger.com is still a perfectly viable blogging platform for the majority of people. In an effort to help those devoted Blogger users, we’ve gathered up the best of our lists about tools, themes and shortcuts for your preferred......
  • New Features make Lending on Prosper Better than Ever Prosper.com released a few new features recently. These features might be interesting to all lenders or potential lenders. Here's a run down on some of the new features and how they could affect Prosper's peer-to-peer lending market. Portfolio Plans - Prosper now provides an automated method to bid on set......
  • Custom Software Development and Programming: The New ‘In’ Thing Ever since the computers were invented, mankind has seen a sea change in every field. With computers penetrating every corner of today's busy life, the act of doing things has also seen a significant shift. Everything has just taken on a new form and all are liking it. Really, computers......
  • Couple of new features Amidst all of the sidebar linkage appear a couple of new features:The MBH Newsletter -- will contain links from the blog as well as some other goodies.  Sign-up is way easy through the sidebar link.  Double opt-in.  Your information is safe: won't be posted, rented, leased, skywritten, tattooed, etc.The MBH......

Next Page »