Envato https://envato.com Design & creative inspiration Thu, 17 Jan 2019 10:43:35 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 https://assets.wordpress.envato-static.com/uploads/2016/08/cropped-favicon-32x32.png Envato https://envato.com 32 32 How Design Simplicity Improves UX https://envato.com/blog/future-design-simplicity/ https://envato.com/blog/future-design-simplicity/#comments Thu, 03 Aug 2017 22:26:13 +0000 https://envato.com/?p=50359 The future of design is simple.

The post How Design Simplicity Improves UX appeared first on Envato.

Image: Simple Line Handdrawn Patterns by Youandigraphics

Design trends come and go but great design is always easy to recognize. Print work that catches your eye and naturally intuitive interfaces will always be in demand.

But how you create these products can change based on each project’s needs and the current design trends. Right now we see a big push towards minimalism on mobile and web interfaces. These minimalist layouts focus on simplicity and user experience over glossy icons and 3D gradients.

But what does this shift look like? And how can designers create simple interfaces that also work well for each project? I’d like to share my thoughts on the matter along with some examples and tips for the future.

How Simplicity Improves UX

A great user experience doesn’t require simple aesthetics. It does require clarity and user intention, but the design can follow any style and still work well.

The big push behind minimalism is that it’s easy for any designer regardless of skillset to create create amazing interfaces. You don’t need to master repeating textures, custom text effects, or detailed icons to make a simple interface that serves the user.

But this doesn’t mean icons and patterns can’t improve a design. Rather these should enhance the design and be used as extras to draw the user’s eye through the page.

Spark template.

Take a look at the Spark template and how it uses minimalism. It has a very simple color scheme, no gradients, and the vector illustration in the header is completely flat.

Many of the inner pages are also full of custom icon designs. But they all rely on simplicity to blend naturally into the design.

If users aren’t distracted by shiny graphics and overly-detailed typography they’ll be more invested in the content. This should be your ultimate goal to keep visitors engaged with the site and easily navigating their way through pages.

By focusing on simplicity first you’ll have a much easier time planning navigation text, placement, and page hierarchy to improve the overall experience. This will always be more important than aesthetics and more designers are coming around to this fact.

The Growth of Material Design

Google’s release of material design was a game changer for web and mobile app designers. This visual library came with guidelines and best practices for creating interfaces that focused on the user experience rather than pretty aesthetics.

Google’s introduction to material design.

And this move towards raw minimalism has been hastened through material design. Google even has their own Google Design page full of tips and resources for designers.

Material design pushes the idea that great design should be intentional with the user experience in mind at all times. Minimalism just makes this process easier by laying down rules and guidelines for the most common interface elements.

Take a look at the Fugiat mockup which relies solely on material design principles.

Fugiat, a design mockup with material design principles.

This seems like a very minimalist design but it does have accentuated features. The call to action buttons are vibrant yet not strong enough to overtake the whole page. The color scheme matches with material color palettes and they even use the layered drop shadow effect.

It’s common to conflate material design with flat design because both interfaces move away from textures and gradients. But Google actually recommends using depth and visual hierarchy with drop shadows to create designs that mimic real behaviors.

This idea is still very new but it’s a unique way of looking at digital design which is inherently made for a flat viewing surface.

Regardless there’s no getting around the fact that Google’s material design paved the way for modern user-focused minimalist design trends.

Simple Design Elements

Every design project whether print or digital has its own series of elements. These can be typefaces, icons, or effects used to accentuate the page.

With minimalism quickly becoming the norm these basic design elements are following suit. Most design projects take advantage of minimalist typography like the Ridley Font. Or instead of using a textured background the designer might go with a geometric pattern repeating over a solid color.

Simple Line Geometric Patterns by Youandigraphics

These might seem like accessories to the overall design, but the little things add up fast.

These minor accessories actually make the design what it is and really round out the minimalist features.

If you want to design for simplicity then make sure it permeates your entire design. Fonts, icons, colors, and patterns should all feel very simple and approachable. This makes the technical design work a lot easier so you can put more effort into the user experience.

Future Trends in Simplicity

It’s hard to predict the future and nobody can do it with complete accuracy. But based on current trends I think future designers will latch onto minimalism and simple design aesthetics for the sake of improved user experience.

We can already see the flat design trend in iOS app interfaces and iOS icons. With Google’s adoption of material design this is likely the future of Android app UIs too.


The web is a different beast altogether but it follows closely with other design trends.

Do I think every website should be flat and simple? No of course not. Different ideas work better with different projects and diversity only improves the design world.

But there’s something to be said about minimalism and flat design because these styles help designers focus on the experience first. It’s easy to get lost creating beautifully polished icons and vectors, and in the process you can lose sight of the bigger picture.

So the future may hold a lot of simpler designs and minimalist interfaces. But it also holds a much greater focus on great user experience using flat/material design as a visual language for each project.

This is true of typography and web/mobile mockups along with all other related design elements.


And since minimalism is so easy to create, it won’t take as much time to polish an interface. Designers can focus more on the experience and put their energy towards creating an interface that’s intuitive and easy to use.

Wrapping Up

Whether you’re an experienced designer or just getting into the industry you can look forward to a lot of minimalist design work. The best projects understand which aesthetics work best and implement a great user experience around those design ideas.

But if you’re ever struggling with an idea then minimalism is usually a safe bet. It keeps users engaged with the interface and places focus right where it belongs: on the content.

And it’s for this reason I think minimalism and simplicity will usher in a new era of user-focused design for every single project. Instead of designers obsessing over aesthetics they can instead focus on content, engagement, and the overall user experience for every project.

If you’re looking for a new web design, check out these simple free WordPress themes

This article was originally published in November 2016. 

The post How Design Simplicity Improves UX appeared first on Envato.

https://envato.com/blog/future-design-simplicity/feed/ 1
Best WordPress Themes & Plugins For Photographers Managing Their Own Websites https://envato.com/blog/best-wordpress-themes-plugins-photographers-managing-websites/ Sun, 09 Jul 2017 22:25:17 +0000 https://envato.com/?p=56163 If you’re a freelance photographer, you need a great portfolio. Thankfully it’s easy create your own website and launch it online using WordPress. But this still comes with a learning curve and a few important decisions. Most notably, how will you display your photos so they’re easy to browse? And what features do you need […]

The post Best WordPress Themes & Plugins For Photographers Managing Their Own Websites appeared first on Envato.

Image: Photographer at sunset

If you’re a freelance photographer, you need a great portfolio.

Thankfully it’s easy create your own website and launch it online using WordPress.

But this still comes with a learning curve and a few important decisions. Most notably, how will you display your photos so they’re easy to browse? And what features do you need for a great photography portfolio?

A while ago I covered design trends for photography portfolios, but I never got into resources to replicate these designs. So let’s dive into the best resources for photography sites and look at how you can launch your own portfolio ASAP.

Photography Themes

The very first thing you should look into is finding a great theme. This defines how visitors see your website and how they interact with the content.

You can browse through free WordPress themes for photographers, but some of these are more suited for photography than others. If you want to pack a punch with your site then take a look at these photography-centric portfolio themes.


Azalea comes with a bunch of different homepages ranging from masonry grids to full-size background headers. Right away this gives you options on how you want your website to look.

But this theme also comes with features specially-made for photographers. You can design portfolio pages around past clients and even create albums from specific photos shoots.

Each photo gallery comes with a dynamic lightbox effect where photos load dynamically without refreshing the page. It offers a real smooth user experience which is perfect for any creative professional.

Plus the theme even comes with two premium plugins for free included with the price. You get Slider Revolution for image rotation and the Visual Composer for drag & drop editing.

By far one of the best photography themes you’ll find, and with the two included plugins this thing is a steal.


The Napoli theme is exceptionally minimalist relying on white backgrounds and black text for strong contrast. This is standard for photography themes so most visitors will expect something like this for your design.

Napoli also comes with a handful of homepage styles including a fullscreen slider, album thumbnails, and a blog-style homepage.

With over a dozen unique gallery styles you also have a lot of control over how photos display on the page. Photographers want unique features on their site but also want to create a usable experience.

