Project Planning & Content Strategy

Back to: Web Design for All Ages

A Guide to Conceptual Planning

Conceptual plans are the blueprints for any design project. Conducted early in the design process, they can include any number of documents and exercises that will be helpful in communicating ideas to all stakeholders and instrumental in insuring a quality end product and user experience. The primary goal for is to map out the project using a user-centered design (UCD) approach. Planning documents should try to be style/design independent, with a focus on the user’s (target audience) experience, goals, & tasks to help determine the best possible presentation structure and content hierarchy.

User-centered design (UCD) or user-driven development (UDD) is a framework of processes (not restricted to interfaces or technologies) in which usability goals, user characteristics, environment, tasks and workflow of a product, service or process are given extensive attention at each stage of the design process. User-centered design can be characterized as a multi-stage problem-solving process that not only requires designers to analyze and envision the way users are likely to consume a product, but also to validate their assumptions with regard to the user behavior in real world tests. These tests are conducted with/without actual users during each stage of the process from requirements, pre-production models and post production, completing a circle of proof back to and ensuring that “development proceeds with the user as the center of focus.

– Wikipedia
Conceptual Planning

Project Planning Considerations

  • Who is the user (target audience) and why are they using/viewing this product (e.g. why are they coming to this site?)
  • What information or content is the user (or viewer) looking for?

Documentation

  • Web Projects:
    • Site Map
    • Wireframes

Exploration

  • Content Strategies
    • Content organizational systems, structures, and hierarchy
    • Content language (nomenclature) and writing styles (high risk? low risk? informal? formal?)
    • Content docs, maps, and matrices
  • Visual Studies:
    • Style Tiles
      • Color Studies
      • Typography Studies
    • Mood Boards
  • List of Potential UI Components and Design Patterns
  • Visual and Technical Tests (as many as needed to help define the visual style)

Ideation

Brainstorm to explore potential interesting solutions, new concepts, and fresh ideas

  • Use a whiteboard
  • Sketch, sketch, sketch (rough sketches using pencil on paper)
  • Draw a mind map
  • Write down project related keywords and potential themes

Site Maps

Site maps are useful tools for when trying to figure out the best overall organizational structures during the early planning stages.

Site maps are not supposed to contain all of the content. Instead, they should communicate the general content structure and top-level hierarchy of information. They should be style independent, with no focus on the visual layout of the content. The focus of site maps should be solely on content structure and organization.

Wireframe Sketches

Prior to hopping behind a computer to produce digital wireframes, there are several helpful analog practices to consider when exploring different content organizational systems, layout options, and design patterns. Example practices include: rough wireframe sketches, “micro” wireframes, content card-sorting and paper cut-out wireframes.

Low-fidelity Wireframes

Low-fidelity wireframes are similar to architect’s blueprints. They are useful tools for when trying to figure out the best interface for users during the early planning stages.

Wireframes are not supposed to dictate the layout or UI. Ideally, they should be style independent, with little or no focus on the visual layout of the content, design patterns, and UI components.

Sample Files:

When creating either low-fidelity wireframes (for UX) or high-fidelity mockups (for UI), there are several free resources available from the design community. For example, Adobe provides several UI Kits for Adobe XD along with several project samples and templates to download. This is one way to learn how to create effective wireframes and mockups.

Adobe UI Kits and Resources

Prototypes

Prototypes are interactive drafts of the final product.

Prototypes are effective tools often times used early in the design process to pre-visualize the final product for testing purposes to get a sense of the overall user experience for the final product. They are especially helpful when testing the usability of different UI components and design patterns and when determining which technologies should be considered for product functionality.

Style Tiles

Style tiles are a visual reference tool typically containing fonts, colors, and User Interface (UI) design elements to help define and explore visual language options for a product or brand.

Style Tiles can either be flat images or interactive. They are designed to explore visual style options early in the design process. The focus of style tiles should be on the overall aesthetic style, via the color palette, typography, and certain design patterns and UI components. Used as a client deliverable and exploration tool, the primary goal is to figure out the visual language of a product that best communicates the essence of a brand.

Elements to consider as part of a style tile:

  • Typography studies
  • Color studies
  • Photography options
  • Illustration and Icon styles

Moodboards & Precedents

Moodboards are an effective tools for discovering and identifying potential visual styles, textures, and components

Moodboards can be analog (e.g. paper cut-outs from magazines) or digital (e.g. screenshots). They can also act as visual bookmarks for sharing and for future reference as sources of inspiration. Consider using third-party tools like Pinterest.

Conclusion

Planning for any design project, regardless of the target medium, can be a challenge because there are so many different design processes and practices to consider. Start with the basics (e.g. brainstorming with pencil and paper sketches) then move on to the core essentials. Time permitting, consider embracing all of the above mentioned practices to help draft the best possible plans for your project before you begin the actual visual design (e.g. UI) phase.