PSDFan Extra

Interesting Ways to Display Featured Content and Products

Interesting Ways to Display Featured Content and Products

When it comes to displaying featured content, designs and products there seem to be a few trends that designers follow.

Today I take a look at just what makes these techniques so effective, and analyze some inspiring examples:

Feature Displays Within Browser Screengrab

A common way to display featured content is within a browser window screenshot. This browser window within a browser window approach is great for making content stand out a familiar way. By positioning content within a browser like area visitors can instantly make a ‘web-connection’ with the screengrab. For example, if a web app image is displayed in this format, the visitor will instantly make the connection between the app and the internet due to the internet browser framing the image.


Foundation Six


Bogo Themes


Apollo HQ


Wez Maynard


Eric J

Feature Displays Within Monitor or Mobile Device

A very common trend for displaying featured content is to display it within a computer monitor or mobile device screen.

There are several reasons for this technique. Firstly, the sleek design and professionalism associated with the device is then associated with what is being displayed. Many sites use an Apple monitor to showcase their content, simply because Apple has very well designed products. Using products in this way also makes a technological connection for the viewer. If the user sees content displayed on a mobile device they assume that the product/content is relevant to the mobile industry, if they see it displayed on a computer monitor they assume it is computer or internet related.

Perhaps most importantly is the concept of ‘framing’. We are used to looking at content within some kind of frame (usually within the frame of an internet browser, which itself is framed by our computer monitors). By further framing content, designers can maintain this convention and make content easier to view/browse.


Baney Design


Front 72

Download Source File for this Tutorial


FarsiTel


iFontMaker


Pomodoro


Perfect Layout


Safe Haven


Quotivate Me


Bombardier Studio


Precise Design

Other

There are of course other ways to display featured content and products. Generally, designers will highlight a featured area through use of contrast and framing. That is to say, the content will be framed by a color that contrasts the surrounding background. Alternatively lighting and glow effects can be used to make a featured area stand out from it’s background.

You can see in the examples below that all these sites use some kind of framing device (even if the frame is white space):


Chimera Themes


Maple Studios


McCombs Creative


Armitage Online


It’s Pronounced Frits


WebTeam

Want to Create Your Own Featured Area?

Check out these great vectors if you would like to create your own featured content/product area:


Free iPhone 4 Vector


Blackberry Vector


Mobile PSD


Apple Display PSD


Safari Browser Window PSD

Download Source File for this Tutorial

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

9 Comments:

  1. Gadget Guy says:

    Wonderful article, thank you for the blackberry vector, I was looking for something like this

  2. Tom says:

    Thanks Gadget guy! I hope you get some good use out of the vector :) .

  3. Thomas says:

    Nice article, I currently create a website to feature premium digital content so thanks for this inspiration.

    Foundation Six and 2ttf have really great design

  4. Some nice ideas here. I think that using the device that the product is actually going to be displayed on is a good way of doing things as it shows what people can expect it to be and in which setting. As mentioned though this method is very popular and a lot of people use it. Which ever option you pick, I say they all look really good and effective if they are designed well.

  5. Tom says:

    Thanks for commenting Stephanie & Thomas :) . I’d say Foundation Six is probably my favorite of this list, really beautiful design.

  6. harly says:

    Awesome article. some great idea. i love the blackberry its good suggestion. it looks some diffrent.

  7. Thanks for mentioning us at Bombardier Studio. We’ll link back!

  8. Great article and there are some really good ideas for displaying content or products. If a site uses a device that the content will be displayed on for example an iPhone, it gives the visitors an idea of what it will look like on their device. Thanks for sharing.

  9. Chris says:

    The displaying of featured content is good for people who use the smartphone on a daily basis, so they can be updated anytime they want. Some of these examples are just great, it shows the people what the website looks like on an app, and when the app has an interesting but simple design, people will use it!

    I’ll definetely use this way of dispaying content for my later work, it’s the link between the website and the easy use of a smartphone.

    Great article!

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY