Being a web design studio we realize how important it is to have an appealing web site since most of the customers will judge about us from our web site. When we were starting up this enterprise we didn’t have time much time and needed a website developed virtually within a couple of hours.

We bought a Swish template from Flashmint.com because we had been told that Swish templates are as appealing as Flash but you need considerably less time to edit them. We trusted the Flashmint.com employees and we actually got what we had wanted – an impressive website within a couple of hours.

]]> http://trendydesign.wordpress.com/2008/05/16/swish-templates-alternative-to-flash/feed/ http://trendydesign.wordpress.com/2008/02/28/list-of-web-safe-and-common-fonts/ http://trendydesign.wordpress.com/2008/02/28/list-of-web-safe-and-common-fonts/#comments Thu, 28 Feb 2008 11:42:41 +0000 trendydesign http://trendydesign.wordpress.com/?p=10

Many of you have been asking, “What fonts are safe for me to use on the web?” and “Is there a list of web safe fonts for reference?” Well I am here to help. Web safe fonts are ever important but a lot of designers I have seen lately are forgoing this important step in their design creation. Some are taking the steps to use a font similar to a web safe font but because it is not in fact web safe they inevitably have to default back to a font that isn’t quite the same. Their design loses a little of itself and at this point they typically struggle to find a font that is close and web safe. There are plenty of web safe fonts available it just takes some creativity in using them to your advantage. I have a list of web safe fonts available in the article to help everyone out.Some of you that may have heard of the term web safe before and not quite known it’s meaning, others don’t fully know the reasoning behind it. I am here to clear all of these things up. First off, web safe fonts are those that are nearly universally available on any computer. So that when the end user, regardless of their machine preferences, goes to the web site they get the same experience as anyone else going to the web site. This is what web standards are all about and ensuring that you are using web safe fonts throughout your website is just as important as including a DOCTYPE and HTML tag in the beginning.

A little background on fonts

So now that I have explained what web safe fonts are you need to know a little about fonts themselves to make sure we are all on the same page. There are basically two types of fonts there are serif and sans serif fonts. Serif fonts are fonts that have fine cross lines at the ends of the letters. Sans serif (French for without serifs) are fonts that don’t have anything at the end of the letters. The most common serif font is Times New Roman and just happens to be the default for most windows-based browsers.

Monospaced fonts are fonts that have the same amount of space between them for all of the letters.

There are others types of fonts that fall into one of these two major categories but I think I will save that article for another time and focus on the topic at hand. Be looking for an article on Typography to be coming up soon.

A list of web safe fonts and more

Below I have included a table listing out all of the most common fonts and what operating systems they usually come with. Granted most machines have a lot more fonts then this, the ones I have listed are the most popular and mostly considered universally acceptable to use as a web safe font.

Web safe and common fonts

Generic	Font	Windows 9x/2K/XP	Windows Vista	Mac Classic	Mac OS X	Linux Unix	serif	Cambria
Constantia
Times New Roman
Times
Georgia
sans-serif	Andale Mono
	Arial
	Arial Black
	Calibri
	Candara
	Century Gothic
	Corbel
	Helvetica
	Impact
	Trebuchet MS
	Verdana
cursive	Comic Sans MS
monospace	Consolas
	Courier New
	Courier

*The green marks show very common fonts, the yellow shows not so common but all are generally accepted as web safe.

Looking at fonts through web development

Now that you have a list to go off it is good to know some best practices of using fonts on the web. It is very important to include fall back fonts when you are creating your font selection on your web site. What I mean by this is choose your favorite font that you would prefer everyone to see as your pimary font and then include fall back fonts such as Century Gothic, Verdana, Arial, sans-serif would be a good way to list the fonts out in your CSS.

The reason you want to do this is to ensure the most amount of similarity between your readers so they all get the same look and feel of your web site. It also ensures that the fonts you use are close enough that they don’t break your web site because you used a font that on the screen is half the size of Verdana but because no one has that font everyone fell back to Verdana and the whole web site broke because of it. These are very simple rules to follow in order to ensure that you give a universal experience on your web site by using web standards and web safe fonts.

SimpleViewer is a Free, customizable Flash image viewer.

Check out SimpleViewer demo

Features:

• Intelligent image pre-loading.
• Intuitive image navigation
• Lightweight (17k).
• Customizable interface - Set text color, frame color and width, navigation position.
• Resizable interface - Interface scales to fit browser window.
• Cross platform - Windows/Macintosh/Linux (requires Flash 7 or higher).
• Flash 7 detection. Users without Flash 7 are messaged to upgrade Flash.
• International font support.
• Keyboard Navigation (Cursor keys, Home, End, Page Up/Down)
• Mousewheel navigation
• Optionally right-click to open image in a new window.
• Free!

View instructions on how to use SimpleViewer / download SimpleViewer.

Also check out the TiltViewer from the same author / TiltViewer demo.

Whether you’re suffering from designer’s block, or just want to see what your competition is up to, design galleries are an excellent tool. Fortunately, there’s no shortage of them available, and we’ve found 100 of the best.

Searchable

If you’re looking for a specific color, style, or genre, check out these organized and searchable galleries.

1. CSS Gallery: Search this gallery by color, content, date, and more.
2. CSS Warfare: On CSS Warfare, you can find and rank sites in a number of different categories.
3. Design Grabs: Design Grabs features loads of different categories and tags.
4. The Daily Slurp: This gallery has more than 15,000 sites to check out, searchable by color.
5. CSS Vault: On CSS Vault, you’ll find monthly archives from 2003 to the present.
6. CSS Mania: CSS Mania offers a gallery with more than 9,500 sites, all organized by topics.
7. Design Creme: Find some of the best CSS and Flash sites online, searchable by category, tag, and engine.
8. CSS Impress: Find exactly what you’re looking for in this site with easy categories and a great search function.
9. DesignFlavr: DesignFlavr is ultra-organized, with colors, categories, rankings, and more.
10. The Designed Tree: It’s easy to find designs in all sorts of categories on this site.
11. InspirationKing: InspirationKing focuses on high quality sites, and offers an easy way to find them.
12. One Star Gallery: In the One Star Gallery, you’ll find awesome sites categorized by color.
13. CSS Daddy: The designs on this site are heavily tagged and easy to search.
14. CSS Leak: Great design is easy to find on this site with color, rankings, and more.
15. Web Design Gallery: Search the archives of this site by color and more.
16. Designs Creme: On this site, you’ll find awesome designs and all sorts of colors and genres.
17. Crossmind: Find designs by colors, elements, layout, type, and more.
18. Design Shack: On Design Shack, you can find designs based on color, category, or layout, so you’re sure to find exactly what you’re looking for.

Resources

These galleries offer more than just a pretty face, with resources like tutorials, forums, and advice.

1. CSS Elite: This site not only offers great designs in specific categories, but also resources like tutorials and plugins.
2. CSSLove: This gallery has great resources, coding help, and blogging advice.
3. CSSEM: Check out CSSEM for a great gallery, plus interviews, tutorials, and other resources.
4. CSS Ultra: On top of a great gallery, CSS Ultra offers forums and articles.
5. Boxedcss: This site offers highly-ranked design, aggregated CSS articles, and more.
6. CSS Burst: This web 2.0 CSS gallery showcases innovative designers and great resources like software and education.
7. CSS Website Gallery: This gallery not only has a ranked collection of sites, but a ranked resource collection as well.
8. Cool Home Pages: Cool Home Pages has a lot to offer, with ranking, search, templates, stock photos, and a lot more.
9. CSS Tux: CSS Tux features the best dressed websites, and offers resources to help you make your own site look better.
10. Plastic Pilots: View great sites and awesome features on Plastic Pilots.
11. NiceStyleSheet: This gallery is full of highly ranked sites, searchable by design style.
12. No Resolution: On No Resolution, you’ll find a gallery of fluid and elastic CSS designs, as well as templates and forums.
13. Webdigity: This gallery is just part of a very helpful design community.
14. CSS Drive: Get news, community, and more from this gallery site.
15. CSS Beauty: CSS Beauty is so much more than a pretty face, with news, jobs, and community supplementing their gorgeous gallery.

Ranked

See what others think of designs on these ranked CSS galleries.

