{"id":958,"date":"2021-03-17T19:23:35","date_gmt":"2021-03-17T23:23:35","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/?page_id=958"},"modified":"2021-04-08T10:54:14","modified_gmt":"2021-04-08T14:54:14","slug":"midterm-project","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/midterm-project\/","title":{"rendered":"Midterm Project"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>The midterm project is a presentation on what you will be doing for your final project. It will involve the following pieces<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Presentation<\/strong>: you will present your project to the class over Zoom. <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/projects\/midterm-project\/submitting-the-midterm\/\" data-type=\"post\" data-id=\"1093\">Click here to schedule a presentation time<\/a><\/li><li><strong>Project Brief<\/strong>: A post on our Class Site that give some details about the project and links to your presentation files and visualizations<\/li><li><strong>Site Visualizations<\/strong><ol><li>Site map<\/li><li>Wireframe<\/li><li>Style Tile<\/li><\/ol><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Due Date<\/h3>\n\n\n\n<p>In order to give people time to prepare and for me to give some feedback on your ideas, the due date is:<\/p>\n\n\n\n<p><strong>Monday, April <\/strong>12<\/p>\n\n\n\n<p>We will do in-class presentations staring on Monday, April 12 and probably continue them on other days because we will combine the presentations with other material.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Submitting the Midterm<\/h4>\n\n\n\n<p>This page has more information on how to submit the midterm and schedule your presentation time. View <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/projects\/midterm-project\/submitting-the-midterm\/\" data-type=\"post\" data-id=\"1093\">Submitting the Midterm<\/a> post.<\/p>\n\n\n\n<div class=\"alignfull wp-block-ugb-container ugb-container ugb-e32e33b ugb-container--v2 ugb-container--design-basic ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-container__wrapper ugb-e32e33b-wrapper\"><div class=\"ugb-container__side\"><div class=\"ugb-container__content-wrapper ugb-e32e33b-content-wrapper\">\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-9a9425b ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h4 class=\"ugb-accordion__title\">Midterm Project Thoughts Class Recording<\/h4><svg viewbox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<p>Intro to midterm and some thoughts on they types of projects you might choose.<\/p>\n\n\n\n<figure class=\"wp-block-video alignfull\"><video controls src=\"https:\/\/www.dropbox.com\/s\/983y48v80ee3xn4\/Class-3.8.21-Midterm.mp4?raw=1\"><\/video><\/figure>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-b03fd98 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h4 class=\"ugb-accordion__title\">Midterm Initial Questions Class Recording<\/h4><svg viewbox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<p>From 3\/8 class we debrief a group exercise and answer some questions about the midterm.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.dropbox.com\/s\/5cw079qmtu6pji9\/Class-3.8.21-Midterm-Questions.mp4?raw=1\"><\/video><\/figure>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Presentation<\/h2>\n\n\n\n<p>You can use a presentation software that you&#8217;re comfortable with. This could include<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>PowerPoint \/ Keynote<\/li><li>Prezi<\/li><li>Miro<\/li><li>Another platform<\/li><\/ul>\n\n\n\n<p>When giving the presentation you will<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Answer the same questions that are in the Project Brief<\/li><li>Show the site visualizations and explain them<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Project Brief<\/h2>\n\n\n\n<p>This document helps answer fundamental questions.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Name<\/strong>: what is the name of your project?<\/li><li><strong>Client Goals<\/strong>: what are the client&#8217;s goals in creating the site (you may be the client if it is for you)<\/li><li><strong>Audience\/Users: <\/strong>who will visit your site?<\/li><li><strong>User Goals<\/strong>: why would someone visit your site? What do they want to accomplish\/learn\/read\/see\/hear that your site will help them do?<\/li><li><strong>Look and Feel<\/strong>: in general terms describe the visual design and interaction design of the site. <\/li><li><strong>Content<\/strong>: What content will be on the site? <ul><li><strong>Content Creation<\/strong>: Who will make the content on the site? Where will you get it? Do you have permission\/agreement from content creators that are not you?<\/li><li><strong>API and Data<\/strong>: will your site use APIs or data from another site (Google Maps, Weather API data, <a rel=\"noreferrer noopener\" href=\"https:\/\/opendata.cityofnewyork.us\/\" target=\"_blank\">NYC OpenData<\/a>)<\/li><\/ul><\/li><li><strong>Research<\/strong>: What are some similar sites? How will you site be similar to those? How will it be different?<\/li><\/ul>\n\n\n\n<p>Later I will give some examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Site Visualizations<\/h2>\n\n\n\n<p>You will create three visualizations for your site. <\/p>\n\n\n\n<p>Examples on this <a href=\"https:\/\/miro.com\/app\/board\/o9J_lOtOHuI=\/\" target=\"_blank\" rel=\"noreferrer noopener\">Miro Site Visualizations Board<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Site map<\/li><li>Wireframe (low or high fidelity, mockups also accepted)<\/li><li>Style Tile<\/li><\/ol>\n\n\n\n<p>We go over these in more detail in class using the Miro board from above.<\/p>\n\n\n\n<div class=\"alignfull wp-block-ugb-container ugb-container ugb-3fe70a1 ugb-container--v2 ugb-container--design-basic ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-container__wrapper ugb-3fe70a1-wrapper\"><div class=\"ugb-container__side\"><div class=\"ugb-container__content-wrapper ugb-3fe70a1-content-wrapper\">\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-da14b58 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h4 class=\"ugb-accordion__title\">Midterm Visualizations Class Recordings<\/h4><svg viewbox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<p>In class on 3\/17 when we talked about sitemaps, wireframes and style tiles.<\/p>\n\n\n\n<figure class=\"wp-block-video alignfull\"><video controls src=\"https:\/\/www.dropbox.com\/s\/0trdyc2ig9qe33m\/Class-3.17.21-Midterm-Visualizations.mp4?raw=1\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-eb45297 ugb-divider--v2 ugb-divider--design-basic ugb-main-block\"><style>.ugb-eb45297 hr.ugb-divider__hr{margin-left:auto !important;margin-right:auto !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<p>In this video, also from 3\/17, we go over Sketch vs Wireframe vs Mockup and talk more about low fidelity vs high fidelity mockups. Using the <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/midterm-project\/\">Midterm post<\/a> we talk about the Project Brief. We also talk about tools for making the visualizations including Adobe XD, Figma and Miro.<\/p>\n\n\n\n<figure class=\"wp-block-video alignfull\"><video controls src=\"https:\/\/www.dropbox.com\/s\/jfw5ve4rvk0vm2u\/GMT20210318-010622_MMP-350-Sp_2560x1440.mp4?raw=1\"><\/video><\/figure>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Midterm Grading Rubric<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">PRESENTATION &#8211; 30% of Overall<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Presentation Graded Areas<\/td><td>% of Overall Grade<\/td><\/tr><tr><td><strong>Content<\/strong><br>(did you present all of the information:<br>&#8211; Project Brief: summarize the info in your project brief<br>&#8211; Site Visualizations: show and explain sitemap, wireframe and Style Tile<\/td><td>15%<\/td><\/tr><tr><td>Clarity of Presentation<\/td><td>15%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">PROJECT BRIEF: 35% of overall <\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Presentation Graded Areas<\/td><td>% of Overall Grade<\/td><\/tr><tr><td><strong>Content<\/strong><br>Information included for all content areas<br>&#8211; Project Name<br>&#8211; Client Goals (your goals)<br>&#8211; Audience\/Users<br>&#8211; User Goals<br>&#8211; Look and Feel<br>&#8211; Content<br>&#8211; Research<\/td><td>15%<\/td><\/tr><tr><td><strong>Clarity of Brief<\/strong><br>This has to do with the quality of the information and the presentation. I will look for clear answers to the questions, titles for each section, references to your site visualizations and links to other web sites.<\/td><td>20%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">SITE VISUALIZATIONS: 35% of overall <\/h3>\n\n\n\n<p>See examples immediately following the rubric<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Presentation Graded Areas<\/strong><\/td><td><strong>% of Overall Grade<\/strong><\/td><\/tr><tr><td><strong>Site Map<\/strong><br>A site map that has a rectangle for each page of the site. If a section of the site has more than 3 similar pages or will allow for search\/sort then you can use a overlapping rectangles to represent them as shown below with the blog Posts image<br><br><\/td><td>5%<\/td><\/tr><tr><td><strong>Wireframe<\/strong><br>Each type of page in your site map should have a wireframe for it. You can produce a lo-fi wireframe. You do NOT need to have hi-fi or mockup.<br><br>Each page should have at least two versions (large and small\/mobile) but preferably three (large\/medium\/small also written as desktop\/tablet\/mobile).<\/td><td>15%<\/td><\/tr><tr><td><strong>Style Tile<\/strong><br>The style tile is based on the work by Samantha Warren: <a rel=\"noreferrer noopener\" href=\"https:\/\/styletil.es\" target=\"_blank\">https:\/\/styletil.es<\/a><br>You can use her <a rel=\"noreferrer noopener\" href=\"http:\/\/styletil.es\/downloads\/Style_Tile_Template.psd.zip\" target=\"_blank\">PSD Style Tile Template<\/a> or create your own as long as you include:<br><br>The Style Tile needs to have the following:<br>\u2013 The Project Name<br>\u2013 Site Logo and\/or Title (logo is not required)<br>\u2013 Color Palette (show colors and hex values)<br>\u2013 Typography: Name of fonts with examples for headings and body text<br>\u2013 Link example (colors, fonts and treatments like underline if used)<br>\u2013 Button example<br>\u2013 Adjectives: write 3-5 words that describe the feel of the design<\/td><td>15%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Visualization Examples<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Sitemap<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"764\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-5.png\" alt=\"\" class=\"wp-image-994\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-5.png 769w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-5-300x298.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-5-150x150.png 150w\" sizes=\"auto, (max-width: 769px) 100vw, 769px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Blog posts<\/h5>\n\n\n\n<p>Example of representing a group of pages with overlapping rectangles<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"224\" height=\"202\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-4.png\" alt=\"\" class=\"wp-image-993\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Wireframes<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Lo-fi wireframe<\/h5>\n\n\n\n<p>These generally block out content areas of the page without showing the actual individual content items (title, text, list, image etc.) in detail.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"527\" height=\"696\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-6.png\" alt=\"\" class=\"wp-image-995\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-6.png 527w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-6-227x300.png 227w\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Hi-fi wireframe<\/h5>\n\n\n\n<p>These wireframes do show individual content items, but DO NOT show typography or color and other visual design elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"690\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-7.png\" alt=\"\" class=\"wp-image-996\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-7.png 573w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-7-249x300.png 249w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Style Tiles<\/h4>\n\n\n\n<p>The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"470\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-8.png\" alt=\"\" class=\"wp-image-997\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-8.png 556w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-8-300x254.png 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview The midterm project is a presentation on what you will be doing for your final project. It will involve the following pieces Presentation: you will present your project to the class over Zoom. Click here to schedule a presentation time Project Brief: A post on our Class Site that give some details about the&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/midterm-project\/\">Continue reading <span class=\"screen-reader-text\">Midterm Project<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"coauthors":[87],"class_list":["post-958","page","type-page","status-publish","hentry","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>Overview The midterm project is a presentation on what you will be doing for your final project. It will involve the following pieces Presentation: you will present your project to the class over Zoom. Click here to schedule a presentation timeProject Brief: A post on our Class Site that give some details about the project and links to your presentation files and visualizationsSite VisualizationsSite mapWireframeStyle Tile Due Date In order to give people time to prepare and for me to give some feedback on your ideas, the due date is: Monday, April 12 We will do in-class presentations staring on&hellip;<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"Overview The midterm project is a presentation on what you will be doing for your final project. It will involve the following pieces Presentation: you will present your project to the class over Zoom. Click here to schedule a presentation time Project Brief: A post on our Class Site that give some details about the&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/pages\/958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/comments?post=958"}],"version-history":[{"count":11,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/pages\/958\/revisions"}],"predecessor-version":[{"id":1114,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/pages\/958\/revisions\/1114"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/media?parent=958"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/wp-json\/wp\/v2\/coauthors?post=958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}