Browse through some websites currently out there and you might notice that photography dominates as the main artwork on many website designs. As a web designer, it would be great to hire a professional photographer and get exactly what is wanted and needed for a web design. In reality however, this scenario is not very likely. Fortunately, there are some great alternatives and resources to turn to.

Here is a quick summary of the different factors that influence what, where, and how to choose photography for a web design project.

One of the first things to think about is accessibility. Can a photoshoot be arranged or will the art be found through stock images or provided by the client? With non-local clients, it is much more difficult to arrange photo shoots. Scheduling and time constraints also weigh heavily on the decision of dealing with photographers or not.

For those reasons, the majority of projects will use stock photography and art. It is easily and readily available to anyone. There are tons of photography resources online – iStockphoto, Veer, and Corbis, just to name a few. You perform a search and once you find something you like, the photo could be yours with a click of a download.

As the saying goes, “You get what you paid for!” The budget limitation of a project can greatly influence where and what type of photography you can use.

Custom photography and working with professional photographers can be quite expensive. There are photography fees, equipment fees… etc. that factors into a custom photoshoot. Since this is most likely the most expensive method, it is often a huge limitation to go through this route as a resource for images and art.

While stock images rate high in accessibility, the allotted budget of a project can narrow down the choices greatly. Take the resources I’ve mentioned above for example. Between Veer and iStockphoto, Veer would be a great resource to look into if the client has a bigger budget, as images typically price around the hundreds range. iStockphoto on the other hand, is a popular resource for projects with a tighter budget. Images can start as low as $1, and typically stays within the $1-$20 range.

Another route to mention is client provided imagery. This happens most often with redesign projects and the client already has photos from a previous design or photo shoot. Clients prefer this as it saves them from spending extra budget on photo art. This could work in your favor, as it also saves you the time and effort from searching for new images and allows more time for design, but could also work against you, because of the limited flexibility in getting the images to fit with the rest of the design.

When thinking about “photo quality,” the first to come to mind would be: pixilation, graininess, sharp vs. blurry… etc. In this case though, photo quality is all about the aesthetic quality that a person would perceive when they see the photo. A high-quality photo will feel unique and has a certain emotion or personality attached to it. A low-quality photo is the opposite; it is generic, cheesy and can come off forced. The quality of photos can vary greatly between one resource to the next. As most would agree, images found on Veer have a much nicer quality, while iStockphoto may appear as more “stock” or generic.

Custom/Professional Photographers: Low accessibility, high budget, high quality, high flexibility for creativity.

Stock Images (High-Quality): High accessibility, med-high budget, high quality, flexibility for creativity varies.

Stock Images (Low-Quality): High accessibility, low budget, low-med quality, flexibility for creativity varies.

Regardless of where the photos come from, it is most important to think about how you will integrate the images with the rest of the designs. Whether it is thinking about a simple crop and place or doing some heavy photoshop work to piece together something really creative, it is up to you as a designer to transform the photography and turn it into art.

Take into consideration your own email habits. Do you sit there and go through and read each email thoroughly? Or do you, like many others, skim through emails quickly to determine what is worthy of your attention? With such a short span of time to capture and drive your main points to your audience, your designs must be concise and to the point.

With all these restrictions and disadvantages, it would seem that your email would be very limited and lacking. The trick to utilizing email design to its full potential is to finding that right balance between functionality and aesthetics. Here are some quick helpful tips to get around those pesky limitations:

1) Keep design simple.

Do not overload your design with heavy images, tags, and code! It will only bog it down or increase the chances of errors.

2)   Use inline styles.

Most email clients do not process CSS styles in headers.

3)   Make a Plain text version.

Allow users the option of viewing it in plain text, since not everyone allows HTML emails to come through their mailbox.

4)   Assume images will be blocked.

Never design an email with all images, unless you want to risk people opening a big blank email. You want users immediate access to your email, with or without images showing. This means having real text for headers, links, content that will load immediately.

5)   Utilize your Alt Tags.

Another added solution to the image-blocking problem is to utilize Alt tags. Alt tags give users a better idea what imagery is included in the email, especially when images are blocked by default.

6)   Go back to Tables.

As old-fashioned as it is, tables are very powerful when designing for email. It keeps your email presentable and organized, as most email clients do not process Floating styles. It is also smart to always define the height and width for each cell to ensure that the layout remains intact.

7)   Keep emails no wider than 600 pixels.

With varying monitor sizes from user to user, it is a good idea to keep email designs to a max fixed width. It can be pretty annoying to have a horizontal scroll bar just from opening an email!

8)   Testing, 1,2, 3.

After you’ve designed and coded your email, test it. Several times. What looks good in one email client can look completely different in another, so it’s best to cover as much ground as you can before sending and realizing little errors after.

Emails have grown to be quite a popular form of communication. As the common goal for the majority of businesses is to keep their audience coming back, emails are a great and useful way to not only keep people informed, but to also continue to strengthen your brand and identity. With websites focusing more heavily on functionality and converting traffic, emails pick up where websites leave off. It provides a much more personable method of reaching out and helping develop a stronger relationship between a company and its clients over a period of time.

So what should be covered in mood boards? The common items to include are: color schemes, patterns, visual research (photograph, illustrations, graphics elements), and typography. Mood boards can help communicate visually what cannot be described in words and will help in creating the initial mock-up designs quicker. Most importantly, mood boards allow for client input early on, making it easier to establish create a mutual understanding of what path the project should follow.

Here’s a sample mood board created for better understanding:

As this was for vacation homes in Park City Utah, the overall theme and feel reflects the beauty and elegance of the scenery found there. The imagery and color scheme used helps emphasize the luxuriousness of the homes and the ability to ‘escape’ from everyday life.

While mood boards are great tool, it’s understandable that some may prefer to do without. Whether its personal preference or lack of time and budget, mood boards might not always be needed. Regardless, mood boards can still be very useful and beneficial in narrowing down and strengthening the focus of a project.

]]> http://www.clickbrand.com/blog/web-design/prepping-for-a-project-utilizing-moodboards/feed/ 0 http://www.clickbrand.com/blog/web-design/designing-a-button-good-practice-tips/ http://www.clickbrand.com/blog/web-design/designing-a-button-good-practice-tips/#comments Tue, 27 Oct 2009 20:36:58 +0000 susanna http://clickbrand.com/blog/?p=42 A good and effective button requires more thought and planning than meets the eye. Below are a few tips on what to keep in mind when designing your next button.

Purpose

The first step to creating a good button is thinking about Purpose. What is the purpose for this button? Is it just a connecting point for the user to get from one place to another? Or does it serve a more important purpose? Whether you want users to sign up or view a new product, there must be something that leads the user to perform the action you desire them to do. Different purposes will require a different design.

Once the purpose has been established, you can move on to the other factors necessary for creating a good button.

Placement

With the purpose established, one of the first things you need to think about is Placement. A button should always be placed in a space that is visible and accessible to the user. This means that the space is free of clutter and other objects that can pose as distractions. For the most part, buttons placed near the top will have a higher conversion rate, since it is visible to the user when the page first loads.  If a user has to scroll down or search for the button, it will probably not be as effective.

When thinking about Placement, you must also consider the relevancy of the space that the button is placed. This will make it more obvious for the user and affords to more clicking.

See itunes.com for a good example of proper button placement. The Download iTunes9 button is prominently displayed on the website; it’s above the fold and there is adequate spacing around the button so that it is not cluttered. Lastly, the button is placed in a relevant space. The pre-text introduces you to the product, while the button follows up, allowing for easy access to download their product.

iTunes.com

Color & Size

The different combinations of color & size can greatly affect a button design.  The color should help the button stand out from the rest of the page design, and is usually a brighter, bolder color to add contrast. As with color, a larger size will help a button stand out as well. For example, Amazon uses color & size to make the “Add to Cart” buttons pop from the rest of the page.

youtube.com- Since youtube's primary goal is to get people to share their videos, the "Upload" button is distinguished from the other buttons by adding in a yellow background. This makes the button easier to spot and click.

Priority

Lastly, you want to think about Priority. When there are various elements within a website, they tend to compete with each other for the user’s attention. Therefore, priority ranking must be established to emphasize what is most important. Several ways to emphasize priority is by placement, size, and color. The example below from Shopify.com illustrates my point.  They want you to dig further into their site, either by clicking “Take The Tour” to get more information or by clicking “Pricing & Sign Up” to get started. Although both buttons are the same size and shape, the brighter green color indicates that it has a high priority and importance.

shopify.com

Another example of priority from TheResumator.com

So what makes a good website and how can you avoid making the same mistake as others? Here are a few tips on the key elements to what makes a good website:

#1 Use of space correctly and effectively

Websites have a great advantage over Print because of the unlimited amount of space to accommodate vast amounts of information. Printed material only allows a certain amount of space to capture and try to keep its audience engaged. However, an unlimited amount of space to work with does not mean that you cram every little thing into one page. A solution to this is “teasing” the user with smaller bits of information that leads them to click further into your site. This keeps the user engaged without overloading them.

#2 Keep users engaged

Websites are meant to be interactive. Print is much more about the physical experience (the weight, texture, the shape, etc). As said before, your website must be designed to be interactive and engaging to get users clicking further into the site. If you have a website designed to function like a brochure or a print ad where there’s limited interactivity, it will be hard to entice users to keep coming back. The goal of your website is to attract new and current people to your site.

#3 Designing for SEO

A website is essentially a marketing tool. Through Search Engine Marketing, your website can be much more visible and reach a greater target audience. Designing with SEO in mind is greatly effective. For example, keeping the most important information above the fold and making action items clear and visible are prime examples of executing web design with SEO in mind.

These are a just a few (but very important) tips to highlight the uniqueness of Web Design. There are much more in depth specifics to make sure your website works properly, and that’s where a trained web designer can help you with.