Creative Process Archives - Jesse Thomas Design
149
archive,category,category-creative-process,category-149,ajax_fade,page_not_loaded,,select-child-theme-ver-1.0.0,select-theme-ver-2.3,wpb-js-composer js-comp-ver-4.5.3,vc_responsive

How to Find the Best Photos for Your Website

The right images are imperative to your website. Images set the mood, they deliver the first messages received by visitors to your site, and they communicate important subtle ideas about your business and product.

If you’ve paid for a nice website theme or even custom development, you’ll want to maximize that investment by having outstanding photos on your site. It could be very well be the difference between your website looking professional vs. mediocre.

So let’s dive into the details on how to choose the best photos for your website and what you should expect in terms of cost.

How much do website photos cost?
Your cost for website photography can range anywhere from free to thousands of dollars.

Stock photos are a popular choice because they are a low cost option. There’s a seemingly endless number of stock photos on websites such as iStock, Shutterstock, CreativeMarket, Getty, and many others.

Searching through all these options can feel like trying to find a needle in a haystack, especially if you’re limiting yourself to free stock photo sites. Given how important images are to the look, tone, and first impression your website makes, it is often worthwhile to spend a few hundred dollars on quality stock photos rather than limiting yourself to the free images.

However, beware of bad stock photography. The wrong images can turn people off and lower the trust and credibility that visitors have for your business.

How to choose the right stock photo
First, let’s talk about the images you don’t want: Photos look like stock photos.

You’ve seen them on other sites: The plastic-looking people don’t appear authentic, or the style of photography has been overused by marketers. When people can tell you’re using stock photos it may subliminally suggest the following:

  • This company is as fake and insincere as their photos
  • They’re just like everyone else (generic)
  • They didn’t invest much money in their website photos, so the quality of the products and services might not be very good either.



The trick to successfully using stock photos is find images that don’t look like stock photos. Characteristics of these photos may include:

  • Unique and interesting-looking people
  • An artistic style or feel
  • A different way of photographing a common subject



Here are the steps to choosing a great stock image for your site:

  1. Consider what idea needs to be communicated – Ex: Low prices on sweaters
  2. Brainstorm a list of visuals that might express that – Ex: Smiling people in sweaters, or a rack of sweaters
  3. Search on the stock photo site of your choice using keywords – Ex: “Sweaters,” “Smiling people in sweaters,” “Rack of sweaters,” “Holiday sweaters,” etc.
  4. When you discover images that fit the tone of your website and the idea you want to convey, save them to your lightbox or favorites. (You’ll need to be signed in as a user to do this – most sites let you set up a basic account for free).
  5. Review your favorite images in the context of how they’ll be used on your site. For example, if you’re finding an image for a homepage slider and you want text in the image, where will the text go? (If you love a certain photo but aren’t sure if it will fit into your site design, check with your website designer – they may be able to find a way to make it work.)
  6. Choose your image and download a comp – this is a free version of the image that has a watermark on it to prevent theft. Your designer can place this temporary version of the image into your site layout so you can see how it looks. You can do this with several images to try them out and compare.
  7. Once you’ve decided which image to use, purchase and download the highest-quality image available (in case it needs to be resized or cropped).



When to hire a professional photographer
In some situations, you may not find what you need from the stock photos out there and may want to hire a professional to take custom photos for you.

You should hire a professional photographer if:

  • The subject matter is custom – Ex: You have a unique product
  • You have a unique idea to communicate or…
  • It’s important to your message that your photography have a specific or custom tone.



Done well, custom photography can help set your apart from your competitors.

With both custom and stock photos, you may or may not be able to use the photos in other marketing materials – check the licensing terms in the contract if you think you might want to use a photo beyond this single use.

What NOT to do
We’ve all got cameras on our phones these days, so it may be tempting to think you can just snap some hi-res photos of your products yourself instead of hiring a professional photographer. Let me strongly caution you against this. Here’s why:

The art of taking good photos isn’t in the camera, it’s in setting up the shot. Lighting in particular is very hard to get right, and often requires special equipment. Framing the shot, setting up a flattering background, making the colors pop – these are all skills that the pros know and most people with an iPhone don’t. So unless you’ve got training as a photographer, leave it to the professionals. You’ll thank yourself in the end.

