We will look at 14 examples of various visual designs and break them down!
Worksheet #1:
What makes this design effective? I believe this design is both effective and ineffective. While it is organized in a very easily understood aspect, it lacks any sort of creative inspiration.
What message does this visual convey? This visual conveys a “no fills” worksheet that is meant for a straightforward look at some of the technical elements in theatre.
How did the designer handle the layout? The layout is very user-friendly for the K-12 audience. The text used is clear and can be viewed easily by students who have varied abilities.
What element first attracted my attention and why? The element that first attracted my attention was the grid. The topics are organized at a purposeful pace. The hierarchy is self-evident. It starts at the top and goes from top to bottom and left to right. The design is clear and concise.
How does the color palette affect me? The color palette is my least favorite part of this design. It isn’t busy, but you don’t get to see any color until the very bottom of the page when the white paper transitions into a gradient yellowish orange. If I had to guess, I think the designer was thinking about teachers in mind who probably do not have the benefit of color ink for their printers or for copies. Too much color would be very expensive to reproduce.
Worksheet #2:
What makes this design effective? I think what makes this design effective is that it is digital. Instead of having to pass out any papers, students can access their assignments in class or at home if needed. There is a direct link to the video they need to observe and the form will automatically collect the user’s answers. The answers can then be adapted to a spreadsheet for grading.
What message does this visual convey? I think there is a hint of fun in the message of this visual form. There is a popcorn header at the top that sets the tone for the opportunity to observe the video as it pertains to filming. The text is more of a fun font but after reviewing it more closely, I speculate that it may not be accessible for users with varied abilities.
How did the designer handle the layout? The designer began with an eye-catching image and then an objective for the assignment. The link was added for accessibility and checked for connectivity.
What element first attracted my attention and why? The element that first attracted my attention was the popcorn graphic as the header. While this is one of a few options available to users in the default settings, users also have the option to create their own and upload a different picture or graphic.
How does the color palette affect me? Aside from the popcorn graphic, there is not much color in this Google Form. The section right below the graphic is yellow and that offers a separation from the header to the rest of the form.
Handout #1:
What makes this design effective? I think this design is effective because it clearly states the purpose of the handout and is concise yet informational.
What message does this visual convey? The visual message is systematic and procedural.
How did the designer handle the layout? The designer created a functional layout that not only showed the user what to do, but the designer also offered instructions.
How does the color palette affect me? The color palette is mainly black and white with added color photos that indicate each step in the process. It creates a film or cinematic effect.
Handout #2:
What makes this design effective? This design is effective because it gives the user a sequence of how to finish a project from concept to completion.
What message does this visual convey? The visual message conveys organizing patterns that follow a sequential order.
How did the designer handle the layout? The layout attempts to have the user focus on one aspect of the design at a time. Chunking each section of the project will help the user stay on track.
How does the color palette affect me? The color palette is a serene blue with black intertwined. It will be easy for the user to navigate as it follows a hierarchy from top to bottom.
Flyer #1:
What makes this design effective? This is an effective design because it clearly expresses information in one easy-to-understand page.
What message does this visual convey? This flyer’s visual (hopefully) conveys the message of a fun event in order to entice potential customers to want to come and see it. It contains the school’s logo and the name of the show so viewers can quickly assess what the flyer is advertising.
How did the designer handle the layout? The layout focuses the eyes on the information. One of the most important features of this layout is the QR code at the bottom which gives the audience the opportunity to purchase tickets easily from a mobile device.
How does the color palette affect me? The color palette really brings out a holiday warm feeling. The simple red and green offer the idea that it is a winter advertisement. The QR code is also red maintaining the holiday theme with the school’s logo in the middle.
Flyer #2:
What makes this design effective? I am very proud of this design because it was created by one of my students, I will refer to her as “Mary” in this series of answers. Deciding to do the grinch was interesting, but advertising it would be another feat altogether to avoid copyright infringement.
What message does this visual convey? Mary wanted to have a Christmas tree as the overarching theme but wanted it to be subtle.
How did the designer handle the layout? In order to create the idea of the Christmas tree, she started with the star on top and then added information for the show in each line below to create that effect. At the bottom where the tree trunk would be, she added the QR code for everyone to navigate the information on a mobile device. This visual was very clever in its simplicity.
How does the color palette affect me? There are a few key features to this color palette. Mary didn’t go with the stark contrast of red and green. She used a blue gradient background that highlighted the white text. She also used a gradient color process in order for the QR code to go from red to green with the school’s logo in the middle.
Newsletter #1:
What makes this design effective? This design is effective and ineffective. It is informational and has many key pieces that the viewer should know but there are many different visuals that appear to compete with each other for the attention of the viewer.
What message does this visual convey? The visual message is that of informing and helping the viewer. If you continue to the second page of the newsletter, you are greeted with great pictures that show positive exchanges.
How did the designer handle the layout? At the very top of the newsletter is a letterhead from the school district. The logo and important information is covered. While the important information is handled at the top to the left of the newsletter, the graphic on the right has a different text than the rest of the newsletter and appears out of place. In some instances, the newsletter looks more like a collage than a streamlined newsletter that is conveying a clear theme to the viewer. That being said, during this time period in this particular geographical location, the internet was scarce at best and many normal resources were unavailable.
How does the color palette affect me? While the top of the newsletter is the traditional header for this newsletter and communications that are released from this source, it finishes with that cohesiveness. Throughout the newsletter, there are various colors in terms of background as well as text and fonts. While some colors are accessible to a variety of users, some of the color schemes are not.
Newsletter #2:
What makes this design effective? This design is both effective and ineffective. The overall design is (to my understanding) supposed to inform the viewer of the current happenings from the school as well as future happenings and information. While many important pieces of information are readily available to the viewer, it is not collectively organized in an easily understandable hierarchy.
What message does this visual convey? The visual representation of this newsletter is kind of distracting. There is no school logo at the top or header from the school that is streamlined with other information. The very first page of a twenty-page document has a picture of the school’s principal and his communication of some great events that have happened and will be happening in the school. The subsequent nineteen pages are a “hodge-podge” of pieces of information for the viewer.
How did the designer handle the layout? The layout is not easily understood. With a variety of texts, formats, sizes, and colors, this newsletter’s layout and visuals change quite frequently. On the same page, text fonts change, and bolded text is intertwined with regular text. Some of the pages have themed information such as information on athletics being on one or two pages followed by fundraisers. There are varied dimensions to all of the photos and graphics which prove to be distracting. The newsletter finishes by thanking community partners.
How does the color palette affect me? The color palette is as varied as the rest of the layout of this newsletter. Some of the images and graphics are very colorful and appealing while others are plain with varied bolded text. The first page gives us a color image of the principal and the rest of the page is black and white. In terms of color, this newsletter is not visually appealing.
Job Aide #1:
What makes this design effective? This design is effective because it conveys a very clear message of what each of the camera shots is and how it relates to the other camera shots.
What message does this visual convey? The visual message this job aide conveys is that of each of the seven typically used camera angles.
How did the designer handle the layout? The designer uses one photo zoomed out in order to create a diagram that showcases each of the shots and what each of them would look like in a camera shot. It also showcases how that camera shot relates to the other camera angles. The text is the same for each indicated different camera shot.
How does the color palette affect me? The color palette is simple yet effective. There are purple lines that coordinate with each camera shot. The black text that identifies each camera shot stands out and is easily understood by the viewer.
Job Aide #2:
What makes this design effective? This job aid is effective because it clearly labels each step in order both numerically and with arrows that take you from one step to the next. This design showcases a resource and how to use the resource.
What message does this visual convey? This resource is informational and educational. It is (hopefully) attempting to convey the steps necessary to effectively use the interactive notebook I created.
How did the designer handle the layout? I wanted the layout to be simple and easy to use for the learner. I wanted this to be able to be a useful resource for anyone planning on using the interactive notebook. I also wanted the user to be able to copy the interactive notebook and use the job aide as an open resource for themselves or a colleague.
How does the color palette affect me? I chose a brown paper bag background because it reminded me of the old-school way we used to cover our textbooks. I then wanted to use a contrast between the color of the background with the color of the text for it to be easily accessible to all users. I wanted the colors to be fun but easy to see and understand.
Webpage #1:
What makes this design effective? The simplicity of Google’s design is what I believe makes it most effective. It is clearly a search engine that is not convoluted by ads or distractions on the home page. Yes, periodically, there are interactive opportunities during special days and points of focus throughout the year, but it not distracting and the user has control of their experience.
What message does this visual convey? I believe the message is simple, where do you want to go or want to know? Let me help you get there. Google’s ability to connect the user with information is so profound, it has turned into a verb when people exclaim, “Google it”!
How did the designer handle the layout? I believe the designers at Google really thought of the end user in their layout. Since this is a search engine, the largest focal point is the search bar. It isn’t a normal search bar though. This search bar offers a “search by voice” and “search by image” feature that helps create more accessibility for various users.
How does the color palette affect me? Google’s color palette is iconic and easily recognizable. The official color palette of Google is blue, red, yellow, and green keeping it simple yet effective. Going a step further, this color branding is used throughout all of Google’s various software and applications such as Google Classroom and Gmail.
Webpage #2:
What makes this design effective? Personally, I have no idea how I lived before knowing about the resource that is EdTechBooks.org. The design of this website feels sophisticated and inviting.
How did the designer handle the layout? You immediately met with a search bar to help you search for a topic or informational piece. You also have a scrollbar at the top that extends to the right when you are close to the bottom of the page. This is also a feature that is used when reading the EdTech books embedded within the website. The layout also offers a quick and easy way to jump to a topic that is prevalent in the educational technology community. With main topics and resources right below them, the user is able to easily see what they are looking for and possibly be inspired by new resources.
How does the color palette affect me? The color palette is simple yet welcoming. I appreciate how the icon of the bookshelf in the top left corner also serves as a home button as the user scrolls through the various pages. The account type section at the top is delineated with a green background to help the user see that it is a different section from the ones below it. The graphics of each book are the same size and are starred in yellow for popularity. The color palette is effective without being noticeable.
LMS Page #1:
What makes this design effective? Google Classroom’s design is effective because it gives the creator or the teacher useful templates to get started easily and efficiently. It also offers ways that the creator can change elements to create a more tailored experience for the learner. Google Classroom’s design is also effective for the end user or learner who is in the classroom as a student. They can see materials, a mainstream of information, classwork that the creator has published, and the people who are part of the same classroom. Users are able to turn in, upload, discuss, and create various pieces of content based on what the teacher has created. It streamlines a paperless classroom easily without much technology intervention.
What message does this visual convey? The visual message of Google Classroom is organized in boxes that represent classrooms. Creators or teachers have options at the foundational entry level of the classroom to input necessary information such as subject, location, and teacher to name a few. While the teacher and the student have different capabilities within the LMS, the teacher is able to see the student’s view to help them navigate the course as needed. The student is visually able to see all of their classes in one location. They can go into each classroom at will and are able to see the entire communication stream along with previous and current published classroom assignments.
How did the designer handle the layout? Just like Google’s main search engine site, Google Classroom is also simple and effective. There are small buttons that help students see what is coming up next in terms of assignments and a calendar that helps keep them on track. The main part of the site is the boxes that delineate each class. Students click on each class and they are brought to the main page of that course.
How does the color palette affect me? The great part of the color palette is that Google Classroom offers simple ways that teachers can use many templates, or upload their own as a Google Classroom header. I use Canva.com in order to create my own Google Classroom headers that have the information I want my students to see. I use certain colors for certain classes because I do have students who are in two completely different classes so I don’t want them to get confused.
LMS Page #2:
What makes this design effective? Canvas has an effective design aimed to help both teachers and students in a learning community. Canvas offers more freedom for teachers to be able to create content and modules that can be easily accessed by students. I will say that Google Classroom makes it easier to navigate if you are both a teacher and a student; whereas, Canvas does not.
What message does this visual convey? The visual message is clearly laid out with options and main components for the teacher as well as the student. Once you log in as a student, you can easily identify where all of your classes are, what assignments are coming up, your grades, and the other students in your class. On the right-hand side of the LMS, you have recent feedback and upcoming assignments that are listed to remind you. These features are very helpful when you are quickly trying to navigate from one task to the next.
How did the designer handle the layout? For the teacher, the layout is easily understood and offers more opportunities for various learning experiences. The layout is the same for a laptop or desktop computer as a mobile device such as a cellphone. This proves to be an incredible opportunity for students as many students have the ability to then catch up on their work or discussions when they have a free moment from their mobile devices.
How does the color palette affect me? The color palette can be tailored to the user. While the teacher can change the header for what the student sees, the student also has the autonomy to change their own experience should they elect to do so. Giving power to the user creates a more accessible environment and experience for the student and the teacher.
Deconstructing our visual designs will not only help us we can be better designers, but will also help us design our resources so that they are more easily accessible to a variety of audiences. Considering the fact that we have so many resources at our disposal, from handouts to websites, this is extremely helpful.
Comments