Thursday Theory: Rules For a Perfect Website Navigation
How to Create Effective Big Website HeadlinesHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
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.
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.
Download Source File for this Tutorial
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):
Want to Create Your Own Featured Area?
Check out these great vectors if you would like to create your own featured content/product area:
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.
9 Comments:
Related Posts
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.
Wonderful article, thank you for the blackberry vector, I was looking for something like this
Thanks Gadget guy! I hope you get some good use out of the vector
.
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
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.
Thanks for commenting Stephanie & Thomas
. I’d say Foundation Six is probably my favorite of this list, really beautiful design.
Awesome article. some great idea. i love the blackberry its good suggestion. it looks some diffrent.
Thanks for mentioning us at Bombardier Studio. We’ll link back!
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.
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!