BlogmyQuery – BMQ

By Cameron Chapman

Keynote (part of Apple’s iWork office suite) and PowerPoint (part of Microsoft’s Office suite) are likely the two most commonly used presentation software programs out there. PowerPoint is more likely to be found in the corporate world, whereas Keynote may be more popular in creative fields (due to the proliferation of Macs in the design field). Creating presentations in either program is a similar process, though.

Finding good resources for creating presentations isn’t always easy. There’s a definite lack of quality free presentation templates for both PowerPoint and Keynote, though it’s definitely more pronounced with PowerPoint. The good news is that there’s plenty of premium templates available, many for very low cost. And creating your own templates is as easy as creating a slide (just save it as a template file instead of a regular presentation file).

Free Keynote Templates

Free templates for Keynote abound, though not all are of particularly high quality. Here are some that are:

Green
This Green template would be perfect for an eco-friendly business. It has a simple green and white color scheme with leaf graphics.

Tones of Gray
This is a relatively minimalist template set, with a dark gray, stone-textured background. There are 20 master slides included in the set.

Weathered
This iWork ’08 template has a green, brown, and cream motif that’s very elegant and slightly distressed.

{Silver}
{Silver} has a silver gradient background and angled content areas.

Folded Paper
This template has a folded paper background and brightly-colored typography and accents.

NewWay
This template set has a dark gray background with a compass image, and 36 different master slides.

Sport III
The Sport III template has a striking mountain photo background. There’s one master slide included.

Premium Keynote Templates

There are hundreds of fantastic Keynote templates for sale out there. Here are some of the better ones:

Enterprise ($19)

Enterprise is a corporate-looking blue template, which includes 32 different slide designs.

Glossy Black ($19)

Glossy Black is a black template with a dim spotlight motif in the center. It’s a very professional theme with 32 different slide designs.

Glossy Metal ($19)

Glossy Metal is a gray template set, reminiscent of stainless steel. There are 32 slide designs included in the set.

Sky Blue ($19)

Sky Blue is a template pack with a partially-rounded rectangle on a textured background perfect for fast-paced industries. There are 32 slide designs in the set.

Gabardine ($19)

Gabardine is reminiscent of men’s suiting, with a sophisticated gray and dark red color scheme. There are 32 slide designs included.

Living Space ($19)

Living Space is a real estate theme with a green and white color scheme. 32 slide designs are included.

Elemental ($29.95)

The Elemental template set includes five template designs, based on the four elements (one each for water, wind, and fire, and two for earth).

Galleria ($19.95)

Galleria is a template set specifically for showcasing photo slides. It has a dark, textured background that perfectly complements most images.

Clouds ($5)

This set of slide templates has a cloud motif, with accents that resemble antique paper. The PSD files are also included.

Bubbles
The Bubbles Keynote templates are a warm orange, with a bokeh background image. PSD files are included.

Copenhagen ($24.95 – $49.90)

Copenhagen is a modern, light blue template set, with fractal-inspired jagged edges on slide images.

Elevation ’09 ($24.95 – $49.90)

This template set has a modern, aggressive style, with tonal stripes in the background and striking graphics.

Free PowerPoint Templates

While there are tons of high quality premium PowerPoint templates out there, there’s a real lack of high-quality, professional free templates.

Grunge
This black and white grunge template comes with four different master slide templates.

Atoms
The stylized molecules on this PowerPoint template make it perfect for companies in the scientific industry.

Premium PowerPoint Templates

Like Keynote, there’s a great market for premium PowerPoint templates. Many are available for very reasonable prices (as low as $5), though prices definitely climb quite a bit higher. Here are some of the best ones out there:

iBusiness ($5)

This dark gray and yellow template set has a subtle grid pattern in the background, and some blue and red accents. PSD files are included.

Media Interactive ($5)

Media Interactive is a colorful, glossy PowerPoint template. It has a very Web 2.0-feeling to it. PSD files are included.

Professional Animated Power Point Template ($5)

This template set is very minimalist, with a white, gray and red color scheme. It’s a very clean and modern template, with subtle shadow and 3D effects. PSD files are included.

Diagram III ($6)

The Diagram III template set has a very interesting motif, with a staircase descending from a platform in the clouds. It’s a clean and modern, very professional-looking theme, even if it is a bit whimsical. PSD files are included.

