Hi Steve, I'm wondering if you could tell us a little about yourself?

I'm a Taurus and like to take long... Oh, you mean professionally.

I'm a UX (User Experience) Designer that focuses on website and web applications. I've haven't always been so focused (I used to also do identity and print work) but lately I've really enjoyed my time specializing. Truth is though, UX Design is a huge multidisciplinary field that can encompass content strategists, researchers, information architects, visual designers, communication experts and more. As I lead a UX team I fall more on the general side of things, but when push comes to shove I work on the IA (wireframes) and visual designs of sites on a daily basis.

In my capacity as the GDC's National Website Chair I'm currently working on a plan to improve the UX of GDC.net. Go team! Oh! I also like running, fancy shirts and Ikea.

How is UX Design related to Web Design?  

How is it not? Truth is there every piece of design in any related field touches and relies heavily on UX design. I mean, when a freelancer, or design firm are asked to create a new website, brochure, visual identity there is always an impact on the user. In fact, I believe that any good designer will at some point (hopefully early on) consider how the product or service will be used by its intended audience. At that point some one is touching on UX design.

For the the web it is foundational. In my experiece, the true tasks, features and requirements for a website project are revealed through the creation and iteration process of research, content planning and wireframing. The great news is with a thoroughly explored and developed set of wireframes a project can begin with a clearly defined destination on the road to success.

Typically one of the last layers of the UX process is the visual design which will be well informed due to all that has come before it (as a footnote I am always sketching and thinking about the design system throughout the project). That doesn't mean that things won't change at this point, but it does mean that we are well prepared to understand why it should or shouldn't change. The whole goal here is to present something that the user will love and as Frank Chimero would say, "would delight them". I guess I fall on the side of the fence that believes that good UX design and design thinking improves everything about a website project.

What is a challenge you regularly run into when working on web projects?

One of the challenges that I face on almost every project is an ill defined purpose. At the start of a project, usually in the RFP, there is a direction given for the refresh or new design. Requirements are laid out and even features requested or set, but I have to stop and ask, "What is the site supposed to accomplish? What is the purpose?". Now I don't get blank stares at this point, but often I don't get the answer we need. The answer that speaks to true goals and motivation. This is where a bit of research comes in handy. A heuristic look at the current situation, digging into stakeholder's goals and learning about user's motivations can reveal a great deal. It is also a great opportunity to establish how a website can help focus the overall messaging and communications from a company or organization.

Two things that really help at this stage are a solid content strategy and a full set of wireframes. The content strategy will establish everything that needs to stay, go or be created and will be the driving force behind the direction for the site. I mean, if you don't have good content, you don't have a good website. The full set of wireframes will establish how the system will come together. Website owners have goals for their sites, but website users are usually there to accomplish a task.

Wireframes essentially tell the story of how the user will accomplish the task that in turn meets the website owner's goals. If you were building a house and forgot to include the stairs to the second floor, there wasn't much point in building a two-story. A blueprint, or in this case a wireframe, would have shown the builder that they needed to make a choice. Build stairs and have a second floor or not build the stairs and have a single story building. Almost like, build a sub-navigation system and have a slightly more complex IA or stick to just having main level navigation and simplify the content. Both can be good choices, but you need to know how it will impact the entire project which is what wireframes can do for you.
 

Can you offer advice to a print designer that is shifting to web design?

The web is not print. This is good news!

It means that there are new avenues to explore, new possibilities that maybe someone focused on print had not thought of before. Don't come into web design and try to apply common print conventions, learn web conventions, get comfortable with them and then branch out. Far, far too often I'll see websites that I'm sure are meant to be elegant and creative, but you can read them or their navigation leaves me guessing. All these things are easily solved just by understanding why things typically work the way they do on the web.

Web conventions started out as someone's great idea and stuck around because they work. Don't get me wrong, we have not even scratched the surface of how people can and will interact online (thing mobile, gestures, etc) so there will be new conventions developed and creativity should be strongly encouraged, but creativity might not be what the user needs. For example, if your main navigation is all icons and I don't understand what they are as a user I will most likely be frustrated and leave (it is easier to move on to another website than another brochure). Mystery meat navigation has been tried and found wanting (#fail)! Same goes for type that is too small or without a high enough contrast. I was on a design company's site today that used a 9 pixel font for their body copy. I wanted to report them to the web design police.

The good news is there are lots and lots of blogs, websites and even books dedicated to learning good practices in web design. I would highly recommend reading web design blogs regularly. Also the Boagworld podcast pretty much transformed my thinking at different points in my career.

• A List Apart - www.alistapart.com
• Jason Santa Maria - www.jasonsantamaria.com
• Carsonified - www.carsonified.com
• Boagworld (great podcast!) - www.boagworld.com
• Hellofisher.com (ok, shameless plug and I barely even have time to blog there)

As I note I believe it is important that anyone designing websites needs to at least have a solid understanding of how sites are built. What can html and css do? Things like that.

What are the top three must do’s that make for good site design

I'm not going to say that these are *the top three* but they are very important:

• Consider the user. Design with them in mind at all times. Think about how they will interact with the site and balance that with the design direction you are taking. A good tool here is a user or user group persona.
• Content plan. Without knowing what the site's messaging will be there is really no point in trying to come up with a design. The design should support and push forward the message.
• Plan it all out. Even if it is just internal and will never be shared with anyone else, at least sketch out some wireframes so you can see the bigger picture of the site. I guarantee if you spend a bit of time doing this you'll find things that will greatly enhance your end result.

What are some tools you can recommend to designers?

Wireframes:

• Omnigraffle - my current tool of choice when not using pencil and paper. I even use it on my iPad.
• Connect a Sketch - helps make your sketches interactive and collaborative
• A list of 18 Wireframing, Mockup And Prototyping Tools To Plan Designs
• Tools for sketching user experiences
  
• Wireframes magazine
• A Smashing Magazine list of 50 Free UI and Web Design Wireframing   , Resources and Source Files
• And last, but I don't think least is a newer tool that I'm currently trying out called Flair Builder. I think I might be falling in love with it, but it is too early in the relationship too tell.

Sitemaps:

• Omnigraffle - again a decent tool to build not only wireframes, but workflow documents and sitemaps.
• Writemaps.com - Super easy and free. Gets a bit tricky if the sitemap is large, but overall it is a great tool.

Personas:

• Omnigraffle - That's right! I have a template for them in Omni and I love it.
• Really anything will do though. Word, Indesign, html... you're just looking at having a representation of a typical user or user group for the site.

Visual Design:

• Omnigraffle - lol. I know, but it does a decent job of getting you started, but I don't really use it this way.
• Photoshop - for many designers this is the default. I'll admit to using it, but I think I'm changing my mind.
• Fireworks - Actually much better for web design, but PLEASE do not let it generate your website code. It is fine to use it for quick prototypes, but you can and should do much better than the code it spits out. :)
• The browser - That's right. I said it. Design in the browser. I mean that is where all the action is and sometimes you really need to see how it is going to work. No graphics program is going to display things exactly how they will look online. For this though you need some css, html and maybe even a little javascript skillz. You can let programs that are a CMS (content management system) help you out a bit here, but anything you learn related to CSS and html will help you greatly down the road.

What are some of your favourite websites?

This is always such a hard question. I live so much of my life online and to be honest a good portion of that is through apps now so maybe I'll throw in an app or two. I like:

• http://www.meyerkyle.com/. Kyle's portfolio site is super clean and just lets me relax and enjoy when I go there. I don't go there a lot, but I like it.
• http://artinmycoffee.com/ is fun and has a very clear purpose. Again, not terribly useful, but fun.
• http://www.possefoundation.org/ is a great example of following conventions without sacrificing creativity.
• http://sushiandrobots.com/ is fun and clear.
• http://www.theglobeandmail.com/ is probably my favourite news site. It can be a bit much, but they have done a good job with the IA and presentation of the content.
• http://www.viget.com/inspire/ is a great blog and layout.The NPR app for the iPad has an AMAZING UX. Other news companies should take note!
• I don't love everything about http://www.kickstarter.com/ but I do love how they present and highlight projects.

Ok, these are really just some of the first sites I could thing of, but I think they are all pretty decent examples of stuff I like. They work for me, but may not be your cup-o-tea.