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.

Most web designers start out creating a photoshop document with the size intended to fit universally with all screen dimensions. However, print designers, literally design on a whole other scale. Photoshop is a program that shares compatibility useful for both the Web and Print documents. The two are unique forms of design that cross paths every now and then, but definitely have their distinguished members of the family.  Below I am going to illustrate the main attributes of both and point out their differences.

Audience

The experience of your audience becomes important when creating a project for both Web and Print design. In print design, the attention of your audience is important, such as getting the audience to sit on a page of a magazine long enough to get the main concept and message across. The main limitation of this particular area is quantity. It is expensive to put an Ad in a magazine, therefore your company only has the budget for a one page ad. In this ad, you have to design it using textures, shapes and imagery to sell your product and/or services.

In web design, you really have no limitations as far as quantity. Your website can consist of as much interactivity and links as you would like (within reason). Your main challenge is to get the user to stay on your website. What keeps them interested? What drives them away? For example, as far as a standard sky scraper ad on a website page, you have the ability to have that ad link to another site and so on and so forth.

Layout

The experience of your audience becomes important when creating a project for both Web and Print design. In Print Design, the attention of your audience is important, such as getting the audience to sit on a page of a magazine long enough to get the main concept and message across. The main limitation of this particular area is quantity. It is expensive to put an Ad in a magazine, therefore your company only has the budget for a one page ad. In this ad, you have to design it using textures, shapes and imagery to sell your product and/or services.

As far as layout in Web Design, you are working in pixels instead of inches. More than likely, your design is multiple pages, designing a website for instance. In this circumstance, you need to keep consistency throughout. Another challenge in web design, is to design your site to look the best on all monitors and monitor resolutions. This is where color partakes in the difference between print and web.

Color

It’s important to know the difference between colors in Web and Print design. You are viewing colors either on paper or on a monitor. You have a choice between RGB (Red Green Blue) and CMYK (Cyan, Magenta, Yellow and Black). In Print Design, You need to use CMYK for print design in order for the colors to match better with your chosen printer. These are colors you choose from a palette and identify with a code that you provide to your printer.

In Web Design, you need to use RGB, which gives you the colors that will show up best on a monitor. Consider the difference from monitor to monitor (brightness vs. contrast). Colors are represented by “hexadecimal values”, which are in a 6-digit format. Followed by Color, you get quality, and that is what I’m going to hit on next.

Quality

There is a difference between printer quality and web quality. For instance, with Print Design, you want the best given quality for print. Pixels are highly important in this case. For a high quality print, you are going to want to set your image at 300 dpi (digital pixels per inch). This will make your illustration, photograph and/or graphic look at it’s tip top best.

For Web Design, putting documents at 300 dpi is completely unnecessary. If you begin to design a website in such a large formatted document, you better have the patience for it to load on the web! No websites are designed (or should be designed) in 300 dpi. In fact, the resolution used to design anything for the web is 72dpi, whether it be as little as a tiny button, to as big as a half page web ad. There you have it–some insight on the difference between web and print.

Now, here is a fun video I found in vimeo — pretty sweet!

Digital Art Triptych: Web Design from Tyler Joynt on Vimeo.

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/tns-type-nerds-society-where-being-a-nerd-is-accepted-period/ http://www.clickbrand.com/blog/web-design/tns-type-nerds-society-where-being-a-nerd-is-accepted-period/#comments Fri, 06 Nov 2009 23:36:38 +0000 emily http://clickbrand.com/blog/?p=149 Is it real? Could it be? No, really?! Come on, you know you want to know more about typography! Typography is a very enticing and intriguing subject! Trust me you will be hooked after reading and viewing this entry!

I bet you never met someone so in love with typography? Well, I will try and make this short and sweet and show you lots of examples but bare with me !