BIGIdea ($6)

The BIGIdea template set comes in three different color schemes: off-white and gray with either yellow, blue, or green. The set has bold typography and a very modern feeling. PSD files are included.

Graph and Chart ($6)

Graph and Chart has a clean, glassy look to it, with tonal stripes and lighting effects. PSD files are included.

Clean, Elegant Presentation ($5)

This template set has a taupe background with spotlighting effects. It’s a very elegant, understated template pack. PSD files are included.

Dots ($5)

The Dots template set consists of a handful of master slide designs in six different colors, all with a half-tone-style dot pattern. PSD files are not included.

About The Pixels ($5)

This template set has a beautiful orange, pixelated background, giving it a very modern look perfect for the tech industry. PSD files are included.

Next Light ($5)

Next Light has a beautiful blue-green background with a subtle lighting effect that looks like a cross between stardust and bokeh. PSD files are included.

Venera Night Sky ($5)

This template set has a purple and black background, with a stardust-like lighting effect reminiscent of the aurora. PSD files are included.

Waves In Colors ($6)

Waves In Colors has a colorful 3D wave motif on a light blue background. It’s a very modern, fun template set. PSD files are included.

Resort Travel ($89)

This template set has a muted color palette with hills and hot air balloon in the background, suitable for travel and other industries. Included are files for both PowerPoint and Keynote.

Business ($89)

The crown motif on this template set is suitable for a variety of industries, and the gray and yellow color scheme gives it a young, modern look. Files for both PowerPoint and Keynote are included.

Craft Fair ($89)

This Craft Fair template set has a soft green and blue color scheme with a vintage-looking design. PowerPoint and Keynote templates are included.

Real Estate ($89)

This urban real estate template has cloud and building motifs, along with a muted color scheme, perfect for real estate or any urban business. Included are PowerPoint and Keynote files.

Alternative Energy
This template would be suitable for any eco-friendly company, not just alternative energy brands. It’s modern and simple, and has a beautiful, subtle color scheme. PowerPoint and Keynote template files are included.

Real Estate
This is a more modern real estate template, with a graphic, pixelated background and upbeat color scheme. Included are both Keynote and PowerPoint template files.

More Keynote and PowerPoint Resources

Here are some additional resources for working with Keynote and PowerPoint.

Knock ‘em Dead with Your Next Keynote Presentation
This how-to article from Mac|Life offers up some great tips for creating Keynote presentations from scratch.

How to Make a Keynote Presentation on a Mac
This tutorial from eHow.com shows the basics of creating Keynote presentations.

Tips for Creating an iPad-Compatible Keynote Presentation
Unfortunately, creating a Keynote presentation you can load or edit on your iPad isn’t as straightforward as one might think. This article covers the things you need to know to make the process go smoothly.

Keynote for iPad: Best Practices for Creating a Presentation on a Mac for Use on an iPad
This is Apple’s official documentation for creating Keynote presentations that will work on your iPad.

Note & Point
Note & Point is a gallery of awesome slide decks. Included are PDF, Keynote and PowerPoint slides, all incredibly creative and inspiring.

How to Create Your Own PowerPoint Templates
This article from O’Reilly Answers covers the basics of creating your own PowerPoint templates.

Some time ago I started a mobile app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board, developers can send us their mobile apps (iPhone apps, Android apps, Blackberry apps) along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings.

The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

1. Foobi

“Alex,

I am the lead designer and developer of Foobi. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance.

Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject.

— Remy”

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it: if user knows how to flick, he is already an expert. An expert in what, though?

As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows:

1. To record what food they consume,
2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path.

Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement.

There are two main problems with this part of the app.

Summary Information Is Hidden

To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

The summary chart doesn’t offer too much to the viewer. Here are the main problems:

• It’s not clear what the different colors mean, and there is no legend to help.
• The scale is not flexible. You can view the information only by week, which does not allow users to easily see their big-picture eating habits. (Tip: consider incorporating the pinch gesture to allow users to scale in and out.)
• Tracking consumption of a particular food group is not possible with this chart but would be valuable to users.

Information design is a vast topic. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. I recommend reading Edward Tufte’s books, particularly The Visual Display of Qualitative Information.

