Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to use right in your Web page.

Related Posts

• Complete Unicode Dingbats Font: Erler Dingbats
• Identify What Font Is In Your Font Stack With Fount
• Sansation – A Free Font
• sIFR 2.0: Rich Accessible Typography
• Quicksand – A Free Sans Serif Typeface with 7 Weights

Today’s design freebie is Akordeon, a modern accordion vector PSD. In a graphical user interface, an accordion is a vertically stacked list of items. Each item can be expanded to reveal the content associated with that item.

Akordeon comes with its vector PSD source file and can be customized easily.

Licensing

This file is free for personal and commercial use. However, you can not redistribute, sale, re-upload this file. Do not directly use download link at your site, please refer to this post if you want to spread the word.

Related Posts

• Free Email Newsletter PSD Template: Grab
• Beautiful Grid Style Vector PSD
• 3 Exclusive and Free Vector Icons Set in December 2011
• Creative and Crispy Comments Form PSD
• Free PSD: Creative & Clean Login Form Design Template

All these PSD websites and WordPress themes templates comes with home and one internal page designs. These are free to download and to use in your personal projects (license required for commercial use).

Related Posts

• Free Email Newsletter PSD Template: Grab
• Akordeon: A Modern Accordion Vector PSD
• Beautiful Grid Style Vector PSD
• 3 Exclusive and Free Vector Icons Set in December 2011
• Creative and Crispy Comments Form PSD

The collection contains 80 icons, 16*16px with Photoshop PSD file, CSH file (Photoshop shapes) & PNG.

Related Posts

• Free Email Newsletter PSD Template: Grab
• Akordeon: A Modern Accordion Vector PSD
• Beautiful Grid Style Vector PSD
• 3 Exclusive and Free Vector Icons Set in December 2011
• Creative and Crispy Comments Form PSD

Gridlover is a web app for building a vertical rhythm for your web typography. It has interactive sliders and will spit ready-made CSS for you.

Related Posts

• Responsive Web Framework Based on 960 Grid: Amazium
• Overlay Grid for In-browser Website Development: The Heads-Up Grid
• Device-friendly Responsive Framework for Rapid Prototyping: Foundation
• Modern CSS Grid System: The Semantic Grid System
• Cross Browser Fluid CSS Grid System: Flurid

Before we actually dig into details, let establish a common understating of what usability is. Usability is mostly defined as ‘ease of use’, but this is over-simplification of the art and science of Usability. In a broader sense, usability is “effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.” – ISO 9241 Standard

Usability is ultimately concerned with the following factors:

• Effectiveness: Effectiveness is the completeness and accuracy with which users achieve specified goals. It is determined by looking at whether the user’s goals are met successfully and whether all work is correct.
• Efficiency: Efficiency can be described as the speed (with accuracy) in which users can complete the tasks for which they use the product. Efficiency metrics include the number of clicks or keystrokes required or the total ‘time on task’.
• Engaging: An interface is engaging if it is pleasant and satisfying to use. The visual design, graphic images, colors, use of any multimedia elements, language, font size and style, links, buttons all affect the relationship between the user and the application.
• Error Tolerant: An ideal system has no errors; and there is no ideal system. Errors are expected. An error tolerant program is designed in a way that it prevents errors in the first place and helps the user in recovering from any errors that do occur.
• Easy to Learn: Last but not the least; a ‘useable’ system is easy to learn. It allows its users to get familiar with different functions and perform them without much effort or the need of training.

Usability Guidelines

1. Design Process

• Set Primary Goals: Clearly define the primary goals of the website before starting the design process. Goals of a website may be education, information, entertainment, trade etc. Goals also determine the audience, content, look and feel and functionality.
• Set Performance Goals: Set performance goals that include the overall performance of the website in different scenarios. For example, the website will be displayed correctly in Internet Explorer 8.0 and above with screen resolution 1024×768.
• Set Preference Goals: Preference goals address end user’s satisfaction. Set preference goals such as allowing the user to view the website with small, medium and large font size.
• Create & Evaluate Prototypes: Create and evaluate prototypes in iterations. The iterative process ensures that all goals are met.

2. Design Considerations

