• Do I need a magnifying glass to read it?
• Do I need to read sunglasses to read it?
• Do I need a translator to read it?
• Can my visitors read it?

Let’s take a look at these questions and see why the answers to them are so important.

• Font Size  – What’s important to note is that what you find readable may not be readable to your visitors.  When you are choosing your font size, think about your target audience.  If your target audience is in their 40’s, chances are that you may need to make the font a bit larger so that it’s easy for them to read.  Or even better, make it readable and provide the option to change the font size to suit their needs.
• Font Color – Something that I have experienced personally is websites that think it’s a good idea to combine really awful colors with background and text. Some of them use colors are so bright that I need sunglasses to read them comfortably.  Others use colors that are so light that it’s impossible to read the words without highlighting them.  These are two situations that should be avoided at all costs.

Make sure that the background color and font color both make for good, comfortable reading for your visitors.  Otherwise they will leave your website and never come back.

• Font Style – There are a lot of great font styles that are available to use.  Unfortunately, some of them are not so easy to read. Styles such as AR Berkley and AR Decode might look pretty. But they are very difficult to read. Even though they are plain, stick with ones such as Times New Roman, Ariel, or Courier New.  They are some of the easiest to read for most people and they work out well for webpages.

Remember when you are choosing the font for your website there are three things that the font should have:

• A size that is suitable for your target audience and/or the ability for the visitor to change the size to suit his or her needs.
• A color combination with the background and the font color that is easy on the eyes.
• A font style that is easy to read for anyone coming to the website.

When you offer these three things to your visitors, you will discover that they are reading and enjoying the content that you are providing for them.  You may have great content on your website. But if your visitors can’t read it, it will not do them or you any good at all. Remember that website content is only as good as the font used to write it.

Before RichWP and when WordPress was for blogs

Every project followed the traditional way of consulting with the client first to understand their wants and needs, then going to the drawing board to come up with a design or two which I could pitch in our next meeting. I also created a flow chart to give the client an idea about how the site would be structured and how the navigation would work.

After the second meeting, I would make revisions and get them approved before I would sit down, cut the graphics, and code everything up. Not having WordPress, I also created my own CMS for bigger projects, so that the client was able to make changes to the content of his website without needing to contact me.

When I thought that everything was ready to launch, I usually had another meeting with the client to go over everything and get another list of revisions that had resulted from the work I already had done and from new ideas that were worth implementing. After finishing everything up, the client would give the green light and we would go live with the new site.

Do parts of this described workflow sound familiar to you? How often did you hear the phrase, “Can we make the logo a bit bigger” or “Can we change this color to be a bit brighter” or “Can we move the navigation a couple of pixels down” or “You don’t charge me for these little changes, do you?”

You must agree, this is not the most efficient process of meeting a client’s needs and getting a website up and running. How often have you thought a particular client was very hard to work with?

Why I developed RichWP – 2009 to 2011

So, over the last 3 years since I began running RichWP, I have worked hard to streamline the process of website development. I wanted to create a system that is flexible, robust, fast, and user-friendly in order to cut development times in half. With the help of WordPress, which has turned into a top notch Content Management System (CMS) in the recent years, I did even better.

By analyzing over 500 web design structures and recognizing their common traits I came up with the Rich Design System. I fully implemented it into the RichWP FrameWork for WordPress. Creating designs; changing colors, fonts, backgrounds, margins, and paddings; moving navigations, headers, sidebars, etc. within the WordPress admin was a big step that eliminated the need for the previously mentioned mock-up stage.

Instead of creating my designs in a Graphic Software first and having them approved by my clients before I sat down to start coding the div structure and CSS, I simply create the design within the RichWP Design Options. I only need my graphic software to create backgrounds or Icons if necessary for the design.

Now that WordPress has turned into a full-fledged and easy to use CMS, I just set up some sample pages and posts, so the client understands the structure of the site and navigation without the need of a flow-chart.

I now usually finish up a project within the second meeting with the client. I do design changes during the meeting. Sometimes it is necessary to give the client a quick introduction into WordPress, which can usually be done within an hour and it earns me some extra bucks.

Let me know in the comments how the web design business changed for you. If you want to hop on the bandwagon to streamline your WordPress projects, check out my secret WordPress weapon.

Lipton Green Mint

• Arial, Verdana, sans-serif

Emotions Live

• Tahoma, Arial, Helvetica, sans-serif

C Galvin

• Georgia, serif

Refresh Teesside

• Arial, Verdana, Helvetica, sans-serif

Sprouter

• “Helvetica Neue”, Helvetica, Arial, sans-serif
• Cambria, Georgia, serif

Ever Note

• Verdana, arial, helvetica, sans-serif
• ‘Helvetica Neue’, Helvetica, Arial, sans-serif

Logo Labs

• calibri, Arial, Verdana, Tahoma
• Arial, Verdana, Tahoma

Alex Buga

A Modern Eden

• ‘Arial’, san-serif

Tori’s Eye

• Tahoma, Arial, Helvetica, sans-serif

Eco Environments

• Arial, Helvetica, Sans-Serif

Koffie Verkeerd

• Georgia, “Times New Roman”, Times, serif
• ‘Helvetica Neue’, Helvetica, Arial, sans-serif

Daguia

• helvetica,arial,sans-serif

Stock.Xchng

Every Stock Photo

Morgue File

Woophy

Free Foto

Free Digital Photos

Nations Illustrated

Free Stock Photos

Kave Wall

Free Range

Photo Gen

Free Photos Bank

Sweet And Talented

Image After

Pixel Perfect Digital

Free Pixels

Free Images

Diwiesign Studio

Tripalbum

Free Image Files

Minimal5 Preset & RichCORP Child Theme

 


Demo: Minimal5 Preset & RichCORP Child Theme
Theme: More Information and Feature List

Minimal5 Preset & RichGRID Child Theme

Demo: Minimal5 Preset & RichGRID Child Theme
Theme: More Information and Feature List

Minimal5 Preset & Magazine Child Theme

Demo: Minimal5 Preset & Magazine Child Theme
Theme: More Information and Feature List

As you might already know, there is another dimension to the RichWP FrameWork besides the layout enhancing child themes. The built-in design editor allows you to boot up design presets and customize them instead of designing from scratch. You do not have to sit in front of a blank canvas struggling to get over designers’ block like with so many other WordPress FrameWorks. Simply activate a design preset that comes close to your vision. Use it as is or make the final tweaks by changing the colors or inserting your logo to make it uniquely yours. RichWP offers the most comprehensive Design System in the WordPress Theme World and is proudly powered by the “Rich Design System™” .

The Minimal5 Design Preset is from now on part of the PresetStarterPack and will be delivered for free with your initial purchase of the RichWP FrameWork. There are also 16 other designs in the PresetStarterPack. If you haven’t purchase the RichWP WordPress FrameWork yet, get it now! You gain a whole new way of designing WordPress-based sites by saving a lot of time. No more mockups and no endless CSS coding.

RichWP is Streamlined WordPress-Based Web Development.

Less is more, just make it BOLD. Today I have released the Rich & Bold 3 Design Preset. As you might already know, there is another dimension to the RichWP FrameWork besides the layout enhancing child themes. The built-in design editor allows you to boot up design presets and customize them instead of designing from scratch.

You do not have to sit in front of a blank canvas struggling to get over designers’ block like with so many other WordPress FrameWorks. Just activate a design preset that comes close to your vision. Use it as is or make the last tweaks for your complete satisfaction according to your own unique design.

Today’s release is a minimalistic, left aligned, super bold design which works perfectly to underline the hipness of your blog/magazine site or to put your message right into the face of your potential customers. Feel free to change the colors and insert your own logo to make it uniquely yours. Check out the demos and see for yourself.

» Demo 2: RichCORP + Rich & Bold 3 Design Preset
» More Information about the RichCORP Theme
(You can apply the Rich & Bold 3 Preset to every RichWP Child Theme)

The Rich & Bold 3 Design Preset is from now on part of the PresetStarterPack and will be delivered for free with your initial purchase of the RichWP FrameWork. There are also 15 other designs in the PresetStarterPack. If you haven’t purchase the RichWP WordPress FrameWork yet, get it now! You gain a whole new way of designing WordPress-based sites by saving a lot of time. No more mockups and no endless CSS coding.

RichWP offers the most comprehensive Design System in the WordPress Theme World and is proudly powered by the “Rich Design System™” .

RichWP is Streamlined WordPress-Based Web Development.

The Example

The following example is a corporate website for Montreal based accountant who offers personalized tax services for individuals as well as small business owners. It has been built using the RichWP FrameWork along with the #1 Corporate Design Template, the RichBIZ child theme.

What Happened?

First you have probably noticed the minimal design which integrates the green and grey of the logo to communicate the overall clear corporate identity of the company. Then your focus changes over to the main headline which states exactly the main service of the business. After that you probably notice the call to action, the “Get Started Now” button.

After about 5 to 10 seconds you start reading the text in the main box or scan the headlines in the lower boxes from where you dig further into what this company has to offer.

The Result

