With the widespread adoption of Twitter, has come the need for short URL’s.  Unfortunately, the providers of those short URL’s are often not terribly financially stable.  Recently, tr.im was in the news for going under, and then being miraculously saved shortly afterward.  There was a lot of outcry, because people were unhappy to see those links “go dark”.  Bit.ly and others have banded together to create a backup of their own links, in case something happens to them.

WordPress.com users now have a different solution available to them now.  Automattic has launched an internal shortening feature:

WP.me is similar to what we’ve been using at Blueprint – we purchased the shorter domain name bpds.us so that we could build our own “retweet” button that linked to our own domain, and included our @blueprintds twitter as the source of the tweet.  Besides being a shortcut around  building a plugin just to interface with a shortening service’s API, it also guarantees that we won’t have to worry about a shortening service going under – the links will live as long as we do.

Shortening the url’s is pretty simple – it’s just a link to http://bpds.us/?p=<?php the_id(); ?>, placed in the single.php template. We could be more advanced and base_encode the ID, and build a plugin to handle those URL’s, so that they looked more like Bit.ly or tinyurl.com links. It’s not really worth the effort, since it would at best save 2 characters, and the URL’s are for copy/pasting, not typing.

If you don’t want to build your own short URL’s, WP.me will be extended to all wordpress users in the near future.

tour resource center

Co-author, Rebecca Dirkse

Are you the type of person who likes to skip brainstorming and outlining and simply jump into your project or writing? That process of working can be a real headache if there is a lot of content to discuss and organize. The same is true for designing websites.  The best way to approach designing a website is to plan! The first and perhaps most important step to creating an efficient and user-friendly website starts with careful research and brainstorming.  It is crucial to write and/or sketch out your ideas before heading to a computer.  Unfortunately, many designers skip over this step, jumping straight into the project hoping it will turn out a success. Thus polluting the web with mediocre to some very bad websites.

Websites can be very complex and no two are the same, so it is important to treat each one individually and plan accordingly. An efficient and well-functioning website should be an enjoyable experience for its users.  Below are a few easy tips and advice that experienced web developers use.  It may seem like common sense, but hey, surprisingly people don’t always use their common sense, so check it out!

1) Establish a clear goal and objective.

Be sure to know the objectives and goals you or your client is trying to achieve.  It is also very important to know who the audience is and what they are looking for.  Be on the same page with your client in terms of understanding the goals for the website and what is realistically achievable before starting any design. This will save you time and stress by preventing any mistakes from happening before the site is made.

2) Structure the content.

Use site mapping to define the structure of your site.  A site map is a collection of your ideas and the content that you will organize on your site. Scottie Claiborne claims in his article, Effective Site Navigation, that when planning your site or site redesign, think about the structure first.  It helps to physically map out these pages. Use index cards or post it notes, write a page topic on each card, lay them out and organize them into groups. Once satisfied with your plan, you will have yourself a site map and will be ready for the next step; wire framing.

Use wire framing to come up with the skeleton of the site. According to Andy Budd, creative director of Clearleft (clearleft.com), wire framing is similar to a director’s storyboard or an architect’s blueprint. There are two different (and necessary) ways to approach wire framing.  The first is a design free wire frame. This allows to focus on the purely functional aspect of the site, keeping in mind effective and consistent navigation. The second is a structure-free wire fame.  This allows for focus on the aesthetic aspect of the website. Combining these two wireframes will result in a very effective skeleton of your site (Grannell, 10).

3) Use Effective and Efficient Navigation. 

In his book Designing Web usability, Jakob Neilson stresses that online navigation must answer these questions:

- Where am I?

- Where have I been going?

- Where can I go? 

Consistency in navigation placement is vital if you want your website to be a success.  It allows users to move fluidly to and from pages without hassle.  Scottie Claiborne makes an analogy in his article on Effective Site Navigation (webcredible.co.uk) relating website navigation with hospital navigation. If you walk down a hallway in a hospital and see a sign for where you want to go, but suddenly the main entrance, cafeteria and emergency signs are gone how are you supposed to find your way back? Many sites use breadcrumb trails, which are links (usually in a small font, placed directly below the page header) that show where the user is in relation to the homepage.

So what exactly is the most effective layout for navigation? Both horizontal and vertical navigation work well, but which is the best of the two is debatable.  Designer Chris Garnett argues “vertical navigation doesn’t demand the same amount of visual attention. I want primary navigation to be one of the most instantly recognizable elements of any site I build.”

Here are 5 sites that demonstrate efficient navigation according to the Ultimate Guide to Web Design:

Unfortunately, what we have found with many of these sites is that the design aspect of the site suffers in order to enhance effective navigation.  Here are some sites that we have found to have both effective navigation and great design:

The Fox website uses a consistent top bar navigation throughout the entire site. Any information the user might need is accessible within 2 clicks.

The Chicago Water Taxi website is a good example of using an effective vertical navigation bar.

The NFL website is a great example of how to organize a site with A LOT of information on it. They utilizing two top navigation bars: one with all the team logos and one for the general content of the site.

If you want to read an article that helps explain how to plan a website for consistency and intuitive navigation in more detail, read Claiborne’s article Effective Site Navigation. It is worth checking out if you find yourself to be someone who has a hard time planning a site or if you feel your process of planning isn’t really working for you. The article even provides a helpful section of Dos and Don’ts on website navigation.

One more important thing keep in mind when making any website — efficiency. Your aim should be to enable users to get to content swiftly, in a logical manner, and with few clicks as possible and remember, stay consistent!

Two articles from .Net’s issue The Ultimate Guide to Web Design contributed to this blog, Plan the Perfect Site and Master Site Navigation by Craig Grannell.

Below is a list of some of our recently used photoshop brushes. We’ve filtered through hundreds of photoshop brushes for multi purpose use. Typically these brushes are just a starting point for us. When working with them we modify shapes, sizes, colors and sometimes the brush it self. The brushes work great for web design but some are a bit too small for print.

Oil Paint

Retro Brushes

Line Brushes

Light Blurs

The only link you need for more:
Top 50 Free Photoshop Brushes Resource Sites - This is a great huge list that cover most free sites for brushes.

Here at Blueprint can pretty much agree that ie6 has caused nothing but problems for everyone. Roughly 1 year has past since we discontinued support of the cursed internet browser in our web design studio. All I have to say is check this out, it explains everything.

Site Support

All of Norway is against IE6
No More ie6
Get rid of the flicker
“let IE6 die”
No More ie6 Support
Done

Genuine Microsoft Internet Explorer 4.0 by jankoraseta

Photo Support

Death of IE6 by Able Net Design

Last.fm in IE6 – No message to upgrade just a broken site.

Truth by adurdin

.Mac Web Galleries != IE6 by andrew*

That Voodoo E by CannedTuna

Internet Explorer plush voodoo by *chisa

F*ck Off IE6 by Emily Lewis

Related:

Internet Explorer 8.0 will support microformats
How to Deal with it
ie8 gets you where you want to go quickly
FIRST LOOK AT IE8 ACTIVITIES AND WEBSLICES

Do you still use IE6? Enjoy browsing!

11 Free And Useful Open-Source Alternatives For Designers – Great list giving you a free alternative with a comparison to its pay for counterpart.

11 Premium But Free And Useful Web Apps For Designers – Small list of useful programs.

27 Adobe AIR Applications – Handy For Web Designers

30 Essential Free Portable Web Design and Development Applications – A very good comprehensive list.

13 Free Web Apps To Simplify Designer’s Work Life – This is a list of some very useful tools

Related:
Top Web Design Links For September ‘08
Design Leftovers
Flash With Transparent Backgrounds
10 Web Design Company Marketing Strategies

We noticed lately an explosion of available online and local software tools to assist with just about anything. Below are some sites recommend to all designers and developers from beginners to professionals. Everybody has their own preferred workflow from the beginnings of a design to the end. Our web design companies office is split 50/50 with both Mac and PC designers and developers. We thought we would share some articles we found that gave the best suggestions  for web designers and developers tools.

Web Design Toolbox: 130+ New Tools to Make You a Better and Faster Designer

42 Must-Bookmark Resources for Web Designers – Inspiration, Design, Color, Fonts and More

Essential Web Developer Tools (Validation, Browsers, Transparent PNG’s And More)

Web 2.0 button generators for beginners

Web Design Principles

Other Great Articles:

40+ Useful & Handy Web Designer’s Web Services & Tools

11 Free And Helpful Web Based Tools That Every Designer May Want To Know!

6 Tools for Web Design

How to create Skype-like buttons using jQuery

Web Design Toolbox: 50+ Tools for Web Design

As web design companies get more and more aggressive with their marketing strategies we see a repetitive cycle of methods. Listed here is some of the many ways of gaining more business and exposure for your web design company. Please feel free to add your own methods or success/failure stories in the comments.

1. Billboards – These are a great way to saturate a large area and grab a lot of attention in a short amount of time. Though, you are limited to marketing your company locally.

2. Radio – Radio jingles or ads is way to attract more of a targeted audience. Radio stations can provide you with a report of demographics for their audience. This can be used to target your ads to listeners in different groups.

