A: "Blueprints" serve as software architecture that allows a developer (or team of developers) to create a website and mobile apps based on a series of "wireframes" that demonstrate the complete functionality of the desired software.
It should be noted that blueprints only serve as a starting point for a complete development cycle, as they represent a form of "Waterfall Development" that is based on a specific planning period followed by a specific development period in which all planned elements are implemented without change or modification to any part of the initial plans. However, software development is more suited for "Agile Development", where shorter chunks of the development timeline are broken down into milestones that are identified, defined, implemented, and refined before the next small set of development milestones is identified, defined, implemented, and refined, and so on as the project grows or is otherwise complete.
Website applications will often show both "frontend" user-facing wireframes as well as "backend" wireframes to show what controls will be provided to administrators charged with operating and moderating the website.
While there are many possible approaches to producing software architecture for a website or mobile app, we have provided a description of one basic method for producing blueprints using fairly common softare:
What you will need:
- Microsoft PowerPoint
- Adobe Photoshop (or any drawing program that can render in PNG or JPG format)
Step-by-Step Instructions (or watch the video below):
- Open Microsoft PowerPoint and create a 'New File'
- Create Slide 1: Give your blueprints a Title Page
- Create Slide 2: Give your blueprints a Table of Contents and make a list of every slide you will create with a brief 1-line description of the primary purpose of each slide
- Create Slide 3: Instructions for accessing the website app from the frontpage, or other instructions for loading the app
- Create Slide 4: Initial dashboard or landing page (the first screen the user will see when the load the app) - describe all functionality on the frontpage, including references to slide numbers for any links that lead to secondary pages with additional information or functionality (for example, a link to "My Account" page would include a reference to the slide where the "My Account" page is defined.
- Create Slide 5: Secondary Page 1 - show the layout and describe all functionality of the first secondary page
- Create Slide 6: Secondary Page 2 - show the layout and describe all functionality of the second secondary page
- Create Slide 7: Secondary Page 2b - you might need additional slides to show deeper functionality, for example: a list view of search results and a detail view of each individual result
- ... and so on.
REMINDER: for most web applications, you will need to define BOTH a "frontend" (user-facing) and a "backend" (administrative) set of blueprints. While these can be included in a single PowerPoint document, it is recommended that separate documents be developed for each.

