Design Tidbits

Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

Links & More

	Print version
Related Links
	My Design Tools – Part I
	UI Toolbox: Capturing and Editing Screenshots – Part I
	UI Toolbox: Capturing and Editing Screenshots – Part II
	Using Prototypes
Background Links
	Review of Paper Prototyping (Snyder)
	SAP User-Centered Design

My Design Tools – Part II

By Gerd Waloszek, SAP AG, SAP User Experience – Updated: May 31, 2005

Communicating via a "Website" | Some Image Tips & Tricks | Some Digicam Tips & Tricks | Final Word | References

This article continues and concludes my short series on how I do my design work and which tools I use. Here I present how I communicate with developers through a small Website. In addition, I give away some image and digicam tips and tricks.

Communicating via a "Website"

When I am working on a "quick-and dirty" (re)design project, I have quite a number of requirements to fulfill, such as:

Get to know the application, its usage context, and prospective users
Understand and structure the information that I gather from different sources
Create design proposals
Communicate these proposals to the developers
Discuss the proposals with the developers and, maybe, colleagues that I consult, and
Iterate through the design and its alternatives or variants

My Solution – A "Website"

All this usually has to be done under severe time constraints, and often with very fragmentary knowledge at the start. My personal approach to cope with this situation has become to create a small Website on a shared volume or folder, which collects

Screen dumps if an application already exists
Information from different sources that are available to me
Design considerations, and
Design proposals - typically with alternatives and variants

I collect screen dumps on one or more HTML pages and arrange them in tables. The tables contain thumbnails of the screen with descriptions next to them and links to the actual dumps, which appear in a new window.

Example of a Website showing thumbnails for design proposals

Figure 1: Example of a Website showing thumbnails for design proposals (in this example, I use the SAP Design Guild style sheets)

My design proposals typically start off from the screen dumps, if there are such. In a first step, I redesign the screens based on the screen dumps in an image processing program, such as Adobe Photoshop; this may include eliminating existing screens and adding new ones. I collect the design proposals in a manner similar to the screen dumps; however, the comments are usually longer because I have to substantiate the proposals. Discussing these proposals with the developers helps me to clarify open questions and misunderstandings on my side as well as to eliminate certain design variants.

In an intermediate step, I might combine these screens into a simple HTML prototype with HTML pages that just include the screen images and links between the pages for navigating between the screens (or I use image maps on the buttons, if a more sophisticated navigation is needed).

In a further step – the most important one –, I create HTML prototypes, typically in a more or less "HiFi" fashion. Often I start with several design alternatives. After discussing these with the developers, I focus on one base design but still explore variants of this design (which I often create in quick succession). The prototypes can be called from the Website and appear in a new window.

Finally, we agree on one design, which is hopefully implemented.

I made the experience that each of these steps introduces new design aspects. Of course, you might foresee many problems within a design if you think "hard enough." But I am more "empirically-minded" and stumble across many of the problems when playing with the prototypes or when moving on to the next type of prototypes (e.g. from the screen images to the HTML prototype). The discussions with the developers are a valuable and indispensable part of the design process because they help to resolve misconceptions and gain a common understanding of the design.

The Website as a "Protocol"

After a design project has come to an end, it may get lost, which part the user interface designer played in the project. With such a Website you can easily testify your part in the game. So, the Website is also a "protocol" of my work. Apart from documenting my work, the Website may also help me in my future projects: I may look at previous design solutions, and reuse design ideas, screen elements, or even parts of the prototypes. And last but not least, the results may flow into later standardization activities and guidelines as found in the SAP Design Guild.

Keep it Simple!

I try to keep the Website as simple as possible because I do not want to be overwhelmed by its maintenance. It is just an organizing tool; what counts is its content, not whether it is fancy or not.

Some time ago, I tried to organize all my documents in the fashion of a Website, but this ambitious project failed because of the necessary maintenance work needed for the site. In addition, the file system on a computer is an information organizer in itself, however, including everything on your harddisk, such as programs, system files etc. Last but not least, the mail program is another organizer: Many design documents come as mail attachments and typically reside within the mail inbox, which also has to be maintained. Sadly, there is no direct connection between the mail inbox and the file system or my Website (apart from links that point out of the mails – but I would like to have it the other way round). So, one unresolved question is how many organization systems you want to have on your computer. One strong point of such a Website is, however, that it can be made platform-independent and easily transferred to other computers.

Quick-And-Dirty Projects - What About the Users?

What about the users in "quick-and-dirty" projects? Often, there are none involved, which is the most problematic aspect of such projects. As I am often consulted at a late stage in the project, there seems to be no time left for involving users. Usually, however, the application is not built from scratch and there is at least some understanding of the usage context and the prospective users – yet real users are not involved. Luckily, if you have designs or prototypes you are not empty-handed in such a situation. So, why not copy them to a laptop and show them as many people as possible? For example, you can take the designs home and let your family play with them. This is not a "real" user test but better than nothing at all.

Some Image Tips & Tricks

As images play an important role in the life of user interface designers (UIDs), I continue this article with a couple of recommendations and tips for images – typically UIDs are not experts in image processing. These tips and tricks are based on my personal experience and may not always be the best approaches. If you know better tricks, please, let me know.

For a more thorough discussion of image processing, you may want to consult the voluminous literature on graphic and Web design.

Note: There are some updates to this topic.

Graphic File Formats

Similar to Don Quichote who fought against windmill sails, I fight against using the JPEG file format for screen dumps and screen design proposals. Typically, this format is chosen whenever images are to be included in Web pages, but nowadays you can include this format in Office applications as well. The JPEG format is chosen because it compresses images very tightly. But as JPEG uses a lossy compression it creates artifacts, which may be more or less disturbing – depending on the compression rate you choose. These artifacts

Soften or "smear" borders and text
Change color values more or less – you cannot pick correct color values
Modify homogeneously colored areas by introducing pixels with similar colors

The artifact are the stronger the more the color values change. This means in essence that color values are more affected around text, borders, angles etc. See figures 2 to 4 for examples; perhaps you need to set your monitor darker to see the artifacts more clearly.

It depends of the purpose of an image, if the effects are tolerable or not. They are tolerable in "end products" that are used for presentations. But if you get such an image as a starting point for a redesign, you are in trouble because it is hard or impossible to clean it up and extract exact color values from it (see figures 2 to 4).

Original image in GIF format 200% enlargement to show details and for comparison with JPEG versions

Figure 2: Original image in GIF format (5.016 Bytes); right: 200% enlargement to show details and for comparison with JPEG versions. Background color is DEDECE

Image saved in JPEG format at compression level 6 200% enlargement to show artifacts

Figure 3a and 3b: Image saved in JPEG format at compression level 6 (from 12) (17.788 Bytes); right: 200% enlargement to show artifacts (saved in maximum quality JPEG). Example picks for background color are DDDECC or DDDECE in uniform regions; the value depends on the specific area

Image saved in JPEG format at compression level 3 200% enlargement to show artifacts

Figure 4a and 4b: Image saved in JPEG format at compression level 3 (from 12) (14.902 Bytes) right: 200% enlargement to show artifacts (saved in maximum quality JPEG). Example picks for background color are DCDFCC or DCDED0 in uniform regions; the value depends on the specific area

The other choice for Web images is the GIF format, which however is restricted to 256 colors. This is rarely a problem because the screens – not banners, graphics etc. – typically use fewer colors. It may become a problem with color gradients or photographic images. As screens typically have larger uniformly colored areas, the screen images compress well in the GIF format. GIF uses a lossless compression scheme, which, however, has a peculiar horizontal-vertical asymmetry (horizontal stripes compress better than vertical ones; see figure 5 and table 1).