With Napoli you get the best of both worlds and a clean responsive layout to boot.


Surprisingly the Vega theme dates back quite a few years and it’s still updated every few months. This theme is fantastic for an all-around portfolio site that needs a lot of features.

You can setup your own blog, different photo galleries, slideshow pages, and your own online shop using WooCommerce.

On the backend you can make your own private galleries to share with clients using passwords. This is perfect for showing final project work before releasing the full images.

And this theme comes with a custom content builder so you can restyle this layout with zero coding knowledge.


Some photographers like the vertical sidebar navigation placed alongside the main page. It’s one of the most common layouts for photography sites and Bow matches this style brilliantly.

It’s also fully responsive and uses the white/black color scheme for high contrast. The on-page photo galleries don’t use animations which is great if you prefer a speedy user experience.

And this is definitely one of the simpler portfolio themes since it doesn’t come with as many options compared to others. The Bow theme works for anyone who just wants to get a simple website online to showcase their photos.

View more photography WordPress themes

Portfolio Slideshow Plugins

Sometimes premium portfolio themes won’t make sense and you’ll opt towards a free theme instead. And that’s totally OK!

But the vast majority of free WordPress themes do not support galleries by default.

In this case you’ll need to get a nice portfolio/slideshow plugin to add photos onto your homepage. There are tons of plugins that do this but here are my top two recommendations.

Huge-IT Portfolio

I used the Huge-IT Portfolio plugin with my old portfolio site and it was so easy to use. Out of the box it comes with dozens of options from custom album grouping to photo details like alt/title tags.

You can even style how the gallery should appear on the page changing the rows/columns and image thumbnail sizes. The entire thing works on a drag & drop interface so anyone can learn to use this plugin.

It does have an optional pro version but the free plugin offers more than enough for any basic photography gallery.

Easy Photography Portfolio

One other plugin you might try is Easy Photography Portfolio. This gallery-style plugin is tailor made for any photography portfolio site and it comes with an awesome demo to prove it.

This live demo runs on the Twenty Seventeen theme so you could just install WordPress and use the default theme with this plugin. Works like a charm and wouldn’t cost you a dime.

Every slideshow gallery is fully responsive and each photo is touch-enabled so users can swipe around the gallery with ease. This is a nice free plugin and it fits perfectly on any new photography portfolio site.

Custom Contact Form

Every portfolio website needs a contact page. This is the only way clients can reach out and inquire about your services, and without clients you don’t make money!

You’ll want a simple and easy contact page that encourages people to send messages, but also lets you customize the design without any coding skills.

The plugin that fits this to a tee is Contact Form 7.

It’s a completely free plugin and it’s one of the most popular contact forms for WordPress.

It does support custom HTML/CSS code but you can also build your contact page with the visual editor. These forms work best on a single contact page supporting as many fields as needed.

But you may also want something like the Ninja Kick Form plugin which adds a floating contact box on the side of the screen for each page. This way people can send you messages from any page on your site at the click of a button.

This works more like a “request order” form so it’s a great plugin to try if you’re trying to increase client outreach.

But it can also detract from the experience of your gallery so this won’t work for every portfolio site.

Instagram Integration

If you do professional photography then you absolutely need an Instagram. This works like a mini-portfolio and brings your work to people all over the world.

Once you’ve been posting on Instagram for a while you might want to embed those photos onto your portfolio website. There are a couple plugins I recommend for this and they’re both easy to setup.

Instagram Feed works like a full gallery of your IG photos. It lets you filter based on hashtags or locations so you can even build custom feeds for different pages.

All images are pulled right from Instagram and the gallery is fully responsive. It’s also touch-enabled so mobile users can swipe through your photo gallery on smartphones and tablets.

This is by far the most complete in-page IG gallery plugin you’ll find. It supports 16 languages and can even pull from multiple accounts with different filters for each one.

But if you’re just looking for a simple IG embedded widget then Instagram Widget plugin is a little simpler.

This adds a small IG profile item onto your portfolio site anywhere that supports widgets.

With this profile badge you can show all photos or just certain hashtags from your profile. It works just like a small Instagram webapp embedded right into your page so it gives visitors full access to your IG account.

Both are great options and it just depends how much you want to promote your IG photos locally on your website.

Crafting Your Site

If you start with the right WP theme you should have more than enough features for a great photography website.

Just remember to keep the user experience first and to place yourself into the minds of your clients. What would they be looking for on your portfolio? If you can find a theme that offers a great experience you’ll be sure to land more projects and draw more attention to your photography work.

Related articles:


This article was inspired by a question in our forums from a photographer in Melbourne, Australia. 

The post Best WordPress Themes & Plugins For Photographers Managing Their Own Websites appeared first on Envato.

Exploring the Hero Image Trend in Web Design https://envato.com/blog/exploring-hero-image-trend-web-design/ https://envato.com/blog/exploring-hero-image-trend-web-design/#respond Mon, 03 Jul 2017 07:05:45 +0000 http://envato.com/?p=37214 We delve into the popular topic of hero images and how they apply to the field of web design.

The post Exploring the Hero Image Trend in Web Design appeared first on Envato.

Image: Little Girl Super Hero Concept by Rawpixel on Envato Elements

Although hero images may not be donning capes and scaling skyscrapers, they are doing the next best thing: aesthetically pleasing folks on the Internet. The application of hero images can spruce up the design of a web page while also building depth into page content.

Large Headers

The trend of hero images may be summarized as large attractive headers. Most of these images are photographs which directly relate to the content. But designers have gotten crafty with vector backgrounds, illustrated artwork, and even animated video.

When push comes to shove, it is hard to find anything that can be as relatable and descriptive as a photograph. It drives visitors further into the site by giving them a peek beneath the surface. The portfolio of Andrew Elsass is a prime example of this technique.

andrew elsass portfolio copywriter

His homepage uses a large fullscreen background image with a photo of himself. The colors blend nicely into the layout, and it gives an immediate personal touch. Browsing through the rest of his site you’ll notice each page also has a small header image background. For example his about me page uses another picture of himself.

andrew elsass about me page hero image

Large headers are the bread and butter of hero images (I’m not sure if the hero is the bread, or the image is butter).

Basically, the hero image style is a fundamental concept that can be applied to any large “oversized” header design.

cleverbird creative agency website homepage

For a slightly different approach take a look at Cleverbird Creative. Their homepage uses a fullscreen background image that scales to take up the entirety of your monitor. Then as you scroll down each individual section has its own background or photo. This is a different approach to the same concept using large background images to incite curiosity in the viewer.

Related article: Creative and Unique Ways to Use Stock Photos

Single-Page Design

Large fullscreen backgrounds and hero images can be used in single page designs with ease. Most of the time these landing pages or parallax websites only have a small amount of information to provide. Therefore, fancy aesthetics can add real value to the page and offer space between the content.

gladz homepage hero image screenshot

The example found on Gladz is cool because it utilizes a number of different hero images. The very top of the page uses a fullscreen background that contains a fixed navigation bar. Then as you scroll further you’ll notice a smaller image that spans the full width of your browser, yet doesn’t take up the full screen.

It’s almost like a non-contextual heading that designates a new section on the page. This is definitely a great website design and fits beautifully with the single page style.

Fullscreen Backgrounds

Depending on the type of website, a fullscreen image header may just take the cake. A delicious strawberry cheesecake represents one heck of a brilliant idea. I would consider fullscreen backgrounds an offshoot from the hero image concept. It’s similar and definitely related, but not the same.

christian woo furniture website

Christian Woo has a website showcasing his furniture, interior design, and architectural prowess. Each individual page uses a background photo to expand upon his body of work. The pages themselves are very small and do not require a whole lot of content. Therefore instead of leaving the pages devoid of color, his design uses a photograph to liven up the page.

august marketing agency hero image

An alternative yet beautiful technique can be found on the August digital marketing agency website. Their header isn’t completely fullscreen but it takes up a very large portion of the monitor. Interestingly enough it’s actually not a photo, but a custom illustration.

