So You Want To Be A Good Web Designer…

Seems like everyone wants to be a web designer these days. And with the selection of tools, both client and web-based, it would appear that it is as easy as a-b-c.

Here’s the bubble burst. POP!

Like cooking, home improvement and landscaping, you can do web design, yet not be a good web designer. I, am not a good web designer. I’d love to be. I aspire to be. I’m working on it. However, I’m not a good web designer.

I can code HTML, XHTML and CSS. But that alone does not make me a good web designer.

So why am I telling you this? Because as I interact with individuals who aspire to be web designers, it is becoming clear that web design, good web design, requires many disciplines, of which several foundational elements are overlooked by most folks, looking for the fast-track, barebones, quickstart way to becoming a web designer. You can become an individual who can crank out 2 or 3 column web page layouts, with a bunch of information, and maybe some pretty images. So are you a web designer? In my opinion, no.

A web designer, through multiple disciplines, solves problems. Problems in presenting information so it can be navigated, digested and understood. Problems in engaging and persuading site visitors to do things; download white papers, purchase a book, or carry on activity offline with a phone call. A web designer makes things happen, making goals realized. If you are unable to currently do this, or have no proven success, then you are not a quality web designer.

So how do you become a quality, effective web designer. Like performing at Carnegie Hall, it takes practice, practice, practice. The level of success, refinement and professionalism you obtain will likely be determined by the track you take in obtaining the variety of disciplines. Self-taught or formally educated? I personally believe that it takes a balance of formal education, along with real world experience to become really good.

The following roadmap provides a list of disciplines you should consider obtaining to become a really good web designer.

HTML / XHTML

Yes, with all the WYSIWYG web page authoring tools, such as Dreamweaver, you still need to better understand what’s happening “under the hood.” There are job opportunities today that require thorough knowledge of the mark-up language, as working with content management systems may not provide the WYSIWYG environment for easy content creation and editing. HTML is the foundation of all web pages. It’s a must to learn.

The good news is, HTML and it’s XML sibling XHTML, are really easy to learn and master. I learned HTML back when I first obtained my AOL account. With Windows Notepad and a web browser, I was able to see the content I was marking up change before my very eyes. I would view the source of web sites to view their HTML code, see how they implemented cool presentation of content. And then after that, it was practice, practice, practice.

Web Design

Now, ideally, you’d obtain formal training or a mentorship from another web designer. But foregoing that, there are ways to learn web design. To get the smarts (minus the experience), I’d suggest three books:

  • Web Style Guide: This book, published years ago, is the single best founational book for understanding basic web design. Can’t find the book or being frugal with the purse strings? The book is offered in it’s entirety online.
  • The Principles of Beautiful Web Design: This book provides the foundation for creating compelling web sites. It takes the basics of graphic design theory and translates it in a practical language. Concise yet thorough, it’s a must have. Tip: SitePoint, the publisher offers a PDF download version for $10 off.
  • Learning Web Design: This O’Reilly title is a great encyclopedia of web design. It covers all the basics, HTML, CSS, page layout, site architecture, color, web graphics, etc. Save 34% if you follow the link provided.

If reading is a bore for you, you might try the online training offered by Lynda.com. For $25 a month, you gain unlimited access to online, web-based training for hundreds of products and technologies.

After gaining the smarts, the only way you will become good is to design, design, design. Don’t have any clients with sites to build for. Dummy some up. Build your own personal website. Design for WordPress blogs (takes CSS smarts, read on). Or just visit sites you don’t like and redesign them. Then, visit online forums on web design (Google it) and ask for feedback. It’ll hurt at first, but the rush you’ll eventually receive from people complimenting your web design skills will be well worth the momentary pain. The more design you do, the better you will get. And the more examples of your design you have, the more you’ll have to promote your services with and market your abilities to prospective employers.

Cascading Style Sheets (CSS)

As HTML is the markup for the structure of your content, Cascading Style Sheets (CSS) is the presentation of that content; the layout, the textual formatting, the graphical look & feel.

