Lessons:31Length:4.7 hours

Next lesson playing in 5 seconds


1.2 What is Web Design?

Lesson Notes * Planning Ahead: Ways to Improve Your Web Design Workflow

Transcript Hey guys – Welcome to 30 Days to Your First Website Design, a Tuts+ premium course. I’m Ian Yates and today we’re going to quickly look at planning.

We’re going to start by asking a simple question. “WHAT IS WEB DESIGN?”

The answers’s easy isn’t it. Web design is opening Photoshop, designing something pretty, then building for a web browser. Correct? NO! Of course it isn’t. Web design is this: An iceberg (see, there’s a little penguin there). What you can see (the tip of the iceberg) is the bit we just discussed: the building stage. As you may expect from the obvious metaphor, there’s a great deal of the process (most of it in fact) hidden beneath the surface.

See? That’s your planning. Web design is planning. It’s about knowing your choices, and making decisions. Get those right and you’ll have to spend relatively little time buried in graphics and code. It’s important to realize that there’s very little right or wrong in web design (well, perhaps in obvious cases) but there’s a lot of reaction and opinion. That, in a sense, is where the right and wrong comes from; it’s people’s opinions which dictate how they deal with your site and ultimately its success.

When designing a website, you’re catering for several parties; there’s yourself, then there’s often a client whose business interests you’re representing, then ultimately there are the users. Each of these three have different motives and desires, and it’s your job to see that everyone’s content with the result. It can be awkward, but planning properly will make the process as easy as possible.

During this series we’re going to build a website. A fictional, corporate website, so let’s look at things from now on in relation to that site. The important thing to take away from this first bit is that planning is crucial. Plan big, execute small.

While planning, you need to get to know your website, so ask yourself questions like:

  • What are the site’s goals? Well, for example in our case, we’re building a site on behalf of a small business, a business which wants people to understand what it does and, ultimately, employ its services.
  • Who will use the site? Clients. Existing, new, and prospective clients. People who will potentially employ the services of our fictitious company.
  • What do you expect them to do when they visit? At the very least, go away with the brand firmly embedded in their brains. Perhaps take the message elsewhere and tell someone else about the company. Ideally, we want users to visit the site, gain full awareness of the company, then directly get in touch.
  • What could potentially stand in the way of success? This is a huge topic in itself, but for us, anything which prevents users from understanding what the site is about, being distracted and sent elsewhere, or worse – presenting the company in a negative way. They would get in the way.

You will need to research properly in order to get an accurate answer to these questions, but stay flexible, because you’ll be using a lot of educated assumptions.

It doesn’t matter how you plan, whether you use elaborate flow charts, sketches in a moleskine book, or lipstick on the mirror of the ladies bathroom in a restaurant. Get your ideas and concepts clear, and the build time will be reduced dramatically.

For further reading, check out this awesome Webdesigntuts+ article on project planning. You’ll find the url in the screencast notes. I’m going to be pushing you towards Webdesigntuts+ quite a lot during this series as there’s a ton of content which backs up all of what I’m going to be explaining. If you haven’t visiting the site already, get yourself over there now!

We’re going to look deeper into the planning phase during the next few sections of this series.

Next time on 30 Days to Your First Website Design, we’re going to cover users and Usability. This is Ian Yates, and from all of us here at Tuts+, thanks for listening!