Photos matter
When I design websites for my clients, I take great care to use the right photos and illustrations for every project. I hope you’ll do the same. Feel free to reach out to me if you’d like my help to create the best image for your business.

0
0

How to Save Money on Website Development

One of the biggest mistakes that people make when creating a website is that they begin the development process too early. They hand over a half-baked set of ideas to their website developer at the beginning of the process, then are understandably upset when the result isn’t what they wanted, and then weeks of triage coding ensue.

In this series we’ve already covered 8 steps that you should take before doing any programming whatsoever. Here’s a quick recap of what we’ve covered so far:

  • Step 1 – State your GOAL. The best way to set your website project up for success is to start with the end in mind by considering what you need that website to do. The more specific you are about what you expect to get out of it, the better. And of course, be sure to communicate this to your website developer.
  • Step 2 – Identify your AUDIENCE. Before you start building a site, get very specific about who the user is, the customer you’re trying to reach. This will allow you to gear your message around who your customer is and what they are looking for, which will improve the conversion rate of visitors into customers.
  • Step 3 – State your MESSAGE. Focus on one key message. This requires discipline that few people exercise, which is why you can use it to set yourself apart.
  • Step 4 – List the necessary ELEMENTS. A necessary element is one that will make your website incomplete if it’s not there. Listing these items will give you and your website developer a better sense of what type of website you need.
  • Step 5 – Create a MIND MAP. Brainstorm a list of things that represent your message, especially concrete, visual things.
  • Step 6 – RESEARCH designs with similar goals. Spend some time on the web identifying sites you like and want to emulate, and competitors that you want to differentiate yourself from.
  • Step 7 – Create THUMBNAILS. Thumbnails are small sketches that are the first visual representation of your website. Use them to play around with different design ideas.
  • Step 8 – Create ROUGHS. A rough is a larger, more detailed version of your thumbnail sketch that indicates what content is going where in your final design.

Now I can understand if you think that after the roughs are done, then it’s time to move on to the development stage. We’re almost there, but not quite. There are two more steps that can save you big bucks if you do them before getting a developer involved.

Step 9 – Create COMPS
This is the stage where your design really comes to life. Once you’ve gone through all the other planning steps, you’re ready to create the desired design using design software, like Adobe Illustrator or Photoshop. This will allow you – and your developer – to know exactly what your website should look like before going through the expense of developing the site.

This process typically does require a design professional, or at the very least someone used to working with the design software. Coding is relatively difficult to make changes and adjustments to; it’s easier and faster to make tweaks in design software. You may want to try out different colors, experiment with fonts, and play around with other details in order to perfect your design, and that sort of experimentation is much more economical at the design level than at the development level.

If designing in-house, you may start your design from scratch or start from a template that includes all of your desired elements.

You can start the comps stage even if your website copy isn’t ready yet. If your design requires a lot of content that isn’t available yet, use “lorem ipsum” as placeholder text – click here to get placeholder text you can easily copy and paste into your layout.

Step 10 – Show your design in CONTEXT
Once you’ve got a comp you’re happy with, you’ll want to view it in the desired space. With a website it’s important to look at your comps in the browser to get an idea of what the site will look like when it’s finished.

You can do this by creating an image (jpg or png) of your comp and dragging it into a blank browser window. Make sure it is sized to the correct pixel width and height in order to accurately reflect what it will look like. (You may have to click on the image to zoom in to full size.)

Get a feel for what the comp looks like as you scroll up and down. Put yourself in the mindset of a first-time visitor to the site and think through what their experience will be. Is it easy to find what they’ll most likely want? Is anything important missing? Is it clear what the next steps are?

Use this experience to further refine your design. Again, it is much easier to make key changes to your design before starting development on your site than it is afterwards.

Get the website design template
If you’d like to receive my free website design process template that walks you through all the steps in this process, subscribe here.

1
0

The Simple Sketches that Could be Worth Big Bucks to Your Business

Today we’re going to talk about sketching thumbnails and roughs. Now, before you protest, “But I’m not an artist!” let me reassure you that there’s no artistic skill required. And it’s definitely worth your while because spending a little time doing these two things can save weeks of development and redevelopment time and thousands of dollars on your website project.

