Working with Posts & Pages
These video tutorials will help you get started creating new posts, adding links, and formatting content.
Once you have your initial design work completed it is then time to have some else review your work. There are a lot of positive reasons for doing this. It is likely that you have spent 5, 10 or even 20 hours working on your design. You’ve focused in on the nuances and what happens is you start to see each of the small pieces in the design and lose the objectivity to see the design as a whole. An outside pair of eyes can look at your design for the first time and be objective about both its strengths and weaknesses.
You may bet a lot of feedback depending on how many people review your work, but the final decisions are still up to you. You will be reviewing feedback and deciding if you agree or disagree with the comments of others and whether you feel you should make any suggested adjustments.
A peer review is an opportunity to approach someone else’s work with a discerning eye. Peer critique is never an opportunity to be critical for the sake of being critical. When you offer opinions you should be able to give reasoning why you think an element doesn’t work. Simply saying “I don’t like it” is neither productive or constructive. The point of critiquing someone else’s work is to help them in producing the best work possible.
Throughout the remainder of this course you will be participating each week in a peer critique. Each week there will be some guided questions to help you begin assessing one another’s work.
The best way to start a critique is to first consider the elements of the design that excel. What about the design works well? Was there are clear hierarchy and you understood the messaging from most important to least important? Is there a graphic that really illustrates the message? Again, saying that you “like” something may be nice, but it isn’t constructive unless you can explain why you like it.
Once you have explained what works in the design being to consider what could be improved? Sometimes you may have an idea to offer for a possible solution and sometimes you may not know what would help either. For example, you might say that the color of the text makes it difficult to read. You might suggest that they change the color to black, or you might not know what color would work better, but just suggest that they try some other options.
The second coffee bean logo is more abstract and has a really artistic look that supports the company’s mission of providing space for artists. The green option stands out the most with the abstract logo and the bold color. The stroke also looks the best with this color. The purple logo with the orange stroke has really harsh contrast that are jarring to look at. You might change the color of the stroke or remove the stroke altogether. In terms of the logo arrangement, the stacking of Gallery above the logo and Espresso below the logo doesn’t work well. There is too much space between the two words and they don’t read as a singular name. The other options with the name together are much stronger and unified. Similarly, the separation of the city from the name creates the same issue. The options where you have all of the information collected together is much stronger. In the horizontal logo the spacing between the lines of text doesn’t feel balanced. You might decrease the spacing between gallery and espresso and increase the spacing between the line and savannah ga.
This short critique offers both strengths and areas for improvement. Also, each point of critique, both positive and negative, explains why the comment is being made. The critiquer could have said “the second logo is better”. While that is positive feedback, it doesn’t explain why it is better. That explanation is important both for the person receiving feedback to understand and also for the person giving feedback to develop their own skills understanding what makes design successful.
To break this down into a formula, each area of critique should include:
The key to designing for presentations is to keep it simple. You don’t want overly ornamental design elements that will overshadow the content, nor do you want a blank presentation that doesn’t somehow relate the visuals back to your organization. All that you need is an element or two that tie the presentation to the organization you’re presenting about. Let’s take a look at both good and bad design options.
This first template is very colorful, but ultimately is a poor option for a presentation template. The graphics are very well done, but they take up half of the screen and overwhelm the text. They are too distracting. The scale and contrast of the graphics vs the text put the emphasis (or hierarchy) on the graphic elements, not the content. For presentations, content is everything.
This example is a much better alternative. The template has branding elements consistent with the organization, but they take up less real estate than the last option. They also work to frame the content area, focusing in on the content rather than distracting from it. While the design is much more simple, it is still very interesting.
In addition to the template design, it is important that you consider the design of your presentation in terms of how the audience will engage with it. Watch the Prezi presentation on presentations. Although it mentions elements of creating successful Prezi presentations, the principals mentioned of engagement and storytelling apply to any type of multimedia presentation.
Posters are meant to communicate quickly and the key to achieving this is being able to distill information into the most necessary parts. For many people this goes against their natural inclination to include all the details that someone might ever want to know about the subject. Full information has its place in appropriate materials, but never on a poster. To help you decide what information is necessary, you should always ask yourself three questions:
Posters are intended to sell something, promote an event, promote services, or develop ideals. The first step to successfully distilling information is to ask yourself what is the single purpose for the poster? Understanding the primary goal will help you to make decisions about what information is pertinent.
The second thing you need to decide is who your primary audience is. Just as we discussed in the previous unit, this involves compiling a short demographic profile. Luckily, you’ve already done that and should have a solid answer for this question!
Finally, knowing the purpose and audience, you have to decide what is the core message, or what information is crucial to fulfilling the purpose. If your goal was to promote an event you would want information that would get someone to the event: date, time, and location. If you were promoting a service you would want information that allows someone to obtain those services: contact information.
If you feel that supporting information would be nice, but not necessary, a poster can always point someone to additional resources for more information. If you have a webpage with the full contents you could put the web address on the poster. That way the poster doesn’t become cluttered with information, but the information is still available if someone is interested.
The distilling of information has really been a popular theme in contemporary poster design. Minimalism and simplicity are really strong themes because the convey one message really well without clouding the information. Take a look at some examples of modern posters that distill information and focus on very simple design.
There are a lot of different options available for multimedia presentation formats. You may be most familiar with PowerPoint or Keynote, as they have been widely used for many years. These are two excellent options that allow you to combine text and multimedia into different slides with transitions between content, but they aren’t your only options. You should also consider a PDF presentation or a Prezi presentation. Each of these options have different pros and cons for you to consider.
PowerPoint (for windows) and Keynote (for mac) are probably the two most widely-used presentation software. Each bear a striking resemblance to their word processing counterparts, Microsoft Word and Pages. Those similarities make these two options very easy to use.
Powerpoint and Keynote both require the purchase of proprietary software.
Prezi is a virtual whiteboard that transforms presentations from monologues into conversations: enabling people to see, understand, and remember ideas. Prezi became most popular for its unique non-linear arrangement that utilizes zooming over more traditional slides. Instead of clicking to change between slides, Prezi has one very large “slide” and zooms in and out to focus on different areas of the page.
Prezi is free to use online and has a desktop version available to paid users that allows presentations to be created and viewed offline. Students can access a free upgraded version of Prezi or pay a reduced fee for the Pro version with Prezi’s Student & Teacher License.
PDF presentations are created in another piece of software, like Adobe InDesign, and then exported as multimedia enabled PDF files. This is definitely not the easiest of the three options covered here, but should be considered because of its universal use. PDF files are a standard of presenting all types of information and nearly every type of device has the capability to view these files. This option is a good alternative when you do not have your own technology and will need to rely on using whatever equipment will be available for each presentation. If you don’t feel comfortable enough with InDesign, there is also an online paid service using Acrobat.com Presentations to create and export your presentation.
PDF Presentations require the use of proprietary software like InDesign or a subscription to Acrobat.com.
Portability is one of the most important issues in deciding which format to create your presentation in. Initially, you will need to do some educated guesswork to consider the situations that you might be delivering a presentation in. As you begin to give the presentation more you can always make adjustments.
First, you want to consider what type of presentation you are creating, and the typical environment it may be presented in. Will you primarily be delivering to smaller audience or larger audiences? If you are doing an overview presentation of the organization you may be delivering to larger groups, while a fundraising presentation would likely be delivered to smaller groups. If presenting to larger groups, while the setting be one that would already accommodate multimedia presentations with preexisting technology? On the other hand, would smaller presentations take place in someone’s office or a coffee shop? Finally, you need to consider whether you would have your own portable equipment to run the slideshow with audio, and video.
All of these considerations will help you decide which format will be best for your presentation. Let’s say that you will primarily be speaking to large groups and that you have your own computer with built-in speakers, projector, and portable projection screen. This would be the ideal situation, as you could really choose any format because you would never have a situation where particular software wasn’t available or a room wasn’t equipped with a projector.
If you know that you will primarily be speaking with smaller groups or individuals over coffee, your needs will be very different. It wouldn’t make sense to bring a projector to this type of meeting. Maybe you would want to show the presentation on a laptop or tablet instead. Your presentation type would be limited by what would work on your laptop or tablet. If you couldn’t load powerpoint on a tablet, then that option would not work for you.
Perhaps no other medium places such high importance on the design theory of repetition as web design. The theory of repetition states that you repeat design elements throughout an entire piece. These repeating elements create continuity and also make it easier to understand the content. When designing a website there are two main areas in which repetition needs to be applied: with the inclusion of common elements and also through visual consistency.
The use of common elements in webpages is the most important factor in how easy a webpage is to use. Website visitors expect certain things to be present on a page and when they don’t find those things it becomes much more difficult to navigate the page quickly and efficiently. Does this mean that you must have the same sections that always look the same? Absolutely not! The styling and look of these areas is completely up to you.
In the broadest scope of a webpage, there are four main sections that nearly all websites contain: a header, navigation, an area for content, and a footer.
The header is the first identifier of a website. Typically it includes a logo (usually in the top left-hand corner) and some explanation of what the site is for. This may be explain with a tagline that encompasses a company’s purpose, or imagery that visualizes what they do. Take a look at these examples from arts organizations across the country. Each one is visually unique, but they all share commonality. They each include a logo on the left, the organizations name, imagery reflective of the arts, and two have text descriptors that describe their purpose.
Every website should have navigation that is consistent on each page. This is called global navigation, meaning that no matter where you are on the site the navigation will direct you to anywhere else on the entire site. Navigation can be arranged either horizontally or vertically as these examples show.
There is some common terminology used in navigation that website visitors are accustomed to. Using different terminology may make it more difficult for your visitors to quickly and easily find what they are looking for. A general rule is that your navigation labels should clearly define the content that will be found on that page.
The third area of any website is the content area where the bulk of the text and media is included. The arrangement and layout in this area can really vary. Ss you can see in the examples below, these four sites have one column, two column, and three column content areas.
The final area is the site footer. Footers are almost always located at the bottom of a site and are consistent on every page. They generally include a statement of copyright and some type of contact information. This can be an email address, phone number, or link to a page with contact information. Sometimes footers also contain the site navigation as very small text links, as the last two examples show.
Now that you have the common elements of your website in place, it is equally important that those elements retain visual consistency throughout the entire site. Image if you visited a site that had the navigation in a horizontal bar on the homepage, but the about us page had it as a vertical section on the side of the page. A visual shift like that would be jarring and you would have to regain your bearings on the second page and figure out a second time how to navigate the site. If the homepage has the navigation styled in a particular manner, every other page should have similar styling. This may seem obvious with sections of the site, but it also applies with the styling of content within the content area.
To make this much easier, CSS comes into play here. Styles are set in the CSS that then apply to every instance of an element throughout the site. For example, a style would be set for all of the paragraphs throughout the entire site. Every time you added a paragraph of text it would automatically be formatted the same way. The same is true for different sized headings. The key to making sure content remains consistent is to use the built in text styling. These styles are preset and will be the same every time you apply them.
When applying headings, the approximate size relationship is shown in the drop-down style box. Heading 1 is the largest, Heading 2, slightly smaller, Heading 3 is even smaller, etc.
Other type of visual elements are also predetermined in your WordPress theme. Links will always be formatted the same, tags and categories are formatted the same, and comment forms are formatted the same. In many ways WordPress does a lot of the work for you to make sure that visual consistency is maintained.
Hierarchy in design is arrangement of different elements so that the most important information is the most visible and the least important information is the least visible. It is a way of ordering content that allows the viewer to scan a text. Through use of the various elements of design, both separately and in tandem, you can create a hierarchy that makes it much easier to consume information.
This humorous example shows the power of hierarchy to change the meaning of text. The billboard reads “The naked truth about our waitresses is that they will flirt with you to get a better tip.” The designer varied the size of the text dramatically so that a new message appears.
Using scale is one way to create a hierarchy. Larger items are perceived as more important and will grab more attention than smaller items. You could use scale to make certain text stand out more, like in the previous example, or use scale to highlight one image more than another.
Hierarchy can also be established through the use of space. The more empty space (also called white space) surrounding an element of design the more emphasis it receives. Take this example. In the first design, the article heading is grouped with the text. The text is set at the same size and at a glance it is difficult to tell what is the heading. In the second variation only the position of the title has changed. Because it has moved into the white space your eye is naturally drawn to it. The white space actually pushes your eye towards what is in it. Without changing the size of the text, only by giving space around an element is hierarchy created.
Another excellent way to create a hierarchy is through the use of color. Take these two pages of text. In the first example, all of the text is uniform. In the second example, color has been used to highlight the beginning of new sections of text. The size and weight remains the same, but the introduction of color immediately draws your eye to specific words, creating hierarchy.
These aren’t the only methods available to create hierarchy. As we continue through the course we will touch on other design theories that contribute to hierarchy.
The most important part of a multimedia presentation is constructing a solid outline. By outlining the content that you want to cover, you than then focus on the multimedia elements the most appropriately support the content. The basic outline is much like you might do for a long paper with bullet points to indicate the different ideas that will be presented. Similarly, you should have an introduction, 2-5 main points, and a conclusion when outlining a presentation.
Here is an example of how to structure a basic presentation outline:
With the initial outline in place, then start to consider the types of media that will be best. You should make notes on your outline to indicate media like below. This example of a presentation outline covers only the main points, not subpoints. Your presentation should have more detail and include subpoints.