• Establish Level of Importance: Establish a high-to-low level of importance for each category and carry this approach throughout the design. Important categories should appear higher on the page so users can locate them quickly. This is applicable to links, buttons, form fields etc.
• Reduce User’s Input: Automate as much of the site’s function as possible. Eliminate the need for users to perform tasks like performing mental calculations, making estimations, recalling account numbers and passwords, etc. This helps the user concentrate on main tasks.
• Be Consistent: Maintain consistency in page titles, font size, style, color, header, graphics, buttons, positioning, forms etc. A consistent website allows the users to get familiar with the environment and learn to retrieve information and perform tasks in less time.
• Provide Feedback: Provide appropriate feedback to inform users while they interact with the website. For example, intimate the users after they have successfully submitted any information.
• Include Logos: Differentiate your website from others by placing a logo in a consistent place on every page. This is useful when the user is browsing several websites at the same time.
• Limit Maximum Page Size: Keep Web page size at or below 30,000 bytes, which is maximum allowable time. Users do not wait long for a page to open in their browser and move on to other website.
• Limit Use of Frames: Do not use frames in websites, unless there is a strong reason to do so. Frames can be confusing and may behave unexpectedly in different context.

3. Content Organization

• Provide Useful Content: Provide useful and usable content that supports the Web site goal on each page. The content should be arranged logically and must be free from errors and ambiguity. Avoid irrelevant details.
• Use Short Sentence/Paragraph Length: Write sentences with 20 or fewer words and paragraphs with fewer than five sentences. Use lists to break up long sentences or display important points. This improves readability.
• Provide Printing Option: Many users want to keep printed copies of website for reference or taking notes. Provide printable version of all pages, files and documents on the website.

4. Title & Headlines

• Provide Page Titles: Put a descriptive and different title on each page. Title should be meaning and descriptive of the type of information the page. Meaningful title helps the user in creating and sorting bookmarks. Similarly, appropriate titles improve Page Rank on search engines.
• Use Proper Headlines: Use meaningful and descriptive headlines. A good headline is brief and clearly suggests the following text. It helps the reader quickly scan the page and understand the main theme. Headings can be used to classify information under different categories or break up long texts into small bits.

5. Page Length

• Determine Page Length: Decide length of page according to the information it contains. It is better to have short pages for home pages, navigation pages and pages that need to be quickly browsed. Use long pages for printable/downloadable versions or when you want to maintain, fewer web page files.
• Determine Scrolling vs. Paging Needs: If reading speed is important and response time is reasonably fast, use paging (linking) rather than scrolling. In this way, users will be able to move from page to page by following quick links without always scrolling to important information.

4. Page Layout

• Align Page Elements: Align text, elements, graphics etc consistently to improve readability and ‘look and feel’ of web pages.
• Reduce Unused Space: Reduce the amount of unused space on pages used for scanning and searching. On pages that are primarily links or categories, like a home page, the greater the density, the faster the scanning. “Density” is defined as the percent of the screen filled with categories and text. Density has no impact on user accuracy or preference. On content/text pages, using some white space to separate paragraphs and ideas is important.
• Format for Efficient Viewing: Determine actual utility of a web page before designing. Pages based on content do not need graphics. Similarly, pages based on graphics should not be filled with text.

5. Font Formatting

• Use Readable Font Size: Use at least 10-point familiar font style. Do not use fancy fonts unless there is a strong reason to do so. Use serif or sans serif font to achieve the best possible reading speed. Do not mix serif and sans serif fonts within the text, because it may decrease reading speed. Recommended fonts are: Times Roman, Georgia serif fonts, Helvetica, or Verdana sans serif.

6. Reading and Scanning

• Enhance Scanning: Users tend to scan, stopping only when they find something interesting. Enhance scanning by providing clear links, headings, short phrases and sentences, and short paragraphs.

7. Links

• Show Links Clearly: Hyperlinks should be clearly distinguishable from normal text. Preferably, use blue underlined text for all unused links. Do not require users to move the mouse over text to discover hyperlink. Avoid graphic link. If a graphic link is used, make sure that it is easily recognized. Usually, “click here” is used for graphic links. However, some automatic screen readers may have problems deciphering what “click here” refers to.
• Indicate Internal/External Links: Clearly indicate when a link will move users to (a) the same page, (b) a different page in the same Web site or, (c) a page on a different Web site.
• Use Descriptive Link Label: Link should be self-explanatory. User should be able to instantly guess what information in liked to the hyperlink. For example, use About Greepit instead of Company Information.
• Repeat Text Links: Ensure that the most important information can be accessed from more than one related text link. Some users find important links easily when they have a certain label, while others may recognize the link best with an alternative name.
• Present Tab Effectively: Place tabs (used for links) at the top of the page and ensure that they look like click-able.
• Show Used Links: Visited links should be clearly distinguished otherwise users repeatedly bounce among a set of pages not knowing that they are going back to the same page again and again. Make links that have not been clicked blue, and clicked links purple or red.

8. Graphics

• Use Graphics Sparingly: Excessive use of graphic increases download time of the web page. A graphic can be used only if it enhances content or leads to a better understanding of the information being presented. When using graphics, try to use small and few graphics in order to reduce download time.
• Avoid Graphics on Search Pages: Avoid use of graphics on pages that are primarily used for searching. In general, graphics do not have either a positive or a negative impact on the success of users when searching, but they take time to design, implement, and maintain and may slow downloading.

