Tag Archives | design

The Real Pixelyzed 3.0 is Live (and Back with Headway)

Sometime last week I finally fin­ished the “real” pix­e­lyzed 3.0 redesign and switched the theme of the site back to Headway. I’m very happy to be back to Headway and will talk about it more in future posts as I truly think it’s the best WordPress theme frame­work for pro­fes­sion­als doing client sites on WordPress.

The 3.0 design will prob­a­bly be tweaked and evolve with time but I do not con­sider it tran­si­tional as I’d done with all the ver­sions between it and the orig­i­nal pix­e­lyzed 1.0 design (the one with the “pix­els” grid). It is pur­pose­fully sim­ple and I will help me con­cen­trate on cre­at­ing con­tent. Continue Reading →

0

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

My Journey to WordPress — New Design Up!

As I already explained pre­vi­ously, on April 5th (2010), I migrated pix​e​lyzed​.com from another blog­ging plat­form to WordPress. Last night I changed from the free theme I’d been using to my own new design which I inte­grated into WordPress using the Thesis theme (more about Thesis below). Continue Reading →

2

My Top 10 Web Design Tools

I had already started work­ing on a blog post with my top 10 most use­ful Web design tools but, like many other things these days, I had con­tin­u­ally post­poned fin­ish­ing it in favor of “more impor­tant things”. Like client work… ;-)

But I saw a post today on the Visualrinse blog that tack­led the same topic so it prompted me to fin­ish mine.

