Photography 101, Part I: The Camera

Interested in photography? You’ve come to the right place! The good news is that taking pictures has only gotten easier to do. Since the word was first coined in 1839, the technology of picture-taking has become both more sophisticated and more accessible. As photography has become increasingly popular, and as the number of devices that can take photos have grown exponentially, options can feel overwhelming. This post will guide you through some of the choices you’ll be faced with as you start taking pictures.

Decide What You Value

This is not yet about deciding what you feel is picture-worthy. It’s a little more fundamental, and you should think about it before you even pick out your camera. Ask yourself: what do you value most in terms of your own photo-taking practice – affordability, portability, quality? Do you want to take pictures of your vacations or document your family? Use photos to check in on Facebook or become a professional portrait photographer? Your answer can change later (or you can have multiple answers!), but when you’re just starting out, think about your most basic needs and work to meet those first. It’s easy to be excited by all the bells and whistles of fancy cameras, but be realistic about what will serve you best. Throughout this series of posts, I'll be compiling a list of cameras suitable for a few different purposes. There is some overlap, as well (for instance, many budget cameras--the second area I'll be reviewing--are also good compact/travel cameras).

 Herbert George Ponting and Telephoto Apparatus, Antarctica, January 1912

Video formats

A worthy mantra for web design is “consider the user” so let’s look at one way this affects your video file format choice.

Although laptop and desktop computer processors are operating at speeds fast enough to handle larger and larger video files, many users will be viewing your videos on small, mobile devices.

A helpful feature of the iMovie export function is a chart that indicates which file formats and sizes are the best choices for various types of hardware:

While you may be tempted to maximize the beauty of your video in HD glory, a smaller format could make your work more accessible to a wider range of potential viewers.

Principles of Design: Composition

The end result of a visually decipherable website is often at odds with the piecemeal process of its composition. Designers put in incremental creative effort - using aspects such as colour, typography and layout - that, once integrated, must cross the gap instantiated by the graphic user interface: the gap of the producer and the consumer/viewer/reader. Furthermore, visual composition tends to hit us all at once: the overall effect of the individual design components working together is important.

The difficulty of describing visual stimuli and their impact naturally carries over in the narration of one's design choices. One thing we definitely learned in the collaborative space of DHSI is that to work on creating a website requires having a vocabulary to communicate what desired effect you want to achieve, and through what constitutive parts and processes.

So bear with me!

From the earliest stages of brainstorming, our group found itself employing the vocabulary of visual communication almost unconsciously as we talked through the principles we wanted the visual composition of DHSI Design to achieve. One of the first words used in conversation was "subtle", then followed by the idea that we have one piece of bold design or color. We were enacting in our design process the subtlety-boldness binary of strategic visual composition. Similarly, while discussing the affective impact of the website, Emily suggested that we work with lots of negative space to allow for easy legibility of the blog posts. Here, she was tweaking Alexander White's notion of space as one of "The Seven Design Components". After going off to design the various elements of colour scheme, logo, fonts, and layout, we met to discuss rendering these parts into an overall aesthetic. This was where visual composition had its last say.

