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.

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.

Have you ever went a day without electricity? I bet not. Try it. Should be interesting. Well, iPhone dependence is becoming more and more common every day. There are so many applications out there that appear to be so helpful, it’s hard to think what you would do without it.

The iPhone can now be used as your very own GPS. GPS systems started out at $900 a piece when they first came out. Now they are going down in price. Who needs a GPS, when you can download an app. to get around on your iPhone for as low as $0.99! The iPhone is now being looked at as the All-In-One, helpful tool. Heck you can even use the thing as a level to put up a picture on the wall!  Yeah, you have the internet to get you to Map Quest from your phone but that takes five-thousand extra steps, so why not get something customized for your phone and your patience.

Again, another new piece of technology, which started out being an auxiliary, is now a necessity for people who are highly adaptive to convenience.

CHECK IT OUT:

5 Navigational iPhone Apps for your curiosity and convenience

iWant is essentially the combination of 3 location based apps:

Restaurant reviews (Yelp, UrbanSpoon), Movie showtimes

(Flixter, Fandango) and Yellow Pages.

G-Park is an Easy-to-use interface for taking a photo of your

parking spot or entering additional notes (if desired), such as

the section or the floor/level you parked on.

Zhiing is a location based messaging utility for sending,

receiving, replying to and forwarding messages with

maps relative to where you’re at now.

Where To? makes it incredibly easy to locate the closest

steakhouse, bank branch, billiard club or anything else

you may be looking for, at the drop of a hat!

With one touch, ETA shows accurate drive-times

from wherever you are to wherever you want to go.

One more click and it tells you the optimal route to take.

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/

The whole business of working to get websites to these top positions is called Search Engine Optimization (or SEO), and the industry is filled with many firms that offer these services. Unfortunately, most of these firms prey on naive customers, guaranteeing 1st page results, and delivering very little. Their business model is based on aggressive sales and high turn over. It is because most people don’t really understand how the search engines work that they end up buying services and believing the promises from these rouge companies. The goal of this article is to shed some light on the mystery of Search Engine Optimization.

First off, we are talking only about the non-paid search results on the search results page, and not the paid listings (known more commonly as the PPC, CPC, Adwords or Paid Search).

1. Search Engine Indexing: Finding & Reading

The first thing a search engine needs to do is find your website and then it needs to read your site. There are two ways search engines can find a website: Links to the site and notification of the site.

If you have other sites that link to your site, then odds are that most search engines will find your website by following the links from the other sites. If you have a new website, you probably don’t have any links going to your site and you will want to notify the search engines that your site exists. All search engines have a simple process of submitting your website address, usually found on the bottom of their website through a link called: Add Your Site.

Once the search engines know about your site, they use automated programs to “read” your website and collect information it finds. The programs are commonly called “spiders” or “bot”. They are constantly roaming through the internet visiting every website they can find and gathering information about the website. It is typical that these bots will visit a website several times a week. For some sites, they visit many times a day!

The bots are designed to go through an entire website and collect all the words it finds. It stores those words in giant databases.

So, the very first thing that needs to be done to improve rankings on the search engines is to make sure the search engines know about the website, and then make sure their spiders can easily “read” the words on the site. One of the challenges in optimizing websites for search engines is creating a site that is easy for spiders to “read” while keeping the site visually attractive to human viewers. Websites often use pictures to communicate to viewers, but these spiders cannot “see” the images or know what they are about, so a good balance of images and words is essential.

2. Search Engine Indexing: Indexing

What the spider “reads” is just as important as making it easy to find and read the site. Assuming you had a website about custom furniture and on that site, you had images of all the custom furniture you sell and a description of each piece.

The Classic

In this example, it is clear to a human viewer that this is a wood chest, named “The Classic”.  To a spider, all it would know is the words “the” and “classic”. To the search engine, it would have no idea that this website had custom furniture or offered wood chests for sale.

So, it is important that the words on the page accurately reflect the content, business or topic so that the search engines can understand what the website is about.