Not sure what “typography” means? Well, it’s basically a fancier word for  visually communicating through the design of fonts. Check out  http://desktoppub.about.com/cs/basic/g/typography.htm
First off, from a credited, experienced designer, there is no great design without a great font pairing. If you are one to be attached to Comic Sans then we have a disagreement. I mean come on, that’s SO nineties! It is also a design NO-NO! Another typeface that is over used (especially in most spas these days) is Papyrus. Helvetica is a GOOD example of over-used type as well, but in an exceptional way. Helvetica is beautiful and contemporary, with it’s round curves and delicate appearance–that is why people feel comfortable with it and that is why society accepts it for who it really is, deep down inside.

There is a lot of terminology in typography. One word in particular that people don’t take advantage enough is, tracking. Tracking is the spacing between the letters in a single word. If you’re not sure where to find open tracking or what it is, take a closer look:

Here is a good example of how open tracking is used (this is a logo identity we did for Green LLP, an attorney in Corona Del Mar):

Pay attention to this feature, as it will give you more options and can make your design look completely different. You’d be surprised!

Here are some great examples of typography in advertising. My personal favorite by non-other than, Paula Scher:

Great advertisements:

Typography doesn't have to be screaming to be effective either!

New in Typography: Tungsten (a newly released typeface) CHECK IT OUT!

Well, now that you’ve got a good lesson on typographic design, I think it’s okay to say you are officially a TNS Member! Congratulations, now take the font quiz! Come on, you – can – do – it!

http://ilovetypography.com/fontgame/

Experience has taught many internet users to be skeptical of everything on the web. We’ve all been burned at some point by an untrustworthy website, so you have to prove to each and every user that you are worthy of their trust. You have to prove that the form users must fill out will not increase the spam in their inbox, or that the button you wish them to press will not bring them to an advertising site with endless popups and popunders. Proving your trustworthiness is no small feat, but here are a few tips that may help you.

Create a Clean, Professional Design and User Interface

Nothing says “I’m a serious and trustworthy business” more than a clean, professionally designed website and user interface. If your website looks like it was slapped together on powerpoint, or hacked together by an amateur, the user will never take your website seriously. OR, if your website is frustratingly difficult to navigate through, your user will just give up and leave. Spending the time, effort, and (possibly) money to create a compelling professional design and intuitive user interface will pay off immensely when the site is launched.

Check for typos

Typos on your website are red flags for the user. If you aren’t professional enough to check the spelling in your content, you aren’t professional enough to be trusted with user information or participation.

Display major awards or certifications and provide links to the organization that awarded them

If you were selling your property and had to choose between a realtor A, who has no awards, versus realtor B, who has many awards for selling a record number of properties, which would you choose? (assuming that all other points are equal) Unless there was something absolutely special about the no-awards realtor, I would choose the realtor with awards under his belt. With realtor B, I would at least know that he has the experience to get the job done, and would therefore trust him to sell my property more than realtor A.

Just like realtor B, your website should proudly show your awards. Don’t overload the user with every single award that you may have received, but do show the major awards.

BKKTLaw highlights their achievements by incorporating an icon of being named one of the “Top Firms of 2009″ by IP Today Magazine.

KennyTheFloorGuy also establishes credibility by mentioning his Five-Star contractor rating

Tell the user what will happen if they take an action

You want the user to press a button, or to fill out a form. BUT, as I stated earlier, most users have learned to be skeptical of links, buttons, and forms. So, to get users to trust your site, make it more transparent. If you want a user to click a button, tell them what will happen if they do click a button. Will they by taken to a form? Will they find themselves in limbo? If you want the user to fill out a form, tell them why and what will happen if they do. By making the actions on your site more transparent, you become more trustworthy.

Childhelp OC – This website does a good job of telling the user what will happen if they take action. On the left, the button clearly states “Click Here for Golf Reservations,” which leads the user to a reservation form page. On the right, there is text to let the user know that they will be navigating to a new site if they click on a Sponsor Logo.

Display security certificates for forms

If your site has a checkout, or a form that users must fill with sensitive information and submit, displaying any security certificates would assure the user that their information is safe, which makes the user more likely to complete the form or checkout.

VeriSign and TRUSTe are some examples of trusted security certificates

Add Disclaimers or notes to reassure the user

