BUILD A BETTER WEBSITE

Transcription

1 BUILD A BETTER WEBSITE

2 START WITH YOUR AUDIENCE We re being literal here. Start where your audience would start if they visited your website. Your homepage. More specifically, your banner. The space before the scroll. Your first impression. If you already have a site, use the checklist below to audit your existing homepage banner. If you re in the planning stages of a new site, use the checklist below to strategize your plan forward to building a better site. The Call to Action This button, typically placed on the top right corner of your navigation should make it abundantly clear, and with urgency, what the user can do on your site. Ex. Book Now. Invite Me to Speak. How will this look on my site? The Navigation No more than six items. Seriously. Otherwise, your audience will have way too much to think about and they re significantly more likely to bounce when confronted with too many options. Stick to the essentials. Speaking, Author, About What navigation items are essential for my site? The First Glance If you are a speaker, trying to become a speaker, or trying to get people to give you money to speak, the first photo on your site should be a photo of you speaking. In front of a large audience. No exceptions. What photo can I use? Do I need new photos?

3 The Video This better be easy to find. Either a play button, watch now button or the video itself should be no more than a click away. Deal? Where can I place my video? Which video will I use? The User Benefit Throw out the idea of telling people what it is that you do. Instead, the most prominent copy on your site should be what your audience will get from you. What is the biggest benefit to my audience? The White Space It s tempting to crowd as much pertinent information as high as possible on your site. Resist that temptation. In all your design choices, keep it simple with lots of space around your text, buttons, and images. What is non-essential on my banner?

4 FIRST IMPRESSIONS ARE EVERYTHING Let s say message, promotion, and budget are all equal. If there are two speakers held up next to each other the most glaring difference comes from production value. E.g. Your looks. Your first impression. Your flash, pizazz, and/or dashing good looks. The way you present yourself sets the tone for what your clients expect to pay. The look and feel of your site, images, and videos determine how much your clients think you re worth. If you re rocking some blurry images of you on stage and heavily dated headshots, then you re going to max out your booking fee. And that s a bummer. Because I m sure your message is much more valuable than that. Here s the thing: don t let your message and value hide under a badly written copy, boring images, or weak videos. If you re a high-end speaker, then you gotta play the part. And yes, that means investing some hard-earned cash into your headshots. Before we get into how to take those headshots onto the web, let s talk about some do s and don ts. Do: Take shots in front of an audience. Ideal shots include candid shots of you speaking, both smiling and serious, shots of your audience clapping/laughing, close up shots on stage and wideangle shots to demonstrate the size of the crowd. Tony Robbins doesn t have to write a single word of copy to express the magnitude of his influence. An auditorium engaging with his presentation does the job for him. Do: Take a bounty of headshots/portraits. Grab some professional shots, but please please snap some candid photos of you in your element. Show some personality!

5 Don t: Ignore landscape shots. When it comes to designing a website, your designer is going to need a selection of images to work with and portrait oriented images limit your design, especially if you re looking for the high-impact effect of banners. We ll talk more about banners in the next section. There s nothing that says this person s fee is $15K+ like a big stage photo on a gorgeous website. - Jane Atkinson Don t: Green screen everything. It may be super cool to switch out the background color of your images, but as convenient as it may be, your photos will look dated. With the advent of Instagram, everyone on the internet has a discerning eye for design, and an artificially imposed background just looks cheap and inauthentic. Try to stick to natural backdrops with space to your right or left to add text elements later. Do: Find a photographer with experience. It will be tempting to go for the cheapest option, but finding someone with an artistic eye will set your images apart. There are a whole lot of people who can point and shoot a camera, and very few who can capture who you are as a person.

6 Don t: Wait five years to update your headshots. The photos you give event planners should match your current appearance as closely as possible. Men, this includes you. Your hair changes more than you realize! Don t: Stay in the studio. A white/neutral backdrop is essential for some of your shots, but they quickly become stale when it s all your clients see. Mix it up. Go outside. Sit at your desk. Talk to a client. Strike a balance between formal clean shots and visually interesting varying depth-of-field shots. SHOOTING FOR WEB Now we re going to get a touch technical. Most photographers are going to be most interested in shooting your beautiful face. But when these portrait-style photos hit the web, things get weird. Let s take a look at an example. My photographer did an amazing job with this photo. It s warm and welcoming. I love it so much I want to make this the banner image on my homepage. Let s see what that looks like. Photo Courtesy of Mike Curtis Photo

7 Well, shoot. That s not at all what I wanted. The full image is cropped and zoomed in. Where d my coffee cup go? What am I looking at? What can I do now? Well, I m fairly ok-ish at photoshop, so let s see what we can do. Well, that s better. Using some photoshop tricks, albeit not well, I am able to extend the image width, allowing space for the focal point of the image remain the ideal size.

8 But realistically, taking a photo with those dimensions is outside the realm of possibility. The answer? Back that thing up. That s right. Ask your photographer to take several steps back. Here s the image that would have made this whole banner situation a whole lot easier. See how much more space we re seeing on each side? By backing up, your images will be more flexible when cropping for web. Specifically in your banners. OPTIMIZING FOR WEB While images are essential, they don t come without their drawbacks. Sites with large image files take longer to load. Rather than forgo the use of imagery altogether, the key is to optimize your images to the lowest file size possible while not sacrificing image quality.

9 That is the tradeoff that you will always make with your images: how much do you want to sacrifice image quality for a smaller file size or how much do you want to sacrifice file size for a higher quality image. The good news is you can control the trade-off. And it s pretty easy to boot. Without getting too deep into the technical side of image optimization, it is important to understand the two elements you can control. Image size and image resolution. Your photographer most likely delivered high-quality images, think 5614 x 3539 px, which is best suited for print. We want to keep things light and snappy, so let s compress those images to no larger than 1980x1080 px and 72ppi. There are plenty of free image optimization tools available. In this example, we re using You ll notice as the file size drops, the blurrier the images become. Unless you happen to have a super high-resolution computer screen, odds are you can t detect a substantial difference between image one and image two. At the sizes and resolutions available in tech today, we hit diminishing returns with pixel size pretty quickly. Compromise a few pixels and you ll see huge returns in site speed. Services like Weebly, SquareSpace, and Wix do claim to optimize your images for speed, you will lose control over quality, often resulting in blurry or fuzzy photos. Not a good look. Optimizing the images yourself is the best way to ensure you get the quality you desire x 3539 px 9.4 MB 100% Resolution 1980 x 1248 px 335 KB 90% Resolution 1200 x 756 px 63 KB 60% Resolution

10 With all these tips in mind, let s put together a shot list for your next shoot! Studio Shots The ideal studio would utilize either natural light or lots of lights or ring lights to fully light your face. Stick to neutral backgrounds to allow for simple editing later in the process. What background/colors do I want on my site? Should I wear those colors? Or work them into my background? Outside the Studio Depending on the mood/vibe of your brand, this could be outdoors, at a kitchen table, on stage, or in an office. The goal is to show dynamic environments while capturing lots of natural light. AVOID busy backdrops with conflicting colors. What locations are available to me? Extra-Wide Landscape Shots These can be in-studio, on-stage, or in the great outdoors. What locations will allow my photographer to back up for extra-wide shots? Audience/Speaking Shots These can be a little harder to get. It is 100% worth it to invest in a photogapher with experience in shooting on-stage action. When is my next gig? Will the audience size make for an impressive banner? How can I get a photographer there?

11 MORE TO COME