Website Inspiration Blog | SpicyWebDesigners.com by Luc Arnold

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

Heath Waller is a web designer from Calgary, Alberta in Canada.  Up until 5 years ago she hadn’t really touched a computer let alone designed a website but about a year ago she became very interested and started learning about and designing websites.  With her educational background in visual arts she became a “natural” designer because of the parallels with her visual arts background and since then she’s been designing for the web.

Lately her interests include learning all that she can about web development covering everything from jQuery, HTML5, PHP and other languages.  She also works with a number of CMS systems from WordPress to PageLime and Surreal CMS but prefers to work with WordPress.  I hope you enjoy learning more about this impressive web designer.

Luc asks:  Heath, when and how did you start designing for the web?

Heath says:  5 years ago I had barely touched a computer. I was living in the Australian outback without water, plumbing or electricity!

I designed my first site a couple of years ago as a favor to a friend, using a WYSIWYG program. A couple of other giveaway sites followed. I had no idea of what I was doing beyond adding window dressing to a template.

About a year ago I met someone who was working as a freelance graphic designer who suggested that if I were to learn how to design websites I might get some work sent my way. I’d never thought about doing anything like that before, but I like a challenge! So I learned what I could about tweaking code to make things beautiful – while doing everything possible to avoid learning actual coding.

Eventually, partially through osmosis and partially through painful hours spent reading books about coding, I began to pick up enough of it to get templates to start looking how I wanted them to.

Then, about 5 months ago I met some young fellows who were looking for a developer to join their new web design company. It seemed a wonderful opportunity, and I told them I may not yet know how to code, but I’d be able to figure it out if they hired me. I just needed a week to study…

And the rest is history. I am now working as a developer, improving my coding skills through practical applications. There are many late nights of studying involved, and much of my weekend is spent reading the latest in online tutorials and design/development articles.

I am also looking to pick up some freelancing work in order to exercise my design abilities and to be able to improve my portfolio. And I am still learning like crazy.

Luc asks:  Do you feel you are a stronger coder or a stronger designer? What do you to improve your weaknesses?

Heath says:  Design comes naturally to me – probably from my fine art background. Color, composition, typography – these are my real loves. I get giddy over beautiful websites!

But I do find there is beauty in coding, too – turning something static into something dynamic through a magical combinations of characters, letters and numbers. To be able to take a project from idea to completion is immensely gratifying; and understanding the skeleton required for the skins I imagine makes the design process feel much more holistic.

I know where my development weaknesses lie and work diligently towards improving them. Sometimes it feels overwhelming – there is just so much to learn! JQuery. PHP. HTML5. CSS3. But then I just force myself to tackle things in bite-sized pieces, while allowing myself a bit of room for play, and things slowly come into place.

Luc asks:  Do you work with or design for any content management systems in particular?

Heath says:  WordPress is my CMS of choice. I’ve also found PageLime or Surreal CMS are good choices for smaller projects. I am a big proponent of open source. I am not yet at the stage where I am able to contribute much, but the collaborative nature of it really appeals to me.

Back when I started this journey I tried just about every one of the possible CMS solutions out there. They all felt too overwhelmingly complicated at the time. But I credit the vast number of tutorials created by the WordPress community that took me through step by baby step. I still have a lot to learn, mind you. But learning WordPress is always a pleasure.

Luc asks:  What are some of the most important lessons you’ve learned since starting your career in design?

Heath says:  That the best way to really learn something is to take a crack at it. The reading can get you primed, but it is in the actual doing that the greatest lessons are learned. I can work on trying to debug a code for 20 hours strait, and be on the verge of tears, when something just “clicks”. And, suddenly, it all becomes perfectly clear. And I know I’ll never make that same mistake again!

The other really surprising thing is just how generous the design community is in helping you out when you have a problem. StackOverflow has been a lifesaver to me! People are so quick to help you out, often in ways that you know required a lot of their time and energy.

