10 Steps In Good Web Design
Ian Lurie Mar 15 2007
“It’ll cost $X to build your new site.”, I say.
“WHAT?!”. Your mouth drops open, “Why on earth would it cost that much?!”
Here we go. These are the steps it takes to create a website that will look cool and actually (gasp) help you do business:
Step 0: Why?
Why do you need a site? What do you need to do? Get more leads? Sales? Votes? Look cool? Will search engines be important? If you can’t answer, better wait until you have a strategic plan for your company overall.
Step 1: Audience
Before anything else, you have to figure out who you’re creating your site for. What are the 1-4 questions they’ll have in their heads that, if answered, will mean they’re going to call, buy, or take whatever action they need too?
Step 2: Architecture
Create the site map. The map shows how your site will be structured. It could be fancy and complex, or simple. It could be drawn on a napkin, even. Just so long as it provides a rational structure for your presence.
Step 3: Wireframe
Then show where stuff will go on each page. Think of this as a site map, but for each page (a page map?).
Step 4: Design
Create the pretty stuff. This is what most folks call ‘web site design’. Notice that it’s step 4? A lot of thinking goes into this, making sure that the way the site looks fits the site’s role.
Step 5: Mockup
Take the design and turn it into a set of web page templates that you can view in your web browser. The mockup is the model for the site. It shows how drop downs will work, and how processes like checkout or information requests will look.
Step 6: Test the Mockup
Then test the mockup. Is it standards-compliant? Does it look good in all major browsers? Does it present the most search-friendly and accessible information structure to the internet? This is the chance to test before you build the site.
Note: Almost 100% of clients I meet with skip step 6, and end up going back and rebuilding their site to address one search engine roadblock or another. Trust me, better to get it out of the way now.
Step 7: Add the Tools
If you’re using a content management system, then the developers go to work, adding the mockup templates to the system. If you’re collecting leads, they’ll build the database and code to handle that, too. Finally, they’ll make sure you’re equipped for analytics.
Step 8: Add the Content
Type in the content, lay out each page, and check for spelling errors, etc.. If search engine optimization matters, tweak the content for best keyword richness.
Note: Lots of folks try to slap the content into the site on their own. It rarely goes well. When you’re building the site, every page is a design project in itself. Get someone else to do this job, for the additional pair of eyes if nothing else. Once your site launches and the foundation is set, you can go ahead and do the day to day maintenance.
Step 9: Test, Test, and more Test
Test the site for errors (broken links, crashes and server errors) and bugs (sneaky things that aren’t immediately evident, like, say, your shopping cart not storing the ZIP code on orders).
Then test it again.
And then again.
Launching a few days late because of bugs won’t hurt nearly as much as launching a site that vomits on the first 10,000 people that see it.
There you have it. The basics (and just the basics) for building and launching a site that can really help you grow. Not as easy as it looks, huh?
Ian Lurie is CEO and founder of Portent Inc. He is co-author of the 2nd edition of the Web Marketing All-In-One for Dummies and wrote the sections on SEO, blogging, social media and web analytics. He's recorded training for Lynda.com, writes regularly for the Portent Blog and has been published on AllThingsD, Forbes.com and TechCrunch. And, Ian speaks at conferences around the world, including SearchLove, MozCon, SIC and ad:Tech. Read More
- Do You Use Data To Improve Your Website Design?
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques