After someone had asked for help in building a website, and giving me a list of tasks she had to accomplish with the new website, I realized there are a millions of tutorials on how to write code - XHTML, CSS, XML, JavaScript, PHP, ActionScript, ASP, ColdFusion, etc - tons of tutorials on all the favorite graphics and web editing programs, like Photoshop, Illustrator, Dreamweaver, Flash, the works, but just not a whole lot of information on the other work involved in building a website.

Say you’ve been tasked with building a website. You might know some basic HTML already, and are probably a little handy with Photoshop, enough to make some basic graphics. But where do you begin? What do you do first? How do you get your website ranked high on the search engines? How do you know what style to make the website? What features are necessary and what should be left out?

This series of articles will aim to help out in clarifying the dizzying number of questions you need answered. When you are through with these articles you will know where to begin and how to tackle your design project so it gets completed on time, and on budget. Oh, and it should be a lot more successful, too!

Part 1: Planning

The first, and most important step in building a website is PLANNING. More important than a creative design, more important than standards-compliant coding, planning is the one thing that will let you start off on the right foot and ensure that the project is actually going in the correct direction. Rookie designers love to just jump right into Photoshop and start throwing layers and gradients around. But without proper planning, you might end up submitting design after design to the client and never getting approval. And in the end, the site could be a real flop.

So where do you start? Like any design project, not just web design, you should start with identifying your goals; what the website will actually do. Everything you do for the website will then be built around those goals. This will give you focus, and will help eliminate arbitrary design requests. Bottom-line is, if it’s not about accomplishing those specific goals, throw it out the window.

After you identify goals, start identifying important details. Here’s a list that may or may not be complete for your specific web site design project. Careful analysis and brainstorming will be required to determine what other questions you need answered.

1. What user group is being served?
2. If there are multiple user groups, does each experience need to be completely separate?
3. How will the user group affect technology/design?
4. Is one user group more important than another?
5. Are there branding guidelines?
6. Does this design project need to be unified with any other design projects?
7. Does the design need to be flexible?
8. Will the site have any technical requirements/constraints (shopping cart, CMS, etc.)?
9. How can we determine those requirements/constraints?
10. Is there web hosting?
11. What programming languages will the site be written in?
12. Will it be static or dynamic?
13. Will you be working with any other designers/vendors for photography/illustration/etc.?
14. Who’s constructing the sitemap/information architecture?
15. What’s the marketing plan?
16. Will the site need a high level of Search Engine Optimization?

This is a list I just pulled off the top of my head. Your project might have other issues which research might uncover. Getting started answering these questions will give you lots of infomation and will direct you in the right path to building your website.

Stay tuned for the next article!

ShareThis

A good industrial designer friend of mine (good designer, good friend) once told me that design is a moral obligation. I believe that’s a very accurate way to describe the feelings us designers have. You know those feelings. The feelings you get when you see poorly-set type on the side of a van or on a storefront sign. You have those feelings when a non-profit asks you to make a website for them and they give you terrible logos and materials to work with. You get the feeling when you see anything at all that just isn’t quite made right; it’s poorly put together, the color is off, the pattern is ugly, it’s not anti-aliased, it has lens-flare, it’s loaded with drop shadows, bevels and every other Photoshop effect the creator has just discovered. The transparent gif has a halo; there are way too many animated gifs on the page. High rez photos were resized in HTML rather than being properly compressed. You know the feeling. It’s a tug, deep within; it’s everything a designer can do to keep from yelling out: STOP USING COMIC SANS!!!

As designers, we have to fix things. We can’t stand to watch poor design execution. It’s something we can’t control. We have no choice - it’s just completely inappropriate to live in a world where people can just ALLOW that horrible design to exist! It’s just not right!

What’s with us? Why does it bother us so much? Why must every design be perfect? Why can’t we allow people to use disposable cameras? Why must everything look pristinely crafted? Why not just let sleeping dogs lie?

The answer is, it’s our duty. That’s why we became designers. We know the industry is competitive. We know there are jobs that pay better and have better hours. But we don’t care. We were born to be designers. We have to design! It’s our job; our purpose! Being a designer is not an occupation; it’s a life-long pursuit! That’s why all the charity and pro bono cases pile up on our desks; that’s why we break design budgets. It has to be perfect! Nobody gets sub-par design!

Irony of ironies that we’re never satisfied with our work, either.

But that’s another article.

ShareThis

I just encountered an odd bug for the first time! Internet Explorer is always throwing odd CSS interpretation bugs at me, but I haven’t encountered a new one (to me) for a long time! This one is a real hoot.

When you have an absolutely positioned element inside - the child of - a relatively positioned element, the absolutely positioned will be positioned from the top left corner at zero-zero by default. If you set, for example, the absolute positioning to be top: 100px; left: 275px;, the element will be positioned 100 pixels down from the top, and 275 pixels over to the right, from the left-most edge of the element.

IE7 and IE6 both throw an odd monkey wrench into this, however, if the relatively positioned parent element has text-align: center; or text-align: right set on it, (even as an inherited property). Theoretically, having the parent element with a text-align value set on it should make no difference how the child element is positioned. Alignment should have nothing to do with absolute positioning.

What do IE7 and IE6 do? Well, if you’re parent element has a property of text-align: center, the positioning will occur from the center of the element! So if your parent - relatively positioned - element is 400 pixels wide, and has text-align:center; on it, and the child - absolutely positioned - element is set to be left: 200px, it will actually be 400 pixels from the left, since IE is only starting the positioning from the center!

Weird.

The fix? Make sure text-align is set to left.

ShareThis