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.

Design can be a very computer-oriented task, especially if you’re a graphic / web designer. For many months I didn’t manage my time too wisely, and realized that the time outside of the computer world (real life) was passing by. I would go to coffee shops, concerts, and party from time to time, but without decent body and mental stimulation, found it hella’ draining. I needed to do something else.

What do you do when you’re away from the computer?

Read

Whether it’s design-related books or beatnik-inspired poetry, reading is something that brings people forward mentally. I generally read material that isn’t design related, as I spend many designing hours doing that.

Illustrate

Illustration helps brainstorming and often I’ll find overlaps between my illustration work and web design (like the header of this page for instance). I like seeing the two integrated.

Exercise / Eating

Exercising is key to not being lazy. Although I schedule time to go to the gym on my schedule, there’s never enough exercise, especially for designers. The Facebook offices feature exercise rooms and lots of break time, which is a great office addition.

Eating healthy and exercising go hand-in-hand, and it’s very easy to change the way you eat. Lentil sandwiches and hummus are both great snacks that are rich in protein for those long hours of designing without getting up.

Meditation

Ah, puts the ‘life’ in ‘life’. No matter what faith suits you or if you don’t subscribe to a faith, meditation allows you to be more mindful, reduces stress and anxiety, and is scientifically proven to make you life longer. It will enhance your away-from-keyboard world greatly if practiced correctly. Pranayama is meditation focusing on the breath. Try closing your eyes, taking deep breaths and keep your focus on your breath. Try this for 10 minutes without allowing your head to jump to another subject (monkey mind). You’ll be surprised about how your brain acts as a TV, constantly broadcasting a subject into your head. Taming this and focusing on your breath will enhance your concentration on basically everything.

Video Games

They’re probably not the most constructive activity to saturate your mind with, but spending ½ an hour on games you can pick up and play for a short period of time like Chrono Trigger or Mario Kart is a good way of cleansing the mind. MMORPGs can drain a lot of your time if you’re not good at controlling yourself .

Enjoying the outdoors & socializing

Whenever possible, socializing can lift spirits, especially for freelancers that work from home. Going to a coffee shop to work allows you to take breaks and have face-to-face discussions with people. The sun is people’s main source of Vitamin-D too. If you take a walk, you can observe different shapes in your environment and use them as fresh design ideas. Nick La has a great post about environment-inspired design.

So what do you enjoy when you aren’t designing?

The dreaded competition

Unless you were smart and chose a niche topic, you likely have a lot of competition to keep up with other blogs / sites. If you find anything groovy that other sites have that allow them to succeed more, it might be an idea to think of something that’s equally or more groovy. Updating your layout and the functionality of your site to match the competition will help you compete. Have you ever heard those intense guitar licks by Django Reinhardt, Hendrix, or (insert your favorite guitarist here) and imagined being able to play that? If you don’t match up with the other guys, you will be seen as the one who doesn’t understand the tools / tricks of the trade, like a person brand new to guitar. Go out and see what other sites are doing that you’re not doing.

Use new technologies

Keep up with technology, even if you’re not in the tech field. If your competition isn’t tech-savvy, then you have the upper hand. This applies to on-site and off-site technologies. If you’re trying to promote your business on Myspace groups instead of facebook groups, it’s likely a bad move unless you have a good reason to. If you’re using the stats tracking tool that your hosting company provided you that shows just the number of visitors are on your site each day, perhaps you need to move to something like Woopra.

The new Ocular Harmony layout (now) uses a prominent RSS / Mail subscription, a button to add me on twitter, and a fashionable way to display social media links.

Layouts have a time limit

You can have killer AJAX technology that loads like a bee, but if the loading screen is filled with various animated GIF’s and marquee tags, the whole glamor of in-page loading is defeated. That’s an extreme example, but layouts age like a living thing, and some faster than others.
On the rare occasion, some stay fresh after a decade. Adam Russell shared this interesting link on Twitter that’s unbelievably a layout from 1999. It looks fresh and fo’shotally 2010.

