Thousands if not millions of blogs litter the search results of Google. Each site has its own layout with design features used to promote & encourage user engagement. Some features are unique, but there are many similarities between blogs, one of which is the featured post section.
This usually appears on the front page listing either the most recent posts or the most popular posts. Featured image thumbnails entice readers and give them a peek into what the content is all about.
With so many different ways to design these feature story boxes it can be tough knowing where to start. And that’s ultimately my goal with this post: to give you tons of ideas for feature post sections. By examining the work of others you’ll see how different ideas look on screen so you can pick & choose which aspects you like best for your own projects.
Diverse Featured Image Sizes
Every great featured post box includes thumbnail images somewhere in the UI. These images can be organized in a fixed size or stacked Tetris-style with varying sizes.
The design of your site will influence how you set featured images. Naturally, the dimensions could be changed in WordPress, but you may not know what size to use until you test out different styles. The other alternative is to study different layouts and see what sizes they’re using.
Alumini is a very clean WordPress theme with only three images in the featured box. You’ll notice two images align to the right-hand side and appear much wider than taller. But the story on the left uses an image that’s much taller than wider.
These posts each have a setting in WordPress to crop images to varying sizes so that they display correctly in the featured post box. It’s a really cool effect that draws the eye onto the box because of its unilateral asymmetry.
My only gripe with this style is image cropping. To create these different sizes WordPress has to crop every uploaded image to fit both of those specs. Over time your server could end up holding many unused cropped images.
But the design looks great and if you optimize images for file size you’ll barely notice a difference.
Also take a look at the AmyNews gaming theme which uses a fullscreen slider of various image sizes.
This technique requires even more flexibility to fit all these stories into different sections of the carousel. But when used properly this trend offers visitors a slew of unique posts to browse through.
If you define feature image sizes by default you can always create extra sizes in the WordPress functions.php file. The alternate sizes could be used solely in the feature box, and this grants flexibility when crafting a layout.
But if you’re concerned about server space you can always create featured images with scalable dimensions. Take for example the Absolute theme, which uses two specific image sizes for the thumbnails.
First is the larger left image with 880x586px dimensions. The smaller images are in the same proportions at 424x282px. This means you could just use the 880px width images but force them smaller using the width attribute, or the CSS background-size property.
Not all feature image sections with varied sizes need to use non-compatible dimensions. Granted this is necessary if you want some taller and others wider.
But you can see great results by just following a pattern of image dimensions.
One more example is BlueMag, which uses a mix of different sizes.
This example is really cool because it’s easy to browse and fully responsive. On smaller screens, the vertical story in the center drops down beneath the first story. Width can be updated as needed to fill the screen.
You can work any image sizes you want into the featured post box. The hardest part is deciding how many stories and how to fit them in place so that they capture attention and look good.
Sliding Carousels
If you don’t like the static featured story boxes you can always go the route of a sliding story carousel.
We all know about image carousels and how popular they are in modern web design. Featured story carousels are basically the same idea, but they only appear on the homepage of a blog or online magazine.
Glaucia uses a sliding carousel feature displaying only one story at a time. The other stories can be accessed by arrow navigation links on both sides of the slideshow.
This is a good example of wide images that don’t overtake the whole screen.
It’s possible to build carousels that are the full length of the screen. But if you want to keep everything contained in a wrapper you can make a featured slider the same width as your container.
Jimbaran is a good example of a fullscreen slider. The images take up the entire top portion of the homepage including links to individual sections of the website.
I find this works a lot better for sites that encourage user engagement. Blogs can work great, but this is also nice on eCommerce shops and business-oriented blogs.
However the biggest downside is finding high-quality images to use for these screens. It sounds easier than it is, especially if you support hi-DPI monitors with resolutions up to 4k.
A better alternative might be following this example from the Colors theme. It has a fullscreen slideshow with fixed width images for backgrounds.
It’s a great tradeoff because it mixes reasonably-sized images in with the fullscreen slider effect. The layout is naturally responsive and easily maintains this sliding feature on all screens and devices.
In this example you only have four different stories in the feature box. This means that as you scroll it simply repeats the content over and over. Some designers may like this feature while others may find it gaudy.
Either way, the transitions are very smooth and it offers a fantastic user experience for selecting a story to read.
If you like the idea of a combo featured post widget then take a peek at Amelia. This design has one large fullscreen box with a slideshow of recent posts at the very top of the page. And beneath this, you’ll find three smaller featured posts aligned right next to each other.
You get the large fullscreen slideshow along with static feature boxes all in the same place.
If you don’t have enough content this can be a stressful layout to fulfill. High-quality images can be especially hard to find.
But each blog is different and there’s no wrong answer, only different answers for each situation.
One last carousel example I want to share is the Willis homepage design. It uses text labels for transitions between the individual story slides.
This way visitors can skim the headlines and decide if any of the featured stories catch their attention. With most carousels you have to actually slide through everything to see what’s there.
Most slideshow navigations rely on dot links or sliding arrows. These are both great choices, but they’re not the only options.
I’d also recommend studying the trends used in traditional image slideshow galleries. You may find a cool technique or animation style that could be applied to the featured image box on your blog.
Featured Stories: Whitespace vs Tight Grid
When a bunch of article thumbnails get crammed together the layout can feel a little tight. Many blogs opt to add whitespace between each of the stories in a featured box. This adds breathing room to the design but can also make the featured post box feel a bit distanced.
Every featured post box is actually a grid by design. Article thumbnails fit together either symmetrically or asymmetrically to offer visitors the most intriguing or recent headlines. But how the grid is designed can make a big difference in user experience.
Holomatic is a great example of extra whitespace applied to the featured post box.
The entire layout measures 1180px max width. This gives the internal featured post section a total of 1180 pixels to work with.
The top section fits two post boxes together each measuring 582px leaving a 16px padding between them.
In the bottom section three story boxes measure 383px each but have two spaces for padding. Everything still fits together in a tight grid, but the extra whitespace gives each image some room to breathe.
The key to a great featured post box is in the grid. You should always measure the grid of your layout and decide how to structure the featured box around that. Most layouts with maximum widths choose a number based on grid systems: 960 and 1200 are both great choices.
But in truth you can’t mess up anything if you measure out the grid before coding.
For a tight grid example check out Hot Topix. This is a magazine with one larger featured story and four others contained in the same grid.
There’s absolutely no space between any of the post boxes. It all looks like one big section. This is great if you have enough padding and contrast for the text to still be readable.
With this method you don’t need to calculate extra padding between boxes. You can run the numbers on your grid by making the total number of boxes fit perfectly into the design. But sometimes the tight grid feature can feel cramped, so it’s all about execution.
To meet right in the middle you could do something like Sahifa which uses a 1px space between all the featured boxes.
With such a tight border you don’t get that same space as you do with a 15px buffer of padding. But you also don’t get the harsh contrast between featured story images crammed together.
This is another feature where you can’t go wrong either way. Different techniques work for different designs.
But if you’re building a featured post box you will need to decide how to handle space between the boxes. And it’s much better to plan this ahead of time before coding the entire layout.
Darkened BG Gradients
Every featured post box should have a link either to a blog post or a landing page. Images may draw the visitor’s attention but catchy headlines and crafty copy make them click.
And since you can use any image for the background thumbnail it’s tough to build high-contrast text for everything. This is why the trend of darkening the background with a gradient is so popular.
Freshmag is a great example using vertical featured images in a sliding gallery. At the very bottom you’ll notice much darker shadows than anywhere else in the post box.
This effect increases readability regardless of the background photo. Since the text is all white it would be unreadable on a background with a very light image.
These linear gradients can be made to drop off past a certain amount, say 30% of the box’s height.
This way visitors can still see the unadulterated image and be able to read the headline text clearly.
If you look at the feature boxes of Dialy Magazine you’ll notice they use a dark background of #222 behind the images. By default the images have lower opacity so the BG darkens while keeping the text at 100% opacity.
On hover the image lightens with a CSS transition. Everything is still readable and the images are still visible. This is a popular technique if you want to go beyond just the linear gradient by darkening the entire feature box.
Another option is to follow The Verge and use bright colorful BG gradients over the images. Check out DW Argo for an example of this design.
If the gradients go dark enough and have lower opacity you’ll be able to read the text and see the image thumbnail underneath.
It’s a much more advanced technique and it will not look right in every scenario. One other option is to use colorful backgrounds placed only behind the text. You can see this live in The Review.
Each featured story uses different color backgrounds placed behind each headline. The text is clearly visible but doesn’t obstruct the image.
All of these techniques are reusable, and while some may feel better than others, they all boil down to the same end goal. You want to design featured post boxes where the text is clearly legible regardless of the image underneath.
Feature Hover Animations
You certainly don’t need to include animations in your feature post design. But I find they do add to the user experience by giving the layout some life and movement.
Both CSS3 and JavaScript can be used for animation. It’s much easier just to stick with CSS if you can, but there are no wrong ways to animate. You just want to create hover effects that let the user know which feature box they’re hovering.
Daynight is a beautiful magazine theme which performs two animations on hover.
First the background image lightens by reducing the gradient size. And simultaneously the background image zooms in a bit using the CSS transform property.
This effect dazzles the eye while still keeping the thumbnail image in view. I find this works much better on feature boxes that have larger image dimensions, but even the Daynight theme has smaller squares, and they look great.
A similar animation style can be found in the ArchBlog theme. When hovering a story box, the entire thumbnail darkens to increase contrast. But you also get a small preview of the post content which peeks up from the bottom.
If the animation is well-crafted it’s going to encourage more clicks. Giving readers a peek of the content is a great way to lure them into a story.
But I also like the darkening effect rather than a lightening effect. Adding more contrast on hover just makes more sense to me. This same effect can be found in the Kappa theme which increases the size of radial gradients in the background.
Darkened BGs getting darker on hover is a reliable technique you can apply to any feature post box. It not only increases readability but also clearly indicates which story is being hovered.
Custom animations are only limited by your imagination. Beeanca uses a hover-to-select feature on their slideshow widget. It’s broken into segments with different headlines and you hover the headline to see the featured image. Unique but also effectual.
Another theme Infinity has small feature boxes that display social sharing links on hover.
To me this doesn’t make a lot of sense because most people won’t share a story before reading it.
But you could always change these social links to include related metadata for the article.
Featured Story Metadata
I always like to see extra content in feature boxes, assuming there’s enough room to fit more than just a headline. Extras like post categories, post date, number of comments, and the author’s name are all relevant and fit well in a typical feature post box design.
Take for example the Like Blog theme which includes all this stuff in the feature box. It even has the author’s photo added into the corner of the box.
If you’re designing a responsive layout then you need to consider how much content should be visible on different screen sizes. Use CSS breakpoints to hide certain elements that simply can’t fit on smaller screens.
But the flipside is to include as much info as possible on larger screens. If there’s enough space why not include the author name and publication date? It looks better and gives more information to the visitor.
I really like the Scout Theme featured box because it only adds meta content when hovering. Each box has some extra padding beneath the headline to show the categories, author name, and publication date.
This is another example of a cool hover animation effect. Only give visitors the extra info when they might be interested; in this case when hovering over the story box.
The smaller boxes forego the author name because there’s no room, so they just have the categories and the date. But this is still valuable info and it shows how well this technique can scale for smaller screens.
If you don’t like the idea of squeezing more content into these feature boxes that’s fine. It certainly makes sense when you have varying background images across the whole feature post grid.
But you can get creative with how this data appears in the grid. For example the GoodLife Sports theme uses green backgrounds behind the category links. You can actually hover these links and click to browse the category archive rather than the post.
I don’t think metadata is a requirement for a great featured post box. However, it’s a growing trend in online magazines to include as much information as possible, especially on wide monitors. But do whatever fits best for your current design and be willing to try different options as needed.
Wrapping Up
These trends are just a pinch of what’s possible with featured blog post boxes. All of these trends can be found in many popular online blogs & magazines and they seem to resonate well with readers.
If you’re designing a blog and you know you want a featured post widget, I’d suggest doing lots of research and jotting down your favorite ideas. Browse dozens of different styles and write down your favorite trends. Once you know what you like it’ll be easier piecing it all together in a grid that fits the layout perfectly.
Featured Image Source: Sitemap UX Kit by hidentica.
The post Design Trends For Featured Post Sections in Blog & Magazine Layouts appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2dbKNeh
envato.com coupon
