Foundational web design skills

There are so many different aspects to web design that it hard to really have a “foundational” skill set. It is good to know how to program and make a page look pretty, but I think that is missing the purpose of this medium.

Websites are really design, marketing, branding, advertising, analytics, and sales all wrapped into one. The more you know about those different areas - the better.

I broke the list down into two main areas - one being more technical, while the other being more business-oriented. There is a great deal of information about each topic on the internet, so I won’t spend too much time on each point. If you hate wikipedia, I am sorry for providing the references. I think it is a great launching pad to learn about new topics and subject matter.

Here we go!

Technical/Design skills

HTML and CSS semantic coding Being able to hand code your sites and know the basic rules of how to mark up code semantically is a must for good web design. Good employers will look at your source code and see your naming conventions and how you structure your site. Don’t be sloppy are or become dependent on WYSIWYG editors.  Just do a search on learning html and CSS to find a ton of sites to get learn more.

Before I work with other web designers, I always look at their sites’ code to see how good of a web designer they are. This helps understand their skillset and how you should talk to them. DIVs are great, but if you send them a page to put on their site with DIV layouts, there will be a lot of problems if they do most of their formatting in tables.

Design  for the browser screen size

When you are using your favorite graphics editor like Photoshop/InDesign/GIMP, realize that because people have a 1024x768 monitor resolution doesn’t mean that is what your document size should be.

The chrome (gray area) on the browser window takes up a lot of space, so make sure to accommodate for that.  I usually take off about 135 px from my height to find the true fold line. You can make the page taller, but make sure you know what is above & below the fold.

CSS reset files

If you have tested your designs much with different browsers (which you should ALWAYS be doing), you realize that there are differences with the way browsers render files. The best way to “reset” all browsers is using a CSS reset file. The biggest problems stem from the padding and margin rules, but a good reset file has a lot more elements. I attach it seperately from the rest of my CSS to keep it encapsulated and reusable. A good one to include is the YUI reset file.  Sites to learn from

Photoshop/Illustrator/Dreamweaver/Text Editor (Applications)

Duh. You need to know the software to be able to design them, but I thought I would need to throw it in for completeness.

These are difficult programs to master. I have been using them for awhile, and I am always on the lookout for new techniques or features that I don’t know well enough.

While we are on the topic of Dreamweaver, it can be very difficult at times to work with it, especially when working with dynamic content like PHP or ASP.net. I find myself working mostly in Notepad++ and then with the Firebug plugin for Firefox for anything database oriented. There are a slew of other tools to use to help as well.

Design Skills

Always be developing your artistic skills along with the technical side. You don’t want to turn into a programmer! Take a life drawing class or acrylic painting. It doesn’t have to be in front of a monitor.

There are a lot of different forms of  web design as well that could classify as design skills. User experience (UX), usability, information architecture, and accessibility are some of the more prominent areas that get a lot of attention.

Search Engine Optimization/Marketing (SEO)

This is one of those words that everyone likes to talk about and say how this will make their company/business so much more successful. It is very important, but not a panacea like some books tout. Organic searches is really what you are shooting for in terms of benefits, so doing things like submitting sitemaps, adding alt text, or web content that search engines can digest better is always good. Search Engine Watch site

The other side of SEO is pay per click(PPC), which is entirely based off your wallet size and competition.

Copywriting skills

You need to know how to write. Not just write, but making sure to take out the fluff any non-essential information. As Jakob Nielson likes to ask, “How do people read online?”.

His answer is…they don’t!

Most people don’t like reading on the internet, so you need to be as concise as possible when doing most things (informational content can be longer). Letting go of the words is a good book that has helped me.

You aren’t a copywriter, but a lot of customers that want websites don’t know what to say for copy. They can talk about what they want, but that is about all they know on how to present it.

I still need to learn a lot in this area.

Cross-browser coding

Design your sites for a standards-friendly browser such as Firefox 3, Google Chrome, or Opera. Then try it out on IE 7 to see what you need to change.  Download a program like multiple IEs to test older versions of IE (I mostly just test for 6). You can always use conditional statements statements in your code to fix any problems. I figure if I can cover over 85% of browsers, I am doing pretty good.

Internet Explorer only made it to version 5 for Macs, so they have a more of a problem. Neglecting IE is incomprehendable as a web designer, so you have no other choice but to get a virtual machine like parallels. Safari alone just isn’t good enough!