As men­tioned in the above blog post, we all have our own favorite work­ing meth­ods, tricks and tools for com­plet­ing projects and, as I have already men­tioned here before, I have really tried to refine my process in the last year or so and find the tools that really help me get my work done, espe­cially since I am a one man shop and need to tackle both the design and devel­op­ment aspects of my projects as well as man­ag­ing them and my clients. Now that I am free­lanc­ing full time, I have really started to develop a process that works for me. So here are the tools I could not live with­out in my Web design and devel­op­ment work.

  1. Mindjet MindManager Pro /​JCV Gantt Pro. I stated using MindManager in the sum­mer of 2007 and it has quickly become one of my most use­ful tools. I use it for sev­eral things like brain­storm­ing ideas, cre­at­ing pro­jetc man­age­ment doc­u­ments like a projet’s cre­ative brief, work bread­own struc­ture or tasks, site maps and more. Each project gets a “dash­board” map that links to all the other project related maps, doc­u­ments or fold­ers. From the tasks map I move to the JCV Gantt Pro addin to cre­ate the project sched­ule and deter­mine the cost of the project. MindManager is the best “knowl­edge repos­i­tory” appli­ca­tion I’ve ever tried and I now won­der what I did with­out it before I found it.
  2. Axure RP Pro. Axure is the most recent addi­tion to my toolset. It takes off where MindManager leaves off for me. As great as MindManager is for my own inter­nal processes I real­ized it did not cre­ate great deliv­er­ables for clients. Axure is the best tool I found to cre­ate site maps and flow charts but its main pur­pose is wire­frames, func­tional inter­ac­tive pro­to­types and doc­u­men­ta­tion and it really excels at it. I’m work­ing on a appointment/​calendar app for a cur­rent site project and pro­to­typ­ing it in Axure will save me a lot of cod­ing time later. There’s noth­ing like show­ing a work­ing, click­able and inter­ac­tive ver­sion of a site fea­ture to a client, even if it is fake, to work out the kinks and nail down expectations.
  3. Adobe Fireworks. The main­stay in my toolset for the last 10 years and my most used app along with Dreamweaver. I really could not do my job with­out Fireworks. It com­pletely replaced Photoshop for me for Web design and lay­out work over 10 years ago and I have never looked back. Its hybrid raster/​vector work­flow as well as Web cen­tric focus make it the most effi­cient design app I have ever used. It’s like Photoshop/​Illustrator and InDesign all rolled up into one killer app but just for the Web. CS4 will be released soon and it really will be the best ver­sion ever.
  4. Adobe Dreamweaver. Unlike Fireworks which I pretty much adopted imme­di­ately after try­ing ver­sion 2.0, it took me a long time to warm up to Dreamweaver. I had been using HomeSite which was a great code edi­tor for a long time but I had to use a sep­a­rate FTP appli­ca­tion to upload sites and was look­ing for ways to auto­mate some of the repet­i­tive work. Around the release of Dreamweaver 4 but espe­cially the next one, Dreamweaver MX (6.0), the appli­ca­tion had evolved in such a way that it basi­cally replaced HomeSite for me. Now it is a full fledged Web author­ing envi­ron­ment I couldn’t live with­out any­more. It has the right bal­ance of code cen­tric fea­tures, visual edit­ing and a lot of other fea­tures around those that just make it a true pow­er­house. The new CS4 ver­sion which is in pub­lic beta right now adds very cool new fea­tures that are already mak­ing my life easier.
  5. ColdFusion. I am more of a designer and front end devel­oper than a back­end devel­oper but I still have to wear that hat. I have tried Perl and used ASP in the past and although it was OK it got tedious for me after a while. I also tried PHP as it’s very pop­u­lar but I really don’t like it at all for some rea­son. It really didn’t click with me and I strongly dis­like the syn­tax. When I started work­ing with ColdFusion it’s like a light bulb was turned on for me. The syn­tax made sense and it could do more in fewer lines of code than ASP (and most other server-​side script­ing lan­guages) ever could. In the last few years, ColdFusion has kept evolv­ing into one of the most pow­er­ful server-​side devel­op­ment solu­tions around with many buit-​in fea­tures you need plu­g­ins for in other plat­forms. It really rocks my world and has empow­ered me to build bet­ter Web sites.
  6. Web Developer Toolbar. Although Firefox is not my main browser (Opera is… and Google Chrome is gain­ning ground), no Web designer/​developer should be with­out this utility.
  7. Firebug. Another amaz­ing Firefox exten­sion that prob­a­bly needs no intro­duc­tion. The Inspect func­tion­al­ity alone makes this an absolute must-​have. If you’re not sure what CSS rule affect a mis­be­hav­ing ele­ment, you’ll find it with Firebug’s Inspect. Not far behind is Opera’s new Dragonfly fea­ture which is still in alpha. Similar to Firebug but built right into Opera 9.5+.
  8. Genopal. Going back to designer tools, Genopal is one of those rare finds you won­der how you did with­out before dis­cov­er­ing it. Genopal is a small appli­ca­tion used to cre­ate color schemes. Nothing earth shat­ter­ing here but, it does it in a very unique way that I had never seen before. This is the most intu­itive color tool I have ever used and I urge any­one strug­gling with cre­at­ing good color schemes to try it. I use the desk­top Pro ver­sion but there’s also an online ver­sion on the site. This one is a true lit­tle gem.
  9. Studiometry. What would I do with­out this amaz­ing appli­ca­tion? Studiometry is the admin­is­tra­tive cen­ter of my world. Projects, clients details, con­tacts, timers, invoic­ing, reports and more, Studiometry tracks every detail of my pro­fes­sional work and helps me keep organized.
  10. jQuery. This “lit­tle” JavaScript frame­work has rocked my world. Like ColdFusion but on the front end, it has empow­ered me to cre­ate com­plex inter­ac­tiv­ity faster and eas­ier than I ever could before. I have tried oth­ers but jQuery just clicked for me and I keep being amazed at what I can accom­plish with it.

So the above are my own must-​haves. The list is not com­plete though so here’s a few hon­or­able men­tions for other appli­ca­tions that are cen­tral to my work :

One is Outlook 2007 for keep­ing up with not only email but client con­tacts, cal­en­dar and cat­e­go­rized tasks lists (fol­low­ing the GTD prin­ci­ples). It’s the first app I launch in the morn­ing and the last one I ckeck at night.

Another is FeedDemon, the incred­i­ble RSS feeds aggre­ga­tor from Nick Bradbury and NewsGator. In our field, fight­ing infor­ma­tion over­load has become a real issue, at least it has for me. FeedDemon helps me keep informed by fol­low­ing the myr­iad of sites I am inter­ested in but also through key­word feeds that gather infor­ma­tion about spe­cific top­ics I’m inter­ested in.