This is Part 5 of my 7-part series on how to create the website you really want, on time and on budget. Here’s a quick recap of what we’ve covered so far:

  • Step 1 – State your GOAL. The best way to set your website project up for success is to start with the end in mind by considering what you need that website to do. The more specific you are about what you expect to get out of it, the better. And of course, be sure to communicate this to your website developer.
  • Step 2 – Identify your AUDIENCE. Before you start building a site, get very specific about who the user is, the customer you’re trying to reach. This will allow you to gear your message around who your customer is and what they are looking for, which will improve the conversion rate of visitors into customers.
  • Step 3 – State your MESSAGE. Focus on one key message. This requires discipline that few people exercise, which is why you can use it to set yourself apart.
  • Step 4 – List the necessary ELEMENTS. A necessary element is one that will make your website incomplete if it’s not there. Listing these items will give you and your website developer a better sense of what type of website you need.
  • Step 5 – Create a MIND MAP. Brainstorm a list of things that represent your message, especially concrete, visual things.
  • Step 6 – RESEARCH designs with similar goals. Spend some time on the web identifying sites you like and want to emulate, and competitors that you want to differentiate yourself from.

And now, on to the next step two steps…

Step 7 – Create THUMBNAILS
Thumbnails are the first visual representation of your website. They’re small sketches that are quickly drawn without any need for skill – think of them as the stick figures of design. Their purpose is to give a basic overview of what will be needed on a page.

Your primary goal with thumbnails is to think through the process of what visitors on your site will see when they get there, the best way to portray your message, and how you’ll move the visitor through the necessary information to your call to action.

Sketching thumbnails for your website home page can save you tons of time because it gives you direction on what is needed (and what may not be needed).

I often make thumbnail sketches while I’m doing research on other websites, because what I see there gives me ideas for the new site I’m working on.

If you’re wondering just how small and how quick your thumbnails should be, I do mine about 2×2 inches and each one takes about a minute.

Step 8 – Create ROUGH DRAFTS
A rough draft is a larger, more detailed version of your thumbnail sketch that indicates what content is going where in your final design. It is typically a half-page to a full-page in size.

On a rough you’ll indicate where key elements go such as your logo, headline, navigation bar, blocks of text, photos and graphics, footer elements, etc.

It’s much quicker, even if you are not skilled at drawing, to sketch a rough draft of your design with pen or pencil than it is to move elements around on a computer. Even experienced designers find it faster to sketch out roughs on paper than on the computer.

A rough provides an additional opportunity to test out your plans. Sometimes the layout that we have in our heads doesn’t work quite the way we thought it would when it’s down on paper. It is much less costly to find this out from a sketch than after you’ve paid a professional a lot of money to design it on the computer.

It’s a good idea to sketch a few different versions, especially for your home page, so you can think through various the options for what you want the final page to look like. Do you want a big image slider dominating the home page that features products? Do you want your latest blog entry on the home page that shows off your industry knowledge? How will the call to action stand out against the other elements you have on your home page?

Play around with how much information you include on the home page and how much you push back to secondary pages. What would your home page look like if you only focused on one message and call to action, instead of trying to squeeze in everything you think is important?

Also think about what content is “above the fold” – the top square area that people will see on first glance without scrolling. You may sketch out the full page in a rectangular sketch, but the top square is the prime real estate – put what matters most there, especially your call to action.

Experimenting at the roughs stage is inexpensive, so this is the best time to do it. In fact, this is one of the biggest ways to make sure your website project doesn’t go over budget.

Just imagine designing and creating a whole website only to find that you were missing a key element that should have been thought through from the beginning, and which will require changing the whole design to properly incorporate… This kind of thing happens, don’t let it happen to you!

I typically do dozens of thumbnails and a few different rough drafts to find the right arrangement of elements.

After you’ve got a rough that you’re happy with, you can pass it on to your creative professionals (web designer, photographer, illustrator, etc.) with your notes on it. This will help insure that you get the design you actually want right from the beginning.

So what are you waiting for? Get sketching! It’s easy when you remember you’re not trying to win any art prizes. And yet, it could save you big bucks on your website project.

Get the website design template
If you’d like to receive my free website design process template that walks you through all the steps in this process, subscribe here.

0
0

The Simple Research that Will Help You Leap-frog Your Competition