Figure 5: Image with horizontal vs. vertical stripes used in size comparison

File Type	Stripes	Size in Bytes compressed	Size in Bytes uncompressed
GIF	horizontal	347	---
GIF	vertical	821	---
TIFF	horizontal	6.748	81.722
TIF	vertical	8.192	81.738

Table 1: Sizes in bytes for the striped images and different file formats; although there is a slight asymmetry in the sizes of the TIFF files it is much more notable for the GIF files. Note how well the images compress because of the uniformly colored areas

Note that the GIF format may also change color values if colors are converted to indexed colors and certain color palettes are used. Figures 6a and 6b demonstrate this effect drastically for the Windows system palette. However, with other color palettes, such as the adaptive color palette, the effect may be much more subtle and not be noticeable at first but it is there – you only realize it if you pick the color values.

Instead of an optimal color palette the Windows system palette is used without dithering; many colors have been replaced by colors that look quite differently. Here the same color palette is used but with dithering;

Figure 6a and 6b: The same image converted to RGB and then converted back to indexed colors. Left: Instead of an optimal color palette the Windows system palette is used without dithering; many colors have been replaced by colors that look quite differently. Right: Here the same color palette is used but with dithering; now the result looks much more similar to the original screen, however exact color values can not be picked from this image.

The new PNG format has been developed as a replacement for the proprietary GIF format, but still most browsers cannot display it without using plugins; otherwise it would be a perfect choice.

Update: Kai Willenborg reminded me of the usefulness of the PNG format. He assumed that most of today's Web browsers would handle PNG images without requiring plugins. My own test, however, revealed that this is not the case. All tested browsers (NS 4.7 and NS 6.2 Win/Mac, IE5 Win, IE 4.5 and 5.1 Mac) except Opera 5 (Win/Mac) and 6 (Win) still require the Quicktime plugin or a helper application. So, even though most users will have this plugin installed, there is a risk that some users might not be able to view images in the PNG format.

Kai also noted that for screen dumps the PNG format leads to image sizes that compare favorably with JPEG. This is in line with what I said for GIF – PNG may compress even slightly better than GIF. All in all, avoid using JPEG for screen dumps (at least in original size) – use GIF or PNG instead.

So, what can we do until PNG becomes universally usable? When working in Windows, the natural choice would be to use the BMP format. But this format is typically uncompressed and creates huge files, which cannot be displayed in a Web browser. I recently "rediscovered" the TIFF format as a solution for me. It has millions of colors and a lossless compression (LZW). The resulting TIFF files are larger than the respective GIF files, because they can display millions of colors. Therefore, I use the TIFF format for intermediate results or for screens that will be further used, and reduce the colors for the final image in the GIF format. In some cases, especially for reduced images, I use the JPEG format for the final product because it has more colors and the borders and texts are "smeared" anyway.

If you want to gain a deeper understanding of the different file formats, I propose that you take a screen shot and save it to different file formats, such as GIF, JPEG (at different compression rates), TIFF (with and without LZW compression) and BMP and compare the file sizes. Also load the JPEG versions into an image processing program, enlarge them and watch out for compression artifacts around texts and along borders. In addition, check the color values and compare them with those in the TIFF or BMP version of the image. Below, there is an example based on the SAP Design Guild home page (se figure 7 and table 2).

SAP Design Guild Homepage

Figure 7: Home page of the SAP Design Guild – it served to create the following comparison table of file sizes

File Type	Info	Size in KB	Full Size View
BMP	24 bit, uncompressed	1989
TIFF	24 bit, LZW compression	239
JPEG	24 bit, medium quality	179	yes
GIF	8 bit = 256 colors, selective palette, 75% diffusion	100	yes

Table 2: Comparison of file sizes for the example screen image; depending on the compression rate for JPEG as well as the color reduction and dithering for GIF the file sizes may vary for the formats

Reducing the Size of Screen Dumps and Example Screens