Once the spider visits a site and collects all the information it can “read”, it will store those words in its database, indexing and classifying based on the words it sees. If it finds the phrase “custom wood furniture” several times on a page, it will save that information in its database, and because that particular phrase was used more than once, it will believe that the page is particularly relevant to this exact phrase.

3. Search Engine Results

So now that the search engine has visited every website on the internet, and has collected every word it has found and stored it neatly in its databases, it is ready for someone to perform a search:

The search engine will quickly look into its database and find all the websites it found with the words “custom wood furniture”. It will even find all the websites that have the words “custom” and “wood” and “furniture” in any order.

4. Ranking

The critical part! The search engine now needs to make a very important decision: what order to display all the websites it has found with the words “custom wood furniture”. The goal of the search engine is to deliver the most relevant sites to the user. In other words, they want to give the user what they were expecting when they typed “custom wood furniture” into the search box.

How the search engines decide what website to show first and what makes a site more relevant than another is a tightly guarded secret. That is why no one can every guarantee that they can get a site to #1 position (or any position for that matter) because only the search engine controls that, and they will not share the secret formula. However, through trial and error, and some common sense approaches, optimization specialists know how to improve the chances of getting ranked high on search engines. Some specialists are especially good at getting sites ranked high.

The most important factors that the search engine use to determine the relevancy of a site to the search term are:

• Domain Name: If a domain name contains the search term, it will generally rank much better than one that does not.
• URL: If the URL of the page contains the search term, it will help in improving the ranking.
• Title of the Page
• Content: The if the search term is present in the content of the page, optimally  about 4% of the total words, it will help lift the rankings.
• In-bound links: More on that in the next section

5. Links

Links to your website are like votes for your website, and the more votes you get, the higher you will rank. But not all votes are considered equal to the search engines. A link from a very popular website, that has a lot of its own votes, counts as much more than from a site that has no votes for it. Likewise, links from government sites (.gov) or educational sites (.edu) count more than links from commercial (.com), organizational (.org), or other top level domain (.net, .biz, .info, .us, etc.).

How the in bound link is structured is also very important. If the visual part of the link: Custom Wood Furniture contains the search term, it is much more valuable than a generic link back to your site, like this: www.MySite.com

It is a misconception to think that links on your website going out to other websites help in anyway. They don’t. In fact, they actually decrease the overall ranking because your passing out some of your clout to the websites you link to. Outbound links should be used very sparingly, never for search engine optimization, and only to increase the user experience of your actual users.

This outline is a very high level explanation of how search engines decided what sites to show for a particular search and how Search Engine Optimization works. In practice, there are many advanced techniques to improve rankings. Some companies pay firms many thousands of dollars each month to improve their rankings. But, by applying these simple principals, anyone can improve the rankings of their site.

You might ask, what in the heck is ORGANIC SEO? Can’t only food be considered organic? Well I can relate to the confusion, but was intrigued by the outcome of my research.

What is Organic SEO?

Organic SEO is the process of optimizing a website to increase its rankings in unpaid search engine listings.

Goals of OSEO:

- Improve business brand visibility

- Expand market share

- Attract larger targeted volumes of Search Engine users

A benefit of Organic SEO is that their organic listings consist of keywords or phrases, which are unlikely to find on other sites. A good technique to this is to arrange the words carefully and in a planned manner. A long list of ineffective words would only move consumers away.

Essentially, Organic SEO refers to manual page optimization. This is basically automatic page alteration submittal. The two different SEO’s are being used quite equally. Although, General SEO follows concepts of PPC Advertising. The main difference between the two is that SEO is automated to optimize the ranking of the particular website, where as Organic SEO is not. Search Engine browsers are used in favor of organic search and genreal search listings. General SEO is completely based on teh company’s advertising budget, however OSEO places the website in the search engines on the basis of relevancy of subject matter given by the client.

Basically it comes down to your preference and goals of your business in choosing what type of SEO works for you. I hope this breaks your confusion and opens doors to new ways of handling your business techniques.

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