1. CSS Clip: On CSS Clip’s gallery, you can search and rank designs by color.
2. CSS Moon: This slick site is full of high-ranked designs.
3. Graphic Orgasm Ultimate Webportal: Find some of the best sites online with GOUW.
4. Favourite Website Awards: The FWA features winning designs.
5. Faveup: This site lets you “fave” high quality designs.
6. CSS Creme: Find top rated sites on CSS Creme.
7. CSS Gallery 2.0: Check out this site to find and rank CSS sites with Web 2.0 features.
8. My3W: These sites are star-ranked, show views, and allow comments.
9. CSS Snap: Check out CSS Snap for great design with easy ranking.
10. CSS Gallery: In this gallery, you’ll be able to rank and search great designs.
11. CSS Star: Rank and comment great CSS designs and more on CSS Star.
12. Lookom: Lookom features a great search function and a critical ranking community.
13. CSS Heaven: This gallery has it all, from corporate designs to portfolios.
14. Hotwebber: On Hotwebber, you’ll be able to find and rank some of the best CSS online.
15. CSSHive: Find and rank “dangerously hot” sites on CSSHive.
16. Design Snack: This community-based showcase allows users to vote and choose sites to be displayed on the front page.
17. CSS Container: Get a load of these high ranked CSS sites.
18. Screenalicious: Rank thumbnailed CSS screens on this site.

Specific Elements

If you’re looking for something very specific, try these galleries on for size.

1. design|snips: Check out design|snips to find specific design elements, like typography, images, textures, and more.
2. CSS Showcase: In this site, you’ll find CSS menus and navigation tabs.
3. CSS Zen Garden: Walk through this CSS zen garden to find simple beauty.
4. CSS Based: Check out this gallery of designers who work with nature in mind.
5. CSS Collection: This site’s gallery features designs that use CSS as an alternative to tables.
6. Carted Up: Carted Up celebrates excellent cart designs in CSS and beyond.
7. Design By Grid: On this site, you’ll find a showcase and loads of resources for grid designs in CSS and more.

Aggregates

Save time by checking out multiple galleries at once on these aggregated galleries.

1. Most Inspired: This site aggregates designs from some of the most popular galleries online.
2. CSSHardcore: Find loads of designs from some of the top CSS galleries on this aggregate.
3. Beat the Block: On Beat the Block, you’ll find galleries for CSS and more.
4. CSS Galleries: CSS Galleries offers an aggregated view of CSS designs, and even offers ranks of gold and silver.

Standards

These galleries showcase only sites that feature excellent web standards.

1. CSS Smooth Operator: Find standards-compliant CSS in this gallery.
2. CSS Artillery: On CSS Artillery, you’ll find sites that place web standards high on the priority list.
3. CSS Star: Here you can find CSS sites with high quality standards.
4. W3C Sites: Here you’ll find sites that conform to W3C standards.
5. Style Gala: Check out Style Gala for designs with standards in mind. They also offer lots of resources, like articles and a developer community.
6. CSS Reboot: CSS Reboot celebrates the refreshed designs that come out November 1st and May 1st.

International

Stay on top of international designs with these galleries.

1. CSS Blast: Check out this site that features Russian design and more.
2. CeeSeS: This gallery offers a look at Croatian design.
3. Design Link Database: Find Japanese design and commentary on this site.
4. CSS Design Yorkshire: These Yorkshire sites are tableless and offer good semantic xhtml.
5. Creative Pakistan: Rank and learn from the sites in this Pakistani gallery.
6. Ala Brasil: Ala Brasil features excellent design in CSS, XHTML, and Flash.
7. CSS Galaxy: See how the French do CSS on this site.
8. Web Gallery: Check out this Italian gallery for fresh, clean designs.
9. CSS Galeri: On this Turkish CSS gallery, you’ll find awesome designs and great resources.
10. CSS Taste: CSS Taste features some of the best CSS sites from around the world.
11. BmAccess: Find some of the best French CSS sites in this gallery.
12. Design Expanse: This Pakistani site features designs from around the world.
13. Dekitharu: Here you’ll find some of the coolest designs from Japan.
14. CSS Inspirace: Get inspired by these Czech and Slovak CSS designs.

Everything

These galleries pack a heavy dose of CSS designs.