Often I need smaller versions of an image, such as a screen, be it as a thumbnail or because I do not want to include the large version in a Web page. In such a case, I resize the image. But beware – if the image is in indexed file format (i.e. has 256 colors or less) the reduced image may look crude (see figure 9a). The reason for this behavior is that in indexed image format, the imaging software simply throws away pixels instead of interpolating the image. For getting good results, I change the image mode to RGB format and then resize (or "resample") the image (some imaging programs distinguish between "resize" and "resample" – in that case, use the latter function) (see figure 9b). After the resizing/resampling I usually apply a soft sharpening filter, such as the unsharp mask (figure 9c). But I have to be careful not to get "embossment" effects (the text seems to "glow"; see figure 9d). Finally, I either save the file in the JPEG or GIF file format (in the examples below I used the GIF format). The latter may introduce unwanted colors because the resampling and sharpening introduce a lot of intermediate colors, which can no longer be correctly represented in the GIF file.

Original image used in this example

Figure 8: Original image used in this example

dropping pixels is called nearest neighbor interpolation in Adobe Photoshop bilinear interpolation

Figure 9a and 9b: Image simply resized at 56% with dropping pixels (left; dropping pixels is called "nearest neighbor" interpolation in Adobe Photoshop) vs. resampled with interpolation (right; bilinear interpolation); as the original image is in GIF format, I had to switch to RGB format for the resampling

Image resampled and sharpened resampled and oversharpened

Figure 9c and 9d: Image resampled and sharpened (left; strength 50% ) vs. resampled and oversharpened (right; strength 150% causes a embossment effect)

Resizing an image in a Web browser may be comfortable but it is not a good idea for two reasons: (1) the image quality is bad because the browser does not use interpolation (this depends on the browser and may change), (2) the image is larger than needs to be, and thus causes longer loading times.

Original image resized to 280 pixels

Figure 9e: Original image resized to 280 pixels (or 56%) in the browser

Older versions of PowerPoint also resized bitmap images badly because they did not use interpolation. This has, however, changed much for the better. So if you still experience scaling problems in PowerPoint check your version and switch to a current version.

Note that the conversion to RGB before the resampling is especially important for screen dumps or any images containing text. It is less critical for photos showing "natural" scenes.

photo of a rose

rose reduced in size bicubic interpolation

Figure 10a-c: If a "natural" image, such as the photo of a rose, is reduced in size (here again to 56%), the difference between simple resizing without interpolation (lower left) compared to bicubic interpolation (lower right) is noticeable but not as dramatic as for screen images

Using Images from Word or PowerPoint Documents

Often, colleagues collect images in a PowerPoint presentation or a Word document, for example, when they want to collect screen dumps (see first article for details). While this makes the collection of the dumps or images easy, it creates a problem as soon as you want to use and modify these images. If you select an image, copy it to the clipboard and then paste it into an image processing program you will be astonished to find that the image looks "crumbled". If you resize the image to 100% it does not get better. What has happened? Obviously, the Office programs store those images in an internal format that is handed over to the clipboard but not correctly interpreted by the imaging software. By accident I found a workaround, which works most of the time, although not always: I use the program ThumbsPlus (I still use the old version 3, but version 4 works equally well for this) and paste it into this program. The image appears in a new window and looks as scrambled as in any other imaging program. However, in the "Image" menu there is a command "Extract Bitmap". After applying this command to the image, it is scaled to 100% and in most cases looks well (sometimes there are minor pixel problems). By the way, Thumbs Plus, a shareware image utility, is a very useful program in itself. Finally, I save the image in the TIFF or GIF format for further processing.

Update: Kai Willenborg gave me the hint that ThumbsPlus is not required for overcoming the problem described above. To his experience, the standard Windows tool Microsoft PhotoEditor serves the same purpose. Simply paste the clipboard into PhotoEditor as a new image and save it in the desired file format (Kai selects the image again and copies it into another image processing program). I tested Kai's tip, and it worked well.