And here’s an inspiring display of a lot of information. Of course, it’s not tailored to mobile use, but it has a few great ideas:

From Google Finance.

One More Thing

When I purchased and downloaded your app, I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I was fooled by the app icon, which makes it look like it is still downloading:

2. Budget Planner

“Alex, please take a look at my app Budget Planner. I have tried everything, and it keeps going up and down. The major issues that people complain about are intuitiveness and slowness. People don’t understand what the software does. But people who do learn it love it.

— Alex Sabonge”

The basic idea of this app is very good, and the App Store description shows off its functionality well:”Budget Planner tracks your bills, budget, calendar and transactions by displaying your balance in a calendar view, letting you know how much money you will actually have on any particular day. Like a balance forecaster.”

Here’s an overview of how Budget Planner works:

1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).

   

2. Using this data, the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

   

Most folks would find this extremely useful. So, why are people complaining about the app? Why does it have an average rating of 2.5 out of 5 stars, and why are sales lower than you had hoped?

Let’s look at the main sources of the problem. For now, we’ll set aside lesser (though important) usability factors, such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s start at the beginning. Humans invented money to buy things, right? Your core audience’s main goal is to know what they can afford and when they can afford it, whether it’s a new pair of shoes, a new car or a solid retirement plan.

People don’t prepare a budget just for fun. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like), without their rent check bouncing. Your app is getting there. But several key factors are getting in the way of a great user experience. Let’s take a closer look at the app’s “landing screen,â€� the calendar, the main element that differentiates this app from other budget apps.

First of all, I think the calendar is a great idea. It’s much better than the categorized lists that many other apps have. The calendar is all about how much money you have or will have in future. A list only shows how much you’ve spent. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop, for example).

Here are some downsides to the calendar view:

I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Uncovering the details and patterns behind their spending habits enables users to get new ideas, make informed decisions and achieve their financial goals (and praise your app in the process). Users will better understand their bad habits and be able to take steps to correct them.

A graph could provide richer possibilities for visualizing financial information. It’s much more flexible and scalable then a calendar. Using a graph for the landing screen could dramatically increase the density of meaningful data, while reducing visual noise. Here are some ideas we came up with; this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design:

Next Steps

People love apps that help them achieve their goals. What if your app allowed users to input and compare different financial scenarios, shown through several overlaid graphs?

This capability could help users think through their options:

• If I put my child through this private school, would I still be able to afford the Beemer I’ve always dreamed of?
• How many hours of overtime would I need to work to be able to afford both?

These are few examples of questions that people ask themselves. If your app can help them get the answers, I think it’ll really catch on, and you’ll soon be driving a shiny new Beemer yourself.

3. Units United

“Unit conversion app, Units United. Yep, yet another one… ;) Can you please review it?

— Meils Dühnforth”

The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Most unit converters force people to make double the effort to get what they want.

Consider the following scenario: you’re from the US, and you are recounting yesterday’s baseball game to your Icelandic friend. During their last at bat, the Phillies hit a 456-foot home run. Amazing! You punch the value into your unit converter app, but to get an answer you must translate the query into a format that the application understands:

1. Go to “Categories,�
2. Select meters for the “To� unit,
3. Select feet for the “From� unit,
4. Type in 456 on the number pad,
5. Double-check that you are converting 456 feet into metres and not vice versa.

Are all these steps necessary? You just wanted to know “What is 456 feet in meters?� But you had to ask the question in robo-speak. You had to select options from a list to be understood. Good software speaks your language. Among the innumerable unit converters, only Google does it right, allowing you to ask your question in plain English:

Using speech recognition technology is another good idea. Sometimes your hands aren’t free when you need to convert a unit. Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-per-hour speed limit into kilometers.

Implementing everything described above, your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal):

This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories, and it accepts questions in everyday language.

Send Your App For A Free Review!

Mobile developers are always welcome to send me their apps for a free review. Just use this form. Please remember that your content will be featured on our Crit Board, allowing developers, designers and users worldwide to join the conversation. If you prefer to speak privately about your design, please feel free to contact us directly.

(al)
Tweet

© Alex Komarov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: app, Design, iphone, mobile, reviews

There are hundreds of ways to writing out code with hundreds of methods to achieve certain functionality. However, out of these many ways of writing code to get to the final product, there are many habits that are not great to the programmer or to the functionality of what you are trying to achieve. Furthermore, we discuss 10 tips for improving and writing better PHP code.

