Tag Archives | ux

Is Using WordPress Themes Frameworks Cheating at Web Design?

I read a very inter­est­ing arti­cle over the week­end titled “Are WordPress Themes Cheating in Web Design?” by James Dalman. That arti­cle itself was inspired by an older one titled “Confessions of a Template Whore” by Sabrina Dent which is equally interesting.

The point of this post is not to rehash the same ideas as these two arti­cles. I agree with both authors that, using themes is quite OK in many cases, espe­cially for non-​designers who want to get blogs and even sim­ple sites up and still get at least a pro­fes­sional “look”, even if we all know that design goes a lot deeper than mere dec­o­ra­tion and sur­face skinning.

A good look­ing and func­tional free theme like the one I used when I moved this site to WordPress won’t win any­one any orig­i­nal­ity awards, but it will get the job done for a lot of peo­ple and won’t turn away vis­i­tors because the site looks like crap or is com­pletely unusable.

But beyond pre-​made themes that you just plug into a site and tweak a lit­tle, there is whole other cat­e­gory of themes called “Premium Themes” or theme frame­works. This site’s evolv­ing design is now based on one called Thesis and I’ll be redo­ing my com­pany blog as well as Isabelle’s entire Web site using another called Headway (btw, both are affil­i­ate links because I believe in these prod­ucts very strongly). I talked about Thesis and theme frame­works in this recent post.

Basically, what theme frame­works do is enable you to eas­ily (or rel­a­tively eas­ily) “skin” your blog or site using your own design with lit­tle or no cod­ing… and that is what I wanted to touch on here.

A major Shift

For me, start­ing to use WordPress has been a mind shift in itself, for a few rea­sons. But I always fig­ured I would at least even­tu­ally build my own theme for it… from scratch… and I fig­ured I would build blogs with it and lit­tle else. But that’s until I dis­cov­ered the true power of the plat­form. The mind shift was com­plete once I dis­cov­ered Thesis andHeadway and the world of theme frame­works… and my imag­i­na­tion started racing!

As many of you know, I have been design­ing and build­ing Web sites for a long time now, so I know how to code and do so in an effi­cient man­ner. I’ve never used code exported from Fireworks (the appli­ca­tion I design all of my sites with) because it never was good enough for me. Without call­ing myself a purist, I’ve always prided myself in the qual­ity of my HTML and CSS and I’ve worked hard at keep­ing up with cur­rent tech­niques. So you can imag­ine my reluc­tance to let go of most of my con­trol using WordPress and a theme frame­work to build not only a blog, but entire Web sites!

But I plan to do just that for not only Isabelle’s site, but my biggest Web site project to date if I get it (I’m send­ing my bid in on Friday) as well as any suit­able future projects.

What changed my mind? Quite frankly, I’m tired of the tedium and rep­e­ti­tion. Using WordPress and a good theme frame­work means that a lot of a site’s infra­struc­ture is already done for me, and done solidly too. Like James Dalman said in his article:

  • It takes a lot of energy and time to cre­ate some­thing from nothing,
  • free­lancers are lim­ited by time,
  • and a busi­ness’ pri­mary goal (free­lance or oth­er­wise) is to be profitable

These are just as applic­a­ble to cod­ing a site as they are to design­ing it. If I can get more projects done faster it will mean a bet­ter cash flow for me and sig­nif­i­cant sav­ings for my clients. Plus it will mean I will con­cen­trate more on the parts I enjoy (strat­egy, design, UX) and less on the tedium of cod­ing the same kind of func­tion­al­ity again and again.

This is not for every project but when it is applic­a­ble, it will be a win-​win for every­one IMO.

What do you think?

Update — November 16th, 2012:
Just a short not to say that with time I’ve changed my mind and stopped rec­om­mend­ing Thesis. I would actu­ally rec­om­mend stay­ing away from it for sev­eral rea­sons I may touch upon in a future post. I also have reser­va­tions about Headway now based on sev­eral inci­dents I had with it like minor updates break­ing sites in the 3.x ver­sion and 2.x sites break­ing com­pletely for no rea­son I could find. I per­son­ally have lost my trust in Headway but still think the prod­uct is good for many peo­ple as it’s a very flex­i­ble frame­work and my expe­ri­ence is prob­a­bly not typ­i­cal. But these days I stick with either iThemes Builder mostly or WooThemes Canvas for some projects (includ­ing this site) because I believe they are bet­ter engi­neered and stick to WordPress stan­dards bet­ter and I out­lined some of the rea­sons I think this is very impor­tant here. I have more sites on Builder than Headway now and no updates have ever bro­ken a lay­out and none of my Builder sites have ever lost their for­mat­ting for no rea­son overnight like what hap­pened on my busi­ness site which was on Headway 2.0.13 until recently when I put it on Canvas.

23

Now is a Good Time to be a Fireworks Evangelist

I could not imag­ine my cre­ative process with­out Adobe Fireworks. I have been using that appli­ca­tion since ver­sion 2.0 some­time in 1999. 10 years ago, Fireworks was not an obvi­ous choice but the work­flow advan­tages over Photoshop were imme­di­ately evi­dent to me and my cre­ative process never was the same. Unfortunately, it took almost all those years for Fireworks to be taken seri­ously in the indus­try. Being a Fireworks evan­ge­list 5 or 6 years ago felt like preach­ing in the desert. But not anymore.

Today, Fireworks is finally thriv­ing. After a cou­ple false starts and dud ver­sions (yes I’m look­ing at you Fireworks 8 and CS2!), ver­sions CS3 and CS4 have finally brought Fireworks to a level where many indus­try heavy­weights are now pay­ing atten­tion. It is also cross­ing over into new fields like User Experience and Interaction Design where many prac­ti­tion­ers who are not tra­di­tional Web design­ers (read visual/​graphic design­ers) use Fireworks for rapid pro­to­typ­ing and quickly iter­at­ing inter­face and inter­ac­tion designs.

It is an excit­ing time for Fireworks which proves that Adobe’s deci­sion to keep it alive after acquir­ing Macromedia was the right one. Not only that but the appli­ca­tion itself has finally started to really improve again after stag­nat­ing for a few years under Macromedia’s watch. There are new books being writ­ten about it or with chap­ters about it, new (and not so new) Web sites cov­er­ing how to use it or who is using it. Can’t wait to see what’s in store in Fireworks’ future.

If you have never tried it, do your­self a favor and do so. If you are com­ing from Photoshop, leave your pixel push­ing Photoshop mind­set at the door and embrace Fireworks vec­tor based work­flow. Regardless of Fireworks’ very capa­ble bitmap edit­ing tools, its real strength lies in its hybrid work­flow based on a vec­tor based core. Until you really give it a try, you will never know how much dif­fer­ence work­ing in a vec­tor based envi­ron­ment does for any kind of lay­out work.

15

Enable Commenting on your Live Axure Prototypes

I’ve started work­ing on a large project as part of a team of 5 peo­ple recently. Aside from doing the visual design, I’m work­ing on the UX strat­egy and infor­ma­tion archi­tec­ture with an IA and UX designer from the US. We’re of course cre­at­ing most of our doc­u­men­ta­tion, user flows, wire­frames and pro­to­type in Axure RP Pro. He and I have been work­ing on the same project file using the new Shared Project fea­ture from Axure 5.x and col­lab­o­rat­ing on it through a free Subversion server (www​.myver​sion​con​trol​.com). That works very well and, once a day or some­times more often, I’ll gen­er­ate the Axure pro­to­type and FTP it to a pass­word pro­tected sub-​domain on my site so that other team mem­bers can con­sult it. There’s also other project file linked from a page in the pro­to­type. But there was one thing miss­ing from this process.

The thing is that, as of now, Axure pro­to­types do not han­dle com­ments on the project from other stake­hold­ers as some online pro­to­typ­ing appli­ca­tions like Protoshare do. But recently, I’ve dis­cov­ered a lit­tle script that enables us to inte­grate com­ments quite eas­ily using the free Protonotes ser­vice. That script is called Head Insert and has been devel­oped by another Axure enthu­si­ast named Joshua Morse. He orig­i­nally pub­lished ver­sion 1.2 in this blog post and recently updated the script to ver­sion 1.31 which can be found here.

What the script does is add a small bit of JavaScript code pro­vided by Protonotes when you signup (for free) to the head of each appro­pri­ate HTML file in the gen­er­ated Axure HTML pro­to­type. Then, when a user loads the pro­to­type in their browser, they can see com­ments added by oth­ers, edit/​reply to them and add their own through a tool­bar cre­ated through the Protonotes script. Using vari­ables in the script you can con­trol whether the tool­bar or the actual com­ments appear on page load by default. The com­ments them­selves are saved in a MySQL data­base on ProtoNotes’ server or, option­ally, on your own. It works very well and the great thing is that this is all free!

0

Rapid Prototyping Tools and Principles

Dan Harrelson from Adaptive Path has writ­ten a very inter­est­ing blog post titled Rapid Prototyping Tools and what makes good pro­to­types. My long time favorite Adobe Fireworks is men­tionned along with Axure RP Pro (which is a newer tool in my arse­nal) but also sev­eral oth­ers includ­ing online tools like Balsamiq Mockups.

What is most inter­est­ing to me in the post is the first part before he lists the tools and where he explains the prin­ci­ples of good pro­to­typ­ing and why it should be done in the first place. For me, this comes fol­low­ing a very well received pre­sen­taion at the IA Summint 2009 from Fred Beecher titled Integrating Effective Prototyping Into Your Design Process and which I fol­lowed through live tweet­ing as I couldn’t attend.

Both Harrelson and Beecher press the impor­tant point that cre­at­ing inter­ac­tive pro­to­types helps us design bet­ter user expe­ri­ences as they help val­i­date a design direc­tion early in the process before invest­ing a lot of money and effort into design or devel­op­ment solu­tions that may not yield the best results possible.

I strongly sug­gest you take a look at Dan Harrelson’s blog post and go through Fred’s pre­sen­ta­tion slides. They may put you on a track to improve your own process and deliver bet­ter solu­tions to your clients.

0

Axure RP Pro 5.5 Has been Released

The new ver­sion 5.5 of Axure RP Pro has been released a cou­ple days ago after being in pub­lic beta for a few months. It’s a very sig­nif­i­cant upgrade in terms of new fea­tures and is free for exist­ing cus­tomers with a cur­rent license.

Noteworthy fea­tures include the abil­ity to load and cre­ate exter­nal wid­get libraries (sim­i­lar to Visio sten­cils for exem­ple) that can be shared with cowork­ers or other Axure users. The new ver­sion ships with a bunch of libraries based on the Yahoo Design Patterns Library.

Other improve­ments include changes to the design envi­ron­ment like the addi­tion of a size and loca­tion panel directly in the UI, a Dynamic Panels man­ager palette and more. Check the changelog for all the details and down­load the new ver­sion here.

0