This Internet is the playground of the web design and development community; and it is wonderful to see such fair play at work.

Luc asks:  Where do you want to go in your professional design career?

Heath says:  That is such a great question! I think this is a career where the sky is the limit. And a career that one can literally take “anywhere” there is an Internet connection. Thinking: tropical island… desert oasis… majestic forest…

Web design is truly a 21st Century craft.

I’d love to better learn how to code WordPress themes from scratch so that I can set up clients to independently grow their websites. I’d like to create the kind of websites that excite viewers and make other designers want to inspect my element.

And, most importantly, I’d like to known for producing powerfully simple, attractive, content-focused sites for happy clients.

I recently caught up with Rebecca Bollwitt who runs a blog called Miss604, a guide to Vancouver, Canada and one half of the team heading up Sixty4Media along with her husband and business partner John Bollwitt.

Rebecca has been producing website since 1997 when her first website was launched and since then she’s had a hand in web development.  She was able to take some time and answer some questions about the blog she currently runs (Miss604), what people should do if they are thinking of starting a blog and what live blogs are exactly.  So sit back, relax, drink a coffee and read on…

Luc asks: For those people out there who may not have visited your “Miss 604 Blog” can you tell me what the focus of the blog was when you started and how has it changed since you first started.

Rebecca says: When I started Miss604 in 2004 it was simply a hobby and I would write every week or so about the mundane details of my life. I realized one day that I really loved writing and sharing information about my hometown – being an independent voice and resource for locals. It evolved into something I love to do every day; mixing writing about local news and events along with my passion for technology. In 2006 I started taking it more seriously and in 2008 I went full time with my blogging career.

Luc asks: You also run a media company called “Sixty4media” with your husband, John.  Why did you choose to focus on consulting on WordPress projects and what other types of projects do you work on?

Rebecca says: I have been in the online media realm for the last ten years and it’s always been a dream to run my own company. My husband and I had been using WordPress since 2006 and really got into the technology and the wonderful worldwide community. Things lined up just right for me in the summer of 2008 and I was not only able to take my blogging full time, but also jump in head first into business ownership.

Luc asks: What tools do you use to market Sixty4Media with on an ongoing basis?

Rebecca says: We organize all of our projects using an internal wiki system. That way when both of us are working on a client site we don’t need to run through old emails to dig up mockup images and passwords. With a wiki we have every project sorted by date and all elements (images, passwords, to-do lists etc.) are available to both of us anytime.

I also run the administration side of things using Freshbooks; an online accounting system. It’s really been a lifesaver in terms of doing estimates, tracking expenses and invoicing.

I promote Miss604 mostly through Twitter and Flickr photos and also by posting daily using relevant keywords (Google is my #1 referrer). As for sixty4media, I promote it as my business and in all of my biographies. The company has a Twitter account and my husband and I are both active in promoting our work and showcasing our clients online through our personal sites and accounts.

Luc asks: What tips do you give people looking to start a blog of their own?

Rebecca says: The number one thing about blogging is loving your subject matter. When you are passionate about your topics then you a) won’t have to struggle to come up with post ideas b) your voice will be genuine in the articles and c) it will be fun and not a chore for you.

Find something you love to talk about or something you’re passionate about learning or sharing and go from there.

Luc asks: How much money do all your online businesses bring in currently a year?

Rebecca says: I don’t usually like talking about income but sixty4media is 80% of my current income and Miss604.com projects bring in the rest. Miss604.com has limited advertising however it is responsible for my speaking engagements, consulting, and overall marketing of sixty4media. People know Miss604.com better than they know sixty4media so it’s always nice when they find out that I’ll share blogging and social media tips with them through my actual business. Through Miss604.com I have also been able to get a book deal and “Blogging to Drive Business” will be on store shelves (and in e-book form) in early 2010. (Shameless plug, sorry!)

Luc asks: I wanted to ask you about your book deal.  Can you tell us more about what you cover in the book and how and where people can get it?