Emily and Verena discussed the importance of keeping the negative space of the logo header in sync with the rest of the background. They also coordinated the purple "d" in the header (#8E008E) with complementary colours.

Similarly, they used a monochromatic color scheme to coordinate the blues of the CSS in the balloon with those of the dates, label tags and hyperlinks.

These last-stage negotiations resulted in the consistency-variation and subtlety-boldness principles that undergird the published website.

Design Demands Attention

My digital humanities eureka moment occurred at 5:20pm on Tuesday, June 5th, 2012 and its catalyst was as much brilliant design and multimedia as content. I was watching and listening to Jeffery Witt describe what seemed to me an interesting take on an online digital critical edition of an ancient work in philosophy by Petrus Plaoul when he clicked on a link, opened a hidden menu, and brought forth an image of the original manuscript text – actually one of four different editions – with two taps on a track pad I was hooked. Although I find them fascinating, text encoding and digital edition projects are not my field and I have struggled at times understanding the application.

Click to Enlarge

At 5:20 Tuesday, I got it. I see the incredible scholarly merit of many DH projects that had escaped me. While Jeffrey Witt’s project is brilliant in conception, it is the design that sparked my DH awakening. Witt’s design meets all of Lev Manovich’s key features of new media design. The project is modular, with translation and original image easily connected and navigated. The edition is automated in the presentation of the image of the original manuscript. It is variable in the choice given to the user on which section, translation, or ancient edition is accessed. Finally, the ancient manuscript images are transcoded to make them more accessible and useful in the context of a digital critical edition.

The key design feature that seals the deal, however, is that of proximity. The Latin encodings, translations, and original manuscript images are viewed one above the other with one click. Even a non-Latin reading, non-medievalist such as myself can have fun with Petrus Plaoul. In fact I have found myself going back to the site - even before I decided to write this post. Placing the new and the old work in close proximity focuses and maintains my attention.

Great design has this effect, when Dr. Witt clicked on the link to the image of the original, there was an audible rumble in the audience as eyes lifted from Twitter feeds to focus their attention on a unique design where key elements of research are placed in proximity. In digital projects great design grabs you by the shoulders and holds you in place giving the content a chance to seep in.

Explore Jeffrey Witt’s critical edition www.jeffreycwitt.com

Image standards

This is about the nuts and bolts – the technicalities of file types and attributes that will make your images viewable to your readers.

First of all – file formats.
GIF for graphic elements with large blocks of similar colours, for example logos.
JPG for photographs
PNG combines elements of both GIF and JPG

Here is a web site that summarizes the differences and gives some examples.
http://www.sitepoint.com/gif-png-jpg-which-one-to-use/

What if your file is not in the format you want? Most photo editors such as Photoshop can convert your file and save it in multiple formats. Check out this list of free online graphic converters: http://www.internetymultimedia.com/?q=node/58

A word about file size: As a general rule, provide the smallest file size that will meet the quality requirements of your user. For example, a photograph of a work of art that your may need to be examined in great detail will require a larger file size than a photograph that is provided as a general illustration on your site.

Adjusting the resolution (expressed as dots or pixels per inch, or dpi/ppi) can help to achieve this objective. You can do this in Photoshop using the Image Size dialogue box.

 Here is a portion of a photograph that is originally a 180 dpi JPG (175kb)

 This can be reduced to 72 dpi (124kb) without a huge loss of quality:

But if this 72 dpi photo is cropped to show just a small detail, things can get fuzzy!










Remember – once the pixels are gone, they’re gone! Always save your original photos in their highest-quality format and resolution so that you have more pixels at your disposal for future close-ups.

Principles of Design: Color

Why Color Is Where It's At

We chose to begin our design process by selecting a color scheme for our blog. Color is incredibly important because it will influence most (if not all) of the other decisions you will make about logo design, layout, and so forth. This is because colors can lead the eye to certain parts of the page, make elements advance or recede towards the background, or make elements appear larger or smaller. Consider the following:

•  Lots of white or soft, light colors can give the illusion of space.

•  Warm colors tend to stand out, whereas cool colors tend to stand back.

• Saturated (ragingly bright) colors catch the eye, so you should use one of them to emphasize a single point

Selecting a Mood

Color schemes also are important in creating an overall mood for your site. In considering mood, keep in mind the audience you are trying to reach and the product or message you are trying to promote. For color scheme ideas, look to the professionals: Nordstrom is an upscale outfit and so they use a simple, formal black and white color scheme. Anthropologie has a vintage clothing theme going, so they use washed out colors and playfully bright highlights to express a mixture of romantic nostalgia and fun. Don't feel like you have to come up with a completely original color scheme- go with what has already been shown to work!

Here are some examples of webpages that really create a mood with color:

More Hazards More Heroes
 This is the webpage for a folk musical group based out of Nashville. They have selected a complementary color scheme of turquoise blue and orange. Notice how the interactive parts of the page (the "play" and "download" buttons) are graphically rendered in warm colors, whereas the static parts of the page, such as titles, are in cooler shades. The muted brown tones in the background echo the laid-back, simple acoustic music that the group plays.


Brunet Garcia

These people do a lot of marketing, so their website is very graphics heavy. The front page employs a high contrast monochromatic color scheme, which is bold and attention-grabbing, just what marketing is supposed to do! Once again, the interactive element, a movie, has a bright red mark to draw the attention. The monochromatic scheme seems simple, but it is a good choice because their other pages have graphics brimming with color, and the layout should not distract from these images.


Decode
Here is another design agency with a beautiful website. They have employed a triadic color scheme, using brown, fuchsia, and sea green. Notice how large blocks of color that are merely decorative (i.e. in the background) are understated, whereas the tiny hyperlinks are bright pink! These unlikely colors give the site a youthful, modern vibe, but are slightly muted so that they avoid recalling a 6 yr-old girl's bedroom. Chocolate is a great color because it can add a subtle tone of seriousness to its more outgoing neighbors. In this case, it is replacing orange as the third element in a triad.

You don't have to have a bunch of flashy graphics to make good use of color on your website. Basic shapes can be just as striking and often very appropriate. If you are interested in adding your own photographs to your design, check out our blog posts on photography- anyone can take artful, beautiful photos with a little practice, and it doesn't require thousands of dollars of equipment, either!

 

 

Principles of Design: Typography

Legibility and Readability

For the typeface designer, the concept of legibility  - or ensuring that each individual character is distinguishable from the rest - remains a primary concern. However, for most web designers employing already-assembled fonts, the typographic principle of readability becomes more important, itself branching into two distinct concerns: the ability to see the text on the screen and the ability to read the text on the screen. Both concerns are front-and-center in the designer’s rationale behind choosing their font. Additionally, the designer has the option of manually kerning the characters and adjusting the leading between lines, allowing for the most effective contrast between white space and characters. In our Multimedia course, this was accomplished using Fireworks and CSS: for example, in her execution of the “DHSI Design” header logo, Emilie manually kerned Helvetica to allow the weight of the font its maximal visual impact. In the choice of font for the blog’s main content, Verena chose Open Sans with both seeing the text and reading the text in mind. Open Sans employs more space between characters, allowing the reader to visually digest the posts and also to read across at a quicker pace.

 

 Combining Fonts

In most websites, the designer has to choose a combination of fonts to service the header, body, sidebars, and footer. While all of these spaces in the visual field don’t have to be different, often it helps to strategic choose how your fonts will work with, or against, each other. The three main options for this process are concord (high degree of similarity in adjacent fonts), contrast (high degree of difference), and conflict (neither, but not similar enough to be harmonious). The Typetester online tool is a great way of seeing how your various font choices will look alongside each other. Once we decided to operate within the sans-serif family of typefaces, our design template involved working within, and tweaking, the concord strategy. In the header, Helvetica achieves certain things on its own - for example, as a bold, big, bloggy, and yet minimalistic font, it coordinates with our image and color scheme, letting the color coordination stand out - however, it also works concordantly with Open Sans in the body.

 

Fonts for the Web

When selecting typeface for the web, you have to keep in mind that text will be displayed in a number of different contexts- mobile devices, different browsers, and different operating systems handle fonts in divergent ways. Increasingly, normalizing typeface is becoming automated, but there are still some good standard practices to follow for the web. One is to specify a font family rather than just one font for your blog. (Usually interfaces like Blogger and Wordpress do this for you). A font family is a collection of similar fonts in a list, usually found in your CSS. If the first font in the list can’t be displayed, the next one will automatically be displayed.

So, if you specify “Arial, Arial, Helvetica, sans-serif” as your font family, the browser will first display text in the Arial typeface. If no Arial fonts are available, it will move to Helvetica, and finally any sans-serif font if nothing else is available. This keeps your text looking relatively consistent across different devices. Here is a nice display of font families. Another great resource for fonts for the web is Google web fonts which hosts hundreds of free fonts on the web that you can link to with your CSS. This means you can use totally crazy, creative fonts and they will still work on other peoples’ displays.

We stuck with a simple, sans-serif collection of fonts for our website. In general, the textual content of a site like a blog is most easily read with a simple, appropriately sized font like Verdana or Arial. Elements of a site like headings, subheadings, and page titles can be more creatively typeset, as viewers will skim over them quickly and their primary purpose is to break up large chunks of homogeneous text.

 

Cultural Considerations of Typography for Web Design

The explosion of digital text has meant that fonts and word processing are now permanently interwoven with the texture of everyday aesthetics. This means that the use of fonts on the web throughout the Internet’s history has given certain typefaces cultural associations. It is important to watch what other designers are doing in order to catch aesthetic trends and adapt to them. For instance, you probably have recognized that Comic Sans is not popular with web designers- In fact, it’s anathema. Meanwhile, clean, minimalistic fonts like Helvetica have become a popular way to express forward-thinking design savvy. Some other considerations:

• Verdana is a very legible font, but it is also “invisible” because so many people use it. This makes it a great font for large blocks of textual content that must be read carefully.

• Times New Roman is also very legible, but because it was the default font in the “Netscape era,” it can make a page come across as out-of-date. It can make for nice headings, however.

• In general, serifed fonts can evoke more of a “period” look because they were used in pre-digital print for so long. This can be great if your webpage has a vintage or historical vibe, but probably isn’t appropriate for advertising cutting edge techie innovation.

For the total typography geek, I Love Typography has great font reviews that explain the historical background behind the creation of innovative and beloved fonts. They also have good articles on selecting fonts and typography for the web.