The goal of your site should be obtainable from the homepage

If you’re selling a product, it would be a good idea to put products or ‘buy now’ buttons on the homepage, but also important not to dilute the consistency of the page by pushing too many products and telling your users that you want them to buy your stuff. That makes you look desperate. Put a few, perhaps a compelling ‘about us’ section, some social media update feeds like a ‘twitter feed’, and some ways the user can browse your site.

If you’re an informational site, you want the users to read your articles. Putting a feed with excerpts of your newest or featured content would be helpful. If you’re featuring some of your information, it’s beneficial to analyze using Analytics software like Google Analytics to see what type of content your viewers look at the most.

For example, lets say you’re a blog and have 4 categories:

• Shoes
• Brews
• Snooze
• Crews

If 70% of your users are interested in the “brews” section (for your fantastic beer knowledge), and 10% viewing each of the shoes, snooze, and crews articles, it would be wise to feature something about brews on the homepage, because it is an easy gateway for them to get to the info they’re looking for. This helps your user AND you, especially if you’re monetizing your information site.

In most cases, contact forms are very important. Putting a contact form on the homepage really helps with the number of people contact you. When I moved my contact form on the homepage, I got many more people that contacted me than I got previously.

For godsake, make sure the user knows who you are and what you do

I’ve seen too many times websites that doesn’t describe what their topic is. And in many cases, it’s not easy to identify just at a first glance of the page. This is especially true for generic-looking blog themes that are designed to work for any niche. I’ve also seen it for fancy image sites that want an artistic edge. There’s nothing wrong with either, but if you want traffic and for Search Engines to index more keywords, having a tagline helps immensely. And make it prominent. It doesn’t have to be huge like Mailchimp’s homepage, but let the user know so they have an idea of what they’re looking at. Have a look at this tagline showcase from feedGrids for some inspiration.

Using images and text…properly

It’s not absolutely required to use images since there’s effective text-only homepages out there, but an image can really compliment what you’re trying to do. Lets evaluate two things: writing and images.

Writing and text are a method of symbolically transferring information, ideas, imagery, etc through the use of characters. These characters form words, and when the brain sees a word, they can use it to translate into images, concepts, and what you’re trying to communicate. It’s effective for saying something in-depth and elaborate. I cannot possibly give you the information you’re reading in this article through an image, so I write it out and use images to compliment what I wrote.

Images are also symbols, but the mind takes one less step by not having to interpret characters into thoughts, because it’s right in front of you. It could still be thought-provoking like artwork, but doesn’t need to be. Images can be used for instantly letting the user know what you’re all about.

Link to your inner pages

You have just a single page to encourage the user to get to the other parts of your website. This is why call-to-action buttons are extremely important. They’ll decrease your bounce rate, while also helping the user find what they’re looking for easily.

An example of an effective homepage

As Pro Blog Design revamped their site recently, lets have a look and see what they’re doing. It shows what it needs to show, and nothing else. Users that visit the site for whatever reason will easily find what they’re looking for. This site uses the 3 most common ways of making money – ad revenue, product sales, and services and organizes that in a clear and concise manner by each of them being a column. I also won’t hide the fact that this was one of my biggest inspirations from a UI/UX perspective for my own homepage revamp (main block + 3-column style highlighting different goals).

At first glance, this is what I saw (numbered by order of prominence):

1. Banner Images
2. Tagline
3. Feature Columns (Blog, Themes, Services)
4. Call to action buttons
   
5. Other Elements

The Header is visible, clean, and not bogged down with anything it doesn’t need like intrusive ads. It’s simply a logo and a navigation menu, so the user will put more emphasis on looking at what’s below and is not distracted by the header at all.

The Tagline is very easy to see – it was the 2nd thing that caught my eye when coming to this page after the main images. I understood the purpose of the site immediately.

The Banner Image is, in this case, featured websites. Since they create websites (as we learned in the tagline), this provides visual support and at the same time showcases some of their work.

The Blog is one of the better known of the web design blogs. They wouldn’t want to lose that on their homepage, and the previous design put far more emphasis on the blog and less on services. Since it has reversed and now the blog is an element within a services page, it’s a good choice to put it in an easy-to-access place… the left column and above the fold. It’s also listed as the first navigation item.

This column is also a feed of information, constantly changing so users can instantly see the new articles, which is also great for search engines since the homepage will constantly be re-indexed.

Their Themes are featured on the homepage, and go to their theme site, PliablePress. Since it’s another one of their three ways of monetizing, it’s justifiably prominent.

The Services offer solutions for what the tagline implies – blog and website design.

• The obvious: Web design backgrounds and graphic design
• Perfect for your mother’s garage sale flyers!
• Photoshop this pattern over George Bush’s head and see how he looks
• Print out a few of them and make them into a halloween costume (Free Ocular Harmony shirt for whoever actually does this)

Feel free to distribute, just keep it in the ZIP it came in with the credit document. It includes 6 seamless JPEG images.

Download Pattern Pack Now

It’s no coincidence that the vast majority of the websites featured in this article belong to individuals and organisations employed in some form of visual communication- whether it’s web design, graphic design or even cinematography. These people know what it takes to make a really great, original looking site and they’re not afraid to use it. Negative space typography can be difficult to read, but it doesn’t have to be. The examples explored below prove that it can add clarity to any design.

1. Alpha Multimedia Solutions

Alpha Multimedia Solutions is a web development and video production agency with a keen eye for cutting-edge graphic design. The word “ALPHA”, capitalized and in a large, negative typeface, can be seen on its homepage, each letter merged into the page’s main body.

2. Freelancing

There’s lots of negative space typography going on here, particularly on the homepage, where it can be seen in the “Follow Us” Twitter button, the page’s titles and the Freelancing logo itself.

3. FedEx

At first glance, you might wonder where the negative space typography is to be found here. In fact, it’s extremely subtle. You’ll find it in the FedEx logo itself, found on everything FedEx does. Take a look between the “E” and the “X” and you can see a little arrow. Found it yet? Not really part of the web design, but interesting nonetheless.

4. Rikcat Industries

This website is all about simplicity, clarity and minimalism. Negative space is used in the Rikcat Industries logo as well as in some of the call-to-action buttons. It looks really slick.

5. Pixel Umbrella

Nick Robinson of Pixel Umbrella is a master of graphic and web design. He often uses negative space typography in his own work. Unsurprisingly, it can also be found in his own site too, most noticeably in the header, where the word “Pixel” occupies negative space in a small, pixel-like square.

6. Klipp og Lim

If you can steal your eyes away from the sumptuous images of chocolates in the slideshow on Klipp og Lim’s homepage, you’ll be able to spot the company logo and navigation buttons, which have been cut out of a solid black bar.

7. siteInspire

siteInspire offers a portfolio of beautifully designed websites as well as an informative web design blog, so it’s only right that its own site should look spectacular too. You can find negative space typography in the logo in the top left of the screen, as well as in the categories list.

8. SUM

Branding and communications agency, SUM, uses negative space typography in its Venn diagram-like logo for a really crisp look. When visitors to the site hover over the buttons in the navigation bar, they turn red and the words become negative. Very clever.

9. Dropbox

Dropbox is a fantastic app renowned for its simple and straightforward design. Its website is no different: visitors are efficiently ushered into downloading the free app as there’s very little else you can do. The main “Download Dropbox” call-to-action button uses negative space typography and the results are, visually, incredibly clear.

10. Bonsai

Like Rikcat Industries, Bonsai’s website is highly professional with a minimal black-and-white aesthetic. Negative space typography can be found in the square Bonsai logo, which looks really clean.

11. Gravica Design

Gravica Design is a highly respected visual communication strategy firm based in Philadelphia. Negative space typography can be seen throughout the site, letting the company achieve a really stylish, modern design with plenty of white space.

12. ab+c

Homepages don’t come much cleverer than this super-cool design from web development agency ab+c. It features a series of words, some in negative typefaces, which change to reveal new sentences and meanings. I love it!

13. Narrow Design

Portfolio sites can often be boring, but not this one from Narrow Design. Visitors can scroll through past work quickly by simply moving their mouse up and down. The titles of each project are displayed in negative typefaces.

14. Socio Design

Negative space typography can be found on the homepage and throughout the site of trendy graphic design agency, Socio Design. Words are cut out of blocks of colour, creating a really up-to-the-minute look.

15. Adobe

What Adobe doesn’t know about graphic design, frankly, is not worth knowing. It comes as know surprise to me, therefore, that they use negative space typography in everything they do, including their website. Where? In its logo.

16. Digital Devotion

This German website manages to use tons of pink and purple on its website yet maintain a degree of class. Negative space typography is used in the banner at the top and in the navigation buttons on the left-hand side.

17. Spectra

Spectra’s website is unique: a perfect marriage of spectacular design and great user experience. Negative space typography can be seen on most of the buttons on the site, of which there are, literally, hundreds.

18. Smart

You’ll be hard pressed to find a website more interactive than this one from Smart, the car manufacturer. Visitors are invited to “Design” their own Smart car or “Drive” one interactively on their computer, over various courses. Both of these words are written negatively on small black blocks.

19. David Hellmann

The logo in the top left corner of David Hellmann’s site has been cut out of a block of blue, revealing the background colour beneath. Roll your mouse over it and the words change, guiding visitors back to “Home Sweet Home”.

20. Eclectic Pulp

Similar to David Hellman’s site, the logo in the top left of this page incorporates negative space typography, with the words removed from a block of colour to reveal the background underneath. The same can be said of the buttons in the navigation bar, which change colour when clicked.

21. Jan Reichle

Jan Reichle is a director/cinematographer. His great work covers everything from corporate to music videos. The use of negative space typography could not be clearer on his site, with a large letter “R”, in negative of course, on the left hand side of the page.

22. AIGA/NY

Negative space typography can be seen used in AIGA/NY’s logo, with the word “AIGA” cut out of a solid black square. It’s also apparent in the various navigation buttons, which turn into red blocks of colour, throughout the site.

23. Jason Mayo

Jason Mayo’s logo is simple, but superb. It wobbles, changes colour slightly and then settles into a solid black circle with the word Mayo cut out in the middle.

24. LifeLab

Unlike some of the more monotone examples in this list, Australian real estate company, LifeLab, has gone for a colourful, vibrant look. Nevertheless, negative space typography can be seen throughout, such as in the logo and the navigation bar.

25. The Brand Union

You’d be hard-pressed to find a better use of negative space typography than in the amazing logo for The Brand Union- a great mix of negative space and colour. When visitors first open the page, they are greeted with a large, expanding version of the logo itself.

Get Mailchimp, and hit the giant “Sign up free” button

You’re taken to a form. Fill er’ out!

After filling out the form and confirming your email address, you’re taken to the login screen

In the top right corner, click “account”

Click “Monkey Rewards”. Scroll down until you see text link code, and simply use it in websites to encourage people to sign up, giving you money for use on MailChimp. And voila!

Rupture

Download

Go to the Rupture Theme homepage

ˈrəp(t)-shər’ noun : a breaking apart or the state of being broken apart

The word is defined as breaking something apart. The goal of Rupture is to open WordPress to some of it’s utmost potential and provide a free product for bloggers to take advantage of. Where WordPress premium themes generally offer more than the free ones because of the financial aspect, isn’t WordPress something that is free and open source anyway? Rupture will be a theme that will have ongoing support with the latest version of WordPress and continuously improve it’s flexibility and functions. It will be released as a simple theme with an eye-catching design with hope the community will contribute ideas to make it stronger.

“lets see!”

The Breakdown:

Features:

• HTML5 + CSS3
  Rupture is written with the newest web technologies so the inner core of the template has specific attributes. For example, the sidebar is written with the <aside> tag and the navigation written as <nav>. This will be the standard in the future, so Rupture is a head start. Not to worry, it is backwards compatible tested using IE6 and up.
• Background Glow
  It glows! Rupture’s appearance is very focused on the aura around the content area to give a spacey, new, original, and stimulating look.