When CSS first came out, I didn’t get it. Why did I need CSS formatting when my <font> tag did the trick? Microsoft’s promotion of the technology, with it’s placement of content, including overlapping content, just didn’t provide any value to me. However, once I read Jeffrey Zeldman’s Designing with Web Standards, not only did I get it, it all mattered. I’ve since become an evangelist myself for web standards, preaching the good word when I speak to other web professionals.

After taking my CSS skills beyond formatting text and floating sidebars, I became frustrated by browser lack of support and other cross-browser issues. I then stumbled upon Dan Cederholm’s Bulletproof Web Design. If you are still designing old-school, with table-based layouts, you need to check out this book. You’ll never use tables for layout again. You’ll be inspired and motivated to go full-fledged CSS with your web design.

A newly discovered published resource, CSS Mastery – Advanced Web Standards Solutions, by Andy Budd, will take your mastery of CSS to the advanced/expert level. I’ve just picked up this book, after paging through it at my local bookstpore for the past few months. The techniques will resolve any issues you’ve encountered during the learning process.

Tools of the Trade

Now that you have the technical skills down, you need to learn the tools of the trade, the applications used to create web sites and their assets in the real world.

Adobe Dreamweaver

Dreamweaver is used by many web agencies and in-house designers throughout the world. The latest version (CS3) offers unparalleled features to design & develop web pages and manage web sites. While fairly expensive, you can pick up older versions at used software stores, then purchase the latest version via upgrade (make sure you pay attention to the upgrade requirements first). You can also download a limited-time trial version from Adobe. That should get you the necessary experience and exposure. You can obtain training from Lynda.com.

Adobe Photoshop

Photoshop is the king of graphics programs. Photoshop is the most popular graphics program for creating or amnipulating web graphics in the industry. It is a powerful, robust application, and it can carry a steep learning curve, depending on the depth of knowledge you plan to obtain. However, skilled Photoshop gurus are very much in demand. You can also download a limited-time trial version from Adobe.

Besides creating graphics and images for web sites, Photoshop is also used to create mockups of web site designs. Once finalized, these mockups are then sliced up to create the production web site. Make sure you incorporate these skilled in your agenda.

Adobe produces another graphics program, Fireworks, which provides many of the same features as Photoshop.

If you don’t have access or can’t afford Photosho, there’s a few cheaper choices. One product, GIMP, is open source, and FREE. However, it offers many of the same capabilities as Photoshop.

Adobe Illustrator

While not as popular as Photoshop, Illustrator does have a large following and is helpful when designing illustrations and mockups of websites. You can also download a limited-time trial version from Adobe.

So that’s it … right?

Once you’ve gotten good at (X)HTML, CSS, Dreamweaver & Photoshop, that’s it. There’s nothing more to learn and you’re ready for the big time.

Ah, no, sorry, it’s not that easy.

What you’ve mastered is the ability to create static “brochureware” web sites, which have become passe’ since the early 2000’s. What you haven’t included in your arsenal is the ability to create living, breathing, interactive sites, sites that do things, help people when they visit a site. For that, you’ll now need to learn some of the interactive technologies.

Javascript

Yes, I know, you’ve tried to learn that stuff before but it seemed so cryptic. Well, if you haven’t already, it’s time to revisit this technology.

Javascript isn’t that difficult to learn, you just have to give yourself some time to learn it, then use it regularly. There’s many ways to learn, via books, such as JavaScript and Ajax for the Web, or Head First JavaScript, or Beginning JavaScript. You can also try the course on Javascript offered on Lynda.com, taught by the author of JavaScript and Ajax for the Web.

Adobe Flash

Yep, you got to have this skill on your resume today. If not, you’ll lose out on at least 60-70% of the jobs or projects you want.

The good news is the design part of Flash is cool and fun to learn. However, as it is very different from any other technology you’ve learned to date, you’re going to have to take your time. It may take you from 6-12 months to learn, but once you’ve got it, you’re in demand.

There’s another side to Flash, the scripting side. This obviously powerful part of Flash, called Actionscript, is in high demand. Your involvement in Actionscript will likely depend on what your long term career goals are. If you plan to be more of a designer, then learn the solid bascis. If however, you plan to become a developer, you;’ll need to learn Actionscript inside & out. To make matters more complex, there are two current versions, 2.0 & 3.0. Version 2.0 is easier to pick up, but will have a shortly life span, meaning, you’ll have to learn a newer version more sooner than later. Version 3.0 is more powerful and robust, meaning it’s more complex and difficult to learn. You’re best bet is to learn a little about Version 2.0, then be disciplined to learn Version 3.0.

Like the other Adobe products, you can download a free limited time trial of Flash, enough time to focus on learning it. The full-blown version is pretty pricey, but the upgrade path mentioned earlier is a more affordable way to get up to speed.

XML

It’s a good idea to get a solid understanding of XML. It’s used as a transport mechcanism by several other client side and sever side technologies. It’s also the basis for RSS feeds, used by news feed readers, podcasts and the like.

AJAX

You likely use AJAX every day and don’t even realize it. No, I don’t mean doing laundry, I’m talking about Google Maps, Kayak and other mashup type sites.

AJAX stands for “Asynchronous JavaScript and XML” and was coined by web guru Jesse James Garrett as an easier way to explain a method. Therefore, it’s not a technology of it’s own. The good news is if you’ve nailed JavaScript & XML, then you’re already on your way to understanding AJAX.

Basically, in layman’s terms, AJAX allows you to perform more computing within the browser instead of having to make numerous server requests. When options change on a page, the data is alrady there, behind the scenes and can be displayed dynamically via JavaScript.

As with previously mentioned skills, you can get up to speed with AJAX pretty easily. The previously mentioned JavaScript and Ajax for the Web includes a primer on AJAX and Lynda.com offers a AJAX essentials course.

Audio & Video

With the advent of podcasts, videocasts and You Tube, demand for audio and video skills have spiked in demand. I personally don’t think you need to become a videographer or a sound engineer, but you do need a good understandiong of how to best implement these technologies on a web site. As for video, you may be tasked with converting the video to a Flash movie.

There are many resources on both audio & video for the web, both online and off. I will only suggest taking a look at the related courses on Lynda.com.

Okay <sigh>, Anything Else?

Of course, there are several soft-skills that will make you a more well-rounded web designer.

  • Copywriting: It helps to know how to write for the web. Even though you’re a designer, you need to understand what makes sense and what doesn’t with textual content. And if you plan to create a web site that is search engine optimized, you had better master copywriting. A good book for novices is Robert Bly’s The Online Copywriter’s Handbook : Everything You Need to Know to Write Electronic Copy That Sells.
  • Search Engine Optimization (SEO): What’s the point of creating a web site if no one is aware of it or can find it? Learning the basics of SEO will benefit you and your clients greatly. The bible is Search Engine Marketing, Inc.. You can also go with the cheaper and maybe more easily digestible Search Engine Optimization For Dummies.
  • Usability: Do people visit a site you designed, then leave because they weren’t able to do what they came for? Better get some usability smarts under your belt. The best is Steve Krug’s Don’t Make Me Think: A Common Sense Approach to Web Usability. It is witty, engaging, and loads of valuable information.
  • Accessibility: Target just paid out $6 million for the lack of attention to accessibility. You need to be aware and determine the needs for your own projects. The best source is the government’s online site.
  • Design Trends: Still think that grey backgrounds (ala Netscape 1996) are the way to go? Better get up to speed on design trends. One resource that I’ve found valuable is the book The Design of Sites: Patterns for Creating Winning Web Sites.  You’ll also want to pay attention to design and color trends each year & season, to capitalize on what’s hot and what’s not. You can Google for design trends and the year for more, up-to-date information.

Well, that’s about it. Sure, different viewpoint would exclude this and include that, and that’s fine. However, I hope you’ll find my list to be pretty sound for the years to come.

Good luck in your efforts to become a web designer rockstar!

Advertisements

Leave a comment

Filed under Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s