i have come across the below sites for css layouts and building the web pages. Hope this will be very useful for all the UI designers/developers :-)
20 Super Techniques For CSS Page Layouts
Saturday, September 24, 2011
Wednesday, September 21, 2011
Tuesday, September 13, 2011
Top 100 best fonts of all time
Based on a German website, these are the top 100 best fonts of all time
- FontShop Sales Figures: 40%
- Historical Value/Meaning: 30%
- Aesthetic Qualities: 30%
It is also worth noting that this evaluation consisted exclusively of licensed or commercial fonts only. Free fonts or operating system fonts were not considered, nor were fonts integral to standard software (i.e. Arial, Verdana, etc.). Font variations, which over the centuries have been individually interpreted by various Foundries, were uniquely evaluated as a class and the best variant was entered into the main judging process.
Below is a preview of the top 33 fonts and beneath this image you can find the full list of the 100 best fonts.
Top 100 Best Fonts Of All Time
Below you will find the full list of the best 100 fonts along with the designer & the year in which they were designed.
1. Helvetica [1957 - Max Miedinger]
2. Garamond [1530 - Claude Garamond]
3. Frutiger [1977 - Adrian Frutiger]
4. Bodoni [1790 - Giambattista Bodoni]
5. Futura [1927 - Paul Renner]
6. Times [1931 - Stanley Morison]
7. Akzidenz Grotesk [1966 - G nter Gerhard Lange]
8. Officina [1990 - Erik Spiekermann]
9. Gill Sans [1930 - Eric Gill]
10. Univers [1954 - Adrian Frutiger]
11. Optima [1954 - Hermann Zapf]
12. Franklin Gothic [1903 - Morris Fuller Benton]
13. Bembo [1496 - Francesco Griffo]
14. Interstate [1993 - Tobias Frere-Jones]
15. Thesis [1994 - Lucas de Groot]
16. Rockwell [1934 - Frank H. Pierpont]
17. Walbaum [1800 - Justus Walbaum]
18. Meta [1991 - Erik Spiekermann]
19. Trinit [1982 - Bram De Does]
20. Din [1926 - Ludwig Goller]
21. Matrix [1986 - Zuzana Licko]
22. OCR [1965 - American Type Founders]
23. Avant Garde [1968 - Herb Lubalin]
24. Lucida [1985 - Chris Holmes / Charles Bigelow]
25. Sabon [1964 - Jan Tschichold]
26. Zapfino [1998 - Hermann Zapf]
27. Letter Gothic [1956 - Roger Roberson]
28. Stone [1987 - Summer Stone]
29. Arnhem [1998 - Fred Smeijers]
30. Minion [1990 - Robert Slimbach]
31. Myriad [1992 - Twombly & Slimbach]
32. Rotis [1988 - Olt Aicher]
33. Eurostile [1962 - Aldo Novarese]
34. Scala [1991 - Martin Majoor]
35. Syntax [1968 - Hans Eduard Meier]
36. Joanna [1930 - Eric Gill]
37. Fleishmann [1997 - Erhard Kaiser]
38. Palatino [1950 - Hermann Zapf]
39. Baskerville [1754 - John Baskerville]
40. Fedra [2002 - Peter Bil'ak]
41. Gotham [2000 - Tobias Frere-Jones]
42. Lexicon [1992 - Bram De Does]
43. Hands [1991 - Letterror]
44. Metro [1929 - W. A. Dwiggins]
45. Didot [1799 - Firmin Didot]
46. Formata [1984 - Bernd M llenst dt]
47. Caslon [1725 - William Caslon]
48. Cooper Black [1920 - Oswald B. Cooper]
49. Peignot [1937 - A. M. Cassandre]
50. Bell Gothic [1938 - Chauncey H. Griffith]
51. Antique Olive [1962 - Roger Excoffon]
52. Wilhelm Klngspor Gotisch [1926 - Rudolf Koch]
53. Info [1996 - Erik Spiekermann]
54. Dax [1995 - Hans Reichel]
55. Proforma [1988 - Petr van Blokland]
56. Today Sans [1988 - Volker K ster]
57. Prokyon [2002 - Erhard Kaiser]
58. Trade Gothic [1948 - Jackson Burke]
59. Swift [1987 - Gerald Unger]
60. Copperplate Gothic [1901 - Frederic W. Goudy]
61. Blur [1992 - Neville Brody]
62. Base [1995 - Zuzana Licko]
63. Bell Centennial [1978 - Matthew Carter]
64. News Gothic [1908 - Morris Fuller Benton]
65. Avenir [1988 - Adrian Frutiger]
66. Bernhard Modern [1937 - Lucian Bernhard]
67. Amplitude [2003 - Christian Schwartz]
68. Trixie [1991 - Erik van Blokland]
69. Quadraat [1992 - Fred Smeijers]
70. Neutraface [2002 - Christian Schwartz]
71. Nobel [1929 - Sjoerd de Roos]
72. Industria [1990 - Neville Brody]
73. Bickham Script [1997 - Richard Lipton]
74. Bank Gothic [1930 - Morris Fuller Benton]
75. Corporate ASE [1989 - Kurt Weidemann]
76. Fago [2000 - Ole Schafer]
77. Trajan [1989 - Carol Twombly]
78. Kabel [1927 - Rudolf Koch]
79. House Gothic 23 [1995 - Tal Leming]
80. Kosmik [1993 - Letterror]
81. Caecilia [1990 - Peter Matthias Noordzij]
82. Mrs Eaves [1996 - Zuzana Licko]
83. Corpid [1997 - Lucas de Groot]
84. Miller [1997 - Matthew Carter]
85. Souvenir [1914 - Morris Fuller Benton]
86. Instant Types [1992 - Just van Rossum]
87. Clarendon [1845 - Benjamin Fox]
88. Triplex [1989 - Zuzana Licko]
89. Benguiat [1989 - Ed Benguiat]
90. Zapf Renaissance [1984 - Hermann Zapf]
91. Filosofia [1996 - Zuzana Licko]
92. Chalet [1996 - House Industries]
93. Quay Sans [1990 - David Quay]
94. C zanne [1995 - Michael Want, James Grieshaber]
95. Reporter [1938 - Carlos Winkow]
96. Legacy [1992 - Ronald Arnholm]
97. Agenda [1993 - Greg Thompson]
98. Bello [2004 - Underware]
99. Dalliance [2000 - Frank Heine]
100. Mistral [1953 - Roger Excoffon]
CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT
One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.
Meet the Units
- “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
- Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
- Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
- Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
The Verdict
In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.
The winner: percent (%).
CSS Font Size Conversion Chart
CSS: Comparing Font Size, Percentage, Em, Point, and Pixel
A much better resource can be found here: Incremental Differences
| Pixel (fixed) | Point (fixed) | Percent (var) | Em (var) | Size (var) | Font Size (var) | Head Size (var) |
|---|---|---|---|---|---|---|
Arial 55% | Arial 0.55em | |||||
Arial 9 px | Arial 6 pt | Arial 60% | Arial 0.60em | |||
Arial 10 px | Arial 7 pt | Arial 65% | Arial 0.65em | Arial Size 1 | Arial Head 6 | |
Arial 11 px | Arial 8 pt | Arial 70% | Arial 0.70em | |||
Arial 12 px | Arial 9 pt | Arial 75% | Arial 0.75em | |||
Arial 80% | Arial 0.80em | Arial Size 2 | ||||
Arial 13 px | Arial 10 pt | Arial 85% | Arial 0.85em | |||
Arial 90% | Arial 0.90em | Arial x-small | Arial Head 5 | |||
Arial 14 px | Arial 11 pt | Arial 95% | Arial 0.95em | |||
Arial 15 px | Arial 12 pt | Arial 100% | Arial 1.00em | Arial Head 4 | ||
Arial 16 px | Arial 13 pt | Arial 105% | Arial 1.05em | Arial small | Arial Size 3 | |
Arial 110% | Arial 1.10em | |||||
Arial 115% | Arial 1.15em | |||||
Arial 18 px | Arial 14 pt | Arial 120% | Arial 1.20em | Arial medium | Arial Size 4 | Arial Head 3 |
Arial 20 px | Arial 15 pt | Arial 125% | Arial 1.25em | Arial large | Arial Size 5 | Arial Head 2 |
| Size | Percentage | Em | Point | Pixel |
|---|---|---|---|---|
Arial x-small Arial small Arial medium Arial large | Arial 70% Arial 80% Arial 90% Arial 100% Arial 110% Arial 120% | Arial 0.7em Arial 0.8em Arial 0.9em Arial 1em Arial 1.1em Arial 1.2em | Arial 7 pt Arial 8 pt Arial 9 pt Arial 10 pt Arial 11 pt Arial 12 pt Arial 13 pt Arial 14 pt | Arial 7 px Arial 8 px Arial 9 px Arial 10 px Arial 11 px Arial 12 px Arial 13 px Arial 14 px |
Verdana x-small Verdana small Verdana medium Verdana large | Verdana 70% Verdana 80% Verdana 90% Verdana 100% Verdana 110% Verdana 120% | Verdana 0.7em Verdana 0.8em Verdana 0.9em Verdana 1em Verdana 1.1em Verdana 1.2em | Verdana 7 pt Verdana 8 pt Verdana 9 pt Verdana 10 pt Verdana 11 pt Verdana 12 pt Verdana 13 pt Verdana 14 pt | Verdana 7 px Verdana 8 px Verdana 9 px Verdana 10 px Verdana 11 px Verdana 12 px Verdana 13 px Verdana 14 px |
Times New Roman x-small Times New Roman small Times New Roman medium Times New Roman large | Times New Roman 70% Times New Roman 80% Times New Roman 90% Times New Roman 100% Times New Roman 110% Times New Roman 120% | Times New Roman 0.7em Times New Roman 0.8em Times New Roman 0.9em Times New Roman 1em Times New Roman 1.1em Times New Roman 1.2em | Times 7 pt Times 8 pt Times 9 pt Times 10 pt Times 11 pt Times 12 pt Times 13 pt Times 14 pt | Times 7 px Times 8 px Times 9 px Times 10 px Times 11 px Times 12 px Times 13 px Times 14 px |
Georgia x-small Georgia small Georgia medium Georgia large | Georgia 70% Georgia 80% Georgia 90% Georgia 100% Georgia 110% Georgia 120% | Georgia 0.7em Georgia 0.8em Georgia 0.9em Georgia 1em Georgia 1.1em Georgia 1.2em | Georgia 7 pt Georgia 8 pt Georgia 9 pt Georgia 10 pt Georgia 11 pt Georgia 12 pt Georgia 13 pt Georgia 14 pt | Georgia 7 px Georgia 8 px Georgia 9 px Georgia 10 px Georgia 11 px Georgia 12 px Georgia 13 px Georgia 14 px |
User Centered Design (UCD) Process
| User-centered design is an approach to design that grounds the process in information about the people who will use the product. UCD processes focus on users through the planning, design and development of a product. Following this process to develop a product can result in a number of significant advantages for the development team, by producing products that:
5 Stages of the UCD ProcessThe following chart outlines the five steps necessary for creating and deploying user-centered web sites. | |||
The Ultimate List Of Web Design Checklists
Please visit the Ultimate List Of Web Design Checklists: Get Work Done!
http://www.1stwebdesigner.com/design/web-design-checklists/
http://www.1stwebdesigner.com/design/web-design-checklists/
Monday, September 12, 2011
10 Principles for User Interface Design
Jakob Nielsen, a web usability consultant well-known in his field, developed 10 Usability Heuristics. These are the rules of thumb that can help improve the interface of computer systems. I’ve listed them below and also provided a “translation” and questions you can ask yourself to see how this applies to your own site. Feel free to share any thoughts, comments, or ideas.
1. Visibility of system status
Interpretation: Users should know what your site is doing and when. When they perform a function on the site, they should see a response from the site. Submitting a form should lead to a thank you page, just as clicking a link leads to another page.
Ask yourself: Do users always know how your site is functioning? Does your site respond to every user action with a reaction, so users understand what is happening?
2. Match between system and the real world
Interpretation: Users should not have to learn a new syntax or vocabulary system just so they can navigate your site. You want things to be intuitive: make navigation and language follow real world conventions and be put together in such a way that the average user understands it.
Ask yourself: Does the language on your site reflect how your target audience would speak? Do you use any site-specific jargon and, if so, how much can you eliminate? Do all of your buttons and icons make sense?
3. User control and freedom
Interpretation: Make sure users have leeway when they are navigating your site. You may want users to take a specific action (e.g. sign up for your email list), but you cannot force them. So ensure that users always have an “exit” to return to the homepage or the previous section of the site.
Ask yourself: Do you always have a link that goes back to your homepage? Are visitors able to move to the previous page?
4. Consistency and standards
Interpretation: The basic functions and design within your site should be consistent. For example, say you have your menu bar at the top of your homepage. Moving it to the left-hand side on another page of your website may confuse users. So would referring to your blog as a blog in one link on the site, an update journal in a second, and a live report in a third.
Ask yourself: Is the design and look of your site similar across every page? Do links to the same place on the site use the same words?
5. Error prevention
Interpretation: Think through the processes on your site, identify where users might go awry, and prevent errors before they happen. For example, if you want a supporter to donate only in increments of $10, make a note of that beside or below the contribution field on your donation form.
Ask yourself: Are all of the instructions on your site clear? Have you included a confirmation page for users to review when requesting information?
6. Recognition rather than recall
Interpretation: Visitors to your site should not have to hunt for information or remember how to find specific things or perform certain actions. Label and organize everything so that it is easy to find, and carry information across pages in the site. For example, if filling out a form on page A requires that users have received certain information on page B, make sure users can get back to page B quickly and easily. Do not expect them to retain information across your site.
Ask yourself: Starting from your homepage, can you easily see and find links to all of your information? Can users access all necessary information quickly and easily?
7. Flexibility and efficiency of use
Interpretation: There should be shortcuts for more advanced users and more than one way to perform an action to increase efficiency. A great example of a shortcut is Facebook’s photo albums. You can go to the next photo in an album by clicking the link, but also by tapping the right arrow on your keyboard. But without getting unnecessarily fancy, you want to make sure users can get to your information in a variety of ways.
Ask yourself: Do you provide multiple ways for a visitor to access your content, such as a site map or search bar?
8. Aesthetic and minimalist design
Interpretation: Having too much information displayed on a single webpage can overwhelm users and distract them from the main tasks of your site. Keep it simple and include only relevant information. Otherwise, you risk losing your message amidst the “noise” of your site.
Ask yourself: Do you have a purpose in adding that text, feature, or link, or is it just additional “noise”?
9. Help users recognize, diagnose, and recover from errors
Interpretation: Mistakes happen; it’s a function of us all being human. So build an error messaging system that is helpful to users: explain the problem specifically and tell them a way they can fix it. For example, in your contribution system of $10 increments, say someone attempted to donate $155. Do not have a message such as “Error: failed transaction” since that does not help the user—and may make them think something else is to blame. Instead, the error message should display “Error: Donation must be entered in increments of $10.”
Ask yourself: Have you accounted for the major ways a user can incorrectly operate your site? Have you suggested the necessary solutions? If you were the one who had made the error, would you find your messages helpful?
10. Help and documentation
Interpretation: No matter how simple your site may seem to be, it is always a good idea to provide some sort of support. Make support simple, straight-forward, and easy to navigate. But remember: your site should not depend on the help documentation.
Ask yourself: Have you included a help section that contains instructions on how to perform the main functions on your site? Does it help users quickly and efficiently?
Keeping these 10 principles in mind will make your site friendly and accessible to your users. Check back in the future for more information about site usability!
Subscribe to:
Comments (Atom)