9 Must-Have Features For Magazine-Style Blogs

Online blogs have morphed into digital publications with every major print brand running its own website. These blogs usually take the form of a digital magazine which looks much more professional than a smaller personal site.

But what goes into a magazine layout? And how can you design one for your own site?

This list should get you started with 9 essential features for a quality magazine blog design. If you work with these features and try building a usable interface you’ll have a great design that should fit any online publication.

1. Strong Branding

This may seem obvious but a strong brand really helps sell the “magazine” feeling over a personal blog. If you’re going for an authoritative publication you need to focus on branding.

How will you stand out from every other blog? Ideally through content, but your brand is a huge part of that. For example, the Wired logo below is well known amongst tech blogs. It’s been around for years and when you see that brand you instantly recognize the site.

But you can add branding in your site’s sidebar and footer too. The goal is to create a consistent style that just feels stronger than rinky-dink blogspot sites.

2. Crisp Headlines

You can style your headline any number of ways so there isn’t one correct design. But you always want headline typography that’s crisp, easy to skim, and usually thick.

Take a look at the headlines on US Magazine to see what I mean. These headlines span the entire page width and the letters are pretty thick. You can’t ignore that headline because it’s practically shoved into your face. That’s the goal with your headline—make it stand out enough to really grab attention and encourage people to keep reading.

3. Tiered Navigation Menus

Some designers may argue against this feature saying that magazine sites don’t need massive menus. This is generally true, however magazine-style websites often have a large archive of posts. You want to offer the best possible way for people to browse all of those posts.

Whether you’re using WordPress categories, tags, or even custom taxonomies, you can add these into a massive mega navigation. This might include dropdown menus with lists of recent posts or popular tags/categories, or even a mix of both.

The menu for Atlanta Magazine is pretty smooth with lots of links embedded in the dropdown. Plus the responsive sliding nav is clearly accessible on mobile so smartphone users don’t miss out.

This tiered navigation could include multi-level dropdowns or even be fixed to scroll with the user. So many options and really the biggest factor is usability mixed with tons of links to browse.

4. Featured Posts Widgets

Every magazine-style homepage looks a bit different with different post thumbnail sizes, custom formats, and of course different featured widgets.

I consider these a staple of any magazine site because the featured widget is what grabs attention. It’s what you can use to promote the latest posts or hot stories that should get the most attention.

Search Engine Journal has a carousel-type slider where it rotates between 3 of their featured stories at once. Each story loads a snippet in the left-hand side which offers a preview thumbnail too.

But no two homepages are identical so try browsing your favorite magazine sites and see what other featured story styles you can find.

5. Prominent Sharing Buttons

When it comes to building a strong presence you can’t ignore social media. And if you want more visitors to your magazine-style blog you’ll want social sharing buttons on every post.

These come in many styles and can be fixed to the side of the page, or added to the bottom of the post, or even added onto images like Pinterest share buttons.

On ZDNet they use a long rectangle of sharing buttons right underneath the post headline. This uses plain icons with colored blocks to reference all the top social networks.

But again you can find a ton of examples just by looking over some popular blogs. And no matter what style you choose it’s a good idea to split test formats to see which one(s) generate the most shares.

6. Related Posts

I’m sure we’ve all see those widgets titled “you may also like…” at the bottom of news articles. Some of these are native ads but magazine-style sites do genuinely use these widgets to promote relevant content.

This feature should be a staple for any blog because it’s a great way to increase pageviews without much effort. Visitors won’t always browse by category but they might browse by related posts. The example below from Real Simple has a super clean design; exactly what you should go for.

Post thumbnails grab attention first so make sure those are featured prominently near the headlines.

7. Accessible Search (Even On Mobile)

Every website needs a search form. It’s one of the best ways to increase usability by helping people find relevant content.

The difference with a magazine site is that it can often feel way too busy to search. Users may feel overwhelmed with so much content and so many links that they might not even bother trying to search.

A prominent search form like on Push Square is ideal to encourage more searches.

You can toss a magnifying glass icon into your navigation and use the dropdown toggle effect on every page. Naturally this works for mobile too so it’s a reliable choice for every magazine layout.

8. Custom Page Elements

This feature is a tad vague but I’m covering it vaguely on purpose. Every generic blog usually feels the same: paragraphs upon paragraphs with little-to-no custom formatting.

Great magazine themes take advantage of customization by adding in-post features. These could be any number of page elements that improve your content and make your posts easier to consume. A few ideas I’ve seen used on various websites:

  • Pull-quotes
  • Table of contents
  • In-post image slideshows
  • “See also” related posts

Remember how I mentioned the related posts widget earlier? That’s great to add near the end of your post, but you can also add related content inside your post.

For example TechCrunch adds a “see also” widget towards the bottom of every post. This is also predominant on the tech blog Hongkiat which adds relevant posts inside little blocks in the content.

I can’t tell you exactly which features you should add to your site. But definitely spend time brainstorming some ideas and testing them out to see what sticks.

9. Featured Image Headers

If you want to grab attention right at first pageload you want two things: a large header (covered earlier) and a clear featured image.

WordPress comes with featured images by default and you can program specific sizes for your images. For magazine-style blogs it’s best to make these pretty big and follow the hero image trend. You can use a fullscreen image like in the Dwell screenshot below. Or you can design images that fit within your layout’s content area.

Either way each post should have a sizable image that helps sell the content. You’ll see this on pretty much every magazine-style blog, even on this post if you scroll to the top!

Keep all these ideas in mind when designing your layout and leave plenty of room for eye-catching featured images.


Why Designers Should Start Fights

It’s one of the worst parts about being a designer: Being forced to create work you feel is subpar. Work that’s absolutely doomed to fail. Designers go through this every day.

This isn’t exclusive to designers, but it’s especially destructive because our work is often devalued by the rest of the team. They devalue our work because they don’t understand what we do.

If You’re a Designer You Have a Big Problem

Designers are expected to be the mythical 10x designer. The kind of designer that creates beautiful, award-winning, high performing designs. No one says this, of course. You’re just expected to churn out something brilliant in seconds, on command, and with minimal input from anyone else. 

It’s a trap.

If you’re actually able to create the “perfect” design once, you’ll find you’re always expected to do it. Whenever you’re asked. If you fail, you’ll receive a disproportionate amount of punishment (typically in the form of guilt, shame, criticism or humiliation).

And, what if you can’t create an award-winning design on command? 

You’ll be treated as a pariah, the designer who’s all talk but can’t deliver when it matters. Depending on where you work, this could lead to condescending comments from co-workers, receiving the work no one wants, being demoted and even eventually losing your job. It’s unfair but it’s also the unspoken part of work no one talks about.

The Dysfunctional Design Process Sets You Up For Failure

If you’re an experienced designer, you already know how this process works:

  1. You and your boss (e.g. manager, director, client, etc.) start the project with high hopes.
  2. You invest a lot of hard work into the project, doing your best to create something beautiful and functional.
  3. Your boss responds with apathy/enthusiasm.
  4. Your boss hits you with a never-ending stream of tweaks edits and changes.
  5. The final product is a convoluted mess that’s unattractive, disorganized and difficult to use.
  6. You’re left feeling exhausted, burned out and disillusioned.

The result?

Designers of all stripes report over and over and over that they hate their jobs. Originally, these designers enjoyed creating and building something that others found beautiful and helpful. Now, they’re posting horror stories about their idiot boss or their lame clients.

After a few years, the job has turned into something else. Something we didn’t sign up for. Want to be treated like the all-star designer you are?

There’s a simple solution.

Start Fights at Work to Become a Better Designer

What kind of terrible, no-good advice is this?

Starting a fight is counterproductive. It’s a great way to lose friends and alienate people.

All true.

So, why I am I suggesting that you start fights at work? Because, believe it or not, there are healthy ways to fight with other people. You can start a fight with your co-workers and your boss and you can do it in a way that actually wins their support.

Here’s why this is so important: Any decent designer with a slight interest in their work is light years ahead of their non-creative co-workers. If you’re doing your job well, you’re staying on top of the changes in your industry, you’re reading articles (like this one), watching videos, practicing new skills, etc. You’re doing your best to grow. Your non-creative co-workers are not. They’re typically focused on their areas of expertise. This means they’re way behind, even if they’re interested in design.

Focus is the Key to a Successful Fight

When people see the word “fight” their mind goes to really dark places. Creepy, vengeful or violent places. That’s not what this means.

The goal here isn’t to start a fight that hurts your opponent. If you end up humiliating, hurting or abusing the people you’re fighting with you’re doing it wrong. It’s also an indication that either a) your opponent misunderstood your intent because you failed to make it clear or b) you actually were hurtful, harmful or abusive in your approach.

The purpose of starting a fight is change. You’re the expert, your boss, manager, client, etc. is not. Which means 9 out of 10 times you have a better idea of what’s best for the project.

So, how do you avoid hurting your opponents? Simple. You shift your focus.

Stop Protecting Yourself and You’ll Win the Fight

A self-serving fight (one where you’re angry you didn’t get what you want) is professional suicide. It’s the quickest way in to the unemployment line.

Shift your focus from protecting yourself to protecting your “adversary.” Don’t fight for yourself, fight for them. Your adversary in this case could be your boss, manager or client. Anyone making a design decision that leads to negative consequences.

Your goal? Get your adversary to understand there’s a potentially serious price to pay for their bad decision. That’s a problem though. You have to deliver bad news in a way that doesn’t hurt, harm or abuse. If you’re like most employees, that’s the absolute last thing you want to do.

What if they take it the wrong way? What if you lose your job or this ends badly for you in some way? How do you tell someone with more power than you that they’re about to make a serious design mistake? That they’re about to hurt their business and quite possibly your career?

You use questions.

Clayton Christensen, professor at Harvard Business School and author of the book, “How Will You Measure Your Life” says it best:

Questions are places in your mind where answers fit. If you haven’t asked the question, the answer has nowhere to go. It hits your mind and bounces right off. You have to ask the question—you have to want to know—in order to open up the space for the answer to fit.

Telling your adversary they’re wrong, arguing with them, behaving in a passive-aggressive manner—these behaviors  increase resistance. You’ve probably noticed that already, am I right? Why does this happen?


Reactance is a response to pressure or threat. When people feel their choices are being taken away, they double down. They resist. Even if they go along with you on the outside, they’re disagreeing on the inside.

Here’s a Better Way to Start a Fight

Questions create openings in your adversary’s mind that they fill with their own answers. Used well, it motivates your adversaries to support your point of view for their own reasons.

As long as you’re focused on them you’ll be able to use this strategy effectively. Switch to a self-serving attitude and your adversary immediately shuts down and tunes out.

Self serving topics:

  • I want a raise
  • I want a promotion
  • I think this looks nicer/works better
  • I want to use this instead

You can get the outcomes you want with these topics (and any other topic) if you focus on your adversary first. Here’s how you do it.

Fight #1: Your boss expects you to finish a redesign in 8 weeks

Your boss comes back with tweaks, edits and changes, extending the project timeline by an additional 12 weeks. Most designers take this abuse, pull lots of all nighters and do their best to get things done. Most of these designers still fail.

How to fight back:

Hey Jan, I noticed you added a dozen new design changes to the list. These two updates alone will add an extra four weeks to the project. Did you still want to keep these on the list or did you want me to save these for version 2 so we can hit the deadline of March 3rd?

Your boss now has to prioritize. What do they want more? A project launched on time or a list of completed updates? Without you saying anything you’ve taught them:

  • You’re willing to accommodate but there’s a price to pay for changing their mind
  • To look for a solution to the problem they created
  • You’re a reliable expert who will give them the bad news, respectfully

Fight #2: Your boss says: “Hmm… these designs don’t wow me”

Non-designers have this irritating habit. They expect anything their designer does to “wow” them, to knock their socks off. As you know, this is a losing battle. Most of the time these non-designers can’t explain what isn’t working, what they want or what they were hoping for.

You’re forced to run on the hamster wheel of expectation. Doing everything you can to please someone who doesn’t know what they want but will “know it when they see it.”

How to fight back:

Hey Jan, I’m sorry we missed the mark. Are there any other brands or examples we can use as inspiration to create what you want? It would really help us nail down the specific design details that aren’t working for you.

This response is deceptively simple and non-threatening. It puts the responsibility for communicating back on your adversary where it belongs. When they give you a brand, you ask for specifics. What do you like about this? What do you dislike? Which design details would you like us to use as inspiration in your design?

It’s essential that you get specifics.

Specifics ties your adversary to their expectations. If you do something they wanted, whether it’s a good or bad idea, it’s on them. They asked for these specific details so they’re partially responsible if it fails.

Fight #3: Your boss gives you an important to-do then drops more work on you

Our bosses and co-workers tend to ask for stupid things. Their demands are foolish, unrealistic and downright ridiculous.

As designers, we’re expected to simply “get it done.” That’s unreasonable when our workload continues to grow. There simply aren’t enough hours in the day to get a never-ending stream of work done. That’s the thing, no one wants to hear the word “No”. So, you say “yes”, with conditions.

  • You asked me to get X done. Did you want me to focus on Y instead?
  • I can get it done if I have X, Y and Z. Who should I talk to about getting that?
  • Let me give it a shot. X could make this task impossible but I’d like to try to work around it. Is that okay?
  • Would you give me X days to figure out if this is possible and how to do it right?

Here’s the interesting thing about these type of answers. They’re actually No’s. These questions immediately show your adversary that their request is impossible/unrealistic. But the more important part is this – it allows them to save face by quietly withdrawing their request.

What if you need to say No?

Here are some other ways you can let your boss/co-workers down gently.

  1. The deferral. I’m swamped with work on Project X right now. Would you follow up with me later this week?
  2. The delay. Would it be cool if I started this after I finished X? My deadline for Project X is today and I don’t want to be late.
  3. The introduction. When it comes to Angular I’m pretty clueless. Jan is the Angular master, would it be alright for her to take the lead on this?
  4. The bridge. Jan and Rich are actually already working on database migration. Should I reach out to them?
  5. The relational account. If I do this I’d be letting Jan down. She needs my help with her Ionic project.

Fight #4: These designs are terrible, I expected more from you

Your boss, co-worker, client, is unhappy with your work. They’ve made it personal and it’s clear they didn’t get what they were looking for. At this point you may be feeling hurt, humiliated and angry. This isn’t just an unhappy co-worker, it’s someone that decided it was a good idea to take a jab at you.

There’s more going on here than just your design. You’ll need to resist the temptation to become passive or act out. You need a solid plan that helps you avoid a toxic situation and focus on the real problem – they’re unhappy.

How to fight back.

Wow, I’m really sorry you’re unhappy with this. What specifically can I do to make this right ASAP? I’d like to fix any problem areas in this design quickly so you get what you’re looking for.

On the surface this doesn’t seem like a great response. If anything, it looks like you’re behaving like a doormat and opening yourself up for more abuse. Not a great plan.

Or, is it?

This response is actually great because it accomplishes several things:

First, it shows your adversary and everyone else watching that you have good character. You brushed off his insult and focused on the heart of the problem. Everyone, including your adversary, will notice.

Second, it exposes their complaint. If they have a legitimate complaint they’ll have no trouble bringing it up (a legitimate complaint is your cue to fix the problem). If their complaint is weak, they’ll do their best to avoid giving you a straight answer. Everyone will notice that too.

Third, if their answer is still fuzzy or vague you’re in the driver’s seat. All it takes is a simple, “would you be more specific?” to drive the point home.

This doesn’t seem like design specific advice

Ah but it is.

Your ability to create beautiful and functional designs depends primarily on your co-workers with power. Your manager, boss or client has a huge impact on the sophistication and quality of your work.

If you refuse to stand up for yourself, non-designers will push you around. The quality of your work will suffer as these co-workers make it hard for you to become the all-star designer you were meant to be.

You can maintain creative control over your work.

But only if you fight for it.

Designers who refuse to fight have a big problem

Imagine being forced to create terrible, low quality designs. Subpar design work you know is doomed to fail. Designers endure this struggle every day.

It kills their passion for their work, slowly turning something they love into something they hate.

This doesn’t have to be you.

Yes, all-star designers are exceptional. They’re brilliant, talented and knowledgeable. They’ve invested the hard work and practice needed to grow. But, it’s also because they’ve learned how to fight. Want to become the all-star you were meant to be?

Learn how to fight.

When co-workers devalue your work, when they ask you to create something terrible, fight back. Use the right questions and you’ll find you have what it takes to become an all-star.


Thrive Architect Review: A Huge Upgrade to Thrive Content Builder

You want to build beautiful, effective pages for your WordPress site but you’re not a developer… It’s a problem as old as time (or at least as old as WordPress!). And it’s exact problem that page builder plugins were made to fix. A few months ago, Thrive Content Builder was one of those plugins. Now, Thrive Content Builder is gone,…. Continue Reading

The post Thrive Architect Review: A Huge Upgrade to Thrive Content Builder is written by Colin Newcomer and appeared first on WPKube.

14 Best ECommerce Options for Designers

With Black Friday/Cyber Monday just a few weeks away, it’s time to get clients set up and ready to sell. The list of solutions to choose from keeps on getting longer, so how do you pick which one to go with?

Start with a list of features that are must-haves for your client, be clear on what their budget is, decide how much development you want to do to get the thing set up, and whether you want a hosted solution, or separate hosting. Once you know what you need, then start looking at what’s out there.

Here’s a selection of some options that should be on your shortlist:

1. Shopify

What began as a bespoke store selling snowboarding equipment is now a platform powering half a million active stores and $40bn in sales to date. Shopify offers an easy to set up an online store with secure unlimited hosting. There is a well stocked theme store, plus a guide on building custom themes for clients who want a bespoke design.

Shopify also allows you to sell through several other channels: Facebook, Messenger, Pinterest, Amazon, and embedded Buy Buttons. Not all features are available in all countries, for example Pinterest Buyable Pins are not available outside the US. Plans start at $29 per month plus credit card fees, and transaction fees for payment gateways other than Shopify’s own.

Cost: From $29 / month + fees

2. Magento Open Source

Magento Open Source, formerly known as Community Edition, is a free open source (obviously) platform built in PHP. It comes with a basic, configurable store to get you started. In theory, because it is open source, it is more flexible and customizable than other, hosted, platforms. This may mean getting your hands dirty with PHP, although there is a large community of developers providing all sorts of free and paid add-ons and themes.

Although the software is free, you need to provide your own hosting, and unlike hosted solutions, the security side of things is not taken care of. There are certain legal and PCI (payment card industry) requirements that must be met. To address this PayPal is the payment solution recommended by Magento.

Cost: Free

3. OpenCart

OpenCart is another feature rich open source platform. It is module based which means extensions can be added easily. Like Magento, it is free but there is again the same responsibilty to provide secure hosting. OpenCart offers a longer list of payment gateways, and the option to add more through extensions.

This is a solution for those who like to tinker, and get stuck in to some development, and not one to let a client loose on.

Cost: Free

4. WooCommerce

WooCommerce is an official WordPress plugin that will add a store to your WordPress site—there was a time when WordPress was for blogging, now it will even make the tea and pass you a biscuit. WooCommerce is built to work with themes, including the yearly default WordPress theme. There is also a free official theme, Storefront, which comes in 14 different flavors.

Several payment gateways are available, such as PayPal and Stripe and direct payment is an option, although it is up to the site owner to provide the SSL and other PCI compliance criteria here.

WooCommerce is completely free to install and use. Rather confusingly, clicking on the ‘Get Started’ button on the WooCommerce home page takes you to the sign up for a WordPress.com account. This gives the impression that the commerce plugin is only available on wordpress.com. That is not the case, it can be installed via your WordPress admin just like any other plugin.

Cost: Free

5. EKM

EKM have been around since 2002, and although they are smaller than Shopify with 30,000 online shops, their sales to date of £5bn work out at a higher average sales rate per shop. They are squarely aimed at customers in the UK, although the actual stores sell internationally, with a couple of continental European offshoots.

Besides the usual list of features, themes, and payment options, EKM stress their customer support. You get a dedicated account manager free for the first three to six months, depending on the plan you choose. EKM is one of the pricier platforms, starting at £29.99 (+ VAT if applicable), but you are not paying separately for hosting, and the security is taken care of for you.

Cost: From £29.99 (approx $39) / month + fees

6. Volusion

Volusion is one of the less expensive hosted eCommerce platforms with a site builder to get up and running with. Prices start at $13.50 a month but that only allows you 100 products and bandwidth limited to 1GB. You also have to buy your own SSL if you want to use direct payments. If you use more than your allocated bandwidth you get charged, but this is instead of a per transaction charge.

Volusion also offer custom design services as well as theme help, and marketing services.

Cost: From $13.50 / month

7. BigCommerce

Another hosted platform, BigCommerce starts at $29.95 per month. That includes unlimited products, file storage, bandwidth and staff accounts, hosting, SSL certificate and online sales of up to $50k per year. There are no additional transaction fees for using any of the major payment gateways, and POS transactions can be integrated with the online store.

BigCommerce also offers embeddable Buy Buttons, and integration with Facebook Shop, Amazon, eBay, and Google Shopping.

Cost: From $29.92 / month

8. SupaDupa

SupaDupa is one of the newer kids on the block, and one of the cheapest of the hosted platforms. Plans start at £6 (approx. $8) per month with unlimited bandwidth and no transaction fees. Credit card gateway, unlimited products and storage, and SSL certificate are only available on the higher priced plans but at £19 per month (approx $25), that’s still pretty reasonable.

SupaDupa say they are not claiming to have a platform for everybody, it is aimed at design related or creative businesses. Design customization is limited on the lower plans but there are over 40 themes to choose from and a custom design service is available.

Cost: From £6 (approx $7.80) / month

9. PrestaShop

PrestaShop is a free, open source platform. As with the other open source platforms mentioned, hosting is not provided and security—SSL certificates, PCI compliance etc—are your responsibility. There are a stack of payment methods available, and while not all of these modules are free, those for the big payment gateways such as PayPal and Stripe, are.

There is a well stocked theme store and a fairly active developer community. Training courses are available, and there are regular conferences and meetups.

Cost: Free

10. LemonStand

LemonStand starts at $19 per month with no transaction fees. This includes unlimited products, storage and bandwidth, but only 75 orders per month. They claim unmatched flexibility with design customization, including the use of your choice of frontend framework.

This platform seems to be aimed less at merchants directly and more at designers and developers who are looking to build customized eCommerce solutions for clients.

Cost: $19 / month

11. Stripe

Stripe is a secure payment gateway that can be integrated with most good eCommerce platforms, or used on its own to take card payments directly using its own checkout. It can be used for card payments and some other payments methods, depending on country. There is a transaction fee, but no setup fee or subscription.

Stripe has extensions to integrate with a host of other applications to help with business admin, including Xero and Slack. Payments made through Stripe are typically paid out to your nominated bank account on a schedule based on your country and industry.

Cost: Fees

12. Paypal

Currently—probably—the best known online payment gateway to date, PayPal offers a range of payment solutions for businesses of all sizes. PayPal can be integrated with most eCommerce platforms or it can be used on its own by integrating a PayPal checkout, or embedding a PayPal button.

There are free and paid solutions and a transaction fee is charged the rate of which depends on the volume of monthly sales. Because of its high profile, PayPal is one of the more trusted payment options.

Payments made with a credit or debit card or from another PayPal account are available immediately and can be held in your PayPal wallet or withdrawn to your nominated bank account.

Cost: Fees

13. Authorize.Net

Authorize.Net payment gateway accepts all major credit cards as well as  Apple Pay, PayPal and Visa Checkout. There is a setup fee of $49 and a monthly fee of $25 on top of the transaction fee which varies depending on whether you use the payment gateway only or the full gateway with merchant account. This also includes the ability to take payments in person, over the phone, by mail or through mobile devices. You can use Simple Checkout buttons or integrate with a certified shopping cart.

Cost: $49 setup + $25 / month + fees

14. Snapppt

Snapppt allows your customers to shop via your Instagram feed. Or at least link directly to a specific item in your store to buy it. It’s from the people behind the SupaDupa platform, and integrates with SupaDupa stores, but also other platforms including Shopify.

Cost: Free


Popular Design News of the Week: October 30, 2017 – November 5, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Bootstrap 4 Buffet – The Default Bootstrap 4 Theme


Tailwind CSS


Google is Building a New Kind of Clip Art


The Meaning of AMP


New Skype for Desktop


11 Things Developers Love Hearing from Non-Developer Co-Workers


Google Poly


A Closer Look at Google Calendar’s New Design


Mirror Conf 2017


The Web Began Dying in 2014, Here’s How


Mesh – Slackoverflow Wrapped in a Social Network


SEO in 2018: The Definitive Guide


Designers Should Never Code


The Better Email on Design


How to Create Bold Products


A Comprehensive Overview of UX Design Deliverables


Super Normal UX Design – Normal as a Special Kind of Simplicity


5 Free Apps that Can Boost your Creativity


Focusingly – Better Focus Styling


Embed Customized Social Media Feeds on your Website


The Subtle Art that Differentiates Good Designers from Great Designers


The 11 Best Horror Movie Logos of all Time


Free Inter UI Font Family


Even Stranger Things – This Site Uses AI to Make your Photo into a Strange Poster


A Curated Directory of Resources and Tools to Help You Build your Startup


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.


Comics of the Week #413

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Tech replacement

No job


Java addict

Can you relate to these situations? Please share your funny stories and comments below…


Creating WebVR Experiences with A-Frame

WebVR is an amazing way to create immersive 3D Virtual Reality experiences in the browser. It’s an experimental specification of Javascript API’s and has a lot of backers and people pushing it forwards, with Mozilla being a big part of that.

With the explosion of VR headsets coming to market and more on the horizon, now is a great time to experiment and see what awesome things you can create in WebVR.

The open web is becoming an exciting hotbed of VR experiences, including otherworldly games, painting applications and immersive experiences. As the WebVR technology matures and VR equipment becomes more accessible who knows what other experiences people can create.

What is A-Frame?

Well as I mentioned Mozilla is a big driving force in WebVR at the moment and they helped create A-Frame, a web framework for building Virtual Reality experiences. It has since blossomed into one of the largest and most exciting open source projects and is growing and evolving quickly.

A-Frame is one of the simplest frameworks I’ve had the pleasure of working with, yet the things you can create with it are amazing. It’s simple to get going, easy to understand, and yet extremely powerful.

In A-Frame’s own words:

A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.

Why Should I Make WebVR Content?

Let’s get one thing straight: WebVR and A-Frame are still not useable everywhere. This technology is moving fast, but is still pretty experimental. Also WebVR is not going to replace the way we build websites at the moment (at least not for a while). I predict 2D views with normal monitors and screens will still be the dominant way we consume content for a long time.

So I think the main reason to make WebVR content is for fun. It’s a new and exciting technology and we can make really, really cool things with it. Some of those projects could become client projects, a museum could hire you to create a virtual tour for them, or a game could take off and you could get money for it. But in the main we should be having fun, and creating exciting things with WebVR and A-Frame.

Let’s Make Something

In my opinion the best way to get excited about a framework like A-Frame is to crack on and build something. We’re going to build a fairly simple Virtual Reality Art Gallery whilst introducing you to some of the core functionality of A-Frame.

Getting Started

First things first, we’ll need a local server. If you’ve already got a way you do this, great. If not I recommend setting up a node server with http-server.

Ok, when you’ve got a local server running let’s dive into A-Frame.

We’ll begin with a basic HTML document called index.html and load the A-Frame library into the head of the document. A-Frame should be loaded in the head so that it’s ready before the custom elements we’re going to be adding are loaded.

    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

Now we have A-Frame loaded, let’s prepare the HTML document for a A-Frame scene. A-Frame is based on top of HTML and uses Custom Elements to abstract away much of the complexity.

Let’s place an <a-scene> into the document. All of our A-Frame components will be added within this a-scene tag so this is becomes our parent component.

    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

This is all of the structural work done. I know right? Super simple. We don’t have any objects in the scene yet so it’s just going to be a blank screen but we can add the example objects from the A-Frame tutorial quickly.

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>

Wow. Ok, maybe not totally awesome as it’s just some shapes, but hey, in a few lines we have some 3D objects being loaded in WebVR.

Next we’ll start making our Virtual Reality Art Gallery.

Downloading Our Assets

So we don’t forget, clear all the content from inside your scene, so now your file should look like this:

    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

Now we’ve got a clean slate let’s go find a 3D model to use.

There’s several places online where we can download models, and you can find pretty much anything if you’re willing to pay for them. We’re going to get a model from the Google Blocks gallery.

Google Blocks is an application for creating 3D models in VR which is awesome in it’s own right. The gallery is where people share their creations and where we will be downloading the “Small Gallery” model from.

Head to the Google Blocks page for this model and click on download. This will download a folder with two files inside it; a model.obj and a materials.mtl. Place these two files inside a folder called “gallery” and put this folder next to your index.html file. We will need both of these files to render the model correctly and we’ll be adding them into A-Frame next.

Your project should currently look like this:


Creating a VR Gallery Space

Now we’ll load the model we downloaded into our project. A-Frame comes with a built in asset management system, which preloads and caches our assets. This is a great feature that abstracts away a really important step and makes our lives a lot easier.

Let’s load our object and our material into the asset loader:

<a-asset-item id="gallery-obj" src="http://www.webdesignerdepot.com/gallery/model.obj"></a-asset-item>
     <a-asset-item id="gallery-mtl" src="/gallery/materials.mtl"></a-asset-item>

The <a-asset-item> needs an id attribute which is how we’ll be targeting each asset, and a src attribute which is where we load the files.

Now we can add this object to the scene by using the entity element. The entity element is one of the core elements in A-Frame and you’ll probably use this quite a bit. As we’re using it as a placeholder for our object we need to actually load the object and material into it.

<a-entity obj-model="obj: #gallery-obj; mtl: #gallery-mtl"></a-entity>

If you refresh your page you should hopefully see the model in the centre of the screen. The positioning will probably be off but you should be able to look around. Let’s fix the positioning now by adding a camera element manually and positioning it.

<a-entity id="camera" camera look-controls></a-entity>

As you can see the camera element is actually a camera component attached to an entity element and we can add the ability to look around with the look-controls component.

Now we have the camera element added lets position it. Positioning takes three values, an X, Y and Z and we’ll start by setting a default of 0 on each of these.

<a-entity id="camera" camera position="0 0 0" look-controls></a-entity>

As you can probably tell straight away, trying to position an X, Y and Z value just in code will be a bit tricky and is a recipe for headaches. Fortunately, we’ve got access to an awesome A-Frame Inspector to help you work on your VR experiences. You can open the A-Frame Inspector with <ctrl> + <alt> + i.

We can click on the camera in the list on the left and find position the camera either with the arrows or the properties in the right hand menu. Have a play around with the inspector and see what you can do with it. You can learn a lot from changing the properties and experimenting, and it’s one of the best ways to learn about positioning in the 3D space.

We want to end up with a position, that centres the camera in the room and lifting it up slightly so it’s at head height. We’ll also rotate the camera so it’s facing out of the window at the start.

<a-entity id="camera" camera position="0 0.5 -3.0” rotation="0 180 0" look-controls></a-entity>

Adding a Welcome Message

To give the VR Gallery a bit more of a welcoming feel, we’ll add a welcome message using A-Frame’s text component.

Adding text is as simple as entering a value into the text component, however there are a lot of additional values that can be changed as well. We have the position and rotation attributes as usual, along with some text customisation options, such as font, alignment and color. We also have one called Side. Side actually tells A-Frame which side of the text to render. This is helpful if you can move around your scene and don’t want to see reversed text. We’re happy having it visible on both sides.

value="VR Gallery"
position="0.05 0.80 -2"
rotation="0 180 0"

So we’ve got the text showing up just in front of the window, but I’m still not feeling welcomed. Let’s add a bit of animation to it, so that it’s draws the eye and makes the scene more interesting.

Animating our Welcome Message

A-Frame has a powerful animation component that can be attached to other components. We attach it by nesting it within the element we want to animate. This is a really powerful feature and goes way beyond just animations. We can group together multiple objects in this way. As an example of how this could be used think of a heads up display in a game, or the earth on an orbit around the sun with the moon following and rotating around the earth.

We’re going to keep it simple in this tutorial and just animate the text. We must choose a property we want to animate and set that as the attribute value. We’re going to make our text bounce up and down so we want to edit the position. Next we need to tell the animation where it is animating this component to – we only want it to move up slightly so we should copy the position value of the parent component and adjust the Y value. We can also set easing, durations, whether it loops and how it loops. We’re going to make our animation bounce up and down by looping indefinitely whilst alternating the direction each time.

to="0.05 0.85 -2"

There we have it. A nice welcome message that bounces up and down.

Here’s the full code:

        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
                <a-asset-item id="gallery-obj" src="http://www.webdesignerdepot.com/gallery/model.obj"></a-asset-item>
                <a-asset-item id="gallery-mtl" src="/gallery/materials.mtl"></a-asset-item>
            <a-entity obj-model="obj: #gallery-obj; mtl: #gallery-mtl"></a-entity>
            <a-entity id="camera" camera position="0 0.5 -3.0" rotation="0 180 0" look-controls></a-entity>
                value="VR Gallery"
                position="0.05 0.80 -2"
                rotation="0 180 0"
                    to="0.05 0.85 -2"

Wrapping Up

There we have it, a Virtual Reality Art Gallery in under 40 lines. You’ve had an introduction to the loading assets, using the entity component with objects, the camera, text and animations. With these tools the potentials are limitless and fun.

WebVR is still in it’s infancy but already people are seeing the potential for great things with it. It’s a completely different way to experience content and it’s an exciting time to get involved. A-Frame gives us a way to get into it quickly, easily and get people using our creations across as many devices as possible.


Top 15 Hotel & Resort WordPress Themes

Nobody should design an entire hotel website from scratch. There are so many resources out there (most 100% free) that’ll save you time and money in the process. You just have to know where to look. In the past we covered a huge list of travel themes and in this guide I want to look into hotel & resort themes…. Continue Reading

The post Top 15 Hotel & Resort WordPress Themes is written by Jake Rocheleau and appeared first on WPKube.

7 Design Challenges to Sharpen Your Skills

Once in a while, I just have to try something new. Maybe I feel my skills are slipping. Maybe I want to jumpstart the neurons responsible for my creativity. Maybe I’m bored. There are a lot of good reasons to take on a design challenge, really.

Here are some more: You can add conceptual designs to your portfolio. You can blog about your experiences, and advertise your skills in doing so. You can take on a design challenge with other designer friends, and perhaps compete. You can gain a greater understanding of the technology you use.

The point is to do something differently from the way you usually do things. Change for its own sake isn’t always advisable, but trying new things is how we grow as designers, and as people. Just maybe don’t do any of these challenges on a client’s site unless you’re absolutely sure they’ll like it.

1. Try to Build Something New

This is actually my personal go-to challenge. I try to build something—usually something to do with layout—that I haven’t built before. It could be an effective and accessible horizontally-scrolling interface, a three-column site I actually like, or a full-screen responsive background image with absolute positioning.

you get to try out newer CSS modules…without worrying too much about cross-browser compatibility

This is a challenge where you get to try out newer CSS modules, or techniques you might not have thought of before, without worrying too much about cross-browser compatibility or other issues like that.

2. Change Your Colors

I know that I personally am always tempted to stick with what I know works, as far as colors go. I love my muted shades of colors, my grays, my de-saturated greens and blues, and so on. Unless you’re required to follow a specific style or branding guide, it can be easy to fall back on what you know works.

Well, get right on out of your comfort zone! Build a site with a color scheme you wouldn’t normally go for. For me, that would be using more bright, and bold colors. I’d have to turn up the saturation in general. For you, you might consider a dark layout, if you usually do light ones. Use calmer colors, if you’re prone to going bright and bold. Many of us, myself included, aren’t using enough contrast in our designs. Try adding more. Heck, try a design that’s totally just black and white, and make it work.

3. Copy a Complicated Layout

Okay, don’t copy someone else’s site exactly. Just find a site with a nice, complex layout or design, and copy it without looking at the source. Build the thing up from scratch by examining the major layout elements, and figuring out how to do it yourself. Don’t use this for a live site, but as a simple HTML/CSS/JS exercise.

the point is not to create a pixel-perfect copy, but to learn the principles behind the design decisions

You could choose to copy one of those fancy, experimental-looking sites to see if you can manage the same feat. Or you could copy the layout from a large retail site, to see figure out how you would manage that amount of HTML and CSS in a practical way. Copy a news site to see how they handle the scaling of large amounts of text and images in a responsive way.

Remember, the point is not to create a pixel-perfect copy, but to learn the principles behind the design decisions.

4. Design and/or Code a Site Using New Tools

If you’re used to Foundation, try Bootstrap, or a lesser-known framework. Try a different pre-processor. Try a different CMS. Try a different file manager or text editor. If you’re a programmer and/or like pain, drop your favorite JS framework, and try another.