Development Style

Tabbing, double-spacing, all on one line; we all have our style of writing out code and there really is not a right or wrong way of laying your code out. However, many developers tend to fail at keeping their development style fluent throughout a project. I myself have been caught a few times adapting to new styles within one project.

Furthermore, it is best to keep your code laid out using one development style rather than several to keep your code easily readable and organized. If your development style sometimes evolves to something different, it is best to not use your new development style on a project that uses a different style, but rather implement your new development style on new projects you may start. This keeps all of your projects fluent and organized.

Good Variable and Function Naming

Many developers do not really care about proper variable and or function naming. However, good function and variable naming is key to have more organized code, which categorizes under better-written code as it becomes clearer to understand and comprehend.

Naming variables and functions properly is rather something easy to do and should be based on what the variable value is and what the function achieves. This not only provides easy to understand names, but it also helps you and other developers understand what each function or variable performs and holds by just reading the short name.

Commenting Your Code

Commenting your code is a major step to organized and readable code and actually compliments most of what you can do to organize your code, as it is a key aspect in organization and usability. When writing comments to describe certain actions, functions, or code, it is best to keep the comments strict and to the point without describing what everything is.

For example, if you have a code snippet that is quite obvious in terms of its functionality, it is best to either leave a few words about it or not to comment it at all, as too many comments can be obnoxious.

Do Most of the Work

Copying and pasting code is something we tend to do most of the time, from one project to another, or from code, we may find useful on the net that has been done for us. However, copying and pasting code can sometimes hurt you in the end as you may not be familiar with your project or code as much as you had hoped you were or as much as you need to be. Furthermore, copying and pasting a few snippets is fine, but you should do most of the work to freshen your memory.

Look Around

Sometimes we might be doing something new and do not know what the best route is to take in terms of speed and performance, thus, looking around at other code from people who created something similar to what you are creating is sometimes a great idea to do to obtain a general idea on how to approach it better. This does not necessarily mean copy and paste the code, but rather just get a general idea of how it works.

Understand the Language’s Limitations

We sometimes try to achieve many things the language was not designed for or is not capable of doing by creating workarounds. This is not a great idea, as your created workaround may not work sufficiently or effectively. Therefore, it is best to understand the language’s limitations, and to work within them.

Receive Structural Feedback

We sometimes think that we are the only ones, who know how to properly develop, but we are not and in fact, there is always someone out there better than us. My point is, it is always good to receive a second opinion on your code in terms of structure, as some feedback can be critical to enhance the performance of your script.

Testing Your Code Often

Part of making your scripts closer to bug free is to test your work often and as you go along. The problem with many developers is that they think what they develop should work fine the first time and decide not to test certain aspects of their script as they go along, and in the end, they end up with several bugs and many they may not catch immediately. With that said, it is in your best interest to test many aspects of your code or script for bugs as you go along in development, this is proven to reduce bugs in the long run.

Built-ins over Building Your Own

We sometimes tend to recreate a built-in function just to have it. The problem with unnecessary recreation of built-ins is that the performance is affected. Moreover, using built-ins when applicable is a better idea and not only does it increase performance, it also keeps your scripts clean from unneeded code.

Don’t Split Everything into Files

Splitting your code into several files is actually part of keeping your scripts or projects organized instead of having everything all in one file. However, many projects I have seen tend to split everything into many files, sometimes separating individual functions into individual files.

This overkill and not only affects the way your code is laid out but it also affects performance. For example, instead of splitting individual functions into individual files, create a functions file and store all of them there, or group them into files. This still keeps your project organized and it keeps things reasonable.

Remember, doing something beneficial is great, but overdoing it or not doing it at all causes a negative effect, thus, use your judgment, and use techniques and methods reasonably.

Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.

The Framework Of Sources For Typographic Layout

According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.

In most art and design classes, students are asked to analyze the structure of a painting or design in order to better understand principles of organization. These linear studies usually have no relevance to the student outside of the class. But these exercises hold an important lesson, which is about learning to abstract images — and even our surroundings — into linear structures in order to learn about layout organization.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Learning To Abstract What We See

