{"id":500,"date":"2019-10-23T14:56:09","date_gmt":"2019-10-23T14:56:09","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/?p=500"},"modified":"2019-10-23T16:14:56","modified_gmt":"2019-10-23T16:14:56","slug":"class-13","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/10\/23\/class-13\/","title":{"rendered":"Class 14: Quizlet and Midterm Styling Start"},"content":{"rendered":"\r\n<h3 class=\"p2\"><span class=\"s1\">Class on 10.23.19<\/span><\/h3>\r\n<h3 class=\"p2\"><span class=\"s1\">Quizlet<\/span><\/h3>\r\n<p class=\"p2\"><span class=\"s1\">We will start with the quizlet live games<\/span><\/p>\r\n<p class=\"p2\"><span class=\"s1\">How to get on:<\/span><\/p>\r\n<ol class=\"ol1\">\r\n<li class=\"li2\"><span class=\"s1\">Download the app and put in the code I will show on the board. Search for Quizlet in your App Store<\/span><\/li>\r\n<li class=\"li2\"><span class=\"s1\">Go to <a href=\"https:\/\/quizlet.com\/live\">quizlet.live<\/a> and enter the code I will show on the board<\/span><\/li>\r\n<\/ol>\r\n<p class=\"p2\"><span class=\"s1\">After you get on quizlet you can and should join my &#8220;MMP 240 Web Design&#8221; class on Quizlet:<\/span><\/p>\r\n<p class=\"p2\"><a href=\"https:\/\/quizlet.com\/join\/XNhMKNwsY\"><span class=\"s1\">https:\/\/quizlet.com\/join\/XNhMKNwsY<\/span><\/a><\/p>\r\n<p class=\"p2\">\u00a0<\/p>\r\n<h3 class=\"p2\"><span class=\"s1\">Basic Site Style and Typographic Hierarchy<\/span><\/h3>\r\n<p class=\"p2\"><span class=\"s1\">The next phase of the midterm project is to create a typographic hierarchy for your pages. Making the hierarchy will involve a few different parts:<\/span><\/p>\r\n<h4 class=\"p2\"><span class=\"s1\">Part 1: Know your Audience and Goals<\/span><\/h4>\r\n<p class=\"p2\"><span class=\"s1\">In order to create the hierarchy you need to know:<\/span><\/p>\r\n<ul class=\"ul1\">\r\n<li class=\"li2\"><span class=\"s1\">The goals of the people running the site<\/span><\/li>\r\n<li class=\"li2\"><span class=\"s1\">Who is the audience (age range, interests, knowledge of and access to technology)<\/span><\/li>\r\n<li class=\"li2\"><span class=\"s1\">Why the audience will visit the site and what they will hope to accomplish<\/span><\/li>\r\n<\/ul>\r\n<p class=\"p2\"><span class=\"s1\">In a typical site creation process this information will come from a combination of documents from the client, interactions with the client, user research and prior experience of the web designer. The ability to get these things right is part of what separates the great web design companies from the rest.<\/span><\/p>\r\n<h4 class=\"p2\"><span class=\"s1\">Part 2: Know Your Content<\/span><\/h4>\r\n<p class=\"p2\"><span class=\"s1\">Make sure to read through the content with special attention to the following:<\/span><\/p>\r\n<ul class=\"ul1\">\r\n<li class=\"li2\"><span class=\"s1\">determining what content is most important (the order in which you want users to view the content and what you want them to see as most important).<\/span><\/li>\r\n<li class=\"li2\"><span class=\"s1\">What types of content you have (headings, sub-headings, dates, times, etc). To create a consistent hierarchy you will need to make sure that a) Each different type of content gets a different typographic treatment, b)the same type of content gets the same treatment.<\/span><\/li>\r\n<\/ul>\r\n<h4 class=\"p2\"><span class=\"s1\">Part 3: Determine your basic typographic properties (font-family, font-size, color)<\/span><\/h4>\r\n<p class=\"p2\"><span class=\"s1\">These should match both the content of the site and the expectations of the audience. We are going to spend some time in class talking about both the audience and looking at tools to help you figure out and present these properties.<\/span><\/p>\r\n<h5 class=\"p2\"><span class=\"s1\">Fonts<\/span><\/h5>\r\n<p class=\"p2\"><span class=\"s1\">When looking for fonts it can be good to do a combination of viewing sites that you think have a similar audience, looking at typography sites and looking at font sites. <\/span><\/p>\r\n<p class=\"p2\"><span class=\"s1\">For the similar sites I will ask you to take a few minutes and do some searching and post up possible reference sites in the comments to this post.<\/span><\/p>\r\n<p class=\"p2\"><span class=\"s1\">Here are some <strong>typography sites<\/strong>:<\/span><\/p>\r\n<ul>\r\n<li class=\"p2\"><span class=\"s1\">Type Wolf: <a href=\"https:\/\/www.typewolf.com\/\"><span class=\"s3\">https:\/\/www.typewolf.com\/<\/span><\/a> Trends, article examples and inspiration<\/span><\/li>\r\n<li class=\"p2\"><span class=\"s1\">Typography.com: <a href=\"https:\/\/typography.com\">https:\/\/typography.com<\/a> the site of the Hoefler &amp; Co type company, also has news and inspiration<\/span><\/li>\r\n<li class=\"p2\"><span class=\"s1\">I Love Typography &amp; We Love Typography.<span class=\"Apple-converted-space\">\u00a0<a href=\"https:\/\/ilovetypography.com\/\">https:\/\/ilovetypography.com\/<\/a> \u00a0 \u00a0 <\/span><a href=\"http:\/\/welovetypography.com\/\"><span class=\"s3\">http:\/\/welovetypography.com\/<\/span><\/a><\/span><\/li>\r\n<li class=\"p2\"><span class=\"s1\">NYC Type <a href=\"https:\/\/nyctype.co\/\">https:\/\/nyctype.co\/<\/a><\/span><\/li>\r\n<li class=\"p2\"><span class=\"s1\">Fonts in Use: <a href=\"https:\/\/fontsinuse.com\/\">https:\/\/fontsinuse.com\/<\/a><br \/><\/span><\/li>\r\n<\/ul>\r\n<p class=\"p2\"><strong><span class=\"s1\">Font Sites:<\/span><\/strong><\/p>\r\n<ul>\r\n<li class=\"p2\"><span class=\"s1\">Google Fonts <a href=\"https:\/\/fonts.google.com\">https:\/\/fonts.google.com<\/a>\u00a0<\/span><\/li>\r\n<li class=\"p2\"><span class=\"s1\">Fonts.com <a href=\"https:\/\/fonts.com\">https:\/\/fonts.com<\/a><\/span><\/li>\r\n<li>Adobe\u00a0<a href=\"https:\/\/fonts.adobe.com\/\">https:\/\/fonts.adobe.com\/<\/a><\/li>\r\n<\/ul>\r\n<h5 class=\"p2\"><span class=\"s1\">Font Size<\/span><\/h5>\r\n<p class=\"p2\"><span class=\"s1\">Some people use their eye and do this by what \u201cfeels right\u201d to them. Others use a more systematic approach. These sites have CSS that is based on mathematical relationships (you don\u2019t have to do the math, you can just copy the CSS).<\/span><\/p>\r\n<ul>\r\n<li>Type Scale: <a href=\"https:\/\/type-scale.com\/\">https:\/\/type-scale.com\/<\/a><\/li>\r\n<li>Modular Scale: <a href=\"https:\/\/www.modularscale.com\/\">https:\/\/www.modularscale.com\/<\/a><\/li>\r\n<li>Golden Ratio Calculator: <a href=\"https:\/\/grtcalculator.com\/\">https:\/\/grtcalculator.com\/<\/a><\/li>\r\n<\/ul>\r\n<h5 class=\"p2\"><span class=\"s1\">Color<\/span><\/h5>\r\n<p class=\"p2\"><span class=\"s1\">The following sites are places where people post color combinations that you can look at, use as inspiration, modify and make your own.<\/span><\/p>\r\n<ul>\r\n<li>Adobe Color\u00a0<a href=\"https:\/\/color.adobe.com\/\">https:\/\/color.adobe.com\/<\/a><\/li>\r\n<li>Colour Lovers (the British spell it colour)<a href=\"https:\/\/www.colourlovers.com\/\"> https:\/\/www.colourlovers.com\/<\/a><\/li>\r\n<li>Coolors <a href=\"https:\/\/coolors.co\/\">https:\/\/coolors.co\/<\/a><\/li>\r\n<\/ul>\r\n<h4 class=\"p2\"><span class=\"s1\">Presenting your work<\/span><\/h4>\r\n<p class=\"p2\"><span class=\"s1\">We will look at Style Tiles <a href=\"http:\/\/styletil.es\/\"><span class=\"s3\">http:\/\/styletil.es\/<\/span><\/a> as a way to show case all of these decisions. Creating a Style Tile will be one option for completing assignment 7.<\/span><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Class on 10.23.19 Quizlet We will start with the quizlet live games How to get on: Download the app and put in the code I will show on the board. Search for Quizlet in your App Store Go to quizlet.live and enter the code I will show on the board After you get on quizlet [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[25,7,48],"tags":[76,87,54],"class_list":{"0":"post-500","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-in-class-information","7":"category-resource","8":"category-typography","9":"tag-midterm","10":"tag-resources","11":"tag-typography","12":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/comments?post=500"}],"version-history":[{"count":10,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/500\/revisions"}],"predecessor-version":[{"id":514,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/500\/revisions\/514"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/categories?post=500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/tags?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}