The Design Guide + Templates (DGT) project requires you to demonstrate your growing design prowess with BootstrapStudio by constructing specifications & templates for consideration by the class as the standard by which the Web Project will be designed. This DGT project is challenging because it requires you to harness the capabilities of the BootstrapStudio design package in service to a specific design project.
Your submission will be anchored by a memo. Note that the first submission for the DGT is the final submission.
For the full specifications, see Submission Requirements.
This project offers an opportunity to link your growing knowledge of web design with a specific project and a specific design tool. Because this is the final individual project for the semester, it represents an opportunity to reflect on what you have learned so far, and to determine how best to apply that knowledge.
Before you begin constructing your own templates, you'll invest some research time into examining sites that serve similar purposes. The idea here is not to emulate the designs you discover, but to observe how such sites are constructed architecturally, how content is curated for site visitors, and what kind of aesthetics typically define the sense of professionalism for such spaces.
When you begin constructing templates, you'll focus on harnessing the capabilities of BootstrapStudio to bring your vision to life. One of the most effective ways to present a style sheet is in the designated design rather than as a table of specifications presented as text. Thus, by the end you'll have a template that communicates your design specs in a layout that makes immediately visible the way those specs present.
Deliverables: memo, page templates
Document scope: 250 words (memo), 2 to 3 template pages
Project value: 200 points
Evaluation rubric: _Eval_DesignGuide+Templates.pdf
Recommended tool(s): Microsoft Word (memo); Google Doc (notes); BootstrapStudio (templates)
The DGT requires you to design page templates for 2 to 3 pages of a web site using BootstrapStudio. Your design proposal (which is essentially what this project becomes in context) should focus on sites like the one your Web Project client needs you to build. Although you'll construct the Web Project as a team, this assignment is your opportunity to consider how you would plan to complete that client project if you were working individually. During the next project phase, your project team will assemble a template and wireframe that draws on the best/most appropriate design specs from among the team's efforts.
Before you begin creating, you'll research web spaces that provide similar content to the one you need to construct so you can determine heuristics for how such sites are built. Identify 3 to 5 sites that offer similar content to what you think you'll design.
Open a Google Doc to gather your observations. Keep notes on the patterns you observe. Capture screen shots of whole pages or of page components for later reference and to showcase the designs you observe. Impose a strong sense of order on your notes. Make sure that anyone with the link can view your document.
Using BootstrapStudio, design a site prototype. Include templates for the following 2 to 3 kinds of pages.
Example. A commerce site for computer sales presents product details on product-specific pages.
Example. That commerce site for computer sales is served by secondary pages such as shopping carts, return policies, or personal shopping histories.
Consider how specific content types will be presented on your pages. Include specifications for the following kinds of content.
Finally, establish a color palate for your design proposal.
Populate your pages with placeholder text (e.g., lorem ipsum) and stock images that are formatted to meet the design specs you establish for your site design. Whenever appropriate, label content to make clear what it is (if that is not already obvious).
Example. Use the text Level 1 Heading to designate a level 1 heading. Display it in the specifications for that content style.
Use the publishing capabilities embedded in your BootstrapStudio subscription to publish your site prototype. Note that you can unpublish the site at the conclusion of the course. However, for now, this mechanism is the easiest way to share your prototype with teammates and with me.
Link to BootstrapStudio instructions for publishing:
[https://bootstrapstudio.io/docs/publishing-your-site.html]
A memo of transmittal introduces the accompanying document(s) to its audience(s). Your memo should be addressed from you to me, and should report on your progress with the accompanying project. Your memo should incorporate the following content elements.
This section is designed to help you be strategic in the development of your project components. Consider the following hints and tips. Use this set of recommendations as a checklist for quality control.
If you follow the research and design processes embedded in this assignment, you'll already be focused on essential elements of web design. Engage consciously and conscientiously, and you will become more aware of your own design practice.
Approach this project as a design strategist. Consider how audience needs and expectations for documents of this type, and how all of the design components coordinate and complement one another.
Remind yourself of the team's design goals and principles that you assembled together during the workshop with that focus. While linking those goals and principles with this work, you may notice things that you did not think to consider during that workshop. If that happens, note those gaps so your team might add new elements to its value posters.
The revisions and refinements you make as you prepare your submission may help you understand your design process, and therefore your professional development in more-sophisticated ways. Archive your prototype of this project and of your final submission when it is ready, so you are able to examine your growth and maturation as you progress through the program you are in.
Read and attend carefully to these submission guidelines. Failure to do so may result in points lost on the final evaluation of your project.
Create a project folder inside your shared class folder on Dropbox.com. Remember, I can only view files that you place inside the shared folder. Until you place files in that space, you have not in practice submitted them.
Name the folder Design Guide + Templates.
Your only submission file is the project memo. Model your filename on the example listed here:
Note. Do not share the individual file with me. By placing it in your project folder, you have already shared it by default.
The project submission is worth 200 possible points. You will earn points according to the standard described on the policies page (see Policies for a description of these categories).
The specific areas of emphasis for the DGT project are drawn from this description and our discussions of the project (including any supporting teaching materials that I provide to you along the way). Review the project rubric (_Eval_DesignGuide+Templates.pdf) for the specific qualities and characteristics emphasized in each evaluation category.
Remember that I will only post the point values for projects on the Grades page in SVSU Canvas. I will provide the supporting details relevant to that evaluation in your class folder in a project-specific file. Look for a Microsoft Word file in your shared class space on Dropbox with a filename that that follows this pattern:
YourLastName_Eval_DesignGuide+Templates.docx.
This material has evolved over many years of teaching & research, and is protected by U.S. copyright laws.
If you are here because of random chance, or because this content came up in a search, then please feel free to explore the site. If you are a teacher or other professional in any context who would like to use any of my course content in your work, I grant you permission to do so with the following limitations.