Web Design Inspiration Blog | SpicyWebDesigners.com

Just as WordPress is a CMS framework allowing designers and developers to create blogs and CMS websites with greater ease, so too are there many tools on the market to assist in the design of individual WordPress sites.

I have always been interested in the comments and discussions generated by the comparisons of theme frameworks by the design community. I suppose I keep hoping to find an acknowledged “best” framework – but it seems that it isn’t that simple. Just as designers and developers tend to gravitate towards their favourite CMS systems (WordPress, Textpattern,  Expression Engine, ModX, etc.) – everyone seems to try out a few and settle on the tools that seem to work best for them. And sometimes it becomes obvious that certain jobs are just easier to develop from scratch.

I hope to provide an overview of some of the different options currently available to designers and developers – leaning towards my own bias towards desirable aesthetic outcomes and ease of use, over robustness and extensibility.

Of the hundreds of available pre-designed WordPress themes, it is likely you’ll be able to find a few that meet your structural, functional and/or design needs. Using a pre-designed theme can dramatically reduce the time required to bring a site to a finished state. But be aware that every developer has their own little coding quirks, and if you fail to scrutinize the code before committing to a theme you may end up in a frustrating battle against the code – and end up with an increased development time the long run.

Theme Frameworks

This category can be further broken down into CSS-naked themes and frameworks that are essentially design/development tools.
Blank themes essentially provide the HTML and PHP framework upon which a designer can develop a site mainly through CSS. These blank themes come with a variety of functions already embedded, but new ones can be added via regular WordPress PHP tags. Some of the more popular themes  include Starkers , Blank and Whiteboard.

Frameworks are generally more robust systems that use proprietary tags and hooks to add functions to a theme, while styling is done either through CSS, the admin panel or though a WYSIWG feature. These frameworks also support increasingly popular child themes. Some of the more respected free frameworks include Hybrid and Thematic.

There is also a growing commercial market for these frameworks including Genesis, Canvas, Thesis , Headway, and the new kid on the block, Startbox. Each of these tends to be geared towards different markets and levels of skill.

The main benefit of working with a theme framework is that you can generally feel confident that the coding behind the platform has been created by WordPress experts and is up to web standards. Especially so when those frameworks that have been around a little longer and have made improvements based upon community feedback.

Building Aids

Gravy – A fairly basic blank theme geared towards front-end designers that comes with a corresponding set of labeled PSD files to make slicing and converting a Photoshop design into a WordPress theme easier.

Theme Dreamer -  A plugin that allows you to build WordPress themes within Dreamweaver.

Divine -  A program that works in Photoshop to convert PSD files into to WordPress. Full version will be released within the coming months.

Themepress -  An inexpensive way to outsource your xhtml/CSS conversion. For $10 and a little pre-conversion preparation you can submit your code, and test out the conversion before you download the finsihed product.

Plugins

Elastic - An exciting new addition to WordPress’ amazing array of plugins, Elastic is a WYSIWYG drag-and-drop that works in WordPress’ admin area to develop the layout and styling of the site. The plugin is still in development, but judging by the buzz surrounding it, this may be one to watch. And you are able to freely download a test version today.

A Custom DIY Framework

Sometimes developing your own “framework” is the best way to go. WordPress code is made for reusing and recycling. You’ll often find that each project contains about 80% of the same code, so why not make your life a little easier and carry things from one project to the next?

About the Author

Heath Waller is a guest writer for SpicyWebDesigners.com.  She is a web designer based in Calgary, Alberta in Canada and currently you can view her portfolio of design work and her new blog called “Code Alchemy“.

Feel free to read some more about her here:

• “Headfirst: A new designer’s adventures in coding for the web” by Heath Waller
• Featured web designer interview with Heath Waller

Heath Waller is a guest writer and new to SpicyWebDesigners.com.  She is a web designer from Calgary, Alberta in Canada and currently runs a portfolio and her new blog called “Code Alchemy“.  I hope that you enjoy her article about her experience coming from a visual art and design background and taking the leap to learn coding.

A confession: Starting out as a web designer, I was just about as resistant to learning code as humanly possible. I honestly believed my right-braineded-ness rendered me incapable of understanding such abstruse concepts as Javascript and PHP. Code felt to me like the worst possible combination of indecipherable characters and random hieroglyphs – my worst high school calculus nightmares revisited. And, given the multitude of WYSIWYG solutions available, why commit the effort required to learn code?

I was privy to articles by designers discussing how understanding the framework provided by code helped them in conceptualizing their finished designs. While this made sense to me – I comforted myself with the biased notion that most developers were men, who were naturally more adept at abstract thinking.  My hours were spent instead figuring out tricks that would allow me to get around the obvious gaps in my knowledge.

So, what was the turning point that got me to actually start dedicating myself to learning code? While I wish I could say it was due to some grand enlightenment – my conversion ended up coming somewhat more cynically.  I was in need of work and was offered work by a design company who was looking for a coder and it was a done deal!

Let’s face it, learning a new language at a mature age can pose a challenge for the best of us and I was no exception. After all, that is essentially what web code is: a selection of proprietary languages that make stuff behave in certain ways.  Fortunately, I was surprised to discover many of the computer languages are composed mainly of regular English. So when I was starting out with XHTML and CSS allowed for some small sense of comfort in familiarity and kicking and screaming as I was, small consolations mattered.

I took out about a dozen books on XHTML and CSS and with copious mugs of tea at the ready, shut myself in for a week of dedicated cramming. Without the alternative of failure as an option I dove in head-first.  I made all kinds of mistakes in the process which in and of itself was an essential learning tool.  Taking the theory that I’d been reading about in these books and putting it into practice makes everything much more relevant and present to me.

I now possess many of the skills that can transform a designer’s vision into a functional reality.  New situations crop up all the time that force me to learn new techniques and new code languages in order to accommodate the designers’ needs.  Because of this, I feel confident in having tackled learning one type of code in the past, that I’ll be able to tackle other ones in the future.

I am also happy to report the benefits of learning code extend to my own designing. Instead of performing an essential “translation” between Photoshop and the browser, I welcome the interplay between the visual plan and dynamism code introduces. There is a push and pull between the design and the code that allows for happy accidents. To put it in painting terms, I now feel like I do the under painting in Photoshop, and add the nuances and glazing in the browser. The design process feels more organic.  In understanding the limitations and capacities that current codes present to a design, I ultimately feel more creative in my designing abilities.

When I was learning oil painting I first had to learn my materials. The greater understanding I achieved with my stretchers, canvases, paints and mediums, the freer I felt in my ability to focus on my expression.  These days I use Firebug to inspect the element of anything and everything that makes me go “how’d they do that”?!  It makes browsing the web feel more like a trip through an art gallery. To get up close and personal with the works or recognized masters of web design and to take note of the “brushstrokes” that help them achieve their mastery.

I still have much to learn, and given my recent experience, I can only imagine that the more I learn, the better my designs will become.  Learning to code is still one of the most painful challenges I’ve faced in my work; however in retrospect, I feel rather foolish to have done without it for so long. The time and patience required to learn it is far outweighed by the benefits I receive as professional designer.

I now consider myself both a code geek and a vocal advocate for designers understanding the full range of tools at their disposal; and code is just as essential to my work as my graphic tools.

Heath Waller