HTML and CSS Reference
In-Depth Information
Every site has constraints: time, budget, resources, equipment, technology, and so on. What
constraints will you need to work within?
Is your site dependent on any third parties—hosts, content providers, data APIs, and so on—that
might impose limitations?
How will you maintain the site after it's completed? What future additions, updates, or
improvements should you plan for?
The answers to these and other questions form a set of goals and requirements to guide the entire project.
Information Architecture
With requirements in hand, you can turn your attention to mapping out the site's structure, beginning with
the content. Determine what types of content you'll need to present in order to meet the site's goals, and
then organize that content into logical categories. This kind of
information architecture
can be one of the
more challenging steps in any design process, depending on the size and complexity of the website.
For our case study, we're imagining the Power Outfitters website as an e-commerce site with all the usual
trappings: visitors can browse a catalog of products or search for specific items, then add those items to a
virtual shopping cart to make their purchases. That sounds simple enough when it's boiled down to a
single sentence, but it's actually a pretty complex workflow with a lot of variables to consider. Once an item
has been added to the cart, how can a user remove it? When making a purchase, does she enter separate
addresses for billing and shipping? Does she need to register an account on the website, and if so, what's
that process? Once she has an account, what happens if she forgets her password? Every one of these
questions sparks a new scenario that needs to be thought through and mapped out.
You can visualize a site's architecture as a flowchart with connections drawn between the pages to
represent the path a user might take to reach them. Figure 10-1 is an example of such a site map, drawing
out the relationships between different sections of a website. We've greatly simplified this example and a
site as complex as Power Outfitters—if it existed—might have a much more sprawling map for a more
complex architecture, with many more avenues and connections to draw between more tiers of
information. Smaller and less complex sites might consist of just a few pages so their maps could be even
simpler than our illustration.