Lastly, I need to men­tion Twitter and the TweetDeck client. I’ve been a very late Twitter adopter as I didn’t “see” the use and thought it would be a waste of time. But now that I work on my own full time, I enjoy the con­nec­tion to the peo­ple I fol­low. Like FeedDemon, TweetDeck enables me to sep­a­rate my Twitter “stream” into groups. But fur­ther­more, it enables me to keep watch on par­tic­u­lar top­ics in the “pub­lic stream” by let­ting me add colomns based on spe­cific key­word searches. It took me a long time to get on Twitter but now, TweetDeck is always run­ning on my lap­top while I work on my main machine.

Well that’s it for me at this time. What are your own pre­ferred tools that you just can­not live without?

6

Font Management Woes

For the last few weeks, I’ve been hav­ing a lot of issues with my font man­age­ment soft­ware. For a Web or graphic designer, a good font man­age­ment pro­gram is very impor­tant so I’ve been scram­bling to find solutions.

I had been using Extensis Suitcase for a long time but the Windows ver­sion doesn’t have a proper search fea­ture and that is some­thing that can really help when you are look­ing for fonts for a project. That’s why I had been exper­i­ment­ing with other apps. One of those apps was Proxima Software’s FontExpert. But the thing is, both have pros and cons and I basi­cally used one for a while and the other for a while then back again. Want exam­ples of things one does well while the other doesn’t? here it goes:

Suitcase Pros:

  • It is a mature app with a pol­ish that is hard to beat
  • It has a very stream­lined and easy to use UI
  • It comes with auto­matic font acti­va­tion plu­g­ins for both Illustrator and InDesign and, cou­pled with is FontSense tech­nol­ogy, they work very well.

Suitcase Cons:

  • It lacks a search fea­ture in the Windows version
  • It is harder on resources than FontExpert as it uses a res­i­dent ser­vice that start with every Windows boot.
  • It’s acti­va­tion process depends on the infa­mous “Bonjour Service” (more on that later).

FontExpert Pros

  • It has a very exten­sisve fea­ture set that includes tag­ging and cat­e­go­riz­ing fonts and search­ing them.
  • It offers access to detailed infor­ma­tion for each font.
  • It is very light on resources

FontExpert Cons

  • Its inter­face can be con­fus­ing, espe­cially its imple­men­ta­tion of Groups and Worklists and what each is used for. Suitcase is a lot eas­ier to deal with in that regard.
  • Documentation is lacking
  • It has an auto acti­va­tion plu­gin only for InDesign and the CS3 ver­sion is flaky. It was pre­vent­ing InDesign to load for me so I had to unin­stall the plugin.

Up to a few weeks ago, I was using Suitcase because, even with­out search, its oper­a­tion was more trou­ble free and it really worked well with InDesign and Illustrator when I ope­nend a filed that used fonts that were unin­stalled. But one day, it stopped load­ing on Windows startup or man­u­ally. After a bit of detec­tive work I real­ized that the issue was tied to the “Bonjour Service”. No mat­ter what I try, I can­not get that stu­pid ser­vice to start and Suitcase depends on it being started to start itself.

I tried down­load­ing the lat­est ver­sion of Bonjour from Apple but that won’t start either. I have made no change pur­pose­fuly to my machine that could explain this. Maybe some kind of Windows update is pre­vent­ing Bonjour to start but I have no idea why and no amount of Googling has given me a solu­tion. Extensis are no help.

I had no choice but to unin­stall Suitcase and install FontExpert. But I started hav­ing prob­lems with that too. Fonts would not dis­play cor­rectly within the app nor within appli­ca­tions using them even if they were acti­vated. They defaulted to a basic sans-​serif that looked noth­ing like the type­face I was using. So I was screwed and I needed to find another font man­age­ment appli­ca­tion. I’m start­ing a new project these days and it includes the cre­ation of a logo so I need to look at a lot of fonts…

After a bit of research I found Hi-​Logic MainType. It looks a bit like FontExpert but more stream­lined and its Group fea­tures is directly linked to fold­ers on your machine which is a lot closer to how Suitcase worked. All fonts dis­play cor­rectly in it and it has a “fil­ter” fea­ture that helps find fonts based on sev­eral cri­te­ria and it seems to work quite well. I’ll see how it works for me over time.

In the mean­time, if any of you that read this blog have expe­ri­enced prob­lems with the Bonjour Service fail­ing to start or have heard of a solu­tion to that prob­lem then please, post a com­ment here. Suitcase is not the only app depend­ing on it and I would love to fix this issue on this machine.

4