• Widgetized
  Built with widgets in mind, so you can simply drag and drop something and expect it to look good!
  Current Widget Styles in Rupture 1.0:
  -Tags
  -Blogroll
  -Categories
  -Search
  -Buysellads (Coming soon!)
• W3C Validation
  Well, almost. Since CSS3 isn’t fully supported yet, Rupture uses Pseudo-classes for corner rounding that doesn’t validate. Other than that, you can count this HTML5 + CSS3 valid.

Download Rupture Theme

1. Usability

People need to be able to use your site. A site with good usability is one that doesn’t break conventions (e.g. don’t try using anything other than ‘Home’ for a link back to your home page). Sites should be easy to navigate to first–time users. Back in the early 2000s, I—and a lot of other people—first discovered Flash. Flash–only websites were a lot more popular than they are now. Such sites are a prime example of style over content. Most of them were just too frustrating to use.

2. Accessibility

Accessibility means making sure everyone can access your web content; this usually refers to people with physical or mental disabilities. For example, one user may have to operate the computer with a head stick and another much be partially–sighted and access the site through a screen reader. So your design should be laid out clearly, information should be rendered in a sensible order and most of all avoid using Flash for large parts of your website. If you can program and know some HTML make full use of access keys and provide alternative colour schemes and text sizes via cookie–based stylesheet selection. And make a point of testing your sites through a ‘text–only’ browser, such as Lynx.

3. Calls to action

Calls to action are elements on the website that make people take action. This would usually be someone picking up the phone, sending an email, filling out a contact form or buying something from your online shop. Calls to action are the lifeblood of any successful website and should not be ignored. You almost certainly can’t have too many calls to action—but you can easily have too few. Make sure the phone number is big and bold and placed a number of times around every page; make sure it’s obvious to users how to place items in the shopping basket. I’ve seen conversion rates increase on lead generation websites by several hundred percent just by adding extra calls to action on the body text on every page.

4. Increasing conversion rates and ROI

A conversion is when someone takes the desired action on your website. More conversion means a better return on your investment (ROI), that is, you make more money. This is arguably the most important point; the other points before this are really ways to make sure you get as many conversions as possible on your website. So as a rule–of–thumb, if you are deciding whether to add something or take it away from your website, ask yourself, will this increase conversions? If the answer is no, get rid of it, no matter how pretty it looks. Your raison d’être may be to make things look pretty…but we all need to make a living too!

This post was written by Tim Bennett, a freelance web designer and developer from Leeds, England.

1. Loja Birds

Has a neat, unique site structure along with a minimal, easy to follow design.

Color: Grey

Source: Siteinspire

2. Roanne Adams

Hope you like scrolling…horizontally. Roanne has a great sense of type and a wide range of styles in her print and product design.

Color: Beige

Source: Siiimple

3. Complex Fruit

Homepage of Paul Torres, a jack of all trades in design. His illustrative work and logo design are especially worth taking a look at.

Color: Like a beige / pink with dots

Source: Siiimple

4. Header Footer

They need to have some fun-filled infographics work done based on the excellent Core Studio pieces in their portfolio. Helvetica never gets old, and again, it serves it’s purpose well on Header Footer.

Color: Grey, very near white

Source: Siiimple

5. Design Interactions

A hit-or-miss layout in terms of usability. Design Interactions likes the z-index a lot and collages images together, uncovering the hidden ones with hoverovers.

Color: Light Green

Source: Minimal Sites

6. Ripe Type

Ripe Type is a great type resource here, consider it another bonus site to my article on great type resources. What I find odd about this site is the background is an image, not a CSS solid color. Perhaps it has a very subtle grain that my screen is incapable of displaying.

Color: Beige / Pink

Source: Minimal Sites

7. David Arias

I remember seeing David Arias site a while back thinking “wow, David Airey really must have done a big switch on his portfolio and website”…until I realized they were two different people. Both designers specialize in logo design, and have nice site designs.

Color: Grey

8. Darren Hoyt

Very slick design and subtle integration of jQuery.

Color: Light Blue

Source: CSS Uber Clean

9. Stephen Caver

Nice to see a website from a different angle (literally). It can be hard to pull off diagonal content, but Stephen does it.

Color: Beige

Source: CSS Uber Clean

10. Rose Fu

Ah, the type on this is spectacular. And what an original take on the contact box, it fits perfectly on the wall in the footer.

Color: Beige

Source: CSS Elite

Bonus! 11. Gvendi Tattoo Studio

Rarely do you come by a light purple website website. The header is nifty on this one and it’s simple to use. Only complaint is the background doesn’t repeat, so you get a thick purple bar down the right side.

Color: Light Purple

Source: CSS Elite

Update March 2010:Ocular Harmony now uses a gray color scheme, becoming one of those off-white sites. Don’t forget to subscribe to the RSS feed!

Ocular Harmony is partnered with Web Design Mississauga

Canada Website Design located in Toronto provides web design to surrounding areas such as Mississauga, Oakville, Burlington and Niagara.

Google has decided to make some significant changes of it’s indexing engine.

At the beginning of 2009, Google already made a few changes to it’s search, putting greater importance on:

• Keywords in the URL
• Incoming Links
• Social Bookmarks
• New Content added to site
• Domain Age

With the release of Bing, Google decided to rewrite a large chunk of their indexing system, making it cleaner and have faster indexing. You can watch a video 0f Matt Cutts (with a newly owned bald head) talk about the latest update, code-named Caffeine. What’s the best part of it? You can already use Caffeine and see your ranking. Your placement won’t be too different from where it is currently, but could be a few ranks down or up. What should you do? Get your Caffeine rank up and above the competition because that’s what will matter in the near future. Well, here’s the link:

Go to Google Caffeine

Next off, there are rumors about Google starting to place weight on your breadcrumbs and display them in the SERPS. This is a helpful way to encourage people to name their FTP directories well.

How do you feel Google will do in in the future with the competition?

1. Time Manage!
It doesn’t matter how you do it. There are plenty of programs out there to manage your time. Basecamp is an effective tool for project management, and bundled software like iCal (Mac) or Outlook (Windows) allows you to schedule meetings, breaks, and any event in your non-professional life.

For those who like to escape the digital grasp, Behance offers beautiful organizers titled “Action Books”, allowing you to write out project details, steps needed to create in checklist format (called action steps), and dot grids on both sides for sketches. There’s also a large following of people who like the legendary Moleskines. Although there are many other notebooks at a fraction of the price, Moleskines appeal to a lot of designers and some clients like to see top-end notebooks glued to the designer they hired.

2. Know how to Price Yourself
The project manager (@freakyweb) of Freaked Out and I were discussing contract pricing, and shared some valuable knowledge. Unless you have no or little items in your portfolio, pricing yourself low isn’t the best idea if you’re looking to love comfortably. At least giving yourself a mid-range or higher price, you allow your work to speak for itself. If you’re proud of your work and it’s perceived as well-valued (don’t forget to ask other people’s opinions!), then allow it to be priced well. If you spend the time seeking contracts and apply to many different ones, despite the fact that you will be rejected for many of them, getting one higher priced contract can be better theat three lower priced ones. Why? because (in most casees), doing one project is easier than doing three, depending on the size of it. This gives you more time to look for decent priced contracts and more time to enjoy your life.


3. Subscribe to the Freelance Switch RSS
The Envato Network offers a website called “Freelance Switch” for those who haven’t heard of it. Subscribing to their RSS will be an infinite supply of knowledge to help you acheive any obstacle in freelancing. Subscriptions are free and the articles are submitted by a wide array of freelancers. They also have a great forum and job board.

4. Plan Time Off
Really, this is crucial. It allows your mind to not get burnt out, and your spouse and friends will love you for it. If you have the dire addiction of expressing yourself creatively or coding, take some time to do some illustrations or read a book on AJAX. Your eyes will like the vacation from the screen radiation.


5. Keep Tweetdeck, Hootsuite, Twitter, etc… closed while you work.
Twitter is an effective tool for web designers, but it’s an ineffective addiction that can sidetrack you from your work. If you feel the need to tweet, Hoostsuite has scheduled tweets. This way you can communicate while you’re still working and not distract you. Take breaks from designing to do all your ‘tweet replies’ at once. This could drastically improve your efficiency .

6. Communicate with Clients
Don’t allow the client to wonder about anything. Try to give them as many details as you can so they are more comfortable with the project. Even if the client is a ‘problem client’, keep your attitude professional, and expel the problem efficiently and quickly before it evolves into something worse.

7. Sleep
Yes, another time management point. Plan your sleep schedule. Your brain works by going through different cycles in sleep, falling in and out of unconscious states. When you wake up, the brain will organize itself to finish the final cycle of sleep, allowing you to wake up more alertly. When you get in the habit of having a normalized sleep schedule, you will find yourself waking up naturally at the time you usually wake up. This is called the ‘biological clock’. Ever have 6 hours of sleep one night and 14 hours the next? After 14 hours of sleep, you may be no more rested than having 6 hours of sleep. Keep your sleeping habits regulated.

8. Don’t get behind the times, keep learning
School meant nothing to me. I may have learned the importance of CSS, but just after 2 months of getting out of college, I realized much more than what I learned in college itself. That being said, college often won’t qualify you for a work environment. So treasure any knowledge you have and keep reading.

I’ve met many freelancers that don’t have any incentive of learning any more than they already know. It’s always good to learn more if you have the time to, and usually you do. Knowledge beats anything else in life, and with the help of books and the internet, it’s virtually free. So use it. If you get behind the times with scripting / programming languages, you’ll be swallowed whole by people that are more qualified. Stay on top.

9. Make an effort
This one barely needs to be said. Putting effort in everything you do will generate more future clients because it lets the work speak without having to open your own mouth . Easiest client-grabber ever. If you’re first starting out, It’s good to take on a lot of smaller projects and put a lot of effort into them to build up a portfolio that presents itself well.

10. Smile
Enjoy your career!

But no, Flash isn’t always a bad thing. If used properly, it can do wonders of added interactivity to your site that your scripting languages can’t do. Let’s take a closer look at it.

1. Splash Pages
   As one of the more agreed-upon reasons that flash is detrimental, splash pages kill so much potential for websites. They build shields around all the goodies that the search spiders are hungry for, and they’ll rarely come back because there’s no sitemap if the site is completely flash. There are two types of users coming to your site: people who are looking for specific information, and people who are browsing away. As lazy as it sounds, most people don’t feel like having to click a “skip intro” button.
2. Flash Components
   Flash is for people that know how to use it. It originated to add components to websites that simple scripting can’t do, enhancing the user experience and the visual output. Having flash components but not using an entire site in flash, can increase accessibility, especially if it degrades if the person doesn’t have the “latest version of Flash”. There is a plugin that detects if flash player is detected with Javascript; however it is inline Javascript, not valid XHTML, and aren’t good if you want that content indexed effectively.
3. API’s
   I’m no guru in actionscript, but API’s look ridiculously more difficult to add to flash than the ease of doing it with javascript/AJAX.
   Translation: Putting Twitter on your site will be intense! And we don’t want that do we? Fortunately, it is doable since Twitter developed an API for Flash.
4. Ease of updating
   CMS platforms like WordPress still offer the easiest way to add content to your site, whereas Flash (correct me if I’m wrong) doesn’t offer the versatility of templates, pages, posts, etc…without spending a very long time on developing it.
5. Accessibility
   Since many still use version 8, 7, 6 or even lower versions of flash player, not all the capabilities are available to those with a version under you. It’s like cross browser testing, you have to make it degrade properly, and you have to keep an eye on flash components displaying as you want them to in older browsers, making more trouble.

Conclusion: Flash is usually bad. But what is Flash good for?
Flash is nice for adding material that you ‘just can’t do’ with standard markup that will significantly add to the site. Art projects that are using flash as their art medium are also useful because it’s delivering a different message than web copy. James Paterson demonstrates a healthy use of flash in his project site, Presstube.com. Notice how many of the projects are flash based, but an embedded video with a marked up header. He only uses flash when needed on the site to show his animated work and interactive projects.

What’s your opinion on using flash in websites?