One of the biggest reasons that companies redesign their websites is so that they can stand out from other websites and draw traffic (and sales!) from their competitors. But how do you make your site impressive enough to leap frog the competition, especially if you have a smaller budget? A little research and planning at the beginning of your website design process goes a long way.

This is Part 4 of my 7-part series on how to create the website you really want, on time and on budget. Here’s a quick recap of what we’ve covered so far:

  • Step 1 – State your GOAL. The best way to set your website project up for success is to start with the end in mind by considering what you need that website to do. The more specific you are about what you expect to get out of it, the better. And of course, be sure to communicate this to your website developer.
  • Step 2 – Identify your AUDIENCE. Before you start building a site, get very specific about who the user is, the customer you’re trying to reach. This will allow you to gear your message around who your customer is and what they are looking for, which will improve the conversion rate of visitors into customers.
  • Step 3 – State your MESSAGE. Focus on one key message. This requires discipline that few people exercise, which is why you can use it to set yourself apart.
  • Step 4 – List the necessary ELEMENTS. A necessary element is one that will make your website incomplete if it’s not there. Listing these items will give you and your website developer a better sense of what type of website you need.

And now, on to the next step two steps…

Step 5 – Create a MIND MAP
Mind mapping is a brainstorming process where you list things that represent your message. Write down everything that comes to mind, especially visuals. If it’s on your mind, write it down.

You can use a notebook, write on a white board, or type it into your computer notes app – whatever you feel most comfortable with. Some people do their best thinking out loud, so they could record it on an audio recording device using their smart phone or computer.

The idea here is to use your stream of consciousness to discover hidden things that you wouldn’t have thought of otherwise that may evoke feeling and communicate with your audience.

Here’s an example: What do you think of when the message is “We have the best price and selection on sports apparel”? It could be something like this:

  • teams
  • logos
  • variety
  • jerseys
  • hats
  • football
  • strings
  • storefront
  • discount signs
  • % off
  • clothing racks…

 

Visuals are important because they communicate quicker than words do. Showing me a picture of the food on a menu is going to tell me more about whether or not I want it than a list of ingredients would.

Step 6 – RESEARCH designs with similar goals
This step involves looking at other websites for two purposes:

  1. Sites you want to emulate
  2. Sites you want to stand out against

I appreciate it when a client sends me websites that they like, especially in their particular industry, because it quickly narrows down the look and feel that the client wants, so I don’t have to try and read the client’s mind (which is time-consuming and frustrating on both sides). And hey, there’s no need to reinvent the wheel, right? I can take a look you like and customize it to your company.

Additionally, I always research what my client’s competitors are doing with their websites. My goal here is to see what they are doing well that we can emulate, and also to look for opportunities to do a better job.

People will judge your site based on what they’ve seen at competitor’s sites, so those sites are a good starting point to know what kind of baseline expectations people will have (do all of your competitors have online ordering with free shipping?), and to see where their site is frustrating visitors (difficult to navigate, key info is hard to find, etc.).

You can look at what they are doing in terms of technology, design, and messaging, and come up with strategies to make yours just as good and better.

Is their website slow to load? Make yours the fastest.

Is their shopping cart very user friendly? Make sure yours is too.

Is their homepage cluttered with too much content? Focus your home page copy on one clear message and call to action, with big eye-catching photos in a slider.

Whatever your particular message and audience, there are likely other businesses with similar goals and offerings. Rather than starting from scratch with your website design, take an hour or two now to survey the online landscape you operate in for ideas to emulate and to stand out against.

Get the website design template
That should be enough to keep you moving forward for now… If you’d like to receive my free website design process template that walks you through this process, subscribe here.

0
0

The One Thing That Can Set Your Website Apart

Today I’m going to reveal how to choose the message that will make your website stand out from the competition… it’s so simple, and yet very few companies take the time to do it (or even know they should).

This is Part 3 of my 7-part series on how to create the website you really want, on time and on budget. Here’s a quick recap of what we’ve covered so far:

  • Step 1 – State your GOAL. The best way to set your website project up for success is to start with the end in mind by considering what you need that website to do. The more specific you are about what you expect to get out of it, the better. And of course, be sure to communicate this to your website developer.
  • Step 2 – Identify your AUDIENCE. Before you start building a site, get very specific about who the user is, the customer you’re trying to reach. This will allow you to gear your message around who your customer is and what they are looking for, which will improve the conversion rate of visitors into customers.

