Friday, February 4, 2011

What do you use to create a website architecture?

Sure, we can use a simple bulleted list or a mindmap. But, there must be a better, more interactive way. What do you use when starting your website architecture?

  • By "architecture", do you mean the initial site map? If not, please post a clarification and I'll edit my response.

    Our tech team starts development after our creative department has done their stuff. Part of what we get is output from the information architect. He passes off a graphical sitemap, a detailed sitemap as an Excel sheet, and a set of wireframes in a PDF.

    From Danimal
  • From a physical and logical architecture standpoint, nothing beats the whiteboard, drawing up the layers/tiers of the application in boxes. Then create an electronic copy using Visio.

    After that, iteratively dive into each layer and design it using appropriate tools and techniques. Here are what I commonly use:

    1. Database: ERD
    2. Business Objects (and Service Contracts): UML class diagrams
    3. UI: prototypes & wireframes
    4. Workflows and asynchronous operations: flowcharts and sequence diagrams
  • I like to sketch out a design with pen & paper. Seriously. No computer. Layout the home screen, including a navigation bar. From here, think about what you'd like 2nd and 3rd tier pages to look like.

    I've found that this process of writing things out on paper really helps me think about what I want out of the site. Try to come up with templates for a few of the screens. Then create an outline of the content you would like to include.

  • Paper prototyping baby - post-its on a whiteboard (so you can move them around and keep the relationships fluid without having to modify the page ideas themselves). Then of course, once you get down to the nitty-gritty of interface design, 'zoom in' on each of those post-its and use them to represent individual elements. Good for usability testing, avoiding code duplication, clean structures...just about everything. Plus it's cheap and very, very fast.

0 comments:

Post a Comment