Update to the Update: MS Photo Editor is no longer included in newer Office versions. Therefore, Kai's tip cannot be applied to Office 2003.

Layers

Programs such as Adobe Photoshop or Paintshop Pro allow you to use layers for demonstrating different design variants. For example, when our group discussed the backgrounds of Web applications, I used this technique to quickly switch between different backgrounds. This, however requires that the files are saved in the proprietary file format of the respective program.

Text

Some programs, such as newer versions of Adobe Photoshop, allow you to change text later. Older programs convert text into bitmaps that can only be changed with graphic tools, such as the eraser or pen. Note also that if you save an image in the TIFF, JPEG or GIF format, the text layers are converted to bitmaps and all layers are flattened into one layer. As a result, you loose the ability to change text with the text tool.

Do not Throw Away Intermediate Files

I recommend that you keep intermediate files so that you can reuse them later or step back to previous design states. In addition, you can change text in text layers if you did not flatten the file. I already mentioned that I always store images that I collect as separate files and not only paste them into a presentation or Word file.

Some Digicam Tips & Tricks

I conclude this article with a couple of digicam tips and tricks. I am using digicams for about 5 years now, and they have more and more become serious tools – for user interface designers as well as for the hobby photographer. And they have the speed advantage: no chemical processing is necessary, you can see and judge the images nearly instantly.

Note: There are some updates to this topic.

Image (CCD) Size

I recommend to use a digicam with at least 2 megapixels (1600*1200 or 1800*1200 pixels) - the more, the better (at this moment, the most advanced consumer digicams have 4 to 5 megapixels). See figures 11a-c below for a comparison.

Note: CCD means charge-coupled device and refers to the image in the digital camera; simply-spoken the CCD is the "digital film".

1280*960 image

From 1280*960 image (1 megapixels, XGA)

From 640*480 image (VGA camera)

640*480 image

1600*1200 image

From 1600*1200 image (2 megapixels)

Figure 11a-c: Comparison clips from shots of a whiteboard taken with different resolutions (see clip from 5 megapixels digicam for comparison) – all clips unprocessed

Figures 12a-c demonstrate that sometimes a greater resolution can make a difference and sometimes not: The difference between 2 and 3 megapixels (or 1600*1200 vs. 2048*1536 pixels) makes the bricks clearly noticeable; the difference between 3 and 5 megapixels (or 2048*1536 vs. 2560*1920 pixels) does not add any significant information. However, it depends very much on the object and distance to it when such differences will manifest themselves.

sample shots with a 2 megapixel camera 3 megapixel camera 5 megapixel camera

Figure 12a-c: Comparison of sample shots with a 2 megapixel camera (Nikon Coolpix 950, left), a 3 megapixel camera (Nikon Coolpix 990, middle) and a 5 megapixel camera (Minolta DiMAGE 7, right) (photos by Jan-Markus Rupprecht, Imaging-One)

If the resolution of your camera is not high enough, you can take the snapshots "in pieces." But assembling these pieces into one image may be difficult because the different shots do not fit together well (you can try panorama software...). At least some fiddling in a graphic program will be necessary.

Processing the Images

Usually, digital photos need some post-processing, such as contrast enhancement, color correction, and sharpening,. but make sure that the effort is really justified. See the examples below (figure 13a and 13b) for the effect of two simple actions: (1) an automatic contrast and color correction (command "Levels", button "Auto" in Adobe Photoshop), (2) a soft sharpening filter (unsharp mask). Much more can be done to improve the image quality but the point is that the procedures are fast and easy.

Note: You can see larger versions of the photos with details in the previous paragraph on image and CCD size.

Image before processing

Figure 13a: Image before processing (for correcting the light gradient see below).

Image after simple post-processing

Figure 13b: Image after simple post-processing (auto correction and sharpening with the unsharp mask) - no gradient correction (see below)

Light Gradient

If you use natural light from windows for taking the whiteboard photos, take note that there may be a light gradient on the whiteboard: the area closest to the window is lightest, the area most distant from the window is darkest. Usually we are not aware of such gradients, but the camera is - often there are notable differences in lightness between different areas on the whiteboard.

Update Note: See below for a software solution (WhiteboardPhoto) for cleaning up whiteboard photos and for a simpler procedure inspired by this application.

Photo of a whiteboard close to a window

Figure 14a: Photo of a whiteboard close to a window - a light gradient results

If necessary, you may correct such a light gradient by adding a gradient from black to white in the opposite direction in a second layer. Select the best layer manipulation and opacity values to achieve an even light distribution, merge the two layers, and finally do some image retouching, such as brightness correction and sharpening (see figures 14a-d).

a black-and-white gradient in a second layer

Figure 14b: In Adobe Photoshop, I create a black-and-white gradient in a second layer (here shown in the upper half of the image) above the background layer containing the image of the whiteboard

Adjusting the light gradient to a more even light distribution

Figure 14c: Adjusting the light gradient to a more even light distribution (overlay mode, 27% opacity)

final result after merging the layers

Figure 14d: The final result after merging the layers, auto-correction (levels command) and sharpening (unsharp mask); if necessary, this image can be further improved

Update: Kai Willenborg sent me his way of handling whiteboard photos. He crops whiteboard images so that the frame is not shown but only the content (on my images above the frame is only shown for demonstration purposes – for actual whiteboard photos I would also discard the frame). Then he processes the image to the extent that everything that should be white is indeed white (as does WhiteboardPhoto, see below). This is easier if only black markers are used. Then Kai reduces the number of colors or gray levels further, which leads to significantly smaller file sizes. According to Kai, typically the "message" of a whiteboard is important, not that you get a "beautiful" photo. The only exception would be if you do not intend to capture the results of a session but want to show the group working.

Reflections and Sunlight

When using a digital camera with a flash – typically it's dark inside –, be careful not to get reflections in the images (a whiteboard is reflective) (see figure 15).

Whiteboard photo with reflection of the flash light

Figure 15: Whiteboard photo with reflection of the flash light

You should also avoid direct sunlight on the whiteboard. If the sunlight hits only on parts of the whiteboard you get enormous contrasts in the image.

Noise

Alternatively to using a flash under bad lighting conditions, you can try to increase the sensitivity of the digital camera to 400 ASA or more, if possible (some digicams allow you to set the ISO to higher values), but then you will get much noisier images (see figures 16a-c below). Even digicams cannot perform "miracles."

Figure 16a-c: Comparison of noise at ISO 100, ISO 400 and ISO 800 settings

Note: All photos taken with Minolta DiMAGE 7, unless noted otherwise

Update - Processing Whiteboard Photos the Easy Way - Nearly...

WhiteboardPhoto

As already mentioned in my first article, Steve Bang drew my attention to WhiteboardPhoto, a small application from PolyVision for processing whiteboard images taken with digicams. WhiteboardPhoto can handle light gradients and distorted whiteboards. Actually, pixid even recommends to take whiteboard photos at an angle in order to avoid reflections caused by the flash. You can download a demo version from PolyVision's Website and test for yourself, whether WhiteboardPhoto comes up to its promises.

To my impression, WhiteboardPhoto has strong points but still is in its "infancy". It lacks a few important tools in order to be really useful. WhiteboardPhoto handles light gradients well and increases the contrast in order to accentuate lines, such as marker strokes. On the other hand, there still remains some "dirt" in the images, which has to be cleaned in other image processing programs because WhiteboardPhoto lacks even the simplest retouching tools. I would not "blow up" this nifty application with overwhelming functionality, but on my wish list are just some "standard" retouching tools:

An eraser tool with different brush sizes and shapes (at least a circle and a square)
A marquee tool for erasing larger portions of an image
A dropper tool for defining the "white" point (or threshold) so that dirt can be discarded easily
The option to align the crop area horizontally or vertically by pressing the Shift key.

Here is a quick-and-dirty demonstration of what WhiteboardPhoto does:

The original whiteboard photo

Figure 17a: The original whiteboard photo (cropped vertically)

Figure 17b: The result of WhiteboardPhoto's processing including automatic cropping (click image for larger view)

The result photo does not include any manual adjustments, such as changing the lightness of the image. It shows "dirt" areas, that some people may want to erase. However, if only the pure "information" is important, you can live with the result. Please, note that the demo version adds a background text to the image.

Let me add one thing: a colleague asked me how WhiteboardPhoto would handle colors – we had only a sample photo with black ink. So I cleaned up a photo of the SAP Design Guild team with interesting results. Perhaps, I should add WhiteboardPhoto to my Photoshop filter collection...

The SAP Design Guild team after a clean up with WhiteboardPhoto

Figure 18: The SAP Design Guild team after a clean up with WhiteboardPhoto

By the way, I made a test with three different ink colors, and it worked well (although the green became a little bit bluish...).

My New Procedure Inspired by WhiteboardPhoto

When I saw the results by WhiteboardPhoto I tried to achieve a similar result with Photoshop but did not even come close. The photo shown in figure 18, however, gave me a hint – it looks as if it has been treated with a highpass filter. Such a filter removes uniformly colored areas; as a global gradient has a very low spatial frequency, it can also be removed by a highpass. Thus, you can improve whiteboard photos exhibiting a light gradient with a highpass filter. After applying the filter, you have to adjust the gray levels (start with Auto contrast or Auto levels and then use the dropper to pick the "whitepoint" for getting a white background). Then you may undo distortions with the transform tools if needed, crop the image and sharpen it. Finally, save the file. You may save these steps (perhaps in better order) as a Photoshop action.

Of course, this procedure is much more tedious than using WhiteboardPhoto but the result can come close. Below is a demonstration of some of the steps of my procedure for the whiteboard photo shown in figure 17a:

The photo after applying a highpass filter

Figure 19a: The photo after applying a highpass filter (50 pixels)

The photo after using the Levels command

Figure 19b: The photo after using the Levels command; I applied the Auto levels and the dropper tools for enhancing the contrast and getting a uniform background; I also raised the black level to a higher value in order to accentuate the lines

The photo after cropping, transforming into gray levels, and sharpening

Figure 19c: The photo after cropping, transforming into gray levels, and sharpening (no removal of distortions)

In the end, the background is not as clean as with WhiteboardPhoto, and the lines are not as crisp. But a little experimenting with the filter settings will surely lead to improved results.

Final Word

This concludes my short article series on how I do my design work. I would be glad if readers would also contribute articles or hints that we can collect and present in an article, in which they tell how they do their design work.

References

Hugh Beyer & Karen Holtzblatt (1998). Contextual Design. San Francisco, CA: Morgan Kaufmann Publishers Inc. (for (paper) prototypes, see part 6 Prototyping)
JoAnn T. Hackos & Janice C. Redish (1998). User Task Analysis for Interface Design. New York: John Wiley & Sons. (for prototypes, see chapter 13 Prototyping the Interface Design)
Carolyn Snyder (1998). Paper Prototyping: Easier Than it Seems. Eye for Design (User Interface Engineering), Volume 5, number 5, p. 9-10.
Tara Scanlon (1998). Paper Prototypes: Still our Favorite. Eye for Design (User Interface Engeneering), Volume 5, number 3, p. 2-4.
Mimio Website: www.mimio.com
Download the PowerPoint 97 viewer from Microsoft
Thumbs Plus (Cerious Software Inc.): www.cerious.com (the current version is 7)
WhiteboardPhoto (PolyVision): www.websterboards.com/products/wbp.html

top