Javascript libraries

HTML and CSS are nice, but adding some functionality and pizaaz always pleases the crowd. There is a growing number of javascript libraries out there for people to use. Some of the more well known ones are jQuery, MooTools, Spry, and Prototype.

They are mostly designed for designers, not programmers - so picking it up isn’t too difficult.  If you have some knowledge in programming you can do more customizing. I don’t know that much about it, but it can get pretty hard with some of the stuff the files do with the document object model (DOM).

a little PHP or other server-side programming

You don’t have to be a master programmer, but the more programming you know doesn’t hurt. It is painful to learn new concepts sometimes, but the amount of time it can save you should not be underestimated.

Certain little things like PHP contact form or knowing about require() methods in PHP can really make your site look more professional. There are other solutions, but I think PHP is the best for budget designers (all free).

Web Standards

Websites are changing constantly, but there are some web standards that are pretty rooted into most people’s minds. Things like underlined links are thought to take you somewhere else.

Did you try to click that link? It isn’t one. Just colored underlined text.

Ha, I fooled you! - but you probably aren’t too happy if I fooled you.

As a web designer, you want to avoid doing things that make people confused on what to do. There are a lot of web design patterns to read up on.

Web Analytics

This isnt’ something that gets said very much in the web design community, but it is probably one of the most important aspects to learning about your customers. Just knowing how many people come to your website isn’t good enough. The real questions are “why” they are coming to my site, or “what” am I doing wrong or right.

By looking at the clickstream data or setting up surveys, you can find a lot about people and improve the website to make them happy!

Debating skills

Just because you spent a huge amount of time on a design, doesn’t mean the client/boss/supervisor is going to think the same. Debating about subjective design elements is difficult - but important.

The best thing to do is explain WHY you chose how the design looked.

Most people don’t realize the complex nature of piecing together web designs and organizing all of the content so it can be easily understood.

Be prepared for a good logical “comeback” that you can’t wiggle out of. If the deadline is close, you will probably have to suck it up and do the change.

You can then later do research to see if that was a good choice. The web is all about learning about how and why people do things. Any research or usability test findings should always take precedence over subjective opinions and views.

Learn as much as you can and use that as ammunition.

Team-player

Even though we are on the computer most of the day, it is necessary to interact with people sometimes. Having that meeting about a new feature, or checking up on IT to make sure things are going smoothly. If one are is lacking, it is good to make an effort to see if you can help.

It is great if you do your job well, but if you know a project or deadline is going to be tight because of someone in the process, you need to vocalize your concern.

You don’t need to scream at anybody, but be realistic on what can be done NOW to solve the problem. Don’t get mad and just talk bad about “the slacker” to someone else. That won’t make the project/job get done any faster.

Most people don’t do it, but it is really necessary to make sure job gets done smoothly and on time.

Thirst for knowledge

The web is always changing, so if you aren’t constantly improving your skills, sites, designs - you are falling behind.

There are so many books and resources to increase your skills. Read blogs or see if you can borrow a book from IT or the library. A lot of work places love people that are proactive about learning, so they might even buy your stuff for you!

You have to set time aside to learn a little bit everyday. It all adds up.

Able to take criticsm

Web design is hard. You are practically a monkey that does what someone else says. They pay you to make it look like what they want. They won’t be happy any other way.

Most of my designs go through about 5-9 revisions before they are good enough - that doesn’t go down with experience either.

If you are doing a site for your cousin or relative, sure it probably won’t take that many revisions - but they probably won’t be paying that much either.

The older I get, the more I see that design is really about communication. If you ask a ton of questions and constantly engage them about all aspects of the design, things will go smoother. Everyone will be happier in the end as well.

Most people can’t visualize or see the tiny details we can. You have to point those things out and let them decide what they want. They still sometimes change their mind when they see it, but that is just part of the business.

Conclusion

It isn’t that any one of these things are that difficult by themselves - but it takes time to develop and mesh them all together with how you work and think. I still have a huge amount to learn in this whole process, but I think I am getting closer.

It is impossible to be a master in all of these areas. There are probably even more areas that I haven’t covered in this post, but that just emphasizes the complexity of our jobs. They all change throughout time.

Many larger companies have people specializing in each area, so they can be excellent at the topic. Most designers have to put on a multiple hats when they do their jobs. Doing things the best way takes a lot of time.