This example shows what a solid corporate website design should accomplish and how it takes your potential customer by the hand and clearly communicates where to take action or where to explore your offer further.

Here is what Allan, the owner of Better Tax Services has to say about RichWP:

I purchased my RichWP theme from Felix to launch the website for my business. My web knowledge is very limited and Felix coached me and gave me the courage to run my website on my own. He had many valuable tips on how to structure my site and which words to use.

When I did have questions, Felix was always there to answer them promptly. I highly recommend RichWP to anyone looking for a WordPress theme. His after-sales service is exceptional!

If you are looking for an affordable Corporate Design Template which is based on a solid CMS (Content Management System) that you can easily tweak your Message and Design, I highly suggest you have a look at either the RichBIZ or RichCORP Business Themes for the WordPress Platform. If you have further questions or need help and advice to getting your business website up, contact me: felix@richwp.com.

There are basically two types, the more realistic looking designs that completely depend on a space scene as a background image and those that incorporate comic-like illustrations.

Check out the sites below and get inspired. Realizing spacey Web designs with the design options of the RichWP WordPress Themes is no big deal. Have a good look at how background images and color schemes have been used.

At the end of this post you will find a link to resources like PhotoShop tutorials, graphics and illustrations that are available for free to get you started creating your own space scenes and designs.

How do you do design like this? There are always easy shortcuts to achieve effects. Click through the following list of tutorials and resources to get started creating your own space scene designs.

PhotoShop Tutorials

Tutorial Collections

Out of this World Tutorials
70 Tutorials for Learning and Mastering Light Effects inPhotoshop
31 Breathtaking Planet Space Tutorials for Photoshop
50 Photoshop Tutorials for Sky and Space Effects

Photoshop Brushes

100 Brilliant Space Photoshop Brushes

Spacey Background Patterns

Tileable Classic Nebula Space Patterns

Other

Showcase of Rockets in Web Design + A bunch of Cool Rocket and Spaceship Graphics Available for FREE

Do you know other great examples of “Space Scenes in Web Design”? Have you found great tutorials and resources that are not listed here? Leave a comment below.

The RichWP Theme FrameWork allows you to integrate large photo background images into your design in 3 different ways. In the Body Background section of the Design & Colors tab you can set up:

1. A large background image with fixed positioning
Simply tick the box to display a body background image, paste an image URL into the box, chose a position and tick another box to be fixed. I use this solution if I have a background image that somehow fades into the background color or consists of isolated objects. Check the following examples to get an idea of what I am talking about.

2. A full size background image
Use the full size option to use set up background images that do not fade into the background color. The images will be automatically resized to the user’s browser window size. The trick here is to use an image with a resolution large enough to look crisp and clear in most standard sizes, while also keeping the file size small enough to maintain loading times at a minimum. There is no rule of thumb here. Analyze the examples in the showcases listed below. If unsure, try to keep width at around 1280px and file size under 200kb. Playing around with different .jpg compression rates and algorithms sometimes works wonders.

3. Randomly chosen full size background images
If you want to change the background images that you serve your users, you can set the body background to be randomly chosen from 5 image URLs. Note that the refresh rate of your caching settings determines how often a new background image will be chosen. I recommend setting it at 3600 seconds.

Showcases of large image background sites

Plenty of web design blogs have already published high quality lists of websites that use large image backgrounds, so I’m not offering my own. Take note of how other designers display the navigation and the content. What color schemes do they use? Do they work with semi-transparent backgrounds to let the images shine through the content boxes? If they are not using Flash, try to analyze the width and file size of the background image they’ve used. As always with list posts, a couple of the links don’t work or the design of the shown websites has been changed. That’s why I have chosen showcases that use screenshots large enough to get their point across. Feel free to be inspired and experiment with your background settings.

1. inspiredology.com – 25 Large Photo Background Websites
2. acrisdesign.com – Showcase of Websites with Large Photo Background
3. speckyboy.com – 50 Large Photography Backgrounds within Web Design
4. tripwiremagazine.com – 20+ Web Full Size Photo Background Sites
5. psdfan.com – A Study of Photographic Website Backgrounds
6. webdesignerwall.com – 80 Large Background Websites
7. artfans.info – 32 Example Websites with Large Background Image
8. vandelaydesign.com – Showcase of Big Backgrounds in Web Design
9. designtutorials4u.com – 40 Awesome Websites with Big Backgrounds
10. bestpsdtohtml.com – 30+ Websites with Beautiful Large Backgrounds

Watch this tutorial to learn how to easily add social media icons to your RichWP powered WordPress site: Adding Social Icons Tutorial

Thanx to Robin for helping with the research.