Cisco Blogs


Cisco Blog > Digital and Social

Web templates on the cheap

January 12, 2009 at 12:00 pm PST

Here are the two sites that I’ve used in the past along with some notes about them: TemplateWorld.comThis site is subscription based with subscriptions going for $49.95 for six months or $69.95 for one year. Once you’re a member you can download as many templates as you like (up to 25 a day). My experience with this site was that the templates look nice but were typically hard to customize and many had some severe usability issues. The HTML coding that the template used was messy and hard to work with. I ended up downloading a bunch of templates but only used one for a clients site. I did not renew my subscription to this site. Site I created using a TemplateWorld.com template: www.harborlitelodge.com TemplateMonster.comThis site sells templates on an individual basis, typically for $60 to $70. They also tell you how many times a template has been purchased and give you the ability to make a template unique by purchasing it outright for significantly more money (around $3000), they will then take the template off their site and will not sell it anymore. That means that if no one purchased it before you, your site should be the only one using it (assuming you trust them to never sell that template again). Since I always modified templates anyway I was never concerned about having a “unique” template. I found that while the TemplateMonster templates can be seen as more expensive then TemplateWorld’s templates they are much easier to use and much better constructed. Site I started creating using a TemplateMonster.com template (development stopped because client stopped providing content): http://thelunchbox.biz/dev/ Take aways:These types of services are a great way to get a professional looking template for next to nothing in terms of what it would typically cost to hire a design firm Saves time over traditional web design Not all templates are created equal, some look great but can be hard to modify or have usability issues

My 2008 Virtual Highlights and 2009 Quick Picks

January 10, 2009 at 12:00 pm PST

OK I know a bit late for this kind of post but here are my top highlights as relates to virtual news and happenings in 2008.1) Google’s Lively -- Came, went and was re-born as NewLivelya. Many folks saw the announcement to shutter Lively as unfortunate and a bit short sighted, read one opinion.b. Fans rallied though and NewLively was born from the ashes.2) PlayStation Home -- Finely launched but will it be in Beta forever?a. Everyone greatly anticipated this release which seemed to take forever to finally get here.b. Some folks think Home is just scratching the surface of what it can do while others (including Home Director, Jack Buser) think it will be in beta forever.3) Warhammer -- Darn fine game, raising the bar…but not the death of WoW; imo.a. Warhammer Online released this year. Woot!b. The game garnered a lot of well deserved praise but some folks are cautious to cry victory as regards the games long term success..4) Virtual Meetings and Events -- The current state of the economy and corporate ‘green’ initiatives help the format explode off the chartsa. Read a couple of opinions from some of the folks on the vendor side of the industry: Unisfair talks about the future of virtual events and this blog ponders the future of MacWorld and CES.image5) OpenSim -- Not ready for prime time yet but when it is, watch out y’all.a. OpenSim is the open source alternative to Second Life. Some say it is as important to virtual worlds as Apache is to web site, read for yourself. b. Many folks say that there are definitely good things going on and to come in 2009, but not a large audience at this time. However, they always follow-up with while it may not be ready for public consumption now…it will be industry changing when it is. So what am I looking forward to right now in 2009? Many things but at this moment… Read More »

Sneak Preview: Speaking of Home Wireless…

January 8, 2009 at 12:00 pm PST

In follow-up to my recent post about setting up my home network, here’s a sneak preview of a new site area we’re launching: Linksysbycisco.com.imageThere are some really great tips about setting up home networks, including lots on wireless.This site is Beta so there are a few things being put together, but have a look and enjoy!

MacWorld Kudos to the Cisco WebEx Team

January 8, 2009 at 12:00 pm PST

I’m sure you’ll be reading more about this, but I wanted to give a small shoutout to the Cisco WebEx team for their MacWorld Best of Show award (for the new Cisco WebEx Meeting Center iPhone app, which you can download via the iPhone App Store now.)image“Using Cisco’s WebEx technology, businesses can share documents, make presentations, and collaborate with employees-┬Łor customers-┬Łaround the world,” says MacWorld. Kudos to the WebEx web design team, who helped with some of the experience (the worlds of web and phone sure are merging quickly!)See the Cisco’s Collaboration blog and the MacWorld site for more.

Why Web Icons Aren’t So Easy

January 6, 2009 at 12:00 pm PST

Here’s something for the web teams among you who have been pondering whether and where to use iconic pictures on your web site. There’s a something to be said for using icons to dress things up: Icons can be attractive, easy for users to remember, and, if implemented in moderation, they help with the usability of the site. We’ve begun to use icons on areas of Cisco.com and have found them to serve all of these roles well.But — icons are incredibly difficult to get right. Without some careful planning, it’s easy create something that’s difficult for users to understand, doesn’t fit well with your brand, or is just plain strange.Several groups internally have asked me about our icon design experiences, and I thought I would share a few of them here. So, let me tell you a little story about icons in a recently designed area of our site.When we were creating the Small Business area of Cisco.com, we decided to use some placeholder icons to represent the”I need to-” solutions sections in the Small Business area. The first renditions were abstract (see below), but even so, when we tested them in our usability lab most customers responded to them warmly.imageBut, because of the icons’ abstractness, our users told us they really didn’t understand what the individual images stood for. We knew we needed to create something more realistic and obvious. And, we didn’t like the plain grey style. There were three areas we needed to consider when approaching the icon project:1. We considered usage conventions:

  • What are the rules regarding when to use icons? Should they be navigational aids? Emblematic devices?

We have generally chosen to use them as navigational or functional — meaning that if you click on them they should do something. Not just for eye candy.2. We considered visual stylistic considerations:

  • What style should we use for the icons? Should they be cartoony or realistic? Should the finish be shiny like glass, or satiny like Gummi Bears?
  • What considerstaions should be given to the size of the icons, since smaller icons should be less detailed?

These stylistic decisions were the easiest. Since we have developed icon standards for our software, we took our cue from those design directions. Our house style is for realistic icons with a glassy finish and top light sources, viewed straight on, like this one:imageWe also liked some of the enameled treatments we saw around the web, such as GM’s fuel economy emblems; GM’s look like enameled pins you could reach out and pick up:imageIn the end, as you’ll see, we adapted something realistic and glossy, and we’ll probably move even more to a glass look in the future. My advice for your site is to develop a visual style for icons, patterned off of what you’re using for your products (if you make products and the products have icons, that is); otherwise look for other cues from your brand identity system.3. We developed the actual images needed:

  • What specific concept do you create for each of the ideas you are trying to get across? This is the hardest part, and while the stylistic rules above can be decided once and codified as standards, this choice of image to convey a concept has to be repeated each time you need to create a new icon.

There are other considerations, such as how an individual image choice fits within a family of icons, visual compatibility with related software iconography, etc.Developing the ImagesAs I mentioned above, this part is much harder because each image is a new conceptual adventure. How do you come up with the perfect image for concepts like “Being More Productive” or “Connecting Offices and Employees?” The answer is, you sketch out a lot of ideas until you hit on the right thing.We started with some initial sketches, then moved on to refined concepts (still in sketch form) and then moved to final rendering.Here is how we worked through concepts for “Be More Productive.” You can see that our artist (at agency Level Studios in California) tried out a number of different ideas, which we then reviewed. As is typical, many of the ideas were rejected, but one was a winner and we pushed forward with it.imageOnce we had chosen the basic image we wanted, we started exploring how we wanted the final version rendered. Rendering 1 below was deemed to be not realistic enough a style. We like rendering 2.5, but the view-from-above angle (while we thought it looked nice) didn’t follow our software standard of looking at icons straight on. So ultimately, we iterated until we had version 5 below, which became an archetype for the other icons we were developing as part of the project.imageFinally, we had to think about how the icons would fit into the navigational widget where they live. We had to consider the gradient behind them; whether we wanted a reflection or shadow or nothing below them, and also what the icons should look like when a mouse is over them (hover state) or not (non hover). You’ll notice in the end we chose a light gradient background, a slight reflection, and a tinted metallic non-hover state:imageThe final step was to produce the style sheets and DHTML to support the new component.You can see these icons in action on the Small Business area of Cisco.com.imageEnjoy!P.S. Once you have developed a style, there are some affordable ways to get your artwork for icons created. I’ll blog about that in a future post.