Web Typography

From the article “15 excellent examples of Web typography“, the first two I selected generated error messages of “site temporarily unavailable” (#4  Jesus Rodriguez Velasco’s blog) and a “symphony error – problem connecting to MySQL server (#11 the Big Noob), which goes to show that the Internet is evolving all the time.

FontShop is a great site to explore, imagine and bend the rules a little.  One of my favorite features of this site is that you can select a font face, enter sample text in various point sizes to see what actual words will look like…instead of assuming it will work.  You can even drag samples onto your desktop (Mac) to places into your document to evaluate the font more realistically, as opposed to “thinking” it looks great.  Another useful feature is the similar font recommendations.  If you find a font that is almost what you’re looking for, but not quite the exactly it…FontShop will point out others that may be more suitable or even something you hadn’t considered.

There are hundreds of thousands (over 150,000) fonts so there are many to choose from and something for everyone.  With so many fonts, it does become a little overwhelming but fortunately FontShop has useful categories such as: best sellers, popular, staff picks, random, symbols, webfonts and more!  Since typography can make such loud statements and have such impact on design, don’t be surprised if you think you’ll spend a few minutes on the FontShop site and before you know it, hours have passed!

Other font sites I’ve seen offer the ability to change the color of the font as you’re sampling it.  FontShop does not offer this feature but otherwise is a well-arranged, easy -to-navigate and resourceful site.  Definitely bookmark this site and don’t forget to check out FontShop’s blog as well!

 

 

Accessibility for User

From the “Web Standards Checklist“, five of the 10 “accessibility for user” item are:

1. Are “alt” attributes used for all descriptive images?
2. Do any aspects of the layout break if font size is increased?
3. Does the site use accessible forms? accessible tables?
4. Is there sufficient brightness/contrast?
5. Are all links descriptive?

Advantages of Web Standards

“Jeffrey Zeldman: King of Web Standards” advantages include:

– Appearance of web sites is more controlled using CSS, even for different devices or in different browsers.
(web site developers no longer have to create multiple versions of a page for each browser or device)

– CSS allows developers to separate content from appearance
(For designers, web page will appear as it was intended, no matter what the device. For developers, they only have to build the page once. For users, the site works!)

– Standards save a company money: fewer redesigns, reduce maintenance costs, reduces bandwidth cost (less mark-up weight with less code) and reduce risk.

Design Inspiration

From “34 Places to Get Design Inspiration – Online and Off“, you can spend a lot of time on the Threadless site.

This Chicago-based company creates online communities – combining an online art community with a highly successful e-commerce business model.  Anyone in the world can create and submit the artwork for a t-shirt idea, which then gets voted on by the community of over 1 million users.  Highest scoring t-shirt designs get printed and sold, even rewarding community members for their designs, slogans and reprinted favorites.

Browsing through the Threadless site inspires creativity!  Just when you thought you already have enough t-shirts, you’re bound to find at least once design that you can’t live without!

Info Gathering Phase

Four things to consider in the Information Gathering Phase from “6 Phases of the Web Site Design and Development Process” are:

1. PURPOSE: What is the purpose of the site? Do you want to provide information, promote a service, sell a product…?
2. GOALS: What do you hope to accomplish by building this web site? (Commonly to make money or share information.)
3. TARGET AUDIENCE: Is there a specific group of people that will help you reach your goals? It’s helpful to picture the “ideal” site user (including their age, sex, interests, etc.) to help determine the best design style for your site.
4. CONTENT: What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering…?

Gathering information is the first step in designing a successful website, including gaining a solid understanding of the company, business strategy, and goals among other things.

Distinguished Primary/Secondary Sections

The navigational design “rule” of clearly distinguishing primary and secondary sections means making it easy for users to know the main/primary content from the secondary content.  This includes using sub-headings as part of the primary navigation, rollovers or dropdown menus for sub-navigation.

It’s recommended to have 6-7 primary navigational links.  If there’s more content, such as with an e-commerce site, then using group navigation can organize related sets.

For example on Amazon‘s website, their vast array of products are displayed by departments (books, movies, digital downloads, electronics, etc.), then from those departments you can drill down even further into more specific (secondary) categories to find exactly what you’re seeking.

Breadcrumb Navigation

Breadcrumbs In Web Design: Examples and Best Practices

You should use breadcrumb navigation:

• For large websites and websites that have hierarchically arranged pages.
• To increase the user’s ability to navigate within and between categories.
• As an alternative way to navigate around your website.

You shouldn’t use breadcrumb navigation:

• Shouldn’t use for single-level websites that have no logical hierarchy or grouping.
• Shouldn’t replace primary navigation menus.

“Rules for a Perfect Website Navigation”

Rules for a Perfect Website Navigation
The 3 main rules for perfect website navigation:

1) Include archive/hover states…
Archive state allows users to instantly know where they are within the web site. Hover states let users know that the menu is comprised of links, rather than just being static text, to give a more interactive feel and engage the users.