And now, on to the next step two steps…

Step 3 – State your MESSAGE

People usually want to include as much information as possible on their website. Big mistake. This creates clutter and confusion.

It’s better to communicate one thing that is remembered than to say five things and have them all forgotten. In other words, your website makes a better billboard than a novel.

The message is not a headline, but rather a singular statement or concept that you want to make sure gets across to people.

Your message is the one crystal-clear idea that speaks to what your visitors want, and that comes from your goal. That way the customer gets what they want and you get what you want – that’s the sweet spot.

It’s critical to think this through before you start creating your website because people are busy, they will only give your website a few seconds and if they don’t find what they’re looking for they’re going to leave… and probably go to your competitor’s website instead.

You need to hook them right away with a message that appeals to their needs, and drives them to take the action you want.

Here’s an exercise you can use to come up with your message:

  1. Put yourself in the shoes of your target audience – your very best type of customer. What is the most urgent problem, question, or desire they will most likely have when they come to your website? Write it down.
  2. What can you provide or direct them to that will solve their problem, answer their question, or satisfy their desire – or at least get them on the path to what they want? Write down the answer, or brainstorm a list of possibilities.
  3. Think about what you want them to do to get them into your sales funnel. Do you want them to buy an entry-level product? Sign up for a free consult? Download your mailing list lead magnet? Sign up for your weekly specials email?
  4. Compare your answers from steps 2 and 3. Look for an overlap – something you want them to do that will get them on the path to a solution to their most urgent need or desire. Stay focused. You don’t have to sell everything you have during the first interaction.
  5. Now create a message statement that quickly points them to the solution and call to action.

Here’s a practical example of this process in action. Let’s imagine that our company is a restaurant that’s trying to attract more lunchtime customers from the nearby business park.

  1. Audience is bored with the usual lunch options, looking for something new, preferably close by and affordable.
  2. You can provide lunch specials that have been affordably priced and can be ordered online in advance for quick pickup.
  3. You want them to try out your lunch specials.
  4. Call to action: Sign up for email list to get a 50% discount on first lunch order.
  5. Message: Tasty, affordable lunch options nearby

Here are some other examples:

Audience: DIY robotics makers looking for their next fun project.
You provide: Microchips and technology kits.
You want: Them to go onto your mailing list so you can sell them the supplies to make the projects.
CTA: Sign up for the newsletter.
Message: Creative DIY robotic project ideas delivered to you monthly – Sign up now

Audience: Homeowners searching for unique furniture to fit a special need or style.

You provide: Custom wood furniture and carpentry services.
You want: Them to call and so you can sell them custom furniture.
CTA: Call now for a free estimate.
Message: Quality custom furniture crafted just for your home. Call for your free estimate.

 

Once you feel that you’ve nailed your message, share it with everyone on your website development team – this message will be communicated through headlines, images and content throughout your site. Consistency is key.

With that laser focus in mind, the next step in the process is to list the necessary elements for your website.

Step 4 – List the necessary ELEMENTS

An element is any single thing that is included on your website. It’s wise to list everything – even the obvious stuff like navigation and contact info, to be sure that no important detail is missed.

Listing these items will give you and your website developer a better sense of what type of website you need. It’s a good idea at this stage to revisit the question, “What do users need from my website?”

Here’s a list of some of the elements that might make up your website:

  • Logo
  • Images
  • Header
  • Navigation
  • Footer
  • Buttons
  • Forms
  • Map
  • Product pages
  • About page with bios
  • Blog
  • Social media connections
  • Contact info
  • Search function
  • Slider
  • Text
  • Videos
  • FAQ
  • Testimonials

 

Once you have a preliminary list, segment the list into necessary and optional elements.

A necessary element is one that will make your website incomplete if it’s not there. Having too many elements can create a distraction from your message. Not having the necessary ones will anger users who come to your website and can’t find what they need.

Optional elements are those that you’d like to have, but aren’t absolutely critical. This gives you some flexibility in the event of time or budget constraints, and indicates where you can cut back if the site starts to look too cluttered.

Get the website design template

That should be enough to keep you moving forward for now… If you’d like to receive my free website design process template that walks you through this process, subscribe here.

0
0