Rebecca says: The book is “Blogging to Drive Business” and I co-wrote it along with Eric Butow of California. We cover the basics of blogging for business, how to get started, and some best-practices/common sense when it comes to having a corporate online presence. The Kindle version is on Amazon.com right now but the hard copy will be published and available online (and in stores) at the end of January.

Luc asks: I see that you produce “Live Blogs” and i wanted to ask what are they and what types of clients usually benefit from a live like these?

Rebecca says: Live Blogs are real-time posts that are most beneficial for events. I go to a conference or special event for a client and write a blog post about my experience, in real time — meaning I’m writing and uploading photos as its happening. I’ll toss in quotes from speakers, video, images, and by the time the event is over, my post is fully published.

The benefit of this is to engage an audience that might not be in the room at the time. It helps your event be accessible across the internet and draws in more people through the blog posts and Twitter updates as well. It’s documentation that will last on Google and on social media networks for years to come.

Coming to us from the West coast of Canada, Vancouver, British Columbia to be a little more specific, S. Preston has been designing and developing for the web for over the past 8 years. He originally studied at the Southern Alberta Institute of Technology (SAIT) and graduated in 1997 from the video and new media production program where he learned that he had a passion for making things look nice and video. According to S. Preston, the day that the WordPress CMS came around was the day that he started to plot his exit strategy from corporate life. After getting a chance to ask S. Preston a few more questions about his business he revealed his preference of designing for a CMS, working with an agency and his particular vision and style of design.

Luc asks: How exactly did originally start designing websites and when did you turn professional?

Mike (S. Preston) Chuhon says: My first internet experience was in 1995 and I immediately knew that this was something that I want to be a part of.  But it took me a little while to figure out that web design was what I wanted to do.  Not to say all the experiences of web development, database design, and online video was a waste, in fact, I believe those experiences all play a role in SixSix8.  But I am an artist at heart, and creative web design is my passion.

Luc asks: I see that you studied at the Southern Alberta Institute of Technology (SAIT) and i wanted to ask you how did your education in video and new media production helped you in your career so far?

Mike (S. Preston) Chuhon says: My springboard into web design was creating video players for webcast and video applications.  In a room full of broadcast engineers and video editors, someone had to make things look nice.  I’m still pretty passionate about video, and many of my friends and colleagues are in the film industry.  So projects like Riese the Series and Time before the Light are great fun!

Luc asks: Do you prefer designing for a standard CMS platform like WordPress or do you like working on custom projects?  Also do you think it’s more beneficial to design for a well recognized CMS application?

Mike (S. Preston) Chuhon says: I think the day WordPress became a CMS, was the same day I started my exit strategy out of my corporate desk.  In my former-life as a ColdFusion programmer, I was well aware that websites need constant maintenance and frankly it’s a chore to upload a new PDF, or change 2 dates.  I might be preaching to the choir, but CMS software allows me to focus on the creative aspects of my business and provide better service to my clients.  It does help that I’ve got a programmers background so I’m quite able to make WordPress work for me.  And the second question, yes, I’d love to use more CMS software. ExpressionEngine and Drupal will be in my repertoire soon!

Luc asks: Do you prefer to work exclusively with design agencies like Sixty4Media when freelancing or do you develop your own contacts as well?

Mike (S. Preston) Chuhon says: You know, it’s arrogant to think that one person can do everything.  We all bring skill sets to the table.  I was told early on in business, you don’t need to eat the whole pie and I’ve incorporated that into my business values.  Let’s work together to provide the best service you can!  Sixty4Media and I have a great relationship and knowing Miss604 and her husband John (Mr604??) have been invaluable to me.

Luc asks: What should people know about you, your vision and design style when they hire you?  What services should they expect?

Mike (S. Preston) Chuhon says: I believe in websites that are clean and clear.  Especially on the internet, content is still king!  But what I do is make that content more appealing and engaging and helps bring an emotional connection to your communication or marketing.  Not to mention that there’s a lot of crap on the internet getting tossed around, so I like to think my designs help make you stand out from the crowd.