Most of us live in a relatively static environment, whether urban or rural. Recognizing that this environment is framed by points, lines and planes will help us abstract the environment. Let’s consider a photo of an urban environment. Below is a photo of a city escape in Chicago:

(Photo courtesy of the Urban Studies Department, Wheaton College, Wheaton, Illinois.)

Here we have a worm’s-eye view of buildings. We can already discern interesting spatial relationships. The white space in and of it self has interesting shapes. These shapes alone give us creative ways to apply copy. Let’s see an example of how this space could be abstracted:

Linear abstraction.

Here, the city escape photo has been abstracted to simple lines. The lines converge at a conceptual point. The lines enclose spaces to create a conceptual plane. Although I did not mark the plane as such, lines that converge at any four points or angles become a plane. Abstracting spaces can, of course, be done in infinite variation. There is no right or wrong. Feel free to experiment!

In looking at the linear abstraction above, we see several lines converge at a certain point, which is towards the right and a bit off center. We can call this a point of hierarchy. Let’s clean up the abstraction and take another look.

Linear abstraction #2.

Now we have a cleaner and clearer version of the first abstraction, perhaps making it a bit easier to start thinking about a possible typographic layout. So, let’s experiment with type placement.

Typographic layout using the linear abstraction as a grid.

As you can imagine, we could do hundreds of variations of this. We can also play with the intersection of some of the lines and points in the layout:

Typographic layout using the linear abstraction as a grid and as visual punctuation.

These simple exercises in layout composition help us see how a photo of an urban landscape holds unexpected inspiration. Now, how do we use this for other applications? What if an article that we need to design does not have interesting or arresting photographs? One way to solve this is to think about the subject matter and find your own sources for inspiration.

Finding Inspiration In Your Surroundings

This is simpler than it sounds. It requires only that you be curious and get your dusty old camera out of the closet. You can find interesting shapes and arrangements in your kitchen drawer. Look out a window and study how its frame interacts with the space, or walk outside to look at the trees and branches. If you’re in the country, invite inspiration from the expansive landscape. Take photos of or sketch the most obvious linear connections you can find. If you’re in the city or suburbs, find the most obvious linear connections there. I find that buildings are an incredible source of inspiration with their strong vertical and horizontal lines.

Other sources of inspiration are people moving, dancing and exercising. Here is an example of how a photo of a dance performance inspired my design of a calendar for the Iowa State Dance Department. I used the dancers’ strong movement to the left as the basis for the calendar’s grid:

Dance calendar for Iowa State University Dance Program, Ames, IA, 2004
(Copyright: Alma Hoffmann)

What About Web Design?

Browser capabilities for manipulating website layouts are still a bit limited, but not for long. On some websites — The Art of the Web, for example — you can find information and sources for experimenting by rotating elements. The Art of the Web recommends downloading the Webkit nightly build for your browser. It explains that, “Webkit is the rendering engine used by Safari. The Webkit nightly build browser, then, is a preview of what’s to come in Safari and other browsers and devices that use the same engine.â€�

Few websites use text rotation because of spotty browser support. If you know of any, please share them below in the comments. So then, how can we push layouts a bit more on the Web? What kind of sources can we use for inspiration? Two come to mind: architecture and landscapes.

Architecture gives us horizontal and vertical structures and spatial divisions from which we can take cues. We can play around with it in our horizontal and vertical grids on the Web. Services such as 960 Grid System let us download grids and experiment with spacing for Web designs.

Translating landscapes to the Web by using horizontal scrolling accomplishes two things: it puts the user in control of the navigation, and it evokes an expansive panorama. Peter Pearson’s website (screenshot below) takes full advantage of horizontal scrolling. It gives us a sense of landscape through photography and in the navigation itself. A humorous touch can be found in the invitation to the user to “Let’s go that way,â€� followed by “Gaspâ€� in parentheses below:

Screenshot of Peter Pearson’s website.

A detail of Peter Pearson’s website.

Other websites push the use of landscape by letting users choose the direction to take. Some allow us to zoom out to see where we want to go, much as we do in a natural landscape. See this example of Schematic:

We stand before this website’s navigation much as we stand at a crossroad, choosing our direction. Allowing users to control their path engages them.

Other websites take advantage of the x-index to create a sense of depth and combine it with horizontal scrolling. In this way, the metaphor of landscape is even stronger and perhaps makes more sense, because the natural environment does have depth. The website for Fauborg (below) does both, while also providing a drop-down menu and hand icon for the horizontal scrolling:

Crowley, a small ad agency in New York, does not use horizontal scrolling, but rather selectively magnifies the menu and text to create perspective and depth. The arrangement has a sense of playfulness, and the user is engaged by seeking the little treasures stowed away in the links:

Exploring Web Design With Webkit

The ability to rotate text opens yet more possibilities for layout design on the Web. Browser support is still inconsistent but catching up to newer coding capabilities, such as HTML5, which allows for three-dimensional effects, and Webkit. With Webkit, I attempted to reproduce the layout discussed at the beginning of this article. Here is the original:

Below are screenshots of my experimentation with code and Webkit to reproduce the text rotation. Close, but not quite the same. The angles require just the right coding combination, because one block will inherit the values of the one above it.

Text rotation using Webkit. (Alma Hoffmann © 2010.)

Here is another example in which the title is rotated in the opposite direction of the title in the original layout:

Text rotation #2 using Webkit. (Alma Hoffmann © 2010.)

Conclusion

Abstracting the structures, spaces and people around us into simple line structures gives us infinite layout possibilities that can be applied to print and Web design. As technology keeps advancing and browser support continues to grow, Web design layout will continue to be more experimental and less restricted to horizontal and vertical alignments. As in the print industry, Web technology will continue to grow to accommodate more and more experimental layouts. These possibilities will offer designers more freedom and versatility. However, design essentials — such as learning to analyze composition and to abstract spaces — remain vital to our ability to translate the three-dimensional world in two dimensions, and vice versa.

References

• Jonathan Snook, author and Web designer and developer
• The Art of the Web
• Greg Dizzia, creative director of Daricca Group
• Stage Six Project In Progress Project
• Jeff Waymire, senior software engineer at SoftVu LLC
• Wucius Wong, Principles of Form and Design, Wiley, 1993

(al)

Tweet

© Alma Hoffmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

This article is the second part of Paul Boag’s series about common problems and difficulties that occur in in-house Web teams working in large companies. The series explains ways to to improve how your team is perceived within your organization, overcome politics and problem people, ensure that a project gets approval and deliver work within scope and on time. Feel free to check part 1 of the article as well.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Ensuring Approval

When working for a large organization, you constantly require the approval of others to move anything forward. If you want a budget for a new Web project, you need to get senior management to buy in. When you conceive an approach for a new design, it needs to go through marketing and the brand police. Sooner or later, everything you want to do on the website needs approval.

This approval process is often a nightmare. But it doesn’t have to be. Understanding a little about human behaviour (which you should already know) smoothens the way.

The first step is to identify key influencers.

Identify the Influencers

Every decision-making process has key influencers. Sometimes the influencer is obvious because only one individual gives approval. But it is usually more complex. Sometimes the person you are dealing with is not really the one with the power. In many cases someone else is, someone with whom you have had no contact. When dealing with committees, you will also learn quickly that not all committee members are equal. Some are senior, while others are simply more dominant or aggressive. The trick is to identify the key influencers.

But don’t assume that the key influencers are always the loudest or most senior. Sometimes it is those with the most connections or a close relationship with an executive. Identifying who can swing the decision in your favor can be tricky but is incredibly important.

A Web designer tries to identify who the real client is.

Once you have identified them, the next step is to get them on board. This means dealing with them directly rather than wasting your breath arguing in a committee…

Avoid Committees, Talk to Individuals

The committee is the scourge of larger organizations. They stifle anything but the most conservative of ideas, they move slowly, and they undermine decisive action. Unfortunately, committees are here to stay, and there is little point to fighting them. But there is more than one way to skin a cat and more than one way to run a committee. In fact, you can use one of the committee’s greatest weaknesses to your advantage.

One reason committees are so slow is because getting everyone in a room to make a decision is hard. In our case, this is a good thing. Instead of meeting the committee as a group, start meeting its members individually. Some of these meetings can be over the phone or quick chats. But with the key influencers, take the time to sit down face to face and properly discuss the project.

Meeting with committee members individually has two advantages.

First, it puts you in control. Losing control in a committee meeting is easy because members are changing your project on the fly. Design projects in particular suffer from this, with committee members making design changes as they will. But it happens in other types of projects, too.

