{"id":145,"date":"2025-09-26T22:25:28","date_gmt":"2025-09-27T02:25:28","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp200\/?p=145"},"modified":"2025-09-27T16:48:04","modified_gmt":"2025-09-27T20:48:04","slug":"module-5","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/module-5\/","title":{"rendered":"5. Layout Design for Websites"},"content":{"rendered":"\n<p>In this module you will learn and practice layout techniques and strategies for responsive website interfaces. Using an underlying grid, we will design a layout for a web page with multiple content and active elements, creating versions for web, tablet, and mobile screen sizes.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Learning outcome<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a grid to organize page element to organize page elements.<\/li>\n\n\n\n<li>Design with multiple grids to adapt layout to multiple screen sizes<\/li>\n\n\n\n<li>Design layouts that are optimize for certain screen sizes<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Read\/Watch<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Grid<\/h5>\n\n\n<div class=\"wp-block-pdfemb-pdf-embedder-viewer\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-fall2020\/wp-content\/uploads\/sites\/467\/2020\/09\/Grid.pdf\" class=\"pdfemb-viewer\" style=\"\" data-width=\"max\" data-height=\"max\" data-toolbar=\"bottom\" data-toolbar-fixed=\"off\">Grid<\/a><\/div>\n<p class=\"wp-block-pdfemb-pdf-embedder-viewer\"><\/p>\n\n\n\n<p class=\"caption\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/467\/2020\/09\/Grid.pdf\">Download PDF<\/a><\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Why You Should Use a Grid for Designing Layouts\" width=\"1505\" height=\"847\" src=\"https:\/\/www.youtube.com\/embed\/zTVH9ryf5Xs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"responsive\">Responsive Layout<\/h5>\n\n\n<div class=\"wp-block-pdfemb-pdf-embedder-viewer\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-sp2021\/wp-content\/uploads\/sites\/1445\/2020\/09\/Responsive-layout.pdf\" class=\"pdfemb-viewer\" style=\"\" data-width=\"max\" data-height=\"max\" data-toolbar=\"bottom\" data-toolbar-fixed=\"off\">Responsive-layout<\/a><\/div>\n<p class=\"wp-block-pdfemb-pdf-embedder-viewer\"><\/p>\n\n\n\n<p class=\"caption\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-content\/uploads\/sites\/467\/2020\/09\/Responsive-layout.pdf\">Download PDF<\/a><\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Designing with Figma<\/h5>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Figma Tutorial: Layout Grids\" width=\"1505\" height=\"847\" src=\"https:\/\/www.youtube.com\/embed\/zd8wrAdURN0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Figma Tutorial: Masks\" width=\"1505\" height=\"847\" src=\"https:\/\/www.youtube.com\/embed\/Dn0Ldi1SPv0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Assignment<\/h4>\n\n\n\n<p><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-200-spring-2024\/design-assignment-5-responsive-layout-design\/\" data-type=\"page\" data-id=\"911\">Design Assignment 5: Responsive Layout Design<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">Resources<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.oreilly.com\/library\/view\/designing-interfaces\/0596008031\/ch04.html\">Organizing the Page: Layout of Page Elements<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2015\/04\/design-principles-compositional-flow-and-rhythm\/\">Compositional Flow And Rhythm<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/thinkingwithtype.com\/grid\/\">Grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/material.io\/design\/layout\/responsive-layout-grid.html\">Responsive layout grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/learnui.design\/blog\/mobile-desktop-website-font-size-guidelines.html\">The Responsive Website Font Size Guidelines<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this module you will learn and practice layout techniques and strategies for responsive website interfaces. Using an underlying grid, we will design a layout for a web page with multiple content and active elements, creating versions for web, tablet, and mobile screen sizes.<\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-145","post","type-post","status-publish","format-standard","hentry","category-modules"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":54,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts\/145\/revisions"}],"predecessor-version":[{"id":4867,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/posts\/145\/revisions\/4867"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/media?parent=145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/categories?post=145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp200-multimedia-design-course-hub\/wp-json\/wp\/v2\/tags?post=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}