9. Search

• Provide Search Engine: Carefully consider whether there is any advantage to including a search engine. Search engines are helpful on some sites, but do not add value on others. Web sites that can benefit most from search engines are those that are large and complex.

10. Navigation

• Keep Navigation Consistent: Use consistent navigation aids such as menus, tab links etc on all pages. Common navigation type ensures that users can locate and remember frequently used links and explore the website easily. Prefer text-based navigation aids to graphic based aids.Group navigation elements in close proximity and place them with the right margin for the web page. Users may need to scroll to navigation elements, if they are placed with left margin.

11. Hardware and Software

• Consider Connection Speed: Design for connection speeds of 56 kilobytes per second (kbps). Remember that actual connection speed is about 38% lower than modem speed capability. This means that users with a 56 kbps connection actually have a connection averaging about 35 kbps.
• Reduce Download Time: Create web pages that load quickly. Slow download times may result from too many graphics, unnecessary use of applets and slow server performance. Average wait-time is 8.6 seconds.
• Consider Monitor Size & Resolution: For best results, design for computers with 17-inch monitors and screen resolutions of 1024×768 pixels.

Related Posts

• How to Design Accessible Websites and Web Applications
• Most Effective Link Building Strategies For Blogs
• Free Search Engine Optimization (SEO) Toolkit from Microsoft
• Combination of Free Web Analytics & SEO Tools – GoingUp!
• Web CEO – A Free and Quality SEO Software

• Free Android GUI Vector PSD (High Pixel Density)
• 30+ Photoshop Templates With Layered PSD Source Files
• Free Mobile UI PSD Elements: Mobility

Today, we are sharing Free Google+ GUI PSD Kit with Layered source files. The Google Plus GUI PSD is released under Creative Commons.

You can use it for all your projects for free and without any restrictions. You may modify the kit as you wish.

Related Posts

• Freebie: Mini PSD Vector Icons
• Freebie: File Input PSD
• 30+ Photoshop Templates With Layered PSD Source Files
• High Quality Free PSD Vector Icons: IconSweets2
• Free Icons Collection – Hardly Seen

• New Google Interface Buttons
• Google Imageless Buttons

Today we are sharing a very handy PSD Vector Icons set inspired by Google Plus Interface.

WebDesignShack has released an off the hook freebie for all of you featuring a huge bundle of Google Plus interface icons. The freebie includes both vector (PNG) and pixel perfect (PSD) sources, color and gray versions and in 18px & 128px sizes.

From large vectors to pixel perfect versions, every icon has been created by pixel experts to guarantee a high end product that you can really enjoy. You can find the large versions in two different sizes and color / gray versions, as for the pixel perfect versions.

Related Posts

• 3 Exclusive and Free Vector Icons Set in December 2011
• 65 Colorful PSD and PNG Application Icons: DDIcons
• 28 Minimal Icons in PSD, PNG And JPG Formats
• 154 Free PSD And Vector Icons
• Free Twitter Icons and Themes: Twibies

OS X Lion was released recently and part of the new design is new icon buttons. Our friends at Pixify recreated OS X Lion’s buttons in CSS for use in your UI.

The guys simply numbered the buttons 1 to 200 and wrote a three-line script to spit out the CSS for each of the 200 buttons.

Related Posts

• Sleeker, Simplified New Google Interface Buttons
• Common Interface Patterns of HTML CSS: Pears
• Build A Solid Stylesheet Foundation With Your Markup: BearCSS
• Automatically Refresh CSS Files: CSSrefresh
• Bootstrap Inspired Toolkit for Building Facebook iFrame Apps: Fbootstrapp

Now the question that all newbies should be asking is: how to get started with HTML5 instantly. The answer is: Leverage the power HTML5 frameworks like Kendo UI.

Kendo UI is a powerful framework for rapid  HTML5 UI development. Based on the latest HTML5, CSS3, and JavaScript standards, it delivers everything needed for client-side, jQuery-powered development in one integrated, compact package.

Kendo UI combines everything needed for modern JavaScript development, including a powerful DataSource, universal Drag-and-Drop, Templates, Themes, and UI Widgets.

Related Posts

• HTML5 Mobile Framework: LungoJS
• Adobe Edge Creates Flash-like Animations with HTML5
• Photoshop-Like HTML5 App for Creating CSS3: LayerStyles
• HTML5 CSS3 Based Audio Player: Zen Audio Player
• Parallel Script Loader To Speed Up & Modernize Websites: HeadJS