Use horizontal images.
We use images to help tell a story, so putting images on your website can breathe life into your website by making it more appealing -- or spell death for your website by making it less attractive or frustrating to navigate. For websites, horizontal or square images are usually the most visually appealing.
Cons of Vertical Images
When dealing with all the different-sized screens folks use to access your website, vertical images:
- Take up the wrong amount of space - not wide enough, too tall.
- Can break the text and image away from each other so neither are in context.
- Make it difficult for visitors to read your content.
The dimensions of an image can change the user experience. Tall (vertical) images tend to look funky online while square or horizontal (landscape) layouts usually look best.
When you have to use vertical images...
There are times when we simply must use vertical images, but we just told you that wasn’t a good idea. So, what do you do?
Case study: the FLEX360 portfolio
Showing vertical screenshots in an online portfolio is really tricky.
On our last website, we either used screenshots and just made you scroll past them or we cropped the image to where you could only see part of it - but the full impact of our designs was really lost either way. In short, the images didn’t show off our projects the way they deserve to be. Solution: use Photoshop Mockups with Smart Objects.
Benefits of PSD Mockup Templates
Photoshop mockups with smart objects allow us to cut/paste a screenshot into the “smart layer” and then transformed into a different perspective.
These mockups take our tall, flat screenshots and give the viewer a better sense of the work we did than the literal screenshots could portray. They also give us more control over how we talk about our work - we can show off a specific section of a page or group of pages in one image, and different sections of the same page in another image.
Sourcing PSD Mockups
These templates aren't usually very expensive - but there's also a ton of free ones available. Here are some free ones:
- creativemarket.com - they give freebies away every week
- canva.com - Photoshop not required
Using PSD Mockups
Head’s up, you do need a little bit of familiarity with Photoshop to get the best use out of these. If this is a totally new world for you, this video tutorial is a decent intro to PSD Mockups and Adobe has a lot of great free tutorials to help you get started in Photoshop.
The important thing is to be as consistent as possible in the look & feel of the images you use. Check out our gallery of images for some commentary - and watch how they affect the layout of this post’s content as you scroll through them.
For the geeks, here’s some technical details on PSD Mockups with Smart Objects:
Mockup templates that use Smart Objects make it easy to adjust them to your design project. A smart object “preserves an image’s source content with all its original characteristics, enabling you to perform non destructive editing to the layer” (Adobe).
These types of PSD templates are usually an image of a blank object such as a business card, book cover, phone screen, computer screen that has a smart object layer to easily insert your project designs or images. Mockups are a representation of the products or designs you created for a client or customer - and used to display your work and its functionality. All the layering effects and transformations are taken care of automatically.