Along with security certificates, make sure to display any disclaimers or notes to the user. For example, a popular disclaimer is one that tells the user their information is safe. These are often found on contact forms and basically lets the user know that their information will only be used to contact them and not sold to 3rd parties.

Manly & Stewart- This disclaimer is added to the bottom of their Contact Us form to ensure users of their valued privacy rights.

Only gather the information you absolutely need

To further encourage form completion, only ask for the minimal amount of information you need. Aside from saving the user time, it also emphasizes the idea that you will not sell their information (because you don’t have much to sell). In terms of form fields, less is more!

Seniority1- To get a Free Report, the form only asks for a First name and Email address.

After the user completes an action, tell them what will happen next

If the user trusts you enough to take an action, or fill out a form, follow through with that good faith and let them know what will happen now. Will they be getting an email? How long will it take? What should they do in the mean time? Don’t leave the user hanging, wondering what happened. Tell them clearly what you will do and what they should do.

Project Artisan – A confirmation message appears and specifically lets the customer know that they will be receiving a confirmation email within the next 24-hours. They also provide an option for the user to either Register for a new account (if they haven’t done so already) or Continue Shopping.

Thoroughly test your site for any bugs

Bugs every once in a while is understandable and forgivable to an extent. If your site is just full of bugs, it makes it unuseable. Furthermore, it makes your website untrustworthy. Especially if an error occurs in a crucial area, such as a checkout or form submission. At that point, if you are not a well established site, such as amazon or yahoo, that user will more than likely give up and never return. So before you launch, make sure that you’ve tested everything on your site.

Altmeds.com – The splash page notifies the user that the site is a Beta Release. This increases user awareness that the site is monitoring for improvement and minor bugs may be present.

This isn’t an all encompassing list, but it lists enough of the basics to get you started. If you aren’t already meeting your website goals, hopefully these tips will help you accomplish them.

Not only is it essential for developers to have the upper hand in new techonology for programming but for the web designers too.  CSS is rising and becoming more common. Some issues with this new revolution still arise, but it will definitely be an effective change in technology shared among the programmers, the designers and most importantly the user! There is the ability to have a lot more flexibility with alternative syntaxes, which benefits the programmer and  design techniques that let the designers use a more wide variety of fonts (this is only the least of it). Some of these tweaks in the system will cut time in half in the developing of a website.

Of course in this day and age we are looking for the most simple solution in creating for the web, but great solutions take time to produce. Many believe the evolution of CSS will further grow and expand for our benefit and this will result in excellent success.

Then, Why isn’t the new CSS being released right now?

Let’s stop and smell the keyboard people! Out of all the browsers out there, not every one of them can grant our wishes. Unfortunately, 2 companies in particular, made errors in CSS1 support: Explorer 3 and Navigator 4.

Since IE5 came out there was a positive outlook on their development of CSS but sadly it wasn’t much different than their previous version. Luckily a company called Opera Software created a new version of IE5 and displayed great implementation of CSS1, but their support doesn’t quite meet CSS2 standards.

While we push for this new technology, we will also have to put our hopes on hold until these companies can catch up with the complete application of CSS1.  Although, with the future releases of the 2 browsers, the CSS future seems bright and promising! This upcoming project will encourage designers to use CSS more and more with it’s large extent of flexibility.

http://clickbrand.com/labs/html5/css-demo/presentation.html

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

Smaller screen sizes

Just like desktops or laptops, mobile devices have a variety of screen sizes. They can range anywhere from 128px by 160px to 320px by 480px. How do you decide which size to design to? It really depends on a couple of factors, namely your target audience and the purpose of the mobile application. You can also look at current trends. For example, before the arrival of the iphone, the average Mobile devices screen dimensions were relatively small. The popularity of the iphone has increased the average screen dimension to 320px by 480px.

If you are unsure about what screensize your audience is using, OR you are trying to design something more universal, then use fluid layouts that can stretch and compress as necessary.

Deep, not wide

The limited screen real estate effects the visual layout of your mobile application, consequently, this also effects how you structure the User Interface. On a desktop/laptop application, you would normally structure the user interface in a wide format. Meaning, you would layout all the options and navigation items in fairly specific groupings easily visible to the user. The goal is to have the user reach their destination in as few clicks as possible For example, the sitemap below illustrates a wide structure.