This is one of the best ideas for creative artists and agencies who want to show off their skills. People who land on your page may not know a whole lot about you or what you do. So it helps to immediately demonstrate your value by incorporating samples of what you can do directly into the website design.

sweet basil restaurant website background

To add something a little bit different into the mix check out Sweet Basil. Their homepage uses a series of rotating photos which immediately demonstrate the value of their restaurant. As you check out different pages on the site you’ll notice some of them also use small hero images for accentuation.

sweet basil reservations homepage hero image

Featured Post Content

The number of online blogs and magazines has increased tremendously over the past few years. WordPress is currently one of the most powerful open source blogging platforms which many websites use for content management. Ever since WordPress came out with featured images there has been an influx of exceptional magazine themes.

One point to note about these themes is their use of different featured images on the homepage. Yes each article page uses its own image, but the homepage is where most visitors get introduced to the site. By incorporating a large hero image into the header it draws attention to that article and possibly other articles.

diy mag magaizne homepage website

DIYMag has a large image tagged onto the top article. Every other article has a similar image but the thumbnails are sized a lot smaller. Granted once you click on the article it’s also used as a large heading display. Definitely a perfect method to draw visitors further into the blog.

good magazine website featured images

You’ll find another example on GOOD Magazine which uses many similar featured image sections. The most important posts appear towards the top of the page with larger images and headline text. The purpose is to draw attention and captivate new visitors further into the site.

Rotating Galleries

Some designers prefer to get dynamic with their heroes – and yes that is a Batman & Robin reference. You see, much like Batman’s utility belt, rotating backgrounds offer a panoply of resources and options. You can include photos of a person, a building, office space, or even creative work.

matter of form website hero image design

A cool example can be found on Matter of Form which is a branding agency. Their fullscreen image display allows visitors to switch between different pieces of content on a whim. It’s captivating, insightful, and provides a deeper look into the company’s purpose.

jansport hero image website design

For a slightly different approach take a look at the homepage of JanSport. This layout doesn’t use fullscreen anything but it still incorporates a slideshow of hero images. The header is meant to advertise their products with a seemingly popular method – photography!

The slider automatically rotates but also gives the visitor control through arrows and small dot-navigation links. This is definitely a good choice for e-commerce shops that wish to bring attention toward their products or services.

Some may not consider this example a full hero image because it doesn’t take up an enormous part of the header. But I would define a hero image as any type of banner or large graphical component in the heading section. JanSport’s hero image may be subtle, but it’s also boisterous enough to catch my attention and still looks great with the overall layout design.

melyssa robert homepage portfolio interior

One final example can be found on the portfolio of Melyssa Robert. These rotating images link out to external pages which demonstrates a more pragmatic purpose compared to static photos. But the design concept is still very much the same by placing a focus on content and user experience above all else.

By following these trends you should be able to recreate your own hero images that pop right off the page. Web design is a long journey and there’s always more to learn.

By investigating the most popular trends you can analyze why they’re popular and determine their value in your own work. So get out there, try your hand at designing some hero images, and make Bruce Wayne proud to call himself the hero that Gotham deserves.

This article was originally published in 2016. 


The post Exploring the Hero Image Trend in Web Design appeared first on Envato.

https://envato.com/blog/exploring-hero-image-trend-web-design/feed/ 0
What is WordPress Managed Hosting? https://envato.com/blog/wordpress-managed-hosting/ Sat, 24 Jun 2017 10:40:29 +0000 https://envato.com/?p=54264 A managed hosting platform installs everything, so you don’t need to worry about the server setup.

The post What is WordPress Managed Hosting? appeared first on Envato.


The trickiest part of setting up a website is the technical aspect. This can include coding a layout, but if you go with a ThemeForest theme you’ll be all set there.

But the other tricky part is hosting and installing WordPress to get your site online. Thankfully with managed hosting this process can be super easy.

Managed hosting is where you pay a web hosting company to fully maintain your server. This means they’ll setup, configure, and secure your server 24/7. They provide all security updates and data backups to make sure everything’s running smoothly.

But there are many different types of managed hosting so it’s good to learn more about the industry. In this guide I’ll explain what managed WordPress hosting is and why it might be a good choice for your next web project.

Managed WordPress Hosting: The Basics

The term “web server” describes many moving parts. Stated simply, this is just a computer meant to be online 24/7 to deliver websites to visitors. But it’s obviously more complicated than that.

A managed hosting platform installs everything so you don’t need to worry about the server setup.

If it’s managed WordPress hosting then they’ll also install WordPress and optimize the server to load faster. This usually comes with other benefits such as:

  • Malware sweeps & virus removal
  • Protections against DDOS/injection attacks
  • Automatic server updates
  • Automatic website backups
  • Problem solving whenever an issue arises

If you go with semi-managed hosting(or “unmanaged”) then you’ll need to deal with some of these things yourself. Granted most hosting companies are very secure and will protect you from hacks/downtime.

But managed hosting basically guarantees that you don’t need to do anything. It’s the surefire way to manage a high-volume WordPress site while moving all the technical work over to the experts.

If you want access to your server but don’t want full responsibility then a shared hosting account might be better. The problem is that these shared accounts are very poor quality and do not hold up for larger websites.

If you have a WordPress site doing more than 100k pageviews/mo then you might be better with a managed server.

But to properly compare managed hosting against typical “unmanaged” hosting you’ll first need to understand a little about web hosting in general.

The Details of Hosting a Website

All websites basically run with the same software, it’s just the details that change. For example a WordPress site needs a few things:

  • Web server software
  • PHP software
  • Database software

Both managed & shared hosts automatically set up these environments. So if you buy an unmanaged hosting account you still get this software pre-configured and ready to go.

The difference with unmanaged is that you need to install WordPress, install your own theme, and manage your own data backups. This stuff isn’t really too difficult.

But if you don’t have the time or patience to learn then it can be a huge annoyance.

One other aspect of web hosting is email. Many companies want to setup their own addresses like myname@domain.com, and many times you will get this feature included with managed hosting(not always).

A mail server is a whole separate can of worms which is why the managed route is typically better.

WordPress is the simplest way to launch a site and it has amazing security built into the framework. So if you go with a managed host you’re really saving yourself time while foregoing the option to customize & tweak the server.

There are genuine pros & cons to both sides and the choice really depends on your situation.

So let’s go beyond the basics and get into the differences of managed and unmanaged hosts. What really is the difference?

Managed vs. Unmanaged WordPress Hosting

The comparison of managed vs unmanaged can get tricky because the phrase “unmanaged” has a few different meanings.

But let’s look into managed hosting first. It’s basically a catch-all solution where you get everything handled for you. Setup, installation, configuration, and constant maintenance are included in the bill.

You can be pretty much hands-free and let your own IT team handle the server stuff.

This is partially true with unmanaged hosting if you get a shared server.

There are (generally) two types of unmanaged hosting:

  • Unmanaged shared servers
  • Unmanaged VPS/virtual servers

Shared servers are horribly slow. They’re really only useful for small websites, and even then performance won’t always be great.

The other type of unmanaged hosting is a VPS/dedicated server which gives you full control over a virtual server. This means the entire setup, config, and maintenance is 100% your responsibility.

If you’re reading this guide then you probably don’t want that.

So what’s the real deal between managed & unmanaged? It comes down to basic maintenance & upkeep. Shared hosts are unmanaged but they still come with responsibilities.

If you try a shared host you’ll still need to:

  • Update WordPress on your own
  • Check for security flaws or hacking attempts on your site
  • Watch server loads and try to avoid overloading the server
  • Backup your website and keep those backups safe

A good portion of shared hosts do have support teams that can help you. But they won’t always do all the work for you.

This is perhaps the biggest difference between managed vs unmanaged.

It may cost more for managed WordPress hosting but it’s generally worthwhile. You really won’t have to do much but pay the bill each month, and the tech support quality is like comparing economy class tickets to flying first class.

Why Go Managed?

If you ever look at managed host pricing you may be surprised at the massive fluctuations.

Some plans can be as low as $20/month while others can be 10x that price (or more!)

So what’s the real benefit of running with managed hosting? Obviously it’s great for webmasters who just don’t have the time or patience to learn server administration. Managed hosting platforms specialize in what they do so your site gets the VIP treatment.

But the biggest asset of managed hosting is ease of mind. You’re paying for professionals who know how to optimize a server, get it running fast & keep it that way.

When you go managed you’re guaranteed a few things:

  • No technical setup
  • Faster & easier problem solving
  • Consistent website backups
  • Updated software & frequent security checks
  • Very fast server speeds with high uptime

If you’re willing to handle this stuff on your own then go for it. There’s nothing wrong with learning basic server admin skills and it’s surely a valuable asset!

But there’s also nothing wrong with going managed. It’ll save you time, headaches, and ultimately give you some peace of mind every day knowing your site is in good hands.

Is Managed For You?

Everyone loves WordPress so it’s no question that WP is a great choice. But what about managed hosting? Is it the right call?

This comes down to your budget, your needs, and your technical skillset. If you’re willing to pay a little more to offload the technical stuff then I say absolutely go managed. This way you can focus on running your site and it just makes sense to let experts handle the stuff they do best.

The post What is WordPress Managed Hosting? appeared first on Envato.

4 Featured Image Styles Guaranteed To Grab Attention https://envato.com/blog/4-featured-image-styles-guaranteed-grab-attention/ Mon, 19 Jun 2017 10:45:22 +0000 https://envato.com/?p=55133 From the straightforward to the abstract.

The post 4 Featured Image Styles Guaranteed To Grab Attention appeared first on Envato.

Image: Smitten Kitchen

Every great blog uses featured images for their posts. These are a staple of the WordPress ecosystem and they’ve grown into a must-have for any blog or content site.

And quality photography plays a big role in featured images. You want something that grabs attention and helps sell the content without looking amateurish or cheesy.

In this post I’ll delve into the world of featured images looking into specific trends & styles that work best. Whether you’re launching a new blog or need image ideas for an upcoming post, these styles will set you on the right track to grabbing more attention from readers.

1. The Close-Up Personal Shots

One thing I notice about close-up photography is that it grabs attention fast, especially while quickly scrolling through a site. Featured photos often appear on the homepage as thumbnails making them hard to see.

But when you have a close shot it’s still visible at these smaller sizes, which in turn encourages more clicks.

Closer photography also adds a personal element to the shot. There are many different techniques for micro/close-up photography with different lenses and angles.

But try to keep a focus on the subject matter to let visitors know what the article is about.

Devices & technology always work well for close-ups. In this post from The Verge you’ll see a smartphone with the Moto logo in clear view. Only the bottom part of the phone is visible but it’s still easily recognizable.

Because it’s such a close shot it’s easier to make a personal connection. You aren’t seeing dozens of touch devices all stacked up. The goal is to connect with this device, make the brand logo clear, and ideally get you curious to read more.

A photo like this can also bring personal associations making the reader feel like that phone is their phone.

But you can also find close-up shots with subjects that aren’t directly related to the content as well. If a photo sells content and grabs attention, regardless of subject matter, then it works.

The photo in this Mashable article shows a party or outdoor event. But the article is about companies with great perks & benefits.

In this case the reader often fills in the blanks. This party might be a business lunch or a day off from work. Or a group vacation paid for by the company.

Sometimes you don’t need to worry as much about context. If you look at a photo and it seems connected to your content then often times you can assume other people feel the same.

And one quick trick to develop a connection is with close-up photography.

2. The Human-Centered Approach

Photos with people typically garner more clicks and help to humanize your content. Let your featured image tell a story of what the post might(or should) be about with people as the driving force.

You can use pictures of crowds or even a well-known person. Or you can add close-up shots showing certain emotions or behaviors. The goal is to connect readers with your story by adding some humanity into the featured pic.

For one example check out this NY Times piece.

It’s a story about Apple’s company profits and consumer behaviors. What better way to showcase this story than a photo of a typical Apple store?

But you’ll also see customers moving in and out of the store. This article is not just about Apple as a company. It’s about the customers that make up Apple’s profits and how human behaviors affect those earnings.

You can’t gather specifics just from the photo but it visually implies the subject matter and how to interpret it.

Another great example is this feature image from a human interest piece on People. You can tell just from the photo that it’s a post about two women giving birth.

Between the headline and the photo you can get an idea of the story. But this pic should pique your interest to learn more.

Humanity is all about storytelling and we see this in books, movies, and plenty of photos. Find a way to connect humans to your story for a more compelling featured photo.

And don’t take “story” to mean a movie plotline. In online content the story explains more about what’s going on in the article. What’s the theme? What’s it all about? What does the piece center around & how can that be shown using a picture?

You really want to capture the content in a photo to engage people’s curiosity.

3. Use Metaphors & Abstract Ideas

Some of the best featured images don’t directly relate to the content. Instead they help sell an idea which is then explained in the article.

These types of images are easy to spot but hard to replicate. When writing a new piece you’ll have to think of different angles to approach and which types of ideas might work best.

One fantastic example is this Bloomberg post with a related-yet-abstract featured image. Before even reading the article you can tell it’s a great shot.

But this also relates to the headline discussing productivity and the limitations we have as humans.

People sitting in a lecture hall don’t directly connect to productivity. But this photo has a nugget of truth in it, something we can all relate to as imperfect humans and students of life. It’s also a very engaging photo because of the unique angle so it grabs attention quickly.

With metaphors and abstract concepts framing also plays a factor. How the photo is shot and cropped can tell a slightly different story(ie. looking down vs. up, or slightly tilted vs. straight forward).

To fine tune your framing skills read up on gestalt in design and try looking at other blogs/news websites. You can learn a lot just by skimming homepages and connecting abstract ideas to the content, then building your own ideas on top of those.

Here’s a brilliant example from Berkeley Wellness.

The photo is a bit more to-the-point focusing on traditional dancing attire. But the framing only focuses on the feet which pertain directly to the article subject(dancing).

It’s a nice mix between a close-up shot and a well framed metaphor related to the article. It’s not a photo of people dancing but you can still tell this photo relates to dance. Article subjects can be implied through featured images with some abstract thinking and proper framing work.

4. Straightforward Photos Work Too!

Are you writing a story on cake decorating? Then a well-decorated cake might do well as a featured image.

There’s nothing wrong with using direct photos. These can grab just as much attention as metaphors while still representing the story visually.

When designing a post I’ll usually select 2-4 different featured images and test them all in Photoshop. This way I can gauge which one is the most engaging to my eyes. Sometimes a literal representation of the subject is really the best choice.

Take for example this post using the NYC charging bull statue. It’s easy to recognize and the recent addition of the fearless girl statue grabs even more attention.

Some writers use this bull statue as an abstract representation of finance/wall street.

But this article is literally about the charging bull statue and the fearless girl. What other featured image would even make sense?

Typically these literal photos work best with specific subjects.

  • People
  • Animals
  • Products
  • Cultural items(art/cities/monuments)
  • Media(music/movies/games)

These also work well in how-to guides teaching the reader how to do something. Recipe blogs are perfect for this.

Readers browse those blogs looking for recipes to follow. What better way to sell them on your recipes than with photography?

In fact food photography is crucial to the success of any cooking blog. It’s just one more example where literal photos tend to fit the bill.

The best way to see if literal photos work is to test a bunch of photo styles and see which fit best with your content.

Pick your focus

Featured images are here to stay and they’re quickly becoming the norm for bloggers. Traditional hero image styles can even be paired with featured images to create a large background for your blog posts.

But the quality of the image is always the most important.

Find photos that engage the reader and promote your content the way you want it. This is often a personal process so test a lot and see which styles you like best. Over time you’ll improve at picking the best images for your audience and framing them to drive more clicks from readers.

Check out our new library of stock photos on Envato Elements.

The post 4 Featured Image Styles Guaranteed To Grab Attention appeared first on Envato.

Everything You Need to Build a Real Estate Website on WordPress https://envato.com/blog/everything-you-need-to-build-a-real-estate-website-on-wordpress/ Tue, 13 Jun 2017 10:34:00 +0000 https://envato.com/?p=55118 The real estate industry is massive and it requires a great website. Whether the site is for a realtor or a large real estate agency, both can benefit from a streamlined site on WordPress. But how do you even start building a real estate website? Which features do you need to have? In this post […]

The post Everything You Need to Build a Real Estate Website on WordPress appeared first on Envato.


The real estate industry is massive and it requires a great website. Whether the site is for a realtor or a large real estate agency, both can benefit from a streamlined site on WordPress.

But how do you even start building a real estate website? Which features do you need to have?

In this post I’ll cover the basics that every great real estate website must have, all focused by building on WordPress. Different websites all have different interfaces but the end goal is always the same: to sell & rent property. And a great design is a great first step in the right direction.

1. Start with a killer WordPress theme

Few real estate agents want to create their own design from scratch. It’s much easier and more efficient to work with custom themes.

You can find dozens online, or download these free WordPress real estate themesHere’s a few themes that I recommend for launching (or updating) a real estate website:


Clean, strong, and professional best describes the Houzez theme. It supports a number of different homepage styles with custom search features and property listings to boot.

For a small local agency you might try this homepage using the Google Maps feature at the top. This draws attention right away and encourages the user to engage. But other homepages focus on the properties, the photos, and even details about the real estate agent.

From luxury homes to nearby apartments, this theme offers something for everyone. And you get all these features(search, property listings) built right into the site.


Another feature-packed theme you might like is Realtyspace. This comes with a drag-and-drop page builder so you can customize the exact look of your homepage.

The customized search feature is probably the most impressive resource. It lets visitors sort properties by features, area, price, bathrooms and a few other options. This gives complete control to the user which is usually a good thing.

Property listing pages also include tons of detail with a large photo slideshow, bullet point feature lists, and space to attach PDFs for descriptions & floor plans. These properties can also have agent profiles attached so visitors know exactly who to contact.

One thing I don’t like is the custom scrolling but this can be altered with a bit of JavaScript.

Reales WP

Reales WP works best for agencies that run high volume properties for sale in larger areas. This theme leaves a lot of space for property photos when searching.

On the property page you’ll find construction details, plenty of photos, and a live interactive map with a pin on the exact location.

Reales is feature-rich, fully responsive, and the perfect choice for a larger realty company looking to stylize their online presence.

Home Villas

One more theme I really like is Home Villas which supports traditional WordPress and WooCommerce.

This comes packed with features like team management, online tour scheduling, a mortgage calculator tool and a “walkability score” to find valuable places to shop/visit near the property.

But Home Villas can be a very simple theme too. It can be used for basic property listings with a search feature without all the extra widgets.

Definitely a versatile theme and this works great for individual agents or larger companies.

These are just my personal recommendations for real estate themes but you can find a bunch more on ThemeForest.

As long as your theme provides an excellent user experience you can’t go wrong no matter what you choose.

2. Showcase your property listings

Every real estate website needs property listings. This is true for individual real estate agents and larger firms.

Some realty WP themes come with listing features built right in. For other themes you’ll need a property listing plugin, and thankfully there are plenty to choose from.

Real Estate Pro

Real Estate Pro is the best real estate toolkit in plugin form. It supports online payments from Stripe/PayPal which can be used for local renting/lodging.

But more specifically it lets you track who interacts with certain listings and which properties garner the most attention over time. Users can bookmark listings for later and sort by dozens of categories.

This may be too much for a simple real estate agent website, but it will certainly work well on a larger agency site.


For a cleaner Ajax-powered interface take a look at Uptown. This comes with a full backend admin panel with multiple settings views for listing types and user functionality.

Each listing appears in a grid with search options in the sidebar. Visitors can limit by specific options and view each property inline on the same page using an Ajax modal window.

Check out the demo page to learn more and see how this plugin works on a real website.


With the Realcon plugin it’s easy to add property listings onto any page no matter what theme you’re using. This plugin has a ton of features with 3 listing styles(list, grid, and maps) along with a Google Maps API key for adding maps onto your site.

You can edit listings right in WordPress so visitors see when a property goes up for sale, and when properties eventually sell. You can also add information for different agents and include nearby amenities to each property.

This is one of the richest property listing plugins out there. It supports any theme with a clean responsive design, an easy-to-use admin panel, and tons of optional features to take your real estate listings to the next level.

3. Add an interactive map

Since real estate is all about location it’s useful to include embedded maps onto your site. Even better if you can add interactive maps so users can search around nearby locations.

You can find tons of WP plugins for adding maps onto your site. These are usually free and pretty simple. But if you’re looking for something with more features check out these two plugins.

Progress Map

The Progress Map plugin can fill the void if your theme doesn’t support default map placements.

With this plugin you can select where to drop pins and embed these into any page. You can highlight the location of each property in your site, along with nearby points of interest like grocery stores or public services(library, fire station etc).

This can also help prospective buyers learn more about the neighborhood and even plan their route to visit if they setup an open house. But only use this plugin if you need map functionality because it can be overwhelming if you have a dozen other plugins running too.

Map Search

For a bit more functionality try the Map Search plugin built with Ajax auto-updating technology.

This lets the user search by keywords or location to find nearby properties for sale. Each search loads dynamically so the page never needs to refresh. And you can update property listings in WordPress for full control.

You may like this if you want a visual search component on your website. It’s certainly not required but it can definitely improve the user experience.

4. Make the sale: contact/booking forms

Every single website needs a contact page and realty sites are no different. You might have prospective buyers looking for more information about a property or someone who wants to schedule a tour.

The best WordPress contact form plugin is Contact Form 7. It’s free, easy to setup, and it works like a charm. Plus it’ll blend into any theme you choose.

Any typical real estate website should do well using the CF7 plugin. But if you need something a little more powerful consider the VR Booking plugin made specifically for scheduling online tours/rentals.

This does cost a bit and it comes with a ton of features. I recommend it for larger real estate agencies that do a lot of volume and have dozens of scheduled tours per month.

Using this plugin you can even support online bookings during the weekends when nobody’s at the office. The user picks available dates from a calendar and chooses the best time for a tour. Then you get an email update whenever someone schedules a tour. Simple!

But for a typical realty website start small and add features over time. If you can get by with a simple contact form then CF7 is your go-to plugin.

5. Add beautiful photos that sell

Photography is huge when selling real estate. Photos are often the defining factor of what draws people into the site. This can include property listings on the site, but also photo headers and property photos used throughout your site as promotional tools.

When grabbing interior photos you want every room to look bright, spacious, and natural.

Study the photos on Houzz to see what they look like. You’ll find every type of room with thousands of photos to sift through.

Snapping your own photos can be tough but necessary if you can’t hire a photographer. Thankfully you can nail down the basics of photography with just a few months of practice.

Here are some intro guides to get you started:

Launching your site can be easy and if you build it on WordPress you’ll have the peace of mind knowing it’s secure.

I hope this post offers enough resources to help you get moving on your real estate site.

Browse bestselling & trending real estate WordPress themes


Need to promote your real estate business? We’ve got you covered – check out our best video templates and real estate flyer templates.

The post Everything You Need to Build a Real Estate Website on WordPress appeared first on Envato.

Best Date Picker & Booking Form Plugins For WordPress https://envato.com/blog/best-date-picker-booking-form-plugins-wordpress/ Mon, 05 Jun 2017 10:09:50 +0000 https://envato.com/?p=55106 The best WordPress plugins for scheduling and booking.

The post Best Date Picker & Booking Form Plugins For WordPress appeared first on Envato.


Date pickers are a staple of modern web forms. They’re much easier to use than text fields when selecting dates for delivery, scheduling a meeting, or booking an overnight stay. And following this question on our forums, you can even add booking fields onto existing contact form plugins like CF7.

Setting up your own date picker is much easier than it sounds. There’s a ton of WordPress plugins to pick from and in this post I’ll showcase the best options.

Whether you need a custom date field on your contact page or a user scheduling form, or anything in between, there’s a plugin here with your name on it.

WP Datepicker

The free WP Datepicker plugin is probably the best place to start. It’s fully compatible with jQuery and uses styles with modern CSS3 properties.

Right out of the box you can get this plugin working with Genesis, Thesis, and WooComerce frameworks. It also comes with a handful of different theme styles you can choose to match your layout.

This date picker field embeds right into a form. When selected the calendar input appears and the user can select a day/month/year combo.

Fields can be added dynamically or with code in the WordPress editor. But take a look at the plugin page to learn more and take a peek at this intro video made by the plugin’s creator Fahad Mahmood.

Contact Form 7 Datepicker

The wildly popular Contact Form 7 plugin is the typical choice for most WordPress users. And now with this datepicker plugin you can add calendar date interfaces right into any CF7 form.

This calendar uses the datepicker from jQuery UI which is widely supported on desktop and mobile. This CF7 datepicker is a foolproof way to enhance your contact form for scheduling, booking dates, or any other set time.

On the backend you can change the plugin’s default settings like ID/class, default year/month, total year range, and even the input animation(if any).

Gravity Forms Date

Another very popular form builder is Gravity Forms. This premium plugin is well known in the WordPress community and often hyped as the best form plugin around.

Well now there’s a Gravity Forms datepicker that you can add into any form on your site. It’s incredibly simple to setup and blends naturally into the Gravity Forms interface.

You can style the type of calendar to resemble a month/day, or a full year calendar. The user can also choose one specific day or a range of days depending on what you need.

Note this plugin uses the Datedropper jQuery design so it’s a partial customization made to run on Gravity Forms. If you’re a coder you might try to recreate this yourself, but if you’re short on time it’s easier to leave it to the pros.

Booking Calendar

One of the oldest and most stable plugins you can run is the Booking Calendar plugin for WordPress. It’s been around since 2009 and has a series of demos on the main site.

Users can select specific days and submit those in a form to your email(or database if using another plugin). You get full control over the field styles and you can customize how the date picker operates.

Once the user submits the booking form you’ll get an email where you can either accept or decline the booking. Super simple and very easy to pick up.

You can run this on any WP theme and it’s frequently updated to be fully compatible with the newest version of WordPress. This plugin is like a date picker and a booking form all rolled into one.

WP Booking System

One other alternative you might try is the WP Booking System plugin. This is a freemium resource where the free version is hosted in the WordPress plugin repo, but there is a paid version with extra features.

The free version has everything needed for a simple date field including a full booking management panel to accept/decline bookings as they come in.

This plugin supports multiple languages and it’s really simple to add into your site. It comes with widgets for your sidebar/footer and shortcodes for pages so you can get this running anywhere you need.


If you’d prefer a feature-rich booking plugin then check out Bookly. It’s also built for modern WordPress websites and comes with a responsive dropdown calendar date picker.

It’s built for easy syncing with Google calendar and supports WooCommerce integrations too.

You have full control over the signup field so you can choose which dates aren’t available and which times fit best. This way users can book based on your schedule offering the greatest flexibility for webmasters.

WooCommerce Delivery Date

If you sell physical products via WooCommerce then a straightforward delivery date picker might be a valuable asset.

This is naturally most useful for larger items where people want to be home to receive them. You can also use this as a “when to pick up” date form where customers tell you when they’ll come to pick up their purchase.

So maybe you repair watches or even do custom engravings for watches. Customers can order directly via your website and set the date when they’ll pick it up. This also supports a time range which lets you get very granular with your WooCommerce operation.

Easy Appointments

Online scheduling is perhaps the most-needed situation for datepickers. The WordPress Easy Appointments plugin is made just for this occasion.

You can run this on any site where appointments are necessary. Law firms, hairdressers, private coaching, massages, whatever. You just install this plugin, setup your appointment form and let it run.

You can even see a live demo of their basic form style, fully mobile responsive using the Bootstrap framework.

To get a full feature list and check out some screenshots take a look at the main plugin page.

Restaurant Reservations

Popular restaurants like to keep reservations during busy times of the week. And that’s why this Restaurant Reservations plugin is by far the best choice for any restaurant owner.

The plugin plays nice with any theme and fits into any page on your site. We’ve covered restaurant trends in the past and many are simple enough to replicate. And with plugins like Restaurant Reservations it’s even easier to add the custom features you need.

If you’re building a small bakery or BBQ joint this plugin won’t help much. But for busier restaurants with lots of foot traffic online reservations just make a sense.


For top-of-the-line booking and scheduling you should take a look at Booked. This massive plugin works on regular WordPress or WooCommerce, or even both!

It lets you create custom date slots for the specific days/times that work best for your schedule. When someone sets a booking time you can customize the email styles and sync those booking requests to your calendar(iCal, Google, etc).

We actually have a complete setup guide for this plugin that you can follow start-to-finish.

This is probably the most feature-packed plugin in the entire list, but once you get it working it’ll prove reliable for years to come.

Moving Forward

With so many plugins to pick from it can feel overwhelming. But if you know why you need a date picker it’ll be easier finding the best choice for your project.

These plugins are all incredible and they each offer something unique. Take another look over the list and see if any grab your attention.

The post Best Date Picker & Booking Form Plugins For WordPress appeared first on Envato.

iOS Game Design Guidelines for Beginners https://envato.com/blog/ios-game-design/ https://envato.com/blog/ios-game-design/#respond Tue, 09 May 2017 22:30:39 +0000 http://envato.com/?p=43336 We cover some general ideas and resources for game design on iOS platforms (iPhone, iPad and Apple Watch).

The post iOS Game Design Guidelines for Beginners appeared first on Envato.

Mobile games are a growing marketplace with more kids foregoing the Game Boy in lieu of a modern tablet. Even some adults are drawn into the gaming craze because it’s better than counting the seconds in a solemnly empty waiting room.

Apple’s iOS platform was on the original iPhone which then spawned a fantastic tablet device. The operating system has been around for almost a decade and the marketplace is already renowned across the world.

I’d like to cover some general ideas for game design on iOS platforms. Naturally you do need a great idea, but the implementation of this idea is paramount to success. And while there is a lot of competition there’s always room for a new blockbuster game to go viral, and for the creator to reap pecuniary rewards.

Heavily Customized Interfaces

The iOS platform in general offers a lot of customizability. Typical app designers stick with the Human Interface Guidelines to ensure that the largest audience will understand the app UI.

But in the world of mobile gaming it’s a little different. You can (and should) try to push boundaries so that your interface best suits the game. iOS is heavily programmable to recognize interactions like directional swipes, double-taps, and tap+hold.

space game ios app

Take for example Space Ultimate for iOS 7/8. The game interface takes up the whole screen and feels quite natural. You guide a spaceship through space, shooting down obstacles and avoiding collisions.

But the graphics are also rather interesting. You can tell these were custom-built for the game in a very particular style. Both background & foreground objects match together and create a rhythm within the interface.

Sometimes a re-hashed idea can work out great if you have the right interface. Think about all the different racing games which draw an audience only because of the characters and cars being raced (Mario Kart comes to mind).

But it always helps to include features that offer more replay value.

High-Capacity Processing

Modern smartphones run on powerful technology that has advanced quite a bit from from original models. ARM processors run on almost every smartphone and even date back to Nintendo’s GBA.

It’s possible for game developers to create exceptional ideas without many limitations. Of course you shouldn’t expect graphics at the same quality as a top-shelf Nvidia card – but for mobile games these devices are impressive.

One example is Archer, an iOS app restyled with a Space Invaders feel to it. The screenshots look great but the video preview is even more impressive.

archer sniper ui game

Animations are seamless and not very repetitive. Shots move in a controlled manner while enemies tend to zig-zag based on different algorithms. It doesn’t offer much advanced gameplay but the graphics and animations are more than enough to demonstrate proficiency in processing power.

If you buy the game assets to customize you can also re-skin the design with your own graphics & sprites. Plus you can replace sound files and even customize the animations if you have enough patience to do so.

Intuitive Goals

Some of the most addicting games are those you can pick up right away. Players want to get right into the action rather than be forced through a 2 hour tutorial.

Most iOS games are rather simple but it’s not just about simplicity. Players should be able to instinctively understand the objectives and how to play.

Don’t think this means you have to stick with obtusely basic games. More detail is great as long as usability is still on your mind. Help screens are useful to explain controls as long as they’re short & sweet.