Luc asks: I see that you work in print design aside from your web design work and i wanted to ask you if this experience designing for print makes you a better web designer in your opinion?

Mike (S. Preston) Chuhon says: You know, experimenting in art mediums is part of being well rounded.  I won’t say I’m great at print media, but I do love to try to translate my skills on to paper.  To be completely honest, many clients have trouble differentiating between print and web, so it makes sense to provide both services whenever it fits.

Les Reynolds from Burlington, Ontario in Canada is web designer who currently runs, L Squared Design, a full service web design and development studio. Les received his first taste of web design while working for an electrical contracting company while learning to design an email newsletter. He credits his experiences before he got into web design as part of his success where he learned the ins and outs of operations, marketing, purchasing and business in general. Les has been designing professionally for the past 3 years and when I asked him about his experiences to date he had this to say…

Luc @ SWD: How did you originally get started designing websites?

Les says: I was working for an electrical contracting company, and they wanted to send out an email newsletter. So I taught myself HTML using articles and tutorials I found on the web. Once the newsletter was done, I couldn’t stop, and the more I learned the more I realized that this is what I wanted to do as a career.

Luc @ SWD: What are some of the benefits of working with platforms like WordPress, Textpattern and others?

Les says: The biggest reason I use a CMS is so clients can update a site themselves. However, it makes updates easier for almost any type of site. Another bonus is being able to change repeating content like footer or navigation in only one place, similar to using PHP includes. I haven’t used WordPress, but I love the flexibility that Textpattern offers. With the built in features and rich suite of plug-ins, it is suitable for a very wide range of sites.

Luc @ SWD: Les, you’ve been designing website professionally for the past 3 years.  How have you continued to stay up to date since you first started?

Les says: The speed that things change in the world of web design/development means that if you stop paying attention, you’ll be passed by. RSS feeds from people like Jeffery Zeldman, Dan Cedarholm, Cameron Moll, Jon Hicks, Andy Rutledge, Dave Shea, Jonathan Snook, Jason Santa Maria and other has helped me to stay up to date, and learn so much. And recently Twitter has been a great way to keep in touch with changes as well.

Luc @ SWD: Where did you go to school and what did you study in college/university? How has it helped you with web design?

Les says: When I started getting into web design, I did some research and found that most college/university web design & development programs have trouble keeping up with the fast pace of the web world. I think that is beginning to change, but at the time I decided that I’d be better off going the self-taught route.

Books like Designing with Web Standards, CSS Mastery, Bulletproof Web Design, and Transcending CSS have served as my curriculum, as well as articles on A List Apart and the blogs listed above.

I’ve actually thought about taking some courses in graphic design at the local college. I think graphic design and marketing are both areas of education that would be useful.

The other things that I think has helped me are the jobs I had before web design. The experience in management, sales, operations, marketing, purchasing, accounting, etc has been very valuable.

Luc @ SWD: What are your favorite tools to use on a web design project?

Les says: I started using Photoshop, but a light went on once I opened up Fireworks. It has done a great job of merging vector and bitmap editing, in a way that works really well for the web. However, as I’ve looked at upgrading, tales of buggy, bloated software have made me think twice. There is lots of complaining about Adobe’s apps, and i think it’s time we moved on. I’m currently trying out Acorn and DrawIt. I actually wrote a post about it, and plan to follow up with some comparisons.

For coding, there is lots to love about Espresso, although there is still refining to be done. FTP is handled by the wonderful Transmit, debugging CSS with Safari’s web inspector.  I find small tools like Pipette, Free Ruler, Skitch, and Little Snapper quite helpful for various tasks. Somewhat unrelated, The Hit List for todos, Notational Velocity for notes, Dropbox for file access, SuperDuper for backup, and Tweetie for Twitter are all invaluable.