1. CSS Zone: Check out CSS Zone for great examples of CSS for ecommerce, churches, and much more.
2. CSS Bloom: Find CSS-based designs for blogs and portfolios on this gallery site.
3. CSS Princess: This gallery showcases CSS created by female designers.
4. CSS Ultra: On CSS Ultra, only the best of the best CSS sites get posted.
5. Best Web Gallery: Find some of the best CSS designs online here.
6. Genuine Style: On Genuine Style, you’ll be treated to simple, stylish sites in CSS and beyond.
7. screenfluent: screenfluent showcases great designs in CSS and beyond.
8. The Best Designs: This daily updated site offers a gallery of well-reviewed CSS and Flash sites.
9. Styleboost: Find designs by tag or color in this gallery.
10. CSS Flavor: Get inspiration from this collection of CSS-designed sites.
11. CSSBand: This site features awesome, colorful designs.
12. Unmatched Style: Search for designs by blog, liquid layout, and more on this site.
13. CSS Remix: Get a random view of CSS sites with CSS Remix.
14. CSS Fuel: Check out high-profile design sites on CSS Fuel.
15. Refresh: In this “new media showcase,” you’ll get an in-depth look at nicely-designed sites.
16. Web Creme: Find awesome designs in this simple gallery.
17. CSS Fresh: CSS Fresh features designs that don’t use tables.
18. CSS Import: CSS Import offers a gallery as well as notable entries.

Web-design studio. Get to know how much you need to organize it.

So what is necessary at the very beginning? At least it is a team of two people who look forward to achieve a common goal. The goal is satisfaction consumers’ needs in web-design area, and of course making profits. Therefore, to meet these needs you have either to possess designer skills yourself or be within easy reach with a web designer. So what are the secrets of design studio success?

• First of all, it is design itself. It goes without saying that to open a web design studio there should be a web designer. It’s necessary to strictly distinguish a web designer from an artist. The difference is that a web designer uses as a basis for his work not his own pictures or images but purchased or free images. In other words, a web designer must be skilled at working with specific software and IT technologies. While speaking about an artist, his or her ability to paint is an absolute talent. The artist’s work is always personal and individual.
• Programming. Having a group of skilled programmers in your team is a vital factor of your success. And I can not determine what is more important - programming or design – as both of these fields have to supplement each other.
• Internet marketing is another important component which will move your web-design studio to the next level. As a rule, internet marketing includes website promotion, SEO optimization, work on your content and constant keeping eye on up-to-date technologies and trends. In this connection, I can recommend the technology of future – Macromedia Flash.
• Manager is a leader of your web-design studio. At least, he or she has to have strong knowledge of different work aspects and be a professional in one of these fields. A manager is responsible for proper planning, arrangement of current projects, employees motivation and control fulfilled tasks. Creative mode of thinking, strong efforts coordination, and fair compensations to stuff – these are the features a competent manager must possess.
• And the last but not less significant is uniqueness of your web presence. I can’t but mention that remarkable design studio website is 60% of your fortune as it reflects quality of your work. If you want to catch your visitors’ attention, make them remember you and come back over again, then your web presentation should be winning and differ from your competitors. The best solution in this case is to build the website for design studio in Flash. It allows creating interactive and eye-catching online presentation of your business. If you do not have a flash programmer in your team, you can easily order custom web design. But keep in mind that it will take you significant time and money.Another option is to use a flash template as a basis for your website. Personally I recommend Flashmint.com. The company exists about 4 years already, during this time Flashmint has established a strong reputation in flash templates industry due to unconventional design ideas and customer-oriented prices. Just imagine you can get your flash design studio site for $56 only.Anyway, whatever option you choose, bear in mind that only if you combine all the components mentioned above, you will have a successful and stable web design studio. Good luck in all your undertakings!

The home page is some of the most valuable real estate on a web site. For many web sites it is still the primary point of entry for the majority of visitors.

Consequently, web site owners want to cram as much enticing content on to the home page in order to attract visitors into the site.

Because of this, the carousel has become a very popular way to showcase multiple pieces of featured content within a fixed promotional area.

Epicurious has a typical home page carousel

I thought it would be interesting to showcase a variety of home page carousel designs to see what common themes emerged and also what different approaches designers took.

I have done absolutely no usability testing on carousels so I won’t comment on the pros and cons of the different approaches taken, such as whether to present items horizontally or vertically, to include playback controls, and the ideal amount of content to feature for each item.

IGN’s home page carousel

However, it was interesting to note that although the number of items being featured largely varied from three to five, five is clearly the most popular number of items to feature.

I don’t know why that should be the case — six or seven doesn’t sound like too many to me. Maybe it has just become a convention over time as designers look at what other designers have done and follow suit.