Obviously, if you want to go in-depth this would be one of the longer challenges, but it doesn’t have to take too long to learn the operating principles of new tools. The key is not to necessarily change everything about your workflow, but to expose yourself to new and potentially better ideas.

5. Try Out a New Methodology

Similar to the last entry, you can spend an afternoon or two trying a totally different way of working. If you’re primarily a graphics specialist, try looking at how others start and fill out their mockups. Look at how others organize their layers. See if you can learn something from them. Or you might look into a full-fledged design methodology like Atomic Design.

On the front-end development side, you might try out a new CSS methodology. Hongkiat has a good overview of a few of the more popular ways of organizing your CSS.

6. Refine an Old Design

When I look at my older design work, my most common emotions are frustration, and a small amount of disgust. In that state, I have often decided to go for a full redesign. If you’ve been doing this for some time, chances are that your old work is built on solid principles. It just needs to be updated and refined.

apply new knowledge to old design instead of burning it all down and starting over

Take an old design, and update it without changing its core elements. Maybe keep the same layout, but update the spacing of elements. Keep the chosen typefaces, but update the text styles to better reflect your knowledge of typography. Keep the chosen colors, but make better use of them.

Just see what happens when you apply new knowledge to old design, instead of burning it all down and starting over.

7. Follow a Tutorial (the Hard Way)

Tutorials are often a wealth of information, even if you’ve been at this for some time. Don’t copy and paste the code. Find a good, long tutorial, and type every line of example code out yourself. Follow every step in Photoshop carefully. Observe how everything changes as each piece of the puzzle is added in.

If there’s a bit you don’t understand, Google it until you do. The challenge here is not one of creativity, but of understanding…and maybe endurance.


5 Ways to Improve the UX of Site Search

Search is like a conversation between the user and system: the user expresses their information need as a query, and the system expresses its response as a set of results. Search is a fundamental activity and a critical element of building a content-heavy site.

In this article, I would like to share 5 tips that will help you improve the search UX.

1. Put the search box where users expect to find it

It’s not good when users have to search for search box because it doesn’t stand out and is not easy to spot.

The chart you see below was taken from a study by A. Dawn Shaikh and Keisi Lenz: it shows the expected position of the site search form in a survey with 142 participants. The study found that the most convenient spot for the majority of users is the top left or top right area of a page on your site.

The areas where participants expected the search to be found. The upper-right corner is still the first place users expect to find search.

Thus, place a search box in the upper-right or upper-center area of your layout and you’ll be sure that your users will find it where they expect it to be.

Ideally, the search box should fit the website’s overall design yet manage to stand out slightly when users need it.

The more content you have, the more prominently you want to display your search feature. If search is essential for your site (e.g. your website is a e-commerce store), use plenty of contrast so that the field and icon stand out from the background and from the surrounding elements.

Search is one of the most important features for eBay. Notice the contrasting color for the button “Search” on ebay’s homepage

2. Use a Proper Field Size for the Search Input Field

Making the input field too short is a common mistake among web designers. When users type long queries, only a portion of the text is visible at a time and this means bad usability since users cannot review and edit easily their query. In fact, when search box has a limited number of visible characters users are forced to use short, incomplete queries, because longer queries would be hard to read.

If input fields are sized according to their expected input they are both easier to read and to interpret for users. A rule of thumb is to have a 27-characters text input (this size accommodates 90% of queries).

3. Make It Clear What Users Can Search For

It is a good idea to include a sample search query in the input field to suggest to users what’s possible to search for. HTML5 makes it easy to include text as a placeholder inside the input field. If the user can search for multiple criteria, use the input hint pattern to explain (see the IMDb example below). But be sure to limit your hint to just a few words, otherwise, you’ll increase the cognitive load.

4. Don’t Erase Users’ Query After They Hit ‘Search’ Button

Keep the original search query. Query reformulation is a critical step in many information journeys. If users don’t find what they’re looking for from the first attempt they might want to search again using a slightly different query. To make it easier for them, leave the initial search term in the search box so they don’t have to re-type the entire query again.

5. Use an Auto-Suggestion Mechanism

Research by the Nielsen Norman Group has found that typical users are very poor at query formulation: if they don’t get good results on the first try, later search attempts rarely succeed. In fact, users often give up right after the first negative attempt. However, it’s possible to improve this situation by using an auto-suggestion mechanism. Auto-suggestion mechanisms helps users to find a proper query by trying to predict it based on the entered characters. When this mechanism works well it helps users articulate better search queries. Here are a few things to remember when incorporate auto-suggestion mechanism on your site:

  • Ensure that auto-suggestions are useful. Poorly designed auto-suggestions can confuse and distract users. So use a spelling auto-corrections, recognition of root words, and predictive text in order to improve the tool.
  • Provide auto-suggestions as quickly as possible, such as after the third character is entered. This will provide immediate value and reduce user’s data entry effort.
  • Show less than 10 suggested items (and without a scroll bar) so the information doesn’t become overwhelming. Allow users to navigate between items susing a keyboard.
  • Highlight differences between the inputted information and suggested information (e.g., input text has a standard weight, while suggested terms have bold weight).

Google searches mastered this pattern, having implemented it since 2008.


Search is a critical element of building a profitable site. Users expect smooth experiences when finding and learning about things and they typically make very quick judgments about site’s value based on the quality of one or two sets of search results. An excellent search facility should help users find what they want quickly and easily.