Essential Design Tips for Event Websites Part Deux
Hey you, welcome back to our design series! Or, welcome altogether if this is your first time. To check out our first article on event design go over here, it will provide some very basic ground work in color theory and typography which are useful before moving forward.
For this second part we’re picking apart image assets when in event design. Images are incredibly useful but if used poorly, can really give your event a negative look. Just follow these guidelines and it will keep your design from getting bogged down in image design hell.
Make sure you know the dimensions of your event page
This seems easy right? Wrong. I can not count the number of event pages that I have seen and edited that use incorrect image dimensions for their background event page and, even worse, for their header image. Using the correct image dimensions ensures that the image looks how it is supposed to and that you don’t have a banner with half of your information missing. How embarrassing.
Your best bet is just cropping it to fit. If you use an image editor like photoshop, you can set your crop dimensions to exactly the size you need and it will give you the correct size. Be careful attempting to just resize a picture as many times this can change the picture size ratio and make everything look wonky. Not the look you’re going for.
Please note: if your image is smaller than the required dimensions, uploading it anyways will make it look grainy and bad. Do not do this. Even if you think it will be ok.
Use images in social media, but know the dimensions!
Just like how using images on the event page itself is a useful way to add information and color and grab attention, doing it on social media will do the same thing. But again, be aware of social media size constraints! Unfortunately for everyone, there is not a standard social media image size. Facebook, Twitter and Instagram all have different sizes so it requires multiple images.
Not sure what sizes are on what platforms? No problem! Mainstreethost has a fantastic cheat sheet post on all social media image sizes that you may ever need. Here you can clearly see the different sizes needed for images on Twitter:
You probably won't need most of these but it is important to know what the Twitter feed minimum is, what is recommended and what is displayed. Many times photos are cropped when displayed on timelines so you should be aware of what image size will actually be seen by people scrolling through their feed. They will not see your brilliantly designed full banner but rather just a small portion of it.
And for Facebook:
Timeline photos and newsfeed photos are not displayed at the same dimensions because of course not. When in doubt of which sizes to go with, use the smaller size to ensure your image isn't cut off. This also gives you a bit of extra info on what your Facebook profile photo size is which is also useful as we have a share image on our platform that conforms to the same dimensions as your profile photo.
If you're looking to post your event design banner on any other platform, check out their blogpost for further image sizes for Pinterest or Instagram.
When using text with an image-- don’t fight the image.
Let’s say you’re trying to use an image you took of your recent wine dinner as the background of your next wine dinner banner and want to add some text. Don’t fit the image. Don’t try to stick text over areas that have a lot going on, it will only make your picture look cluttered and text hard to read. Use the empty spaces where you can or create empty spaces by fading out part of an image to a single background color or use a textbox to make the text stand out. Yes, textbox does sound very Microsoft Powerpoint but it can be done to great effect, see how we did it here for one of our banners?
We’ve used our favorite pink color here to make a box that we can put the text over and have it pop and be legible. We've also turned the opacity so some of the image can still be seen. Without the box, our text, even as bold as it is, would be lost within the multiple elements of the photo.
Keep your sizes down!
Images file sizes can be huge and majorly slow down load times. You don't want to do that when you want people buying tickets to your event! If you have a small image, you should be fine but if you have larger, full sizes images, or ones with a lot of layers and components, make sure to compress your image down before you upload it. Photoshop can do this when you save to web with PNG file format.
If your file size is still too large, or you haven't been using Photoshop, no worries.
Compressor.io is an incredibly handy website that will compress and shrink any image file down without losing quality. You will still have an amazing looking event design banner but without the slowed down load speeds that come when it is almost a MB in size.
So there you have it, a quick crash course in design and use of images for event pages. The most important thing is that you don't fight your images. You want to use them and showcase them and make sure that any crops, textboxes and overlays you use all work with your image. Also be sure to check out the links in this post for more information or head back to our first design post to get a refresher on color and text.