This is an example of a wide structure. As you can see, all the navigation points are easily accessible from the main page.

For mobile devices, the small screen size makes such structures difficult to use. To see all of these options and navigation items on a single mobile devices screen would require tiresome scrolling, panning, and movement. Your user would quickly become frustrated with the huge amounts of options. Preventing user frustration and making your mobile application more friendly requires a deep user interface structure. A deep structure basically groups your options and navigation points in more general categories. If your navigation is more general, the user is presented with fewer choices, thus making it easier to navigate your application. This unfortunately increases the number of “clicks” your user must perform to reach their intended destination, But, it makes your mobile applications navigable. The goal is to make the navigation choices simple and easy for the user. It is possible to make your mobile application too deep with too much functionality, which brings me to my next tip, core functionality.

This is a deep structure. The biggest difference between this and the wide structure is the generalization of navigation items. Here, the navigation item is broken into two general categories. From there, the user must dive deeper to get the information they need.

Core Functionality

Having too much functionality in your mobile application can lead to a structure that is too deep. Incredibly deep Mobile application structures can be very confusing for the user. By focusing your efforts to only the essential functions of the application, you can prevent application structures that are too deep.

Furthermore, you must consider how exactly users use mobile devices and applications. They are called mobile devices because users are on the move while using it. Users interface with the device for short periods of time then continue along their business. Anything that requires more time than the user has would not be used. By focusing your application to include only its core functionality, you help minimize the time the user needs to spend using your mobile application, thus, increasing the value of the application to the user.

User Interface for human proportions

How the user interacts with the mobile application can make or break your application. If the User Interface (UI) is confusing, few will use it. If it is difficult to use, users will abandon it for other mobile applications with simplier interfaces. The rise in popularity of touch interaction has added another aspect to consider when designing the interface: human proportions .

Consider the size of your user’s interaction tool, their finger. It takes up a certain surface area and cannot be smaller or larger than what is already there. So, your interactive elements, such as buttons or navigation items have to be big enough for a finger to press. A good minimum size is 40px by 40px. Furthermore, the elements must have enough separation from other elements for the user’s finger to cleanly hit their intended destination.

Pre-defined design conventions

Finally, consider using the pre-determined design conventions for the particular mobile device you are designing your mobile application for. Using these standard conventions helps your audience easily use your application. For example, an “x” at the top right corner of an application window is understood to be the close or exit button. Designing a different close button that uses a different symbol in a different location would cause great confusion and frustration for the user. They already understand these conventions, so designing something otherwise would require them to learn a new set of conventions, adding an unnecessary level of frustration.

By keeping these points in mind as you design your mobile application, you can increase the likelihood of its success. There are many other minor points to consider, but these should get you through the bulk of your design.

The importance of graphic design knowledge is underestimated by many web designers. In result of this, they struggle to create attractive-looking websites. With that said, the visual part of a website can really make a site look more valuable and credible – after all, you are representing the branding of a company.

Here are 3 Main points to keep in mind when thinking about a well-designed website:

1. Professionalism
Such a simple thing to keep in mind, but some web designers tend to screw it up. This is where experienced graphic designers come in handy! Let’s face it, you and I both have seen sites that have excellent javascript functions that are coded properly, but fail to grasp the visual aspect of web designing.

2. Usability
In order to premote functionality you need to express usability. The person viewing the site needs to be able to use it in the way it was intended to be used.  The user needs to be able to navigate and explore the contents they are looking for, without having to dig – because trust me, they will leave when patience runs out.

3. Visual Relationship
When creating a connection with you and the user, you can usually communicate more effectively with the use of simple graphical designs and elements. People like to see aestheticly pleasing websites and more often than not, return to the site again. When websites aren’t organized properly and/or get chaotic with adverse graphics, people tend to shy away from them because it’s too difficult to get around the site. Visual Communication is vital in the aspect of a strong business.

BAD DESIGN

GOOD DESIGN

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.