A Guide to Conceptual Project 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 (target audience) 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.
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
- Print Projects:
- Sketches
- Wireframes
- Time-based Projects (Motion Graphics & Video):
- Storyboard
- Story Reel (Animatic)
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
- Style Tiles
- 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.
Content Strategy & Information Architecture
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.
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.
Low Fidelity 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.
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:
Prototypes
Prototypes are interactive drafts of the final product.
Prototypes, especially low-fidelity early/rapid 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.
Low Fidelity Wireframe Interactive Prototype Examples:
- Site Base Multipage Lo-fi Wireframe Prototype Example
- Site Base Multipage with Transitions Lo-fi Wireframe Prototype Example
- Site Base Multipage Dark version with Transitions Lo-fi Wireframe Prototype Example
- Jane Doe Photographer Lo-fi Wireframe Prototype
- John Doe Client Design System Home + About Page Lo-fi Wireframe Prototype Example
- John Doe Single Page Lo-fi Wireframe Prototype Example with Fixed Header and Footer Elements
- John Doe Summer 2019 4 Page Student Site Lo-fi Wireframe Prototype Example
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.
Another Mood Board Example
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.