Meeting with committee members individually prevents this, and you have the added advantage of being the only person with all the feedback and opinions. This puts you in control.

Secondly, it limits ego. In meetings, people become conscious of their position in the group. Some dominate either because they are more senior or simply because they like to talk the most. Others feel the need to defend their corner in some departmental feud. Still others feel they have not had their say and walk away feeling frustrated. Meeting with people individually prevents this kind of group dynamic.

While avoiding committee meetings is hugely beneficial, I am not suggesting that you not include stakeholders in the project’s process. In fact, collaboration is essential to a project’s success.

Collaborate Rather Than Seek Approval

Shutting out others from the decision-making process is tempting. This is a huge mistake.

The client locked behind bars.

I am a big believer in collaborating with stakeholders and internal clients. By collaborating during a project, you change the dynamic of the relationships.

The problem with communicating with stakeholders only when you need their approval is that they feel no sense of ownership over the project. At best, they feel like an outside observer; at worse, they feel ignored. If you include them in the project as much as possible, then they feel engaged and have a sense of ownership. Then they are much less likely to reject project decisions.

Take the signing off of design concepts. Traditionally, this takes the form of a big presentation in which the design is shown to clients for the first time. This approach is flawed, because the client has not been involved in the production of that design. Consequently, they feel excluded from the process and disconnected from the design, leading them almost certainly to request changes in an attempt to regain control and feel engaged.

At our company, we take a different approach. We include the client in the process as much as possible. We discuss sources of inspiration, show them mood boards and sketch out wireframes with them. By the time they see the final design, they feel that it is as much theirs as ours. There are no surprises, and they are much less likely to reject it.

Taking them through this process has the added benefit of educating them about good design. This significantly improves the quality of any feedback they give. And getting the right kind of feedback is vital.

Control the Feedback

Whether you are showing stakeholders a design or asking for feedback on a proposed project, the way you handle responses is critical.

Clients with no mouths are asked for their feedback.

Again, design is a good example of this problem. Too often Web designers send out a design for approval via email with the question, “What do you think?” Never ask anyone “What do you think?” It frames the feedback in entirely the wrong way.

“What do you think?” focuses the reviewer on their personal opinion. It inevitably leads to feedback like, “I don’t like the color.” As any designer will tell you, comments like this are useless. Ultimately, it doesn’t matter whether the stakeholder dislikes the color, as long as the user likes it. Moreover, you have no insight into why the color might be a problem.

Whether you want sign-off on a design or approval for an element, direct stakeholders away from personal opinion and towards relevant questions like, “What will the user think?” or “Does this meet our business objectives?”

For sign-offs, I regularly ask stakeholders the following questions:

• Does this design meet your business objectives?
• Does the design reflect your brand and website identity?
• Does the design align with the mood boards we developed together?
• Does the design reflect the wireframes we agreed upon?
• Will this design appeal to our target audience?

This will go some of the way toward focusing stakeholders on the right issues. However, the odd individual will still come back with comments like, “Can you make the logo bigger?” or “Change the blue to pink.” With a little forethought, you can avoid this problem, too.

Focus on Problems, Not Solutions

Whenever we kick off a project with a client who has to sign off on work, we start by defining the role we would like them to play. Instinctively, people try to find solutions to the problems they perceive. Instead of explaining the problem, they make comments like, “Can you change the blue to pink?” But this gives you no insight into the underlying problem they see, which means you cannot suggest an alternative or even better solution.

Encourage clients, then, to articulate the problem rather than the solution. Instead of making do with “Change the color to pink,” move them towards, “We’re worried our pre-teen target audience won’t like the color scheme.” Once you understand the problem, you can suggest alternatives, like adding unicorns or puppies!

The desire to suggest solutions is so strong that people quickly fall back into the bad habit. But because you have addressed this behavior up front, reminding them of it and asking what the underlying problem is becomes easy.

Another tactic is to constantly ask why. This question has two benefits. First, it gets people to articulate the underlying problem. Secondly, it gets people to really think through their thoughts rather than give gut reactions.

Gathering good feedback and focusing stakeholders on what matters are important components in the process of delivering a project. Even the most supportive of clients, though, can delay a project when you allow them to move the goal posts.

Delivering In Scope And On Time

In my experience of working and speaking with in-house teams, scope creep is a serious problem. What starts as a relatively simple project quickly escalates into something much more complex and not necessarily better.

The Web designer was unhappy about the client moving the goalposts.

This happens for several reasons. First, the higher the number of stakeholders who are consulted, the more new ideas and requirements are introduced. This is especially true when it comes to integration. Unsurprisingly, large organizations want their departments to speak to one another. But this too often leads to dependencies that slow projects down or halt them entirely.

The second reason is simply that the client cannot think of everything they need in advance. As they become increasingly involved in the project, they see more that can be done. This is understandable. Your internal clients will not be as experienced as you in working on Web projects and so cannot be expected to think of everything up front.

The final reason is that, from their perspective, the consequences of scope creep are minor. The client probably isn’t paying for your time and is not responsible for doing the work. They have nothing to lose from adding more complexity to the project.

You, on the other hand, have a lot to lose. Scope creep leads to delays, which makes resourcing for other projects nearly impossible. It also leads to overly complex websites that are hard to use and tricky to maintain.

You can use a number of techniques to limit scope creep without constantly saying no to stakeholders. The obvious one is to cross-charge. Clients are much less likely to request additional work if they know it will cost money. While this technique definitely works, it can appear a little callous and so should be used only as a last resort.

The best method is to establish a structure within which to work.

Work Within a Structure

Structure is useful for setting client expectations. It establishes boundaries up front that all parties have to work within. A key tool for setting boundaries is a statement of work. This document outlines all of the work to be completed and breaks down the tasks and timeframes. This is the blueprint for the project.

The benefit of this document is that it makes it clear from the outset what is within scope and what is not. The client will often fail to clearly communicate some aspect of the project, and this will get picked up if it has not appeared in the statement of work.

The statement of work also sets expectations for how the relationship will operate. It puts you in control and makes clear that the scope is fixed and cannot easily be changed. By outlining timeframes and milestones both for yourself and the client, you reduce the likelihood of slippages. But outlining timeframes and milestones in the statement of work is not enough. You also need to establish the consequences of not meeting these deadlines.

For example, many clients believe that if they deliver content three days late, then the project will slip only by three days. For you, though, this delay affects other work that you have scheduled to follow this project. It is important that they understand that, given your other commitments, even the smallest delay could push the project back weeks.

The same holds true for scope creep. Adding complexity delays the project’s completion and thus affects other projects. The problem is that exercising this discipline can make the client feel constrained and perceive you once again as the road block. So, wield this weapon carefully. I soften the blow by talking about phased development.

Talk About Phasing Development

The last thing you want to do is crush your client’s enthusiasm for a new idea they’ve come up with. As I said earlier, you want to remain upbeat and positive. Instead of pointing them to the statement of work to show that their idea is out of scope, enthuse with them about the idea. Discuss it together and outline roughly how it would work. But then point out that implementing it now would impede the project’s development, but that it could be implemented as part of a second phase.

You will find that most internal clients and stakeholders do not really grasp the dynamic aspects of the Web. They perceive the Web like print, that once the website goes live it cannot be changed. We know this is not the case; one of the huge benefits of the Web is that it can be changed incrementally.

Get the client to think about the Web project as being rolled out in phases. Launching everything together is unwise for two reasons. First, users do not respond well to sudden dramatic changes to a website (see the Facebook redesign as an example). Secondly, you can never be sure that the functionality they are proposing is what users really want. By rolling out a smaller website, you give users a better chance to interact with it and provide feedback on any functionality they feel is missing.

Finally, phased development limits complexity. With complexity comes a greater risk of something going wrong or the project being delayed. Phased development allows you to test more manageable components and so be confident in what you are delivering.

Conclusions

No doubt, in-house teams face enormous challenges. But hopefully this post has demonstrated that overcoming these challenges by carefully handling internal stakeholders and your own department’s image is possible.

I am not claiming that what I have presented here is in any way a magic bullet. You will still meet individuals who refuse to cooperate or who throw their weight around. But by using these techniques, you should at least be able to lessen the load and start enjoying managing your website again. After all, nurturing a website over the long term is a job that many in agency positions, including me, envy. If only you would overcome the bureaucracy.

All images have been kindly supplied by Shuttershock.com

(al)

Tweet

© Paul Boag for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: