I hope you like the new home page design. Since I am freelancing full time now, I want to feature my business more on my home page. The new design keeps several elements from the blog but makes it secondary to my marketing messages. The path to my services, contact, pricing, and portfolio pages should be very clear now. In addition, my latest work panels are nice and large now. Yes, I’m still a blogger. You can find the blog stuff lower on the page. On the interior blog pages, the article content is still high on the page.

Here was the design on May 2, 2009:

Home page on May 2, 2009

Here’s the current home page:

Home page on Jun 18, 2009

And a current blog page:

Blog page on Jun 18, 2009

“Neuro Web Design” (2009) by Susan M. Weinschenck, Ph.D. is published by New Riders, which publishes a number of the Web design books I have read. The focus of “Neuro Web Design” is to teach you how an understanding of how we make decisions can improve the effectiveness of the Web sites we design.

In short, we have three components to our brains, each having evolved at a separate point in time. The book cites research that supports a theory that we make most of our decisions with the non-rational, unconscious, “old” brain and the emotional mid-brain, rather than with the rational “new” brain. We all like to think that we make decisions logically. Dr. Weinscheck, whose Ph.D. is in psychology, informs us that usually we don’t. Usually we respond to something far more primal like the urge to eat, mate or flee. She goes on to detail the key points of this scientific theory, and how they relate to creating Web sites.

My gut reaction at first was that this all seems so manipulative. But I must face reality, that pretty much all marketing attempts to manipulate. If you want to compete you need to have a competitive edge. This book is all about facing the reality that neurological research reveals for us. And using it for the benefit of marketing. In the end, I really enjoyed reading this book in spite of the discomfort it gave me at times. People will go on making decisions unconsciously, so it pays to realize that – and not make the opposite assumption.

In each chapter, “Neuro Web Design” cites research about a particular psychological phenomenon dealing with how we make decisions. It then explains the psychology in clear layman’s language. Finally, it suggest how to apply the knowledge to Web design. Each chapter title is very descriptive and invites us to read text.

Here are the chapter titles, to give you an idea of the content within:

1. Designing Web Sites for Persuasion and the Unconscious Mind
2. Wanting to Belong: the Power of Social Validation
3. Feeling Indebted: How to Build in Reciprocity and Concession
4. Invoking Scarcity-If Something Seems Unavailable, We Seem to Want It Even More
5. Choosing Carefully-Given Too Many Choices, We Freeze (and Then We Don’t Choose At All)
6. It’s All About You: Speaking to the Self-Centered, Unconscious Mind
7. Building Commitment-We Want to Think We’re Consistent
8. Using Similarity, Attractiveness, and Association: Are We the Same?
9. Afraid to Lose-How Fear of Loss Trumps Our Anticipation of Victory
10. Using Pictures and Stories-the Best Way to Talk to Our Unconscious Minds
11. We’re Social Animals-Finding the Next Big Thing by Making It Social

Chapters 3, 4 and 9 seemed the most manipulative to me. But check out the book. It is a great read, and you’ll find some very valuable knowledge here if you sell stuff or build websites.

Here are the way neato links I checked out this week.

Design

Ten Things I Have Learned by Milton Glaser

Ten logo design tips from the field

How to (and not to) work with a designer

Your Logo Makes Me Barf

Web Design and Development

10 Web Typography Rules Every Designer Should Know

Funny

The Bloggess

Tremendous News

Technology

Google Wave redefines Email

Freelancing

7 Ways To Research Your Freelancing Target Markets

Menu Preview

For this tutorial, we’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right. We’ll simplify it the navigation by pretending our zoo has only four animals. I guess we can’t expect too many paid admissions. Luckily, after you’ve completed this tutorial you should be able to adapt this technique for any site.

Preview our menu here.

Step One: Plan Your Nav

Kookaburra

It will help to create an outline of how we want our navigation organized. This can be done on the computer, but I often find myself sketching things up on Post-It notes or sheets of scratch paper. Here’s my sketch:

Sketch of Navigation Organization

An alternate outline would look like this:

• Home
• Visit Us
  • Hours & Pricing
  • Maps
  • Calendar
• Animals
  • Birds
    • Kookaburra
    • Hammerkop
  • Beasts
    • Wolverine
    • Wombat

Both of these outlines together will help us visualize how our navigation will be built. Let’s go!

Step Two: Build the HTML

Our navigation bar has two components: the HTML on the web page, and the CSS styling which will be in an external CSS style sheet that can control every page on our site. We’ll start with the basic content in HTML without any styling. Take a look at that second outline above. We need to recreate that in Dreamweaver. Remember to save your file frequently!

1. Create a new HTML page in Dreamweaver (File > New). Then select Blank Page and HTML. Choose (none) for the layout, and set XHTML 1.0 Transitional as the Doctype. Click Create.

Create a new HTML page

2. Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.

Save As and Design button

3. Navigation is really just a type of list, so we’ll make our menu a list. In the Property Inspector, click on the Unordered List icon. If you cannot see the Property Inspector, go to Window > Properties.

Unordered List icon

4. Type out your first level navigation: Home, Visit Us and Animals. Press Enter (Mac: Return) after each item. Don’t worry that we appear to be going down rather than across. We will finesse that in the CSS.

First Level Navigation

5. Click with your cursor just after the s in Visit Us. Press Enter/Return and then press Tab. The list should indent and the bullet type should change. This will be for our second-level navigation.

Second-level navigation

6. Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.

Subnavigation for Visit Us

7. Click after the empty bullet at the bottom of the list and press Tab. Type in Birds and press Enter/Return. Type in Beasts.

Subnavigation for Animals

8. Time for our third-level items. Click after the s in Birds. Press Enter/Return and type Kookaburra. Press Enter/Return and type Hammerkop.

Subnavigation for Birds

9. Repeat for beasts: type in Wolverine and Wombat.

Subnavigation for Beasts