cave run game side scrolling ios

An interesting way to think about mobile gaming is the implied use of items. People may look at Cave Run and assume that the objective is to run through the cave picking up coins. Pretty accurate.

But how do you jump? Can you walk/run or do you always move at the same speed?

These questions can be answered through trial-and-error but you should attempt to clarify as much as possible. When facets of gameplay can’t be implied then create optional help screens rather than forced tutorials.

Simple, Fun, and Practical

Most people would agree that games on any system should be fun and practical. But something you have to keep in mind is that iOS games are limited. They can’t perform at the same level as the Wii, PS4, or PC games.

When designing for iOS take simplicity into consideration. Overly-complicated games may be fun on professional gaming platforms. But mobile users generally want something mindless and silly to play with.

game center ios login

Connectivity and shared results are also a big part of mobile iOS games. Since phones are naturally connected to other people, many game designers connect into Game Center for sharing results with others.

Try to bring fun aspects to the game beyond just gameplay. Angry Birds is now a worldwide name because it’s fun and took advantage of physics & luck within the game. This makes it fun to play and fun to watch.

candydrop pixel game ios

CandyDrop is very similar with a simple yet challenging objective. The graphics are more NES-era pixels but the game runs and feels terrific.

If something is fun and simple it’ll draw players back time and time again. From continual usage you can earn money through freemium ads or even in-app purchases.


A good way to approach iOS game design is for fun rather than money. Plenty of games earn a reasonable amount but very few of them reach prosperity at the heights of Mount Everest.

Instead focus on how you can build a great game that entertains your audience. With an intuitive interface and practical controls you’ll learn through repetition how to design amazing touchscreen games for any device.

Get started with these bestselling game templates: 

  1. Cave Run Game – Cocos2D
  2. FIVES | iOS Multi Language Word Game Template (Swift)
  3. Fun Memory Game for iPhone – AdMob Ads
  4. iPhone Game : Dart Wheel – Cocos2D
  5. Corona SDK Endless Runner Template with AdMob
  6. JetpackChallenge-iOS Game-SpriteKit/Swift2.1/iOS9+

Check out all the bestsellers

This article was originally published in 2016 and has been updated for 2017. 

The post iOS Game Design Guidelines for Beginners appeared first on Envato.

https://envato.com/blog/ios-game-design/feed/ 0
Exploring the Current WordPress Magazine Theme Design Trends https://envato.com/blog/wordpress-magazine-theme-design-trends/ https://envato.com/blog/wordpress-magazine-theme-design-trends/#respond Tue, 09 May 2017 14:02:08 +0000 http://envato.com/?p=35119 We take a look at some of the unique design trends for WordPress magazine themes that have been cropping up recently.

The post Exploring the Current WordPress Magazine Theme Design Trends appeared first on Envato.

There’s no denying the popularity of WordPress as an open source CMS. It has a terrific advantage when it comes to theming and plugin development because there are so many helpful resources with plenty of online support. Building your own WordPress theme from scratch has never been easier, and building lots of unique features into that theme has become much more commonplace.

In this post I’d like to cover a series of unique design trends for WordPress magazine themes. WordPress has evolved from a simple blogging platform to an extensive CMS giving developers more control with an enormous API. News & magazine themes have sprouted from this evolution and continue to improve with each passing year. I hope these magazine trends can offer a reliable starting point for WordPress designers and developers.

Mixed Content Styles

Some of the largest online news websites take advantage of mixing up content listings. Regular blog themes list posts in a consistent format all the way down the page. But magazines have a greater opportunity to create different article columns focusing on categories, tags, comments, authors, and other bits of metadata. Free WordPress magazine themes and premium themes all offer content-first layouts and eye-catching home pages. 

The idea of mixed content is to give readers easy access to browse through a vault worth of golden content. Magazines typically publish content more frequently than blogs, and this creates a precedent to share more content with readers. Homepage designs have become especially detailed like the Hot Topix theme.

hot topix dense magazine theme wordpress

Right at the top you’ll find a widget showcasing the latest five posts with featured images. But scrolling down into the main page you’ll find a hodgepodge of article list styles with small thumbnails, big thumbnails, even no thumbnails. You’ll also notice a dynamic sorting widget to sort articles by most popular, publication date, or number of comments.

I don’t think every magazine needs to be as detailed as this example. The Hot Topix theme is meant to be slightly exaggerated by showcasing all of the different methods for sorting articles. But it’s still a great example for design inspiration. With large enough thumbnail images you can make big featured posts along with average-sized listings and small thumbnails in the sidebar.

Generic blog themes are known to list recent content unadorned of any frills. Magazine themes should be more ostentatious by adding unique content outside of recent posts.

Fullpage Sliders & Rotators

Every full-scale magazine theme includes some type of content rotator, carousel, or large article display. Featured images are constantly used to promote news with online magazine themes. Large content sliders are much more prominent since many posts have a featured image attached to them.

A large content display/rotator certainly wouldn’t fit into every magazine theme. Typically you should make room on the homepage to showcase new posts or very popular articles. The method of organization could be relative to number of comments, number of views, number of shares, or any other metric.

But keep in mind these large displays shouldn’t replace the prototypical content listing. Instead, this feature should draw awareness and bring clicks deeper into the site – but readers should also be able to easily find recent post content.

widemag large wide magazine themeforest theme

The example found on Widemag is peculiar but intriguing. Directly underneath the page header you’ll find a fullscreen slider which rotates between recent posts.

The layout is fully responsive, and the content rotator adjusts based on the browser width. I think it looks great in the sense that it behaves well and blends nicely. But it would be nicer if each post link included more than just the headline.

filtered mag magazine theme wordpress

FilteredMag is fascinating because it uses a full width carousel rotator which loops between a series of different posts. Each post includes the headline along with the category and publication date. The featured images look crisp and felicitous in the background.

When visitors first land on the homepage this slider will undoubtedly capture their attention. Before scrolling anywhere visitors have a large view into the magazine’s recent content. Again this may not be an ideal solution to every layout, but when done properly it looks fantastic.

Dropdown Mega-Menus

Plenty of larger online magazines use dropdown mega-menus because they can hold a lot of content. Each dropdown targets a specific set of links – usually categories which have nested sub-categories.

Mega-menus often span the entirety of the page and can take many different forms. These menus derive from the horizontal nav bar which is commonly associated with single-column dropdowns. But the mega-menu is more suited to websites that have a lot of content like you would expect to find in a magazine.

kami magazine wordpress theme blog design

I like the example on KAMI because it demonstrates how you can use different mega-menu styles. Some dropdowns might have columns with different links while other dropdowns could display recent posts under a specific category.

The most common choice is a hybrid as seen in the screenshot above. This combines a small list of sub-categories along with a few recently published articles.

Everything in a good magazine theme should drive readers further into the website. Once a magazine has been online for 3+ years the site naturally compiles a treasure trove of post archives. New readers might love to check out a certain post from 24 months ago, but older content isn’t found easily. This is why sub-categories and related posts are so helpful in modern WP themes.

Accessible Related Posts

We all know about related post content – from widgets to plugins there are hundreds of choices. But I’d like to expand on the various methods of adding these related posts into a WordPress theme. Notably, the goal is to capture attention from a reader and drive them to click onto another article of intrigue.

weekly news premium wordpress theme related posts

Take a peek at an example post on the Weekly News theme. Directly next to the first couple paragraphs is a small widget listing other related posts that are worth reading. Each link captures attention quickly using thumbnail images. This related articles list would surely improve the number of average pageviews per visit – but it’s not the only option.

In the sidebar you’ll find a “weekly timeline” widget that lists a series of new articles in descending order by post date. Each link is color-coded based on category and the whole widget blends nicely into the design. These unique widgets can perform much better than you might expect. You just need to have the courage to brainstorm concepts like this and try them out on a live website.

For a more traditional approach try adding some related content directly after the post. The Weekly News theme uses typical WordPress “next post/previous post” links underneath each article. I find these links work a lot better-using thumbnails, but they’re worth implementing either way.

There are dozens of choices for displaying related posts, and they’re all useful in their own way. But a common principle is to make the related links accessible and enticing. Thumbnail photos can help, big link text can also help. Find some interesting methods that could work and test them out in your next design.

Expansive Footer Areas

If you haven’t guessed by now, magazine themes are typically more boisterous and colossal in size compared to blog themes. Taking advantage of every page section is important. A website’s footer can range from just a few links to a multitude of columns. Magazine themes tend to fall somewhere in the middle, veering towards the larger side if there’s enough content to fill.

blackmag magazine wordpress theme

One such example is BlackMag which features a very common magazine footer. It uses a solid background color and three different columns, only one of which lists recent posts. The other two list the magazine editors along with some extra details on the website itself.

There’s also a newsletter subscription field along with links to the magazine’s social network profiles. A website’s footer is typically expected to hold links that aren’t deemed important enough for the main navigation. This is the perfect place to link pages that may not be crucial but are still important(author archives, social media).

scoupmag scopemag magazine wordpress footer

ScopeMag has a very similar layout style with four footer columns. But the content is more traditional with a list of categories, recent posts, and blogroll links. WordPress allows developers to build widgetized areas into any theme section, including the footer. So you could even build a custom widget listing recent posts from a certain author and swap that into the layout. If you can think it then it can be built.

Since magazine themes are meant to drive pageviews and breed lifetime readers, the footer should reflect this mentality. Keep unequivocal focus onto the website or related features like a newsletter.

The best way to conceptualize a new magazine design is by separating the trends you like from the trends you don’t like. It’s useful to spend time browsing through popular online magazines to gauge the user experience from your subjective opinion.

Nowadays WordPress has enough extensibility that you can build almost any idea you want. The question isn’t can it be built, but should it be built? I hope these trends can get you started down the right path to designing creative and usable magazine themes.


Featured image: Magazines, Photodune
This article was originally published in 2016.

The post Exploring the Current WordPress Magazine Theme Design Trends appeared first on Envato.

https://envato.com/blog/wordpress-magazine-theme-design-trends/feed/ 0
Best Free CSS Code Generator Webapps https://envato.com/blog/best-free-css-code-generator-webapps/ Wed, 03 May 2017 11:38:35 +0000 https://envato.com/?p=54330 SpriteGen, CSSmatic, Base64, CSS3 Generator, Flexy Boxes, and more.

The post Best Free CSS Code Generator Webapps appeared first on Envato.

Smart coders know how to save time and build websites fast. Many IDEs let you save snippets but few IDEs have custom code generators.

That’s where this list comes in handy with a huge collection of free CSS code generators from all over the web.

You’ll find everything from custom gradients to modern CSS animations and a whole lot more. Plus these webapps are totally free so you can bookmark your favorites to keep them handy for all your dev projects.

Flexy Boxes

The future of CSS is flexbox as it keeps gaining more attention from developers. It’s a new way of organizing page content that works quite well for responsive design.

If you hate writing code from scratch then Flexy Boxes can help. It’s a free code generator that works like a flexbox playground. You tweak a few settings like the flex container, total columns, and content order.

From there you just copy/paste the code into your site and bam! You’ve got a fresh standards-compliant flexbox layout ready to go.

Just note it helps to already understand flexbox before using this webapp. If you’re looking for a place to start I recommend this tutorial on Scotch.io.

Grid Generator

Every great site needs a working grid system. This comes pre-packaged with many frontend frameworks like Bootstrap so you won’t always need to build custom grids from scratch.

But if you do then this Responsive Grid Calculator is a handy code generator to keep saved. It takes a simple input of the # of columns along with the margin percent values, then auto-calculates the code needed to create a grid with that setup.

Note this calculator works on percents so it is not a fixed grid system. You have the choice to setup a max-width property but these grids can fit into any size website.

CSS3 Generator

My personal favorite in this list is the CSS3 Generator. It is by far the most expansive tool with dozens of custom settings you can tweak for code output.

You’ll find close to 15+ code generators for various CSS3 features such as:

  • Box shadows
  • CSS transforms
  • rgba() color codes
  • Flexbox layouts
  • CSS3 gradients

You just click on whatever you want to create, enter some settings, and let this CSS3 generator go to work. It’ll tell you exactly which features work in which browsers so you can also decide if you need fallbacks.

CSS Button Generator

From CTA buttons to email signups there’s good reason to build catchy CSS3 buttons. But why spend time reinventing the wheel?

This free CSS button generator is the perfect way to create codes that work and offer easy extensibility. By default you can pick from dozens of color schemes and custom gradients. Some use drop shadows, others use border effects or 3D style click effects.

Best of all this webapp works like an in-browser editor so you can change features right in your browser. The output code also updates immediately so you can copy/paste and reuse for whatever purpose you like.

Base64 Encode

With this Base64 image webapp you can encode pretty much any picture you need into base64 code.

If you don’t know base64 is an encoding type that can encode data textually. This lets you convert images into text and embed them directly into CSS. This is great for repeating backgrounds, smaller icons, and pretty much anything that you’d add into your stylesheet.

The majority of base64 code is much smaller than any image file. This is why it’s to your advantage to encode images into base64 whenever possible. You cut down on HTTP requests and load fewer KBs per page.

And with this free webapp it’s easier than ever to get started.

CSS Animate

It used to be that JavaScript was the only way to create page animations. But with CSS3 you can rely on transitions + keyframe animations to create amazing motion in your web browser.

And with CSS Animate you don’t even need to write the code yourself. This free tool lets you create animations by dragging & dropping a block element on a visual animation timeline.

Using the side panel you can adjust the animation timing, speed, position, and even animation styles like rotations.

This is totally free to use and it auto-generates the proper CSS3 code for getting these animations working right. I absolutely recommend bookmarking this tool if you do a lot of custom animation work.


Stylie is a completely free web animation tool powered by GitHub. This means the source code is available for download if you wanna learn more.

But you certainly don’t need to do anything on GitHub to get value value from Stylie. It’s an in-browser animation code generator where you can create your own CSS3 easings, keyframes, or pretty much anything else.

And you get the final output in HTML/CSS which you can just copy into your projects to keep rolling.

This is perhaps the simplest web animation tool on the net. It has the easiest interface to learn and it’s something you can reuse many times over.


Even though CSSmatic is a bit small with only 4 tools, it’s also one of the more unique CSS code generators. These tools are super easy to use and they come with lots of options.

You can generate rounded corners, box shadows, CSS3 gradients and most interestingly custom noise with any BG color you like.

It’s super simple to learn and the gradient tool is especially valuable if you’re looking for preset gradients.


CSS sprites are still widely used to cut down on HTTP load times. Designers typically create their own sprite sheets with programs like Photoshop by adding lots of icons/images into one file.

Now with SpriteGen you can save all that manual labor and automate the process. It’s a totally free webapp that lets you upload files(max 32MB) from your computer. Then SpriteGen organizes these files into the smallest sprite possible and outputs the final image.

It’s always a transparent PNG so this works great for CSS icons. And this has a sister app for responsive sprites if you’d like to test that out too.

CSS Center

Centering an HTML object isn’t too difficult. But there are many different ways to achieve this depending on the container size and the element’s position(absolute, relative, or maybe floated).

There’s an awesome free webapp called How To Center in CSS which does exactly as the name suggests. You run through a series of questions answering details about how you want to center something on the page. Then you’ll get some code that you can copy/paste into your stylesheet.

The great thing about this app is how it generates the code in so many formats. You can get the full HTML & CSS for centering anything on the page both horizontally and vertically! If you’ve ever tried to vertically center anything with CSS you’ll know why this app is so valuable.

This can absolutely save you loads of time and it’s fully up-to-date with the latest CSS techniques including flexbox.

Wrapping Up

All of these tools are phenomenal and they each solve different problems. But remember that code generators are only tools. They should be used to help you save time, but not used to avoid learning CSS.

If you’d like to sharpen your CSS skills take a peek at our recommended webapps ranging from games to online IDEs. All of these can help to improve your CSS knowledge right from your web browser.

The post Best Free CSS Code Generator Webapps appeared first on Envato.