3. Seo – Blast your city by optimizing for “(yourcityname) web design” or optimize for “web design company,” “web designer,” “web design.”

4. Door to door – This has been coming up a lot lately. Many of our clients with store fronts have repeatedly been approached by salesman in their store attempting to sell them a web site.

5. Cold calling – Picking up the phone book and dialing away. Get those scripts ready.

6. Google Ad-Words – Paid for search results on Google. “XXXXXX web design” fill in the industry specific blank for key words. Warning: Can get expensive.

7. Direct Mail – Pick an area, city, industry, income group, demographic and send those mailers.

8. Print Ads – 2 x 3 to full page go for a business magazine or small business resource magazine.

9. Social Media – Oh so much you can do with this. Do even know where to start.

10. Do Great Work – Otherwise known as referrals or word of mouth and let your work speak for it self.

Many of our clients request fonts for their web site that just simply will not show up on the majority of computers due to the viewers computer simply not having the font loaded. Below is a list of “web-safe” fonts that will insure your site to be viewable and appear consistently with almost all viewers to your site.

• Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
• Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
• Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
• These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
• These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font.
• These fonts are present in Mac OS X only if Classic is installed.

Source.

Web design in this day and age can be confusing. Who’s good? Who’s bad? How do I know? What’s the difference between going to a web design studio and going to someone that posted an ad on craigslist for $399? Well we will explain some very important facts to let you know exactly why web site design and development does not cost anywhere from $299-$499.

This will be a comparison of “cheap web design” to “professional web design” and why professionals do not charge $499 and under for a web site and why spending the extra money will be worth it.

What is web design?

Web design is a company or individuals web presence. It can be a great way to generate leads, gain exposure, relay news, start a community, assist a cause and much more. Your web site is a first impression of what you are relaying to the viewer. With this said I can’t help but to think, why waste your time on a cheap sites when if done correctly your site can save you time and money.

Designs for $399 or less

The web is flooded with ads and posts about “cheap web design” or web design at a unrealistically low price. It is important to realize you wouldn’t go to a doctor if he worked out the back of a van. This applies the same for web design. Prices incredibly low as well as quality. Most of these sites consist of straight HTML programming and are designed with no marketing or viewer consideration in mind. Most $399 web ads are web templates (or template resellers) which are pre made web sites which may not be compatible with browsers and you may be sharing the same design with someone else. Read: What’s so bad about web templates? gives a great explanation. The old expression “you get what you pay for” comes to mind. It is also important to know almost all of these sites do not come with a CMS.

The Bad

Here is a list of bad design features that will help you separate the good from the bad.

Examples:

The examples above go against much of what makes a web site effective.

Ask yourself these questions in regards to the web sites above:

• Convey the company’s personality, character or attitude?
• Relate to your clients by conveying a feeling of familiarity and credibility?
• Have association with quality and satisfaction?
• Can I contact the website owner quickly and effectively?
• Is the website communicating news to me in a effective way?

The Good

Now take the same questions from above and apply them to the good examples.

Why is the difference so apparent? There are many examples and variations of web sites out there. This is an extreme compare and contrast. Most of the bad web sites will not look that bad but the question to ask is, “Will it do what I want it to do?”

Professional web designers have process and procedures put in place to assure effective design involving proper research, preparation, conceptualizing, understanding of the clients needs, implementing them correctly and so they are effective. This is why professional web design does not cost $499 and under.

The design process of a professional web designer typically consists of:

1. Gathering Information: They conduct a questionnaire or interview with the client to get the design brief.
2. Research: They conduct research focused on the industry itself, on its history, and on its competitors.
3. Reference: They conduct research into logo designs that have been successful and current styles and trends that are related to the design brief.
4. Sketching & Conceptualizing: They develop the web design concept(s) around the brief and research.
5. Presentation: Showing the concept site based off of all of the information collected and demonstrating how it will all function.
6. Development: Taking the approved concept and developing (or coding) it in to an actually web site.
7. Presentation #2: Showing the developed site based off the first presentation and demonstrating how it all functions.
8. Making The Site Live: Taking the site developed and uploading it to the domain and hosting accounts.

With all that said here are some links to some other sources as to the importance of web design:

Why good website design is important

Why Having a Quality Web Design Matters

Top 10 Mistakes in Web Design

Don’t have a professional web design? Check out our Portfolio and if you like what you see then Contact Us and we can give you a quote for free.

Here at Blueprint Design Studio we would like to thank all of our clients from this year and wishing them and our web sites visitors a safe and happy new years.

Keep check our blog for great new things to come in ’09.

Here’s some things to look for….

• twitter
• tutorials
• wp plugins
• themes

and much more.

Want to create the same image we created above (in our header) check this out.