10. Finally, we need to set up each item as a link. We don’t have pages to actually link to yet, so we’ll put in a pound sign (#) which is a sort of link placeholder. Select the word Home. In the Property Inspector, type # in the Link box and press Tab.

Add a link placeholder

11. Do the same for all the other navigational items.

Add link placeholders

All of our basic HTML scripting is done. Now we need to tell Dreamweaver what CSS classes and IDs to use in the HTML. And we need to set up all of our style rules in an external CSS file.

Next: Step Three: Start Building the CSS

Here are the coolest, most interesting links I checked out this week.

Design

50 Best Sites To Get Design Inspiration

25 Sites to Download Royalty-Free Stock Photos and Textures

55 Extremely Useful Online Generators for Designers

Top 37 Design Blogs to Follow

Web Design and Development

How to Spot Quality within Web Design: Examples & Tips

25 Important Web Design Tools

8 Layout Solutions To Improve Your Designs

30 HTML Best Practices for Beginners

9 Signs You Shouldn’t Hire THAT Web Guy

Blogging

5 Ways To Stop Your Blog From Going Viral

How To Write Headlines For Google Vs Twitter Vs Digg

13 blogging lessons learned from Stephen King’s On Writing

How to Write Magnetic Headlines

Internet Marketing

5 Effective Linkbait And Link Generation Strategies

Freelancing

101 Ideas to Get More Freelance Work and Generate New Client Leads

Final chicklet

This intermediate tutorial assumes that you already have these skills:

• creating and saving documents
• selecting and using tools
• viewing and using panels (palettes)
• working with gradients
• setting the layer opacity
• creating text

Below is a typical set of old school chicklets.

Old School Chicklets

Now here are some new school chicklets, which can be found at Mashable.

New School Chicklets

I was inspired by Mashable’s chicklets to make my own colorful versions in my BluLob sidebar.

My Chicklets

They take up more room, but boy are they attractive. A few well-placed and well-designed chicklets will have more impact than a giant cluster.

It helps to grab a copy of the original logo for whatever you link to. Let’s make a giant “f” chicklet like Mashable uses for Facebook.

Source File

Here’s a large Facebook logo. Click the image below to get the full-size verison:

Facebook Logo - click for a larger version

Part One: the Logo

We’re going to work with a nice, big image size so it is easy to work with. Later we’ll reduce its size for the Web. Starting with a large file gives us a lot of options when we want to make it smaller. Enlarging a small image = bad. Ensmalling a large image = good.

1. Open the Facebook logo in Photoshop.
2. Use the Rectangular Marquee tool to draw a rectangle around just the letter “f”.

Copy the letter f

3. Press Ctrl+C (Mac: Cmd+C) to copy the pixels to your computer’s clipboard.
4. Start a new document that is 300px by 300px, 72 pixels/inch with a white background. Save the file.
5. Press Ctrl+V (Mac: Cmd+V) to paste the letter f on its own layer above the background. Name this layer “original f”

Paste the letter f

6. Use the Magic Wand tool to select the white pixels of the letter f.
7. Press Ctrl+J (Mac: Cmd+J) to copy the pixels to a new layer at the top. Name this layer “white f”.

Copy the white f to a new layer

8. Turn off visibility of the “original f” layer by clicking on the eye icon on its left edge.
9. Your white f probably has a blue fringe remaining around it. Make sure the “white f” layer is still active, and go to Layer > Matting > Defringe…
10. Enter a width of 1 pixel and click OK.

Defringe

11. Click on the fx symbol at the bottom of the layers panel and select Bevel and Emboss.
12. Use the following settings and click OK:
    • Style: Emboss
    • Technique: Smooth
    • Depth: 50%
    • Size: 2px
    • Direction: Down

Bevel and Emboss

13. We need to make the letter f bigger. Press Ctrl+T (Mac: Cmd: T) to enter the Transform mode.
14. Make the letter about 200 pixels tall (you can use the Info panel to see the H value). Hold the Shift key down while you drag from any corner of the transform box.
15. Leave space all around it, and room at the bottom for the text that will say “Facebook”. Press Enter (Mac: Return) to complete the transformation.

Transform mode

16. The edges look a tad blurry. Go to Filter > Sharpen > Smart Sharpen…
17. Set the Amount 100%, the Radius to 20px, and click OK.

Sharpen

Next: the Chicklet

This is my second installment of “Saturday Round-Up”, where I showcase all the cool stuff I have found throughout the week that relates to Web and graphic design. Enjoy!

Freelancing

“40 resources to become a freelance Graphic/Web Designer”
from HeinMaas, February 18 2009

Hey, today i will try to help those who wants to make it as an successful Freelance Graphic/Web Designer. I’m 90% convinced that when you’ll visit these 40 resources carefully then you will be successful, these resources are covering all types of tips, tricks and sites where you can get some passive income and the most important where you’ll learn from the best of the best. Read more »

“25 lies told by freelancers and clients”
from Flying Solo, May 13 2009

Liars are everywhere, but they’re hard to spot, even if their pants are on fire. Never fear, I’ve researched the top 25 business lies told by freelancers and clients. Actually, there are only 14, but 25 will attract more RSS and Twitter readers. Read more »

Video Humor

“Your business card is CRAP!”
from YouTube

Words of advice from the greatest pitchman alive today. Watch the video »

Marketing

“50 Simple Marketing Ideas All Freelancers Can Use”
from Freelance Switch, May 1 2009

As a freelancer, you have a wide variety of marketing options available to you. Just which ones will bring you the clients you prefer to work with depends — it’s important to make sure that the methods you use allow you to reach the places prospective clients will be. Read more »

Networking

“Why I’ll Only Follow 500 People On Twitter.”
from Gordie Rogers, May 11 2009

I know I’m going against the trend by limiting myself to only following 500 people on Twitter, but there is a method to my madness. Hear me out. Read more »

“85+ of the Best Twitterers Designers Should Follow”
from Mashable, May 4 2009

There are thousands of designers on Twitter (Twitter reviews) tweeting about everything from ongoing projects to their personal lives. But only a small percentage of those tweet about design topics of interest to other designers and design addicts. These people cover everything from their design process to their own projects, and design resources from all over the web. Below is a list of more than 85 of those Twitterers. Read more »

Web Design

“Small web design elements tutorials collection”
from Design Notes

Web design is about details. Details that audience do not pay attention to tells how well or how bad your design is. Today we are looking into some tutorials and techniques on the smallest elements in web layout design. Read more »

“10 Great CSS Selectors you must know”
from TutorialFeed, April 30 2009

Selectors define which part(s) of your (X)HTML document will be affected by the declarations you’ve specified. Several types of selectors are available in CSS. Note that some of them are not supported in all browsers. Read more »

Animation

“This one time…”
from Vimeo

A gorgeous animation with a fun story and fluid movements. By nelson boles
Watch the video »

Workspaces

“Advantages and Disadvantages: Working with Multiple Screens”
from Web Designer Depot, May 11 2009

Two characteristics that represent most web designers are a need for productivity and a love for technology.

This desire for increased efficiency and productivity leads many designers to look to technology for methods that will improve their work flow.

One common approach for designers (and others who want to improve productivity) is to use multiple monitors. Using two or more monitors can bring a number of significant advantages to designers. Read more »

Blogging

“How Not to Promote Your Blog: Top 10 Broken Blog Promotion Strategies”
from Problogger, May 13 2009

For every great blog promotion strategy, there are five that suck. Really suck. They suck so bad that using them can get you blacklisted by real bloggers, ignored by annoyed readers, unfollowed on Twitter, and possibly placed on the terrorist watch list. Read more »

“How Not to Promote Your Blog: Top 10 Broken Blog Promotion Strategies”
from 1st Web Designer

Since I use social bookmarking/voting sites to promote my articles a lot, I thought I might share these sites with You too – I know if You submit every article in each of these sites regularly, You’ll get many new and regular readers in short time period. I, for example, got 4,000-5,000 unique readers everyday using this method. Read more »

Did I miss anything cool and groovy? Tell me in the comments below!

I’m starting a new feature today called Saturday Round-Up. On Saturdays, I will showcase all the cool stuff I have found throughout the week that relates to Web and graphic design. Enjoy!

Networking

“How Social Networks Are Changing Everything”
from Business Week, May 7 2009

Facebook and its ilk offer platforms to explore all the Web with one’s relevant data in tow, and they’re set to overtake the big portals Read more »

“Twitter Search to Become Real Search”
from Mashable.com, May 7 2009

The fact that Twitter (Twitter reviews)’s search is now often faster and more relevant than any other search engine out there is not a secret anymore. It is, however, a very limited search engine: it merely indexes a bunch of tweets. In its current state, it’s great for tracking conversations, but it will never be a competitor to Google (Google reviews). This is about to change. Read more »

BackTweets

Search links in Twitter Try this tool »

Scoopler

Real-time search. Try this tool »

Web Design

“101 Techniques for a Powerful CMS using WordPress”
from Noupe.com, May 5 2009

Throughout this article, we’ll be focus on many WordPress Theme hacks, ideas, tips and useful tutorials you need to have ready in hand when developing WordPress websites. Let’s take a look at useful, yet rather unknown techniques for a powerful CMS using WordPress. Each section of the article presents a suggestion and provides you with an explanation of the solution for each suggestion. Read more »

Website Grader

Website Grader is a free seo tool that measures the marketing effectiveness of a website. It provides a score that incorporates things like website traffic, SEO, social popularity and other technical factors. It also provides some basic advice on how the website can be improved from a marketing perspective. Try this tool »

“Worldwide Conferences for Web Designers”
from Web Designer Depot, May 8 2009

We’ve arranged a massive list of events of interest to graphic design professionals. Read more »

“73 Best Free Design Resource Website Help You To Use In Your Designs ”
from VisionWidget, May 9 2009

As a designer its always handy to have a collection of Photoshop brushes & vector & Free Quality PSD objects to use in your designs, but finding a best/perfect piece is not an easy task, even though there are quite a few resources around the web, some of the websites are best and others are not worth checking, here I’ve collected best 73 websites of them where you can download free files, all these sites are worth bookmarking. Read more »

“Flash vs. Silverlight: What Suits Your Needs Best?”
from Smashing Magazine, May 9 2009

With the release of Silverlight 1.0 and its subsequent versions, a debate started among designers and developers regarding choosing between Flash and Silverlight. Silverlight faces difficulties in capturing the market because of the maturity of Flash. However, Silverlight has managed to keep up by including certain features that designers and developers have always wanted to see in Flash, such as search engine optimization. In this article, we will discuss some of the technical differences between Flash and Silverlight to help you choose the technology that best suits your needs. Read more »

“The ‘Semantic Video Web’ is Essential, Pluggd’s Alex Castro”
from Beet.TV, May 20 2008

Video search is key to discovery and consumption of video. Also essential is the organization of metadata. Pluggd, a Seattle-based start up, does both. The company provides its enterprise solution to CNET Networks and others. View video »

Blogging

“How to Create a Highly Viral Blog”
from Write to Done, May 6 2009

Despite all the buzz about creating “viral content” and a “viral blog,” not many people really understand how this is done. I’ll be honest, I’m not quite sure I’ve got it all figured out. There aren’t really any secrets. But, there are a lot of little tactics that can add up to creating something contagious. Read more »

Did I miss anything cool and groovy? Tell me in the comments below!

I got an email this morning from a former Web design student of mine. He was asking for a copy of a document I used to have on my previous design Web site and is long gone. Fortunately, I still have it in my files. And I’ve updated it and posted it here.

This is a sample Request for Proposal (RFP), which is a key beginning stage in planning a Web site design. The RFP helps a designer and his/her client nail down what is wanted in a Web site, as well as what a client’s priorities are. It may bring to mind things that a client hasn’t even considered yet. It gives the designer an opportunity to educate the client about the degree of complexity that can be involved in a Web design project.

Now, I have found that it usually too overwhelming to a client to just be handed the RFP and asked to return it filled out. They sometimes don’t even know what half the questions are about. For example, this company’s RFP leaves a lot to be desired. What it the potential client doesn’t know the difference between a “Template Design” and a “Blog Site”? What if their Web site idea doesn’t seem to fit into any of the available categories? What if they don’t know what “Maintenance” entails?

I recommend you use the sample RFP below as a guide for interviewing a client about their needs. Clients often have questions about each of the questions you ask them. Ask and answer lots of questions. Get it all down. Then you can write a reasonably accurate design brief based on the responses to your interview.

Here is my original Request for Proposal, originally written in about 2003 but updated today for new Web technologies such as social media and mobile devices.

Introduction

Thorough planning of your web site project will save you time and money in the long run. It will improve communication of your needs to designers such as myself. The Request for Proposal questionnaire below gives an overview of many of the considerations when undertaking a web site creation. Your responses to these considerations will help me provide you an accurate project price and schedule, and they will also help me to draw up our Contract for Services.

Company Basics

Please tell me a little about who you are.

1. Descriptions
   1. Brief company description
   2. Brief industry description
   3. Description of competitors and their web sites/marketing collateral
2. Contact Information
   1. Company name  
   2. Company location  
   3. Contact name and title  
   4. Contact phone number  
   5. Contact e-mail address  
   6. Company web site

Next: Project Basics…

microsoft vs. apple vs. adobe vs. yahoo 1996

1996

Microsoft’s is more compact vertically than Apple’s (which is very scrollerific). Microsoft and has a nice header that expands across the top. Apple has a sweet scroll box for choosing alternate country sites. Both Microsoft and Apple have a colored vertical column and a white background for the main text. Adobe blows them both away with a compact layout based on a grid. Too bad the navigation text is super teeny tiny. Instead of a complex table structure, the layout mainly consists of three horizontal images with extensive image maps. Yahoo combines a simple search box with a large directory list and icons for navigation. No-one has adopted CSS yet (the CSS 1 specification was completed this year).

microsoft vs. apple vs. adobe vs. yahoo 1996

1998

Microsoft makes a vast improvement in its layout, but their home page is super link-heavy and the text is very small. Apple’s site has more of a sense of hierarchy, with new product images giving a visitor a quick pathway to the most popular pages. Adobe chooses red text links to match their logo, and the effect is garish. The images are unusual and appealing. Finally, Yahoo tightens up their home page with a double-column directory listing. However, it would take some time to learn what you are supposed to do here. Microsoft has a rudimentary use of CSS for styling text and links, but none of the others do.

microsoft vs. apple vs. adobe vs. yahoo 1998

2000, Web 1.0

Microsoft incorporates more images but the home page is still text- and link-heavy. News and download panels arrive on the right. Apple’s home is essentially the same as in 1998. Now glassy tabbed navigation appears on the top. Adobe gets pretty playful here. Adobe’s organization and hierarchy are the best in the bunch. Yahoo tries to put it all on the home page, and finally starts blocking out areas of content. The use of CSS has not progressed on any of the sites.

microsoft vs. apple vs. adobe vs. yahoo 2000

Coming soon: Part 2…