
{"id":904,"date":"2016-03-14T13:45:00","date_gmt":"2016-03-14T13:45:00","guid":{"rendered":"http:\/\/blogs.plymouth.ac.uk\/telmed\/?p=904"},"modified":"2016-03-14T13:45:00","modified_gmt":"2016-03-14T13:45:00","slug":"the-design-learning-curve","status":"publish","type":"post","link":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-design-learning-curve\/","title":{"rendered":"The design; Learning curve."},"content":{"rendered":"<p>I have written this blog to share my experience in my learning curve with\u00a0design and layout.<br \/>\nThe main thing that set off my\u00a0search for\u00a0knowledge in design and layout was from the discovery that my knowledge in this area was lacking and somewhat weak.\u00a0The knowledge I have gained throughout the years was through copying\u00a0and working with other people&#8217;s designs and not really having any of my own.\u00a0I didn&#8217;t really understand any rules of design; if I liked it I would use it<\/p>\n<p>After digging around for information I found on Linda.com a course called &#8216;Foundations of Layout .Composition&#8217; by Sean Adams.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Before course<\/strong><br \/>\n<a href=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-909 size-full\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before1.png\" alt=\"\" width=\"575\" height=\"433\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before1.png 575w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before1-300x226.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before1-560x422.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before1-260x196.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before1-160x120.png 160w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-911 size-full\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3.png\" alt=\"\" width=\"579\" height=\"433\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3.png 579w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3-300x224.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3-560x419.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3-260x194.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before3-160x120.png 160w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/a><\/p>\n<p>The course talked about different layouts, colours and by using set rules within design it boasted that any developer could produce a pleasing style and a look that\u00a0uses will enjoy and quoted \u2018a successful layout equalled attention!!\u2019.<\/p>\n<p>This was what I needed and wanted! I wanted my RLOs to look outstanding.\u00a0I only seem to have one way of laying out content, which is, writing on the left, images on the right.\u00a0However, I\u2019m not planning to change this, as this in reflection seems to be a rule that works for e-learning and this style helps the learner not to be\u00a0distracted through complicated over designed projects.<\/p>\n<p>The course looked at a range of rules, one of which encountered the balance of squares; and balancing of everything on the page through the use of the different sizes and positions of squares. Another rule was to use a grid style of 3 parts, where you divide the page in to 3, that can be vertically, horizontally or both. I quite like these rules I seem to understand the logic a little better compared to other rules that were\u00a0shown.<\/p>\n<p>Following the course,\u00a0I decided to implement the square design rule that I had learnt, to do this I planned to use an RLO that I had started but not got too deep into.\u00a0At first glance I still liked the way I had laid out the content within the RLO, so an issued I had caused for myself, was to keep the layout, but implement the rule I had learnt.<\/p>\n<p><strong>After course<br \/>\n<\/strong><a href=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2.png\">\u00a0<\/a><a href=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-907 size-full\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after3.png\" alt=\"after3\" width=\"579\" height=\"433\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after3.png 579w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after3-300x224.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after3-560x419.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after3-260x194.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after3-160x120.png 160w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-908 size-full\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after4.png\" alt=\"after4\" width=\"575\" height=\"433\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after4.png 575w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after4-300x226.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after4-560x422.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after4-260x196.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after4-160x120.png 160w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/p>\n<p>So I began by adding the internal margins around the content, ensuring that there was equal space on all four sides. I then divided the page in half, both horizontal and vertical.\u00a0Having set the margins, I moved on to lining up content,\u00a0the buttons were lined down the middle, so I treated the different sides of the page separately.\u00a0I have learnt content does play a large part in the design and not all rules can be implemented but if the basic ones are followed then the overall look and feel is still pleasing to the user.<\/p>\n<p><a href=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-910 size-full\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2.png\" alt=\"before2\" width=\"574\" height=\"433\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2.png 574w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2-300x226.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2-560x422.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2-260x196.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/before2-160x121.png 160w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/a>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-906 size-full\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after2.png\" alt=\"after2\" width=\"574\" height=\"433\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after2.png 574w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after2-300x226.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after2-560x422.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after2-260x196.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/after2-160x121.png 160w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/p>\n<p>So some months on, I find\u00a0I still struggle with layout when you have different images that are different sizes throughout the whole RLO.<\/p>\n<p>I have found I ask myself a lot do I keep the images in the top left, centralise or top right?<\/p>\n<p>I like how it looks when the image are aligned top right and I like how the boarder is the same all around the image as seen in image 1, but I also like having all the images sitting in the same place, so when someone works through the RLO, the images don\u2019t move around the pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-913 alignleft\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/left_alined-300x225.png\" alt=\"left_alined\" width=\"266\" height=\"200\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-912 alignleft\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined-300x226.png\" alt=\"centre_alined\" width=\"266\" height=\"200\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined-300x226.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined-768x578.png 768w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined-560x422.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined-260x196.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined-160x121.png 160w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/centre_alined.png 1021w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-905 alignleft\" src=\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined-300x225.png\" alt=\"Right_alined\" width=\"266\" height=\"200\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined-300x225.png 300w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined-768x576.png 768w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined-560x420.png 560w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined-260x195.png 260w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined-160x120.png 160w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2016\/02\/Right_alined.png 1022w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have written this blog to share my experience in my learning curve with\u00a0design and layout. The main thing that set off my\u00a0search for\u00a0knowledge in design and layout was from the discovery that my knowledge in this area was lacking and somewhat weak.\u00a0The knowledge I have gained throughout the years was through copying\u00a0and working with [&hellip;]<\/p>\n","protected":false},"author":110,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[347],"tags":[],"class_list":["post-904","post","type-post","status-publish","format-standard","hentry","category-template-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pdVSkC-eA","_links":{"self":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/users\/110"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/comments?post=904"}],"version-history":[{"count":0,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/904\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/media?parent=904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/categories?post=904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/tags?post=904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}