The Process of Web Design David Rodriguez. Step 1: Planning

Transcription

1 The Process of Web Design David Rodriguez Step 1: Planning There's a lot of work ahead of you before you actually get to start drawing, coloring, laying out, and generally designing your Website. First, you need the answers to these questions. You will know these answers if you are designing a site for yourself, or your client will know them. You need to know the answers to these: What is your goal with this site? Are you trying to sell something? Deliver a message? Share information? Keep in touch? Etc. Who are your site's visitors? In other words, who is your target audience? This can sometimes be as vague as, "students" or as specific as "restaurant review publication advertisers." What do you want your visitors to do? Usually, if you're getting visitors to your site, you want them to actually do something. Some answers to this question could be, "buy a product," "sign up for a newsletter," or "learn how to build better Websites." This is an important question; make sure you have a good, clear answer for it. Why should they do it? Look at this site from the viewer's perspective. Why should they be interested in your site? What's in it for them? If you or your client don't have clear answers for the above questions, it's time to do some research. Find some of your customers and get these answers or make some calls. Visit other sites that are similar to yours in idea and find out what kind of crowd they're drawing. If this is the type of crowd you'll be working with, then you'll have some answers. Once you have good, clear answers to all of these questions, you can start building content for your site and start making some actual design decisions. With just these answers, you can determine the basics, like: Color Layout Font family Font size Colors? Layouts? Fonts? Ah, here we go; this is starting to sound more like Web design! If you know, for example, that your goal is to provide wildlife safety tips to new campers, you will want a layout that allows you to provide clear, readable text. Because your tips will come mostly in the form of text and illustrations, you'll want plenty of body space and a font that looks good on screen and spaced well with CSS (Arial is a good default for something like this). Since

2 you're dealing with wildlife-related material, your colors might mimic those of the woods, with deep greens, sandy and earthen tones, and dark wood colors. But don't jump the gun and open Photoshop just yet! You're still not quite ready to start drawing and coloring. Next, you want to build the content of your site. Step 2: Content Building There's a phrase that's often thrown around in the Web development world: "content is king." This is true for most Websites out there. Most Websites want to be found and one key way sites are discovered is through search queries. Search engines frequently "spider" their database of Websites for new, clear, up-to-date, and original content, and Websites that have good content are rewarded with higher ranking and thus they are found more often. It's no wonder, then, that content building is such an important step in Web design. With the answers you got from Step 1: Planning, you should know what kind of content you will want to start building. If your goal is to sell music and electronics, and your target audience is college students looking to buy things like ipods and digital cameras, then you'll want to write some content that's light-hearted, down-to-earth, and to the point while still building on the popular "lifestyle" trend that sells gadgets like these so well. Or, as another example, if your target audience is a group of professionals in the medical research field and your goal is to pose challenging new ideas for collaboration or discussion, you'll want to write content that comes off as something of a technical blog. Ultimately, though, the most important thing you want to do in this step is get all your ideas for content down on paper or in a text file. You don't need to write the ads for your music and electronics right now, for example, and of course you wouldn't want to spend the time in this step to write a long medical journal entry. For now, it's enough just to get all of your content down in shorthand. Just be sure you get it all. Once you have all your content in a place where you can look at it, you'll want to build your sitemap. This is the final step before you actually start designing the site. You can use a computer program to draw your sitemap like I did below, but most of the time a pencil and paper works best for this part. Let's take a look at a small sample sitemap for the music and electronics store we talked about earlier.

3 Here we can see that our homepage links to four other pages: Store Locations, Music, Electronics, and Contact Us. The Music and Electronics pages each link to different subsections. The Music page lets you choose a genre of music to buy, and the Electronics page lets you browse through different gadgets. When designing your sitemap, it's important to remember the 3-click rule. Simply, the 3-click rule states that a visitor should never have to click more than three times on your site to do anything. In our sample sitemap, we can see that if a visitor wanted to get our other store locations, they would just need 1 click on the homepage. Or, if they wanted to browse through rock music to buy, they would just need to click Music on the homepage, then Rock on the Music page. Just 2 clicks. While building your sitemap, you should make sure that every box (or page) on the sitemap will hold some of the content you outlined earlier. All of your content should have a place on your site, and you need to be able to visually see on what pages you'll put each bit of your content. And now that we have our planning and content building done, let's get designing! Step 3: Design Many designers make the mistake of skipping steps 1 and 2, jumping instead right here to Step 3: Design. But if you got here after having done the necessary work beforehand, then you're on the right track! In Step 1: Planning, you probably already got a good idea about what types of layouts and design you want to use. Let your creativity flow here. Remember, there are multiple layouts you will probably need for your design. You'll want a layout for your homepage, which, according to your sitemap, will just contain some introductory information or highlights, some links, and, depending on your goals, maybe some exciting imagery. You'll also want a layout for your transitional pages. Transitional pages are pages that just shuttle the user to more important things. In the sample sitemap above, the Music and Electronics pages are just transitional pages. The Music page would be small, and contain links to the different genres of music below (Country, Hip Hop, Classical, and Rock). The Electronics page would also be small, and just contain small bits of information while it links to the more important stuff, like the DVD Players, TVs, MP3 Players, and Digital Cameras pages. Transitional page layouts

4 should match the whole site, but also be simple so users can spend as little time on them as possible. You probably don't want to hear this, but even at this point, you might consider leaving Photoshop closed for a bit. Instead, try drawing several layouts for your site on paper first. It's a good idea to build multiple layouts just to see how they "feel" with the site you're building, and using Photoshop to build lots of layouts that you might not even use is time consuming. It's much faster to draw some quick and dirty layouts on paper to get a rough feel for which way you want to go with the design. By this point, you probably have a twitchy trigger finger right about now when it comes to firing your design gun. But take it slow. Here's something to consider about design. Did you know that Apple, the company behind the designs of the wildly successful iphone, ipod, and imac computers and Macbooks, uses a design process they call "10-3-1?" It's true; at the 2008 South By Southwest Interactive Festival, I attended a presentation by Michael Lopp, Apple's senior engineering manager, where he revealed this small little bit of information to a packed room filled with designers. Here's how it works. Apple designers must adhere to the rule, where designers first give themselves plenty of creative freedom and come up with 10 good, wholesome designs for something. This could be for a site or a product, among other things. Then, after coming up with 10 good designs, they must go through the painful and often difficult task of eliminating 7 of them, leaving them with 3 really good designs to work with. Then, the Apple designers will spend some months on these 3 designs improving them and bringing them up to Apple's game. Finally, after all this work, the designers must again eliminate 2 of the designs, until they're left with just 1 powerful design which gets the final work done and is given the well-known Apple brand and polish. In recent years this type of thinking has been very good to Apple, and their designs have met with some big success. If you want your designs to be successful as well, then it's here in this step, Step 3: Design, that you should take the time before opening Photoshop to really plan out your design, taking into account everything you learned from Step 1 and knowing what the site will flow like from Step 2. Make sure you finalize your design. Once you have your design ready, there's no going back. Step 4: Development If you've finalized your design (either to yourself or with your client), then you can begin developing the site. Depending on how you want the site to work, this could involve such complexities as PHP and MySQL backend programming, or it could just be as simple as some basic HTML and CSS. Either way, this step involves the actual coding of the site.

5 Some designers are solely designers and deal with only the basics of XHTML and CSS, opting to work with a partner or hire someone to do the coding of a site. Other designers know the development and coding side just as well as the design side, but these designers aren't altogether too common. Either way, we won't go into the development of the site here. For the purposes of this article, it's enough to say that this is the final step, after the design is done, in the creation of a Website. So, as you can see... So, as you can see, actually designing a Website comes almost completely last in the process of Web design. If you want your designs to be successful, you will take the necessary steps to work up to the design. It's easy to work with the mindset of, "I'd like to get this design done so I can add it to my portfolio." Yes, your portfolio is an important part of being a Web designer. But it's also key to produce a product that actually works for your clients (and for yourself). If your work is high quality and successful, then you can expect a great deal of success for yourself, as well.