The rules of showing photography online differ slightly than what’s best for print and it can be confusing if you’re starting from scratch. An online portfolio has a different look and feel than a regular website. Notice how most websites have a few common elements – a header, some sort of menu or navigation underneath, in some cases a sidebar and at the bottom a footer. However with photography websites you can completely disregard these ‘rules’ regarding the structure. Do whatever feels right and in your opinion makes your pictures look better.
Still, your website should have some structure with these three main sections:
- The gallery
- A contact page
- (Optional) An about page
It sounds pretty straight-forward, right? It may seem simple but as soon as you start the portfolio creation process questions start popping up:
How big should the pictures be?
Is it a good idea to compress them?
Should I use HTML5 or Flash?
Should I include a slideshow?
How many photos should I post?
In this post we’re going to address these questions and some tips on how to easily set up things.
1. Consider Who Is Going To View Your Photos
It’s important to attract the type of clients you want, so depending on your niche you should create the proper image. If you’re a wedding photographer for example you’ll have to make your portfolio using white and bright colors, maybe flowers. This way it reflects the type of work you’re doing and complements it nicely.
On the other hand if you’re a fashion photographer, your portfolio should reflect that. It sounds simple and obvious but you may be surprised at how bad some people are in showcasing their work.
2. Draw a Layout
Think of how the different elements should fit together and where you want them on the page. This includes color themes, icons, typography, etc. This is the first thing you should do even before you grab the mouse.
3. Add Support for Dynamic Content
Lets say you want to embed your Flickr stream as a part of your portfolio. It’s pretty good looking with 12 pictures but what will happen if there are more like 22 or 38? How are things going to look like with even number of pictures and odd number? You don’t want it to look crowded so a number around 12 is a good compromise.
4. Try to Keep the Contrast High
In most cases and with most types of photos it’s usually the best solution to view them against a black background. Black provides a nice contrast which helps to make the photo seem more vivid with popping colors. A good idea if your overall design is dark is to add a little splash of color somewhere, like your logo for example. It makes it look more personal and professional.
There are plenty of software tools which will help you to create stunning, eye-catching headers, graphics and banners. They will help you get your visitors’ attention and make your web page content look more attractive. Let’s take a look at some tips about using images in your web site:
Make sure the image content is relevant to its name. If you take a picture of your car for example and you want to upload it to your blog, then be sure to rename it accordingly like brand-model.jpg for example. Why do so? When search engines crawl your web site they index not only the text but the images as well. More importantly this will have a positive SEO effect on the page you use this image on. Plus if you want your graphics to appear in the Google Images search results and drive more traffic to your web site then you shouldn’t upload a photo with the name IMG125462.jpg.
Include the “alt” tag. This tag’s purpose is to describe the image’s content and is really important for search engines. How to use the tag:
alt=”” – empty, this is bad
alt=”car” – not great, but has some effect
alt=”my new car brand model year” – great job!
alt=”my car, my new car, my awesome car” – very bad, spammed too much, avoid it at all costs!
Keep good pictures to text ratio. Unless we are talking about infographic no visitor wants to come to a website with tons of images and just 2-3 rows of text. Images’ purpose is to attract, or make call-to-action if talking about image buttons but not to replace the whole text content. People visit web sites to find more information about something and they prefer to read text than to feel bombarded with flashy banners, ads and anything that can distract them.
Use high-quality pictures and optimize them to load quickly. People love to see professionally-made banners, photos and logos. Be sure to use them with appropriate for the website size and dimensions. For instance – if the picture’s dimensions are more than 1000×1000 pixels and for the web page’s needs the size shouldn’t be larger than 300×300 you should resize the image to make it look better on the website. If you are using WordPress the editor will do this for you and also reduce the file size (less KB) and your images will load faster. After all you have 20 seconds to impress a visitor so make sure that everything loads in time. Otherwise if the page is not loaded the user will simply close it.