2) Don’t include too many links…
6-7 navigation links are plenty. More than this amount and its better to have secondary tier or drop-down navigation.

3) Keep your menu prominent and clear…
Make sure the navigation menu is prominent and legible by picking the proper font face/size with adequate contrast against the background. The navigation menu should be near the top of the page, preferably as part of the header.

Ultimate Guide to the New FB Design – Summary

One of the 100 Must Read Design Blogs is Six Revisions, a blog about useful information for web developers and designers.

On 2/18/11 Mario Zelaya posted Ultimate Guide to the New Facebook Design, which summarizes the recent overhaul of the FB pages from a design, usability and web development perspective.

Unless you want to thoroughly analyze the FB site to figure out these changes on your own, here are some of the changes you may or may not have already noticed.

DESIGN CHANGES

• No more “Standard” Tabs – now accessed on the left-hand side, under the profile picture.  Max of 6 above the fold.
• New Photo Strip – Most recent photos you posted or tagged are randomly included in the Photo Strip above the Wall (thumbnails are 96x67px).
• Profile Pics – Max size 180x540px

USER INTERFACE CHANGES

• Admin View of Wall – (Below profile photo) to view Hidden Posts, where you can remove SPAM posts and ban those users.
• Post as Your Brand – Allowing you to post on other FB pages using your company’s FB page t help drive traffic to your FB page.
• Your Brand Can “Like” Other Pages – Your “Likes” will show up in your FB page.
• Fans Count Has Changed – Admins can click to see the names of people who “Like” the page.

DEVELOPMENT CHANGES

• FB iframes Now on Tabs – No more Facebook Markup Language (FBML).  The page must be using the new FB Page layout.
• Custom HTML and JavaScript – HTML and JavaScript work flawlessly without restrictions on the iframes, but there are some issues in the iframe display especially if the content is longer than 800px height.
• FB API for FB Pages – Having advanced knowledge of user’s locale, country, if the viewing user is an admin of the FB page, etc.
• Saving User Sessions – Important if you’re running contests or creating applications that are user specific, to save sessions so users who enter the Page tab and authenticate themselves can return again and not need to authenticate. (This couldn’t previously be done with FBML.)

Changes are scheduled to take full effect March 10, 2011.

3 Favorites

Three of my favorite web sites are:

Wikipedia.org: “The free encyclopedia – 3,564,000+ articles.” Such a wealth of info, especially the go-to source for little known trivia.  I use Wikipedia daily to find answers to questions or just to find out more info on commonly known facts.

TED.com: “Riveting talks by remarkable people.”  What more could you want.  Very inspirational and motivational to see all of the great things people are doing around the world to make this a better place.

NationalGeographic.com: “Inspiring people to care about the planet since 1888.” Such a great site for current affairs as well as info from every corner of the earth and beyond.