Each student is supposed to be in charge of our “Design of the Week” Blog
entries for any of the 4 weeks within the semester. Each entry is worth 20
points, for a total of 40 points. And each person is also in charge of
responding to other classmates’ comments or questions. The other class members
are supposed to visit the blog often and provide at least one comment or
question to each of the main entries during each of the 4 weeks.
- Evaluation entry --- Each person in charge are supposed to include a link to some interesting instructional graphics or print product design that he or she finds on the web or anywhere, and to comment in 3-5 sentences on why he or she thinks it is interesting in relation to the chapters that we are reading. This is where we can use our study about Design principles to evaluate a product.
- Future Trends Blog entry --- Stimulate initial thinking about the current state of what was written by the book authors in 2008 and where the learning environment is probably going beyond 2013.
Design of the Week: Instructographics
ReplyDeleteThis the first I have heard of them and I think they will become popular once everyone sees how informative they can be. I found:http://www.coolinstructographics.com/what-is-an-instructographic/ website. From what I have seen it takes the similar form as an infographic, but purpose is to provide steps on how to build or create something simple or complex. The instructograph I am evaluating how to create a Kokedama String Garden (http://www.coolinstructographics.com/diy-kokedama-hanging-plant-string-garden/). I am not knowledgeable in gardening but after reading this I think I could accomplish the goal of creating this hanging plant. This instructional graphics uses pictures from a camera and follows the CRAP principles in true form. The layout is simple and easy to read. The learner can follow the sequence just by looking at the pictures as well, the pictures are close to the instructions and that is important when you are learning something new. The background is not over powering neither is it competing with the text.
Future Trends: I think instructogrpahics will be popular like infographics because people like that the process of learning small bits of information through visual elements. The author of the webpage suggests instructogrpahics will be used in the future because of the simple and helpful information they provide.
I agree, Jennifer. I think I could create a sting garden, and I do not have a green thumb! The simplicity and design of this instructographic is very pleasing to the eye. The grouping of the pictures and text draws the eye from one step to the next. In my opinion, I like this design better than many infographics I've seen. Some infographics are a little to cluttered and don't lend themselves to the selection process as well as these instructographics do.
DeleteI have to agree with you,this one type of instructional graphic is quite different and I like it. From an educational perspective, I think children would all benefit from doing a project similiar to this. I remember in elementary I had to write instructions on how to make a peanut butter sandwich, if I knew about this I could have taken pictures to go with the steps.
DeleteThe same as in Michelle's posting, I do believe this type of visual will become very popular like the Infographics. Have you noticed that the authors must have used some ready-made templates, which already have the design,e.g., fonts, color contrast, etc. with their products. They do generally look pleasing to the eye. However, how well the information is chunked and organized, and whether the visual has enough information for people to learn about the skill, these are the things that can really make a big difference in the quality of these products.
DeleteWow, what a cool idea! I think I would need to do a little background research before I actually would feel comfortable creating a string garden. I have no experience with gardening so I don't know if this would work on all plant types and such. The instructograph seemed like it was for someone with at least a cursory knowledge of gardening.
DeleteDesign of the Week: 4 Garden Instructional Graphics
ReplyDeleteWhen searching for a good instructional graphic, I stumbled upon this website: http://sustainablog.org/2012/09/4-gardening-instructional-graphics/
What caught my eye is the first graphic about how to build and install raised garden beds. I am a very visual person, and it inspired me to try this method of gardening this spring! Believe me when I say that the CRAP is all over this graphic and literally if you build the gardening beds. :) The colors are pleasing, and just a few are used. The designer uses contrasting colors, but the dreaded comic sans font. the information is in close proximity of the graphic it is related to. Also, each step in the process is in it's own square and numbered.
Future Trends: I believe that this type of instructional graphic will become more and more popular since the ability to publish and distribute graphic information is easier and cheaper than in the past. Also,as all the students who are identified as ADD/ADHD, low readers, etc (which are becoming more and more each year) become adults, because the graphic is laid out like a graphic novel. Graphic novels are popular with the low readers and the special needs students because of the comic book type of layout. However, eventhough I am a great reader I am visual person, I will follow these directions better than just the directions.
Good choice on the instructional graphic.I think more people are visual learners and since taking this class I am becoming more visual literate and recognizing the design principles more than ever before.
DeleteThis is another nice instructional graphic. As Katherin said, they could have explained some things in a little more detail, but maybe they expected their learners to have prior knowledge of things like “the bathtub effect.” It definitely wasn’t for complete gardening novices, and learners would need some prior knowledge of basic construction. The colors and groupings are pleasing to the eye and overall, I thought it was a nice design.
DeleteI agree with the better explination of the items that beginners would need to know. I really didn't know what the "bathtub effect" was, but could guess as to the meaning.
DeleteYes, I do believe this kind of instructional graphic will be very helpful to low readers and anybody who is a visual learner. Please remember that one of the functions for these kinds of visuals is to reduce cognitive load and reduce the use of words. Yes, maybe not to the extent of not enough info for entry level learners to understand the information. :-)
DeleteThis didn't really seem like it was beginner friendly. Like, if I had basic knowledge about building a garden, it would get it, but if I were to try to follow this and only this step-by-step I would have a lot of problems. The area about irrigation was particularly vague.
DeleteDesign of the week 4: Using color to design websites
ReplyDeleteLink: http://webdesignledger.com/inspiration/21-examples-of-black-white-grey-in-web-design
I searched for good uses of color on the web because I was interested in the last part of our class where we looked at how different things, like color and alignment, could affect how we look at or feel about what we see in graphics. With instructional technology, I believe that the blackboard site has good use of color that suits its purpose as a learning tool. I just wanted to see some other examples of what web designers envision as good use of color on a webpage. This led me to a link for black and white web pages. I actually like most of the 21 shown. My two favorites are the Lincoln webpage and the Brooklyn soap company webpage. They were very inviting without having to use color. I found this very interesting, as I am a person who is usually drawn to bright colors.
Future trends: I think that good use of color is a trend that people in web design will want to learn about. I think that these principals will come into wider use as we develop websites for more and more things. Many causes such as heart disease and breast cancer research have a designated color, and their websites will reflect this while also giving information and trying to solicit donations. The strategic use of color, graphics, and text would be very important there. Also movies being released, online schools, and other websites or pages that will be developed will rely on the use of color, graphics, and text to attract the most viewers and/or consumers. As the web continues to become a more competetive place, the stategic use of color, graphics, and text will make the web continue to be a very visually stimulating place.
Some of my favorite designs are in grayscale, or use very subtle colors. Another nice use of grayscale is with red or another single color, which is mentioned on this website. It takes skill to use grayscale or black and white in a design, but as these sites show, if it's done correctly, the finished product can be very elegant and eye-catching.
DeleteYes, I really liked those 2 sites you picked, too. And, I agree with Brook and Jahrel about the greyscale mixing with one other color, if this is used well, it can be very elegant.
DeleteOK, a question for all of us who liked the Black & White or simple color scale. Why do you think the Black & White worked well with the Lincoln webpage and the Brooklyn soap company webpage?
I actually thought the Brooklyn soap company was my favorite. These were all good examples of design.
DeleteGood idea on the use of color, I looked at the Lincoln webiste and I was drawn into Lincoln's facial expression. The web designer took on a simple style that does not trap white space and reflects the idea that less is more. The focus is on the trailer in the center to get viewers to press "play".
ReplyDeleteDesign of the Week: Your Role as a Supervisor
ReplyDeletehttp://bit.ly/12S14tc
This is an instructional brochure created for new supervisors. It is a document that is meant to be printed, and isn’t a step-by-step instruction manual per-say, but it is an example of a printable, instructional brochure. This brochure provides information to supervisors of trainees.
The first thing I noticed is that it isn’t “copy machine-friendly” because of the blue and multicolored background. This wouldn’t be a brochure you would want to print from your copier at work. However, if printed professionally, it would look beautiful.
The front of the brochure is designed nicely, using sans serif fonts of differing weights and sizes. It’s very clean and the text proximity works well.
The inside of the booklet has a swath of pictures that draws the eye diagonally through the page. The headings are distinct because they are a larger size and the orange color contrasts with the blue background and the black body text. The information is chunked and organized in a pleasing format due, in part to consistent leading within and between paragraphs.
There is a callout on the right side that subtly stands-out because the text box is a lighter color blue than the background. There is white space (or in this case blue space) on the inside and the back of the brochure, and it works with the overall design.
Future Trends
One instructional trend that we’re already seeing, and that I believe is only going to become more prevalent in the future is the MOOC, or Massive Open Online Course. These are free courses on various topics that are popping up all over the internet. Some are even being provided through colleges and universities. I’m taking part in a design and analysis MOOC.
Another trend, along the same lines, will be the number of free training resources. Whether it be print, webinars, eLearning, MOOCs or other formats that we haven’t even heard of yet. Open Educational Resources are already prevalent all over the internet and I believe will only continue to grow because of their popularity. The availability of free or very inexpensive design, recording and production tools allows almost anyone to produce instructional materials.
This was really well designed. I think you're right that it wouldn't look good if it were printed on a regular copier, but if printed professionally it would look amazing. I really like how the images direct the eye down and through the text. Not to be a stickler though, but they need to get rid of their watermarks on the images.
DeleteThe first thing I noticed was the use of color and how the blue and orange work well together to create an informative yet eye catching brochure. It is simple in format but yet has some complexity to it. The designer did a good job in not choosing a font that would take away from the simple task of training someone. As Dr. Hu has said in her lectures a designer must create materials that are easy to find, understand and remember. This brochure does this by explaining the "hows" and "whats" of a supervisor.
DeleteI like the way your eye follows the pictures down the center of the document in a curve. "It just works" with the curve and is very visually appealing with the text.
DeleteI agree with you all about the color and font contrasts that have made the overall design of the brochure very eye-catching yet informative.
DeleteIt will increase the cost of production if the design (mainly the gradients in background, colors and quality of paper) requires professional print. :-)However, we can do cost-effectiveness analysis and see if it really worth the money.
They do need to get rid of the watermarks, I agree. That is kind of strange that they left them on such a nice looking brochure.
DeleteDr. Hu, I'd like to hear more about the cost analysis and how that could be done.
Design of the Week 6: http://ilovecharts.tumblr.com/post/350834017/now-everyone-can-dance-to-thriller
ReplyDeleteI chose something a little fun for my design this week. I came across this and it instantly made me think of our first assignment, the Augmentative/Adaptive Communication Activity. Basically, it teaches the user the entire “thriller” dance move by move, using only a human silhouette and arrows to show how to move your body. I thought it was clever, since this seems to be a popular dance (It seems like there is always some video on YouTube with people re-creating it). I think it would work as a learning tool, in that if you relied solely on the chart for guidance, you would probably end up with something very close to the original dance. However, I would think that at least having seen the dance in its entirety previously would be beneficial.
Future Trends: Something that I have been seeing more and more of on the internet (and in keeping with my design) is a tendency for designs to lean toward a more nostalgic feel. I have seen more color palates reminiscent of the 60s-70s. Things that, like Diandra’s post, the Brooklyn Soap Company ad, has the aesthetic of another era. Even infographs, to me, feel like old-school informational brochures. It is interesting how different color palettes can give an item a feel from a different time.
This is the first I have seen of this kind website. You really do find something new on the web everyday.
DeleteI agree with you to be able to fully do the Thriller you would need to see it danced in its entirety. No text on the page just red arrows, very simple format that can be handled just by anybody although if you have previous dance training that can be a plus.
I plan on looking more into I love charts and see what else I can find.
That was a cute site. Of course Thriller takes me back to the 80's, so that's one reason I like it! As you said, you can't really learn the dance from this site alone, but having seen it many, many times. I recognized the steps. One take-away from this site is that sometimes, we don't need to use so many words.
DeleteIf I hadn't seen the video on MTV when I was younger, I probably wouldn't be able to do the dance properly. The moves are great. I could follow that, but putting it to music...well, that would be a little complicated if you didn't see the video. A few words would be nice like the lyrics of where the moves should be done, or the counts of how long the moves should be made... This would be a great instructional graphic if you were learning the dance for a production to practice with at home, but some explination would be needed.
DeleteThere has been a long history of representing motion using static instructional graphics. Please take a look at this review: http://inter-disciplinary.net/ci/vl/vl1/Jose%20paper.pdf
DeleteYes, I think your right that a few words of instruction would be useful. It is a bit stark as an intructional tool.
DeleteI was on the yearbook staff when I was in high school and we always carefully planned out what our color pages would be for that school year. The important events got the color since that is where everyone flipped to first. You are correct in how repeated images are found in the year book, looking back I WAS introduced to the design principles. My teacher would always talk about why it is okay to have white space on a page and how typography can help or hinder a theme.
ReplyDeleteI can see how students have trouble with this concept. Even adults have trouble with how to use white space to their advantage! A full page just somehow seems more complete. Also when you are getting a grade for something, you want to put as much info and/of elements as you can into your design space and it seems strange that you are being graded on how effectively you do the opposite or use the white space.
DeleteYes, I guess many of you have worked on yearbooks before and have been introduced to many of the design principles that we discussed this semester. It is not hard to understand why we need to put more important events with colors and use only a few types of fonts and a few colors, now that we reflect on our past experience according to the principles we have studied.
DeleteThis is a good way to demonstrate what can be a confusing concept. Jostens did a great job using large, contrasting numbers and breaking down the steps on the side of the pamphlet to show the layout and importance of grouping the pages correctly.
ReplyDeleteI agree. The use of the numbers and the layout in general was great for what they are trying to accomplish. I know that sometimes I can get bogged down in thinking about the appearance or design of something, forgetting that I really need to be concerned with how the appearance or the design can help with getting the information across. Appearance and layout must go hand in hand with the function of what you are publishing.
DeleteYes, I agree with Diandra very much about the purpose of designing, which is trying to get the information across. Also, even with all the new technologies and media format coming out these days, we might still need a "cheat sheet" or job aid putting beside us to be able to follow more complext steps one by one... We might have to admit this to some extent. :-)
DeleteI was editor of the yearbook and on the yearbook staff both my junior and senior year. We didn't do color on anything but the senior portraits. I know that the new ones are done mostly in color. Being a visual person, I can now see why we had to turn in certain pages at a time. I probably would have to use the document for each section of the yearbook just to make sure I am getting the graphics and colors correct. Talk about a major "cheat sheet" or the new vocabulary, "Job Aide"!
ReplyDeleteThis is very different from yearbooks when I was in school. I like that you say they are more like magazines now than annuals. I think I always viewed them as a type of magazine more than anything else, and mine would have benefited greatly from pops of color.
ReplyDeleteDesign of the week: http://psych.indiana.edu/support/IDResearchTutorial.pdf
ReplyDeleteThis is an interactive .pdf tutorial for using Adobe InDesign. Not only does it provide information that could be useful for our assignment, but it is an example of how effectively we can improve upon this person's techniques when creating our own interactive .pdf. I think this is an imperfect example. There are problems with text appearing too compact and the overall design leaving opportunities to be more visually pleasing. I do love the fact that we can see this process from the perspective of learning how to create our own document by actively improving upon what we see and deciding what we would do better. Even though this was published in 2010, there are instructions here that would be helpful.
I am also including this design for a second example of a more polished product: http://www.umass.edu/art/prospective_students/application_guide/indesign_basics.pdf
This particular .pdf does not include hyperlinks as resources and did not have an interactive "feel" to it when I viewed it, but it is more visually pleasing. I do like that it has a table of contents and that it serves as a useful reference tool.
Future trends: I think that Adobe InDesign will continue to gain popularity as people learn to use it to connect with audiences for instructional purposes, social networking, and business applications. Since it is useful for PC and Mac users, it can continue to expand in its usefulness over time. I can see this as an effective promotional tool for reaching out to a client base through newsletters. Self-employed people and small businesses can use this tool to communicate with their audiences, as can teachers.
Wow, there's a lot of information in those two documents. The first one contains helpful information, but I had a hard time getting past the amount of text. I also didn't find the screenshots to be very helpful. I agree that the second one was crowded, but it was more professional and the screenshots were very helpful. If the designer had used white space more effectively the end product would have been more pleasing to the eye.
DeleteTodd you are correct in that the first one is not interactive. To me there seems to be too much text on the page and not enough visual/graphics. I think more contrast would be helpful as well. Bold or bigger fonts to help in the scaffolding process. The use of color is appropriate and not offending to the user.
DeleteUMass did an excellent job in this job aid of Indesign, because it follows the design principles of chunking,contrast and using a font that is read in a pdf format. The screen shots are also aligned and near the information it is describing.
I think the first one is chalked full of useful information and I think is is very straight forward but I think its lacking more visual aids. Its laid out in a way that makes sense, but it is almost too compact.
DeleteYou've got to love Google. I do anyway. There are so many free Google tools and apps available and they're constantly adding new ones. I've used Google Sites in a previous class and it's a very simple interface. I agree with Katharin, in that if you're looking for a more advanced tool, Google Sites might not be the one for you. But if you're new to the web design game, it's a good place to start.
ReplyDeleteThe first thing I thought was that Google keeps it simple. They took the "less is more" route in designing this informational website tutorial.
ReplyDeleteI would have liked more examples but I guess that is what YouTube is for.
This is a great site for teachers. I love the different templates they have, giving you an example of the scope of what you can accomplish.
ReplyDeleteI happen to like most of google's offerings as well. I think google sites is something I may try if only to test it out for future projects. I also appreciate the info about Adobe in design although I think the tutorial is way too word dense. I would like pictures with at least some of the step, similar to how I did my job aid.
ReplyDelete