So that being said, keeping up with a fresh look can keep users engaged.

Layouts are more important nowadays

An increasing amount of people place importance on the layout to avoid scammy sites or fake blogs. They would also like an easy read. When I read blogs, sometimes I come across a site using the default WordPress theme. The first thing I do is check to see if the content is relevant based on a two second glance, and then bounce if it’s not. I never do this ‘check’ if it’s a nice design, because the layout can establish trust with the user.

That’s all folks! If your site is up-to-date then all the better – just avoid redesignitis and as spyrestudios says – “realign – not redesign”!

Not long ago I had a discussion with my brother about the massive amount of information being published. It was brought to my attention that most of this information is redundant and re-published. I had the idea of blogging, just not the idea of information control. If you’re a twitter user, you’re likely to see more links to blog articles than the amount of times you’ve clipped your fingernails. Admit it, with people immigrating to the ‘blogosphere’ on a secondly basis, it’s hard to stand out of the crowd. Here’s what you can do to improve your blog quality in terms of information:

Have the Right Intention

If you’re reading this right now hoping to acquire knowledge to solely increase ad revenue to your blog, receive backlinks, or both, it’s time to step your game up (or step away from blogging altogether). Blogging is an excellentway to spread your wealths of knowledge to the world. I mean, that’s what the internet is about right? Your blog should reflect what you have a passion for, and what others may profit from instead of being self-driven. Karma will reward you in the end when you use passion, and allow you to profit (traffic, backlinks, exposure, etc) off your information, but you must get there first.

Ponder, Brainstorm, Ponder again

A wonderful way to grasp a strong post idea is to make it very targeted to the subject. Use a sketchpad and jot down a list of things that you like in your blog’s topic. Mine is design, so I’d pick stuff like Magento, The Grid System, Siggeir Hafsteinsson, WordPress, etc. Now try to meld some of those ideas together, and use adjectives to make them niche. Scratch out the ones you don’t like and keep the best ones. Jot 100 ideas down, and refine what you can of them. The more you think, the better you will get at thinking.

Here’s what I mean about niche:
Original thought: A list of 20 cool animals
Refined thought: A list of 20 species of monkeys
Final thought: 20 different Monkey Species doing funky faces

So here’s what that title communicates to the user:

• There happens to be 20 things for the user to look at
• Those things happen to be different types of monkeys
• They happen to make funky faces

Do some Research Around the Net

Find out what’s out there before ejaculating an idea that has been thought of 23,000 times (or for those that are fans of popular quotes…don’t reinvent the wheel!). Google your idea first and then start writing about it.

If you dwell on the almighty Twitter, you’re likely getting a substantial dose of what people like to read. Skip over to Digg, CNN, BBC, etc… and see what they’re writing about in your target area, and get a sense of what the user wants to read about. Tweetmeme is a great place to do some research.

Write Compelling Titles

Now, Instead of me writing a paragraph on this, Diana Adams (Adams Consulting) has written a great article on Bit Rebels explaining ways to write great titles that encourage people to click. Only promote / write / encourage people to click articles that you’re confident that will benefit your user, otherwise you’re wasting their time.

Again with Twitter…if you use Hootsuite, you can use their Ow.ly URL shortener and track which articles are clicked on most, so experiment around with different titles whether they’re your own article or not. This will get you into a “groove”. A dude that has a good “groove” in compelling title writing is @Minervity. Once you get the “groove”, you should start seeing results.

Writing for other blogs

The idea and title wording are crucial when writing for other blogs, especially when they’re a big name. If your idea is thrown down by one person, don’t quit unless you draw the mental conclusion that your idea really is garbage and it’s not just a self-esteem thang.

One time I presented an idea to a big-name web design blog and they rejected my idea and told me they’re not interested in working with any of my ideas. Zip. Nilch. None. I took the same idea to Pro Blog Design and it was accepted and showcased on the front page of Digg.

Conclusion

And that just about wraps up today’s piece on the OH blog. Feel free to sign up to the RSS feed since there’s more fun-filled posts coming your way.

1. Coca-Cola

Coca-Cola’s is a ubiquitous product known around the world for the sweet, carbonated drink, made with a secret formula of ingredients. The marketing material associated with the drink has generated an instantly recognisable brand, with its red and white colour scheme, traditional lettering and contour bottle modelled on a cocoa pod. Drugstore owner John Pemberton created the beverage, and his bookkeeper, Frank Mason Robinson, designed the iconic logo in 1895.

2. Olympics

The interlocking rings of the Olympic logo represent the five continents of the world, brought together in the spirit of the competition. While the Olympics can be traced back to ancient Greece, the founder of the modern games Baron Pierre de Coubertin created this logo in 1912.

3. Apple

Apple is an immensely popular electronics company know for Mac computers, iPod, iPhone and the new iPad. The original 1970s logo pictured a scene of Isaac Newton under a tree with an apple about to drop onto his head. In 1976, designer Rob Janoff created this logo with the rainbow colour scheme that was used until 1998.

4. McDonalds

McDonald’s is the world’s largest chain of fast food outlets, known for the distinctive letter ‘M’ logo. Jim Schindler designed the logo in 1962, taking inspiration from the golden arches built on the sides of the original restaurants.

5. Microsoft Windows

Bill Gate’s Microsoft dominates the personal computer market; the Windows operating system is familiar to any computer user, as is the four-colour window logo.

6. Nike

The iconic Nike swoosh represents the wing of the Greek goddess of the same name who was said to have inspired the feats of courageous warriors. Carolyn Davidson, a graphic design student from Portland State University, created the logo in 1971 while freelancing with the sportswear company.

7. BBC

The BBC logo has evolved over time from the original television idents used to brand the broadcaster. In the 1990s, Martin Lambie-Nairn’s design company took charge of the idents, and eventually created the simplified logo seen above. The design is reminiscent of the corporation’s first logo from 1932, and employs a font based on London Underground’s typeface.

8. Audi

The rings of Audi’s logo represent the amalgamation of brands that formed the Auto Union of 1932: Audi, DKW, Horch and Wanderer. The logo bears a striking similarity to the Olympic Rings, causing the Olympic Committee to sue Audi in a small claims court in 1995.

9. Google

The search engine is so popular that word Google has entered the English language, and the company’s branding is also instantly eye-catching. There have been several adaptations of the wordmark logo since its inception in 1999; designer Ruth Kedar designed its current incarnation using the Catull typeface.

10. BMW

The Bavarian Motor Works was originally known for building aircraft engines, and the company logo was developed to represent the movement of a plane’s propeller cutting through the sky. The design also incorporates the blue and white of the Bavarian flag, reversed to create the BMW roundel.

11. Mercedes-Benz

Gottlieb Daimler designed the Mercedes-Benz logo, which debuted in 1909. The three-pointed star signifies the company ambition to dominate land, sea and air. The laurel wreath was added to the logo in 1926, when Benz was merged into the company.

12. BP

In 2000, British Petroleum was renamed BP and replaced its traditional shield emblem with this design, with the aim at highlighting the company’s green credentials.

13. IBM

Graphic designer Paul Rand created IBM’s ‘eight-bar’ logo in 1972. The horizontal stripes simultaneously represent speed and dynamism, while also making the logo easy to print with the reprographic technology of the 1970s.

14. Pepsi

Pepsi Cola has been around since the 1890s, and like its great rival Coca-Cola, has a brand image that has evolved over time to become one of the world’s most recognisable logos. The company currently uses a variety of variations such as this text-free example, identifiable by its red, white and blue waveform design.

15. Adidas

When Adi Dassler parted company with his brother (who went on to form Puma), he created the Adidas brand, and since its inception the company’s marketing material has featured the three-stripe motif.

16. Puma

After Rudolph Dassler angrily severed his partnership with his brother, he created Puma. The leaping big cat, representing the company’s potency, was first used in 1948 and continues to be used today with few modifications.

17. MTV

MTV changed the way people listen to and create pop music, and the logo, with its solid ‘M’ and graffiti-style ‘TV’, reflects music’s constant evolution. While the format remains the same, the design means the separate elements can be decorated with any pattern, colour or material.

18. Tesco

From humble beginnings, Tesco has gone on to dominate the retail market. The logo is based around the company name, which originates from when Sir Jack Cohen joining forces with TE Stockwell to create a grocery chain. The first shop called Tesco opened in 1929.

19. Marlboro

Phillip Morris’s Marlboro cigarette brand is famous for its billboards featuring Marlboro Man, and for its distinctive red and white packaging.

20. Starbucks

Starbucks’ logo is based on a 17th Century Norse woodcut of a twin-tailed siren. Since Terry Heckler created it in 1971, the logo has been adapted and streamlined through various changes, mostly to make the siren’s body more modestly concealed.

Prepare your canvas

Make a new canvas about 1200×600 or higher, double click the ‘background’ layer to unlock it, and create a new layer.

Go Crazy

Seriously. Just use a soft round brush and do what you can to make it a nice collage of color. Use any colors you’d like. Change the size of the brushes and use opacity to darken / lighten some of the areas.

Add a background

I added a dark gray background gradient with a subtle fade to have a better idea how it’s going to turn out in the end. Select the background layer, select your foreground and background color, then use the gradient tool to add a simple background.

Liquify the colors

Photoshop’s liquify tool will manipulate lines by bending them a certain direction, unlike the smudge tool which directly mixes the colors. Select the layer with all of the colors, and click Filter -> Liquify. You are taken to the realm of liquification.

I set my brush size around 130, and varied the density and pressure. I also changed the brush size to a lower one to acquire more detail afterward. Your goal is to use the forward warp tool and the twirl clockwise tool to get a form that you like and one that mixes the colors to a detailed degree. Simply make strokes with the brush in different directions.Try to keep it somewhat rectangular to be able to fit it inside the letters in the next steps.

I acquired this effect by using a smaller brush and continued to make loops. Uh, groovy!

Make your type

Choose a font. When you’re done typing what you want, drag the type layer below your color layer, hold down alt on the line between the two layers, and move it until you see cursor turns into a stamp-like thing, and click. The colors will now be a layer mask that exists within the positive space of the type.

You can do anything from here. I changed the hue (Command + U or CTRL + U) to a different color and discarded the hippie colors (yet they will forever live on inside of me). You can go back into the liquify filter, and now see what areas overlap the text.

Adding More Background Detail

I created a new layer above the background and used a large soft round brush with a low opacity to lighten up around “prana”. I also played around with the hue in search of one that I like, and added a 3px black stroke with 30% opacity.

I then created a new layer, rendered clouds (using black and white) and set the opacity to a lower percentage. I also settled on turning the text black and white.

Adding Stars

Add a new layer, and use small soft round brushes set at 50% with a white color to create a starry effect. By changing the opacity and size it makes them have depth. You can also get star brushes here.

Adding a Reflection

Finally, flatten the “color” layer with the text layer by selecting both with Command (or CTRL on Windows) and pressing Command + E (or CTRL + E) to merge them.

Pressed Command + J to duplicate it, and Command + T to transform the duplicated layer. Right click and select “flip vertically” and drag the layer just under your text, and press enter.

At the bottom of the Layers window, select “create vector mask. Select your gradient tool (use black and white) and drag until you find a reflection that you like.

You can also add more text to appear subtly in the background by writing it and lowering the opacity to 4 or 5 percent. I did this to the top and bottom of mine.

Results

1. Bloggodown’s list of 400 twitter icons
   What a score for people looking for twitter icons!
   
2. Websiteicons.net
   If you’re not looking for a “2.0″ style, this is a great resource for having simple, to-the-point web icons
   
3. Free Social Icons
   The name says it all. This is a new resource for getting free social media icons
   
4. Web Icon Sets
   A variety of some very large icon sets
   
5. Star Fish’s Free eCommerce icons
   
   
6